@svelte-atoms/core 1.0.0-alpha.27 → 1.0.0-alpha.28

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

@@ -1,41 +1,41 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap='div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { SlideoverFooterProps } from './types';
-	import { DrawerBond } from './bond.svelte';
-	import { HtmlAtom, type Base } from '../atom';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = DrawerBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: SlideoverFooterProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const footerProps = $derived({
-		...bond?.footer(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	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)}
-	{...footerProps}
->
-	{@render children?.({ drawer: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap='div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { SlideoverFooterProps } from './types';
+	import { DrawerBond } from './bond.svelte';
+	import { HtmlAtom, type Base } from '../atom';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = DrawerBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: SlideoverFooterProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const footerProps = $derived({
+		...bond?.footer(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	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)}
+	{...footerProps}
+>
+	{@render children?.({ drawer: bond })}
+</HtmlAtom>

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

@@ -1,43 +1,43 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { SlideoverHeaderProps } from './types';
-	import { DrawerBond } from './bond.svelte';
-	import { HtmlAtom, type Base } from '../atom';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = DrawerBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: SlideoverHeaderProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const headerProps = $derived({
-		...bond?.header(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="drawer.header"
-	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)}
-	{...headerProps}
-	{...restProps}
->
-	{@render children?.({ drawer: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { SlideoverHeaderProps } from './types';
+	import { DrawerBond } from './bond.svelte';
+	import { HtmlAtom, type Base } from '../atom';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = DrawerBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: SlideoverHeaderProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const headerProps = $derived({
+		...bond?.header(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="drawer.header"
+	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)}
+	{...headerProps}
+	{...restProps}
+>
+	{@render children?.({ drawer: bond })}
+</HtmlAtom>

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

@@ -1,93 +1,93 @@
-<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';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	let {
-		open = $bindable(false),
-		children = undefined,
-		class: klass = '',
-		as = 'dialog',
-		disabled = false,
-		portal = undefined,
-		onclose = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		factory = _factory,
-		...restProps
-	}: SlideoverRootProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const bondProps = defineState<DrawerBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty('disabled', () => disabled)
-		],
-		() => ({})
-	);
-	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-auto h-full w-full overflow-hidden bg-transparent',
-		!open && 'pointer-events-none',
-		'$preset',
-		klass
-	]}
-	closeby="none"
-	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)}
-	{...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 } from '../portal';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	let {
+		open = $bindable(false),
+		children = undefined,
+		class: klass = '',
+		as = 'dialog',
+		disabled = false,
+		portal = undefined,
+		onclose = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		factory = _factory,
+		...restProps
+	}: SlideoverRootProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const bondProps = defineState<DrawerBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty('disabled', () => disabled)
+		],
+		() => ({})
+	);
+	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-auto h-full w-full overflow-hidden bg-transparent',
+		!open && 'pointer-events-none',
+		'$preset',
+		klass
+	]}
+	closeby="none"
+	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)}
+	{...rootProps}
+>
+	<ActivePortal portal={portal ?? 'root.l1'}>
+		{@render children?.({ drawer: bond })}
+	</ActivePortal>
+</Teleport>

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

@@ -1,44 +1,44 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type Base } from '../atom';
-	import { DrawerBond } from './bond.svelte';
-	import type { SlideoverTitleProps } from './types';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = DrawerBond.get();
-
-	let {
-		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(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{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 })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '../atom';
+	import { DrawerBond } from './bond.svelte';
+	import type { SlideoverTitleProps } from './types';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = DrawerBond.get();
+
+	let {
+		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(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{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 })}
+</HtmlAtom>

package/dist/components/dropdown/dropdown-query.svelte

@@ -1,54 +1,54 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { onMount } from 'svelte';
-	import { DropdownBond } from './bond.svelte';
-	import { Input } from '../input';
-	import { type Base } from '../atom';
-
-	const bond = DropdownBond.get() as DropdownBond;
-
-	if (!bond) {
-		throw new Error('Combobox atom was not found');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onpointerdown,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	let isMounted = $state(false);
-
-	onMount(() => {
-		isMounted = true;
-	});
-
-	const isMultiple = $derived(bond?.state.props?.multiple ?? false);
-	const selectedText = $derived(
-		isMounted || isMultiple ? (bond.state.selectedItems.at(0)?.text ?? '') : ''
-	);
-
-	const value = $derived(
-		bond?.state.props?.query ?? (bond?.state.props?.text || selectedText || '')
-	);
-</script>
-
-<Input.Control
-	bind:value={bond.state.query}
-	{bond}
-	preset="dropdown.query"
-	class={['inline-flex h-auto w-auto flex-1 py-1', '$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)}
-	{...restProps}
-/>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { onMount } from 'svelte';
+	import { DropdownBond } from './bond.svelte';
+	import { Input } from '../input';
+	import { type Base } from '../atom';
+
+	const bond = DropdownBond.get() as DropdownBond;
+
+	if (!bond) {
+		throw new Error('Combobox atom was not found');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onpointerdown,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	let isMounted = $state(false);
+
+	onMount(() => {
+		isMounted = true;
+	});
+
+	const isMultiple = $derived(bond?.state.props?.multiple ?? false);
+	const selectedText = $derived(
+		isMounted || isMultiple ? (bond.state.selectedItems.at(0)?.text ?? '') : ''
+	);
+
+	const value = $derived(
+		bond?.state.props?.query ?? (bond?.state.props?.text || selectedText || '')
+	);
+</script>
+
+<Input.Control
+	bind:value={bond.state.query}
+	{bond}
+	preset="dropdown.query"
+	class={['inline-flex h-auto w-auto flex-1 py-1', '$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)}
+	{...restProps}
+/>

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

@@ -1,59 +1,59 @@
-<script lang="ts" generics="T">
-	import { defineProperty, defineState } from '../../utils';
-	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
-
-	let {
-		open = $bindable(false),
-		value = $bindable(),
-		values = $bindable(),
-		multiple = false,
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 4,
-		keys = [],
-		factory = _factory,
-		children = undefined,
-		onquerychange = undefined,
-		...restProps
-	} = $props();
-
-	const bondProps = defineState<DropdownStateProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'values',
-				() => (multiple ? values : [value].filter(Boolean)),
-				(v) => {
-					values = v;
-					value = v[0];
-				}
-			),
-			defineProperty('multiple', () => multiple),
-			defineProperty('disabled', () => disabled),
-			defineProperty('placement', () => placement),
-			defineProperty('offset', () => offset),
-			defineProperty('placements', () => placements ?? []),
-			defineProperty('keys', () => keys ?? [])
-		],
-		() => ({ onquerychange })
-	);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new DropdownBondState<T>(() => props);
-		return new DropdownBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ dropdown: bond })}
+<script lang="ts" generics="T">
+	import { defineProperty, defineState } from '../../utils';
+	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		values = $bindable(),
+		multiple = false,
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+		placement = 'bottom-start',
+		offset = 4,
+		keys = [],
+		factory = _factory,
+		children = undefined,
+		onquerychange = undefined,
+		...restProps
+	} = $props();
+
+	const bondProps = defineState<DropdownStateProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'values',
+				() => (multiple ? values : [value].filter(Boolean)),
+				(v) => {
+					values = v;
+					value = v[0];
+				}
+			),
+			defineProperty('multiple', () => multiple),
+			defineProperty('disabled', () => disabled),
+			defineProperty('placement', () => placement),
+			defineProperty('offset', () => offset),
+			defineProperty('placements', () => placements ?? []),
+			defineProperty('keys', () => keys ?? [])
+		],
+		() => ({ onquerychange })
+	);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new DropdownBondState<T>(() => props);
+		return new DropdownBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ dropdown: bond })}