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

package/dist/components/chip/chip.svelte.d.ts

@@ -1,6 +1,4 @@
-import type { HTMLAttributes } from 'svelte/elements';
 import type { ChipProps } from './types';
-type $$ComponentProps = ChipProps & HTMLAttributes<HTMLButtonElement>;
-declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Chip: import("svelte").Component<ChipProps, {}, "">;
 type Chip = ReturnType<typeof Chip>;
 export default Chip;

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

@@ -1 +1,3 @@
 export { default as Chip } from './chip.svelte';
+export { default as ChipCloseButton } from './chip-close-button.svelte';
+export * from './types';

package/dist/components/chip/index.js

@@ -1 +1,3 @@
 export { default as Chip } from './chip.svelte';
+export { default as ChipCloseButton } from './chip-close-button.svelte';
+export * from './types';

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

@@ -1,11 +1,18 @@
-import type { HtmlAtomProps } from '../atom/types';
+import type { HtmlAtomProps, SnippetProps } from '../atom/types';
 import type { Snippet } from 'svelte';
-/**
- * Extend this interface to add custom button properties in your application.
- */
-export interface ChipExtendProps {
+export interface ChipSnippetProps extends SnippetProps {
 }
-export interface ChipProps extends HtmlAtomProps<'button'>, ChipExtendProps {
-    children?: Snippet<[]>;
-    icon?: Snippet<[]>;
+export type ChipChildren = Snippet<[ChipSnippetProps]>;
+export interface ChipProps extends HtmlAtomProps<'div', never, ChipChildren> {
+    /** Custom icon rendered inside the default close button */
+    icon?: Snippet<[ChipSnippetProps]> | undefined;
+    /** Fully replace the close button with a custom snippet */
+    closeButton?: Snippet<[ChipSnippetProps]> | undefined;
+    /** Called when the default close button is clicked */
+    onclose?: ((ev: MouseEvent) => void) | undefined;
+}
+export interface ChipCloseButtonProps extends HtmlAtomProps<'button', never, ChipChildren> {
+    /** Custom icon to render inside the close button */
+    icon?: Snippet<[ChipSnippetProps]> | undefined;
+    onclick?: ((ev: MouseEvent) => void) | undefined;
 }

package/dist/components/collapsible/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 CollapsibleStateProps = BondStateProps & {
     open: boolean;
     disabled: boolean;
@@ -10,43 +10,53 @@ export type CollapsibleDomElements = {
     body: HTMLElement;
     indicator: HTMLElement;
 };
-export declare class CollapsibleBond extends Bond<CollapsibleStateProps, CollapsibleState, CollapsibleDomElements> {
-    #private;
-    static CONTEXT_KEY: string;
-    constructor(state: CollapsibleState);
-    get parent(): CollapsibleBond | undefined;
-    share(): this;
-    root(props?: Record<string, unknown>): {
-        'data-id': string;
-        'data-kind': string;
-        'data-atom': string;
-    };
-    header(props?: Record<string, unknown>): {
-        onclick: () => void;
-        onkeydown: (e: KeyboardEvent) => void;
+export declare class CollapsibleRootAtom extends BondAtom<CollapsibleBond> {
+    constructor(bond: CollapsibleBond);
+}
+export declare class CollapsibleHeaderAtom extends BondAtom<CollapsibleBond> {
+    constructor(bond: CollapsibleBond);
+    get attrs(): {
         'aria-disabled': string;
         'aria-expanded': string;
         'aria-controls': string;
         disabled: boolean | undefined;
         role: string | undefined;
         tabindex: number | undefined;
-        id: string;
-        'data-atom': string;
-        'data-kind': string;
     };
-    body(props?: Record<string, unknown>): {
+    get handlers(): {
+        onclick: () => void;
+        onkeydown: (e: KeyboardEvent) => void;
+    };
+}
+export declare class CollapsibleBodyAtom extends BondAtom<CollapsibleBond> {
+    constructor(bond: CollapsibleBond);
+    get attrs(): {
         'aria-labelledby': string;
         role: string;
         id: string;
-        'data-atom': string;
-        'data-kind': string;
         inert: boolean | undefined;
     };
-    indicator(props?: Record<string, unknown>): {
+}
+export declare class CollapsibleIndicatorAtom extends BondAtom<CollapsibleBond> {
+    constructor(bond: CollapsibleBond);
+    get attrs(): {
         role: string;
-        'data-atom': string;
-        'data-kind': string;
     };
+}
+export declare class CollapsibleBond extends Bond<CollapsibleStateProps, CollapsibleState, CollapsibleDomElements> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(state: CollapsibleState);
+    get parent(): CollapsibleBond | undefined;
+    share(): this;
+    /** Handle for granular access to root attrs and attachment */
+    root(): CollapsibleRootAtom;
+    /** Handle for granular access to header attrs, handlers, and attachment */
+    header(): CollapsibleHeaderAtom;
+    /** Handle for granular access to body attrs and attachment */
+    body(): CollapsibleBodyAtom;
+    /** Handle for granular access to indicator attrs and attachment */
+    indicator(): CollapsibleIndicatorAtom;
     static get(): CollapsibleBond | undefined;
     static set(bond: CollapsibleBond): CollapsibleBond;
 }

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

@@ -1,88 +1,101 @@
-import { createAttachmentKey } from 'svelte/attachments';
-import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../shared/bond.svelte';
-import { isBrowser } from '../../utils/dom.svelte.js';
-export class CollapsibleBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/collapsible';
-    #parent;
-    constructor(state) {
-        super(state);
-        this.#parent = CollapsibleBond.get();
-    }
-    get parent() {
-        return this.#parent;
-    }
-    share() {
-        return CollapsibleBond.set(this);
+import { getContext, setContext, untrack } from 'svelte';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
+import { isBrowser } from '../../utils/dom.svelte';
+export class CollapsibleRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
     }
-    root(props = {}) {
-        return {
-            'data-id': this.id,
-            'data-kind': 'collapsible',
-            'data-atom': this.id ?? '',
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
-        };
+}
+export class CollapsibleHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
     }
-    header(props = {}) {
-        const isDisabled = this.state?.props?.disabled ?? false;
-        const isOpen = this.state?.props?.open ?? false;
-        const isButton = isBrowser() && this.elements.header instanceof HTMLButtonElement;
+    get attrs() {
+        const isDisabled = untrack(() => this.bond.state?.props)?.disabled ?? false;
+        const isOpen = untrack(() => this.bond.state?.props)?.open ?? false;
+        const isButton = isBrowser() && this.element instanceof HTMLButtonElement;
         return {
+            ...super.attrs,
             'aria-disabled': isDisabled ? 'true' : 'false',
             'aria-expanded': isOpen ? 'true' : 'false',
-            'aria-controls': `collapsible-body-${this.id}`,
+            'aria-controls': `collapsible-body-${this.bond.id}`,
             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,
+            tabindex: isButton ? undefined : isDisabled ? -1 : 0
+        };
+    }
+    get handlers() {
+        const isDisabled = untrack(() => this.bond.state?.props)?.disabled ?? false;
+        return {
             onclick: () => {
                 if (!isDisabled) {
-                    this.state.toggle();
+                    this.bond.state.toggle();
                 }
             },
             onkeydown: (e) => {
                 if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
                     e.preventDefault();
-                    this.state.toggle();
+                    this.bond.state.toggle();
                 }
-            },
-            [createAttachmentKey()]: (node) => {
-                this.elements.header = node;
             }
         };
     }
-    body(props = {}) {
-        const isOpen = this.state?.props?.open ?? false;
+}
+export class CollapsibleBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+    get attrs() {
+        const isOpen = untrack(() => this.bond.state?.props)?.open ?? false;
         return {
-            'aria-labelledby': `collapsible-header-${this.id}`,
+            ...super.attrs,
+            'aria-labelledby': `collapsible-header-${this.bond.id}`,
             role: 'region',
-            id: `collapsible-body-${this.id}`,
-            'data-atom': this.id ?? '',
-            'data-kind': 'collapsible-body',
-            inert: isOpen ? undefined : true,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.body = node;
-            }
+            id: `collapsible-body-${this.bond.id}`,
+            inert: isOpen ? undefined : true
         };
     }
-    indicator(props = {}) {
+}
+export class CollapsibleIndicatorAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'indicator');
+    }
+    get attrs() {
         return {
-            role: 'icon',
-            'data-atom': this.id ?? '',
-            'data-kind': 'collapsible-indicator',
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.indicator = node;
-            }
+            ...super.attrs,
+            role: 'icon'
         };
     }
+}
+export class CollapsibleBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/collapsible';
+    #parent;
+    constructor(state) {
+        super(state, 'collapsible');
+        this.#parent = CollapsibleBond.get();
+    }
+    get parent() {
+        return this.#parent;
+    }
+    share() {
+        return CollapsibleBond.set(this);
+    }
+    /** Handle for granular access to root attrs and attachment */
+    root() {
+        return this.atom('root', () => new CollapsibleRootAtom(this));
+    }
+    /** Handle for granular access to header attrs, handlers, and attachment */
+    header() {
+        return this.atom('header', () => new CollapsibleHeaderAtom(this));
+    }
+    /** Handle for granular access to body attrs and attachment */
+    body() {
+        return this.atom('body', () => new CollapsibleBodyAtom(this));
+    }
+    /** Handle for granular access to indicator attrs and attachment */
+    indicator() {
+        return this.atom('indicator', () => new CollapsibleIndicatorAtom(this));
+    }
     static get() {
         return getContext(CollapsibleBond.CONTEXT_KEY);
     }

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

@@ -19,7 +19,7 @@
 	}: CollapsibleBodyProps<E, B> = $props();
 
 	const bodyProps = $derived({
-		...bond?.body(),
+		...bond?.body().spread,
 		...restProps
 	});
 </script>

package/dist/components/collapsible/collapsible-header.svelte

@@ -18,7 +18,7 @@
 	}: CollapsibleHeaderProps<E, B> = $props();
 
 	const collapsibleProps = $derived({
-		...bond?.header(),
+		...bond?.header().spread,
 		...restProps
 	});
 </script>

package/dist/components/collapsible/collapsible-indicator.svelte

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

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

@@ -1,67 +1,67 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { nanoid } from 'nanoid';
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import { CollapsibleBond, CollapsibleState, type CollapsibleStateProps } from './bond.svelte';
-	import type { CollapsibleRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		class: klass = '',
-		value = nanoid(),
-		data = undefined,
-		disabled = false,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CollapsibleRootProps<E, B> = $props();
-
-	const bondProps = defineState<CollapsibleStateProps>([
-		defineProperty(
-			'open',
-			() => open,
-			(v) => (open = v)
-		),
-		defineProperty('data', () => data),
-		defineProperty('disabled', () => disabled),
-		defineProperty('value', () => value),
-		defineProperty('rest', () => restProps)
-	]);
-
-	const bond = _factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new CollapsibleState(() => props);
-		return new CollapsibleBond(bondState).share();
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="collapsible"
-	class={['border-border flex w-full flex-col overflow-hidden', '$preset', klass]}
-	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?.({ collapsible: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { CollapsibleBond, CollapsibleState, type CollapsibleStateProps } from './bond.svelte';
+	import type { CollapsibleRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		class: klass = '',
+		value = nanoid(),
+		data = undefined,
+		disabled = false,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CollapsibleRootProps<E, B> = $props();
+
+	const bondProps = defineState<CollapsibleStateProps>([
+		defineProperty(
+			'open',
+			() => open,
+			(v) => (open = v)
+		),
+		defineProperty('data', () => data),
+		defineProperty('disabled', () => disabled),
+		defineProperty('value', () => value),
+		defineProperty('rest', () => restProps)
+	]);
+
+	const bond = _factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root().spread,
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new CollapsibleState(() => props);
+		return new CollapsibleBond(bondState).share();
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="collapsible"
+	class={['border-border flex w-full flex-col overflow-hidden', '$preset', klass]}
+	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?.({ collapsible: bond })}
+</HtmlAtom>

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
-import type { Factory, Override } from '../../types';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
+import type { Factory } from '../../types';
 import type { CollapsibleBond } from './bond.svelte';
 /**
  * Extend this interface to add custom collapsible root properties in your application.
@@ -22,32 +22,20 @@ export interface CollapsibleBodyExtendProps {
  */
 export interface CollapsibleIndicatorExtendProps {
 }
-export type CollapsibleRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        collapsible: CollapsibleBond;
-    }]>;
-}> & CollapsibleRootExtendProps & {
+export interface CollapsibleSnippetProps extends SnippetProps {
+    collapsible: CollapsibleBond;
+}
+export type CollapsibleChildren = Snippet<[CollapsibleSnippetProps]>;
+export type CollapsibleRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B, CollapsibleChildren> & CollapsibleRootExtendProps & {
     open?: boolean;
     value?: string;
     data?: any;
     disabled?: boolean;
     factory?: Factory<CollapsibleBond>;
 };
-export type CollapsibleHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        collapsible?: CollapsibleBond;
-    }]>;
-}> & CollapsibleHeaderExtendProps;
-export type CollapsibleBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        collapsible?: CollapsibleBond;
-    }]>;
-}> & CollapsibleBodyExtendProps;
-export type CollapsibleIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        collapsible?: CollapsibleBond;
-    }]>;
-}> & CollapsibleIndicatorExtendProps;
+export type CollapsibleHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B, CollapsibleChildren> & CollapsibleHeaderExtendProps;
+export type CollapsibleBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B, CollapsibleChildren> & CollapsibleBodyExtendProps;
+export type CollapsibleIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B, CollapsibleChildren> & CollapsibleIndicatorExtendProps;
 /**
  * @deprecated Use CollapsibleRootExtendProps instead
  */

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

@@ -1,5 +1,6 @@
 import { type PopoverDomElements } from '../popover/bond.svelte';
 import { DropdownBond, DropdownBondState, type DropdownStateProps } from '../dropdown/bond.svelte';
+import { BondAtom } from '../../shared/bond.svelte';
 import type { ComboboxSelection } from './types';
 export type ComboboxBondProps = DropdownStateProps & {
     readonly rest?: Record<string, unknown>;
@@ -7,22 +8,25 @@ export type ComboboxBondProps = DropdownStateProps & {
 export type ComboboxBondElements = PopoverDomElements & {
     input: HTMLInputElement;
 };
-export declare class ComboboxBond extends DropdownBond<ComboboxBondProps, ComboboxBondState, ComboboxBondElements> {
-    constructor(s: ComboboxBondState);
-    control(): {
-        [x: symbol]: (node: HTMLInputElement) => void;
-        'data-atom': string;
-        'data-kind': string;
-        role: string;
-        'aria-autocomplete': string;
+declare class ComboboxControlAtom extends BondAtom<ComboboxBond, HTMLInputElement> {
+    constructor(bond: ComboboxBond);
+    get attrs(): {
+        role: "combobox";
+        'aria-autocomplete': "list";
         'aria-expanded': boolean;
         'aria-controls': string;
         'aria-activedescendant': string | undefined;
         'aria-disabled': boolean;
         tabindex: number;
+    };
+    get handlers(): {
         oninput: () => void;
         onkeydown: (ev: KeyboardEvent) => void;
     };
+}
+export declare class ComboboxBond extends DropdownBond<ComboboxBondProps, ComboboxBondState, ComboboxBondElements> {
+    constructor(s: ComboboxBondState);
+    control(): ComboboxControlAtom;
     static get(): ComboboxBond | undefined;
     static set(context: ComboboxBond): ComboboxBond;
 }
@@ -35,3 +39,4 @@ export declare class ComboboxBondState extends DropdownBondState<ComboboxBondPro
     get allSelections(): ComboboxSelection[];
     protected updateLabels(): void;
 }
+export {};

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

@@ -1,47 +1,57 @@
 import {} from '../popover/bond.svelte';
 import { DropdownBond, DropdownBondState } from '../dropdown/bond.svelte';
-import { createAttachmentKey } from 'svelte/attachments';
+import { BondAtom } from '../../shared/bond.svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import { nanoid } from 'nanoid';
-export class ComboboxBond extends DropdownBond {
-    constructor(s) {
-        super(s);
+class ComboboxControlAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'input');
     }
-    control() {
-        const isMultiselect = this.state.props.multiple ?? false;
+    get attrs() {
+        const bond = this.bond;
         return {
-            'data-atom': `trigger-${this.id}`,
-            'data-kind': 'combobox-input',
+            ...super.attrs,
             role: 'combobox',
             'aria-autocomplete': 'list',
-            'aria-expanded': this.state.props.open ?? false,
-            'aria-controls': `overlay-${this.id}`,
-            'aria-activedescendant': this.state.selections.at(0)?.id
-                ? `item-${this.state.selections.at(0)?.id}`
+            'aria-expanded': bond.state.props.open ?? false,
+            'aria-controls': `overlay-${bond.id}`,
+            'aria-activedescendant': bond.state.selections.at(0)?.id
+                ? `item-${bond.state.selections.at(0)?.id}`
                 : undefined,
-            'aria-disabled': this.state.props.disabled ?? false,
-            tabindex: this.state.props.disabled ? -1 : 0,
+            'aria-disabled': bond.state.props.disabled ?? false,
+            tabindex: bond.state.props.disabled ? -1 : 0
+        };
+    }
+    get handlers() {
+        const bond = this.bond;
+        const isMultiselect = bond.state.props.multiple ?? false;
+        return {
             oninput: () => {
                 if (!isMultiselect) {
-                    this.state.props.values = [];
+                    bond.state.props.values = [];
                 }
             },
             onkeydown: (ev) => {
-                if (this.state.props.disabled)
+                if (bond.state.props.disabled)
                     return;
                 if (ev.key === 'Enter' && isMultiselect) {
                     const currentTarget = ev.currentTarget;
                     const value = currentTarget.value.trim();
                     if (value !== '') {
-                        this.state.addSelection(value);
+                        bond.state.addSelection(value);
                     }
                 }
-            },
-            [createAttachmentKey()]: (node) => {
-                this.elements.input = node;
             }
         };
     }
+}
+export class ComboboxBond extends DropdownBond {
+    constructor(s) {
+        super(s);
+    }
+    control() {
+        return this.atom('input', () => new ComboboxControlAtom(this));
+    }
     static get() {
         return super.get();
     }