@svelte-atoms/core 1.0.0-alpha.14

package/dist/components/drawer/drawer.stories.svelte

@@ -0,0 +1,224 @@
+<script module>
+	import { cubicOut } from 'svelte/easing';
+	import gsap from 'gsap';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Drawer as Drawer_ } from '.';
+	import Root from '../root/root.svelte';
+	import { DrawerBond } from './bond.svelte';
+	import { on } from '../../attachments/event.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Drawer',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	let isOpen = $state(false);
+</script>
+
+<Story name="Left" args={{}}>
+	<Root class="p-4">
+		<Drawer_.Root
+			class=" border backdrop-blur-md backdrop-grayscale-100"
+			bind:open={isOpen}
+			initial={(node) => {
+				gsap.set(node, { opacity: +isOpen });
+			}}
+			animate={(node) => {
+				gsap.to(node, {
+					opacity: +isOpen,
+					duration: 0.3,
+					onComplete: () => !isOpen && node.close?.()
+				});
+			}}
+			{@attach (node) => {
+				const bond = DrawerBond.get();
+
+				return on('click', (ev) => {
+					bond?.state?.close?.();
+				})(node);
+			}}
+		>
+			<Drawer_.Content
+				class="border-border flex min-h-full w-md flex-col border-r p-8 whitespace-nowrap shadow-md"
+				initial={(node) => {
+					gsap.set(node, { xPercent: isOpen ? 0 : -100, left: 0 });
+				}}
+				animate={(node) => {
+					gsap.to(node, { xPercent: isOpen ? 0 : -100, left: 0, duration: 0.2, ease: cubicOut });
+				}}
+			>
+				<Drawer_.Header class="flex items-center justify-between">
+					<div class="flex flex-col">
+						<Drawer_.Title class="text-lg font-semibold">Drawer Title</Drawer_.Title>
+						<Drawer_.Description class="text-sm break-all whitespace-break-spaces text-neutral-500"
+							>Ac bibendum laoreet lacinia purus duis. Hendrerit quam purus maecenas tincidunt
+							letius finibus vel tortor sociosqu proin vulputate. Consectetur velit eleifend purus
+							mi pulvinar si tristique litora mollis lobortis.</Drawer_.Description
+						>
+					</div>
+				</Drawer_.Header>
+				<div>
+					<div>Svelte Fluent</div>
+				</div>
+			</Drawer_.Content>
+		</Drawer_.Root>
+
+		<button
+			class="bg-red-500 p-2"
+			onclick={() => {
+				isOpen = !isOpen;
+			}}>Open</button
+		>
+	</Root>
+</Story>
+
+<Story name="Top" args={{}}>
+	<Root class="p-4">
+		<Drawer_.Root
+			class=" border backdrop-blur-md backdrop-grayscale-100"
+			bind:open={isOpen}
+			initial={(node) => gsap.set(node, { opacity: +isOpen })}
+			animate={(node) => {
+				gsap.to(node, {
+					opacity: +isOpen,
+					duration: 0.3,
+					onComplete: () => !isOpen && node.close?.()
+				});
+			}}
+			{@attach (node) => {
+				const bond = DrawerBond.get();
+
+				return on('click', (ev) => {
+					bond?.state?.close?.();
+				})(node);
+			}}
+		>
+			<Drawer_.Content
+				class="border-border flex w-md min-w-full flex-col border-b p-8 whitespace-nowrap shadow-md"
+				initial={(node) => {
+					gsap.set(node, { yPercent: isOpen ? 0 : -100, top: 0 });
+				}}
+				animate={(node) => {
+					gsap.to(node, { yPercent: isOpen ? 0 : -100, top: 0, duration: 0.2, ease: cubicOut });
+				}}
+			>
+				<div>
+					<div>Svelte Fluent</div>
+				</div>
+			</Drawer_.Content>
+		</Drawer_.Root>
+
+		<button
+			class="bg-red-500 p-2"
+			onclick={() => {
+				isOpen = !isOpen;
+			}}>Open</button
+		>
+	</Root>
+</Story>
+
+<Story name="Right" args={{}}>
+	<Root class="p-4">
+		<Drawer_.Root
+			class=" border backdrop-blur-md backdrop-grayscale-100"
+			bind:open={isOpen}
+			initial={(node) => {
+				gsap.set(node, { opacity: +isOpen });
+			}}
+			animate={(node) => {
+				gsap.to(node, {
+					opacity: +isOpen,
+					duration: 0.3,
+					onComplete: () => !isOpen && node.close?.()
+				});
+			}}
+			{@attach (node) => {
+				const bond = DrawerBond.get();
+
+				return on('click', (ev) => {
+					bond?.state?.close?.();
+				})(node);
+			}}
+		>
+			<Drawer_.Content
+				class="border-border shadow-foreground/50 inset-y-0 flex w-md flex-col border-l p-8 whitespace-nowrap shadow-lg"
+				initial={(node) => {
+					gsap.set(node, { xPercent: isOpen ? 0 : 100, right: 0 });
+				}}
+				animate={(node) => {
+					gsap.to(node, { xPercent: isOpen ? 0 : 100, right: 0, duration: 0.2, ease: cubicOut });
+				}}
+				{@attach on('click', (ev) => {
+					ev.stopPropagation();
+				})}
+			>
+				<div>
+					<div>Svelte Fluent</div>
+				</div>
+			</Drawer_.Content>
+		</Drawer_.Root>
+
+		<button
+			class="bg-red-500 p-2"
+			onclick={() => {
+				isOpen = !isOpen;
+			}}>Open</button
+		>
+	</Root>
+</Story>
+
+<Story name="Bottom" args={{}}>
+	<Root class="p-4">
+		<Drawer_.Root
+			class=" border backdrop-blur-md backdrop-grayscale-100"
+			bind:open={isOpen}
+			initial={(node) => {
+				gsap.set(node, { opacity: +isOpen });
+			}}
+			animate={(node) => {
+				gsap.to(node, {
+					opacity: +isOpen,
+					duration: 0.3,
+					onComplete: () => !isOpen && node.close?.()
+				});
+			}}
+			{@attach (node) => {
+				const bond = DrawerBond.get();
+
+				return on('click', (ev) => {
+					bond?.state?.close?.();
+				})(node);
+			}}
+		>
+			<Drawer_.Content
+				class="border-border flex w-md min-w-full flex-col border-t p-8 whitespace-nowrap shadow-md"
+				onmount={(node) => {
+					gsap.set(node, { yPercent: isOpen ? 0 : 100, bottom: 0 });
+				}}
+				animate={(node) => {
+					gsap.to(node, { yPercent: isOpen ? 0 : 100, bottom: 0, duration: 0.2, ease: cubicOut });
+				}}
+			>
+				<div>
+					<div>Svelte Fluent</div>
+				</div>
+			</Drawer_.Content>
+		</Drawer_.Root>
+
+		<button
+			class="bg-red-500 p-2"
+			onclick={() => {
+				isOpen = !isOpen;
+			}}>Open</button
+		>
+	</Root>
+</Story>

package/dist/components/drawer/drawer.stories.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Drawer: import("svelte").Component<Record<string, never>, {}, "">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

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

@@ -0,0 +1,3 @@
+export * as Drawer from './atoms';
+export { clickoutDrawer, closeDrawer, openDrawer, drawer, toggleDrawer } from './attachments.svelte';
+export { DrawerBond, type DrawerBondElements, type DrawerBondProps, DrawerBondState } from './bond.svelte';

package/dist/components/drawer/index.js

@@ -0,0 +1,3 @@
+export * as Drawer from './atoms';
+export { clickoutDrawer, closeDrawer, openDrawer, drawer, toggleDrawer } from './attachments.svelte';
+export { DrawerBond, DrawerBondState } from './bond.svelte';

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

@@ -0,0 +1,9 @@
+export { default as Root } from './dropdown-root.svelte';
+export { default as Item } from './item/dropdown-item.svelte';
+export { default as Trigger } from './dropdown-trigger.svelte';
+export { default as Placeholder } from './dropdown-placeholder.svelte';
+export { default as Query } from './dropdown-query.svelte';
+export { default as Value } from './dropdown-value.svelte';
+export { default as Values } from './dropdown-values.svelte';
+export { Arrow, Indicator } from '../popover/atoms';
+export { List } from '../menu/atoms';

package/dist/components/dropdown/atoms.js

@@ -0,0 +1,9 @@
+export { default as Root } from './dropdown-root.svelte';
+export { default as Item } from './item/dropdown-item.svelte';
+export { default as Trigger } from './dropdown-trigger.svelte';
+export { default as Placeholder } from './dropdown-placeholder.svelte';
+export { default as Query } from './dropdown-query.svelte';
+export { default as Value } from './dropdown-value.svelte';
+export { default as Values } from './dropdown-values.svelte';
+export { Arrow, Indicator } from '../popover/atoms';
+export { List } from '../menu/atoms';

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

@@ -0,0 +1,2 @@
+import { DropdownBond } from './bond.svelte';
+export declare function dropdown(callback: (node: HTMLElement, bond?: DropdownBond) => any): (node: HTMLElement) => any;

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

@@ -0,0 +1,5 @@
+import { DropdownBond } from './bond.svelte';
+export function dropdown(callback) {
+    const bond = DropdownBond.get();
+    return (node) => callback(node, bond);
+}

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

@@ -0,0 +1,49 @@
+import { PopoverBond, PopoverState, type PopoverDomElements, type PopoverStateProps } from '../popover/bond.svelte';
+import type { DropdownItemBond } from './item/bond.svelte';
+export type DropdownStateProps = PopoverStateProps & {
+    values?: string[];
+    value?: string;
+    multiple?: boolean;
+    keys?: string[];
+    onquerychange?: (query: string) => void;
+};
+export type DropdownBondElements = PopoverDomElements & {
+    placeholder?: HTMLElement;
+};
+export declare class DropdownBond<Props extends DropdownStateProps = DropdownStateProps, State extends DropdownBondState<Props> = DropdownBondState<Props>, Elements extends DropdownBondElements = DropdownBondElements> extends PopoverBond<Props, State, Elements> {
+    constructor(state: State);
+    content(props?: Record<string, unknown>): {
+        id: string;
+        role: string;
+        'aria-modal': boolean;
+        'aria-labelledby': string;
+        'aria-controlledby': string;
+        'data-atom': string;
+        'data-kind': string;
+        'data-active': boolean;
+    };
+    placeholder(): {
+        [x: symbol]: (node: HTMLElement) => void;
+        id: string;
+        role: string;
+        'data-atom': string;
+        'data-kind': string;
+    };
+    static getContext<Props extends DropdownStateProps = DropdownStateProps, State extends DropdownBondState<Props> = DropdownBondState<Props>, Elements extends PopoverDomElements = PopoverDomElements>(): DropdownBond<Props, State, Elements> | undefined;
+    static setContext<Props extends DropdownStateProps = DropdownStateProps, State extends DropdownBondState<Props> = DropdownBondState<Props>, Elements extends PopoverDomElements = PopoverDomElements>(context: DropdownBond<Props, State, Elements>): DropdownBond<Props, State, Elements>;
+}
+export declare class DropdownBondState<Props extends DropdownStateProps = DropdownStateProps> extends PopoverState<Props> {
+    #private;
+    constructor(props: () => DropdownStateProps);
+    get selectedItems(): DropdownItemBond<unknown>[];
+    get highlightedItem(): DropdownItemBond<unknown> | null;
+    get query(): string;
+    set query(value: string);
+    mountItem<I>(id: string, item: DropdownItemBond<I>): () => void;
+    unmountItem(id: string): void;
+    item(id: string): DropdownItemBond<unknown> | undefined;
+    select(ids: string[]): void;
+    unselect(ids: string[]): void;
+    highlightNextItem(): void;
+    highlightPreviousItem(): void;
+}

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

@@ -0,0 +1,114 @@
+import { SvelteMap } from 'svelte/reactivity';
+import { PopoverBond, PopoverState } from '../popover/bond.svelte';
+import { untrack } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+const DROPDOWN_ELEMENTS_KIND = {
+    placeholder: 'dropdown-placeholder',
+    arrow: 'popover-arrow',
+    overlay: 'popover-overlay',
+    trigger: 'popover-trigger'
+};
+export class DropdownBond extends PopoverBond {
+    constructor(state) {
+        super(state);
+    }
+    content(props) {
+        const isMultiselect = this.state.props.multiple ?? false;
+        return super.content({
+            'aria-multiselectable': isMultiselect,
+            ...props
+        });
+    }
+    placeholder() {
+        const id = [DROPDOWN_ELEMENTS_KIND.placeholder, this.id].join('-');
+        return {
+            id,
+            role: 'group',
+            'data-atom': 'dropdown',
+            'data-kind': 'placeholder',
+            [createAttachmentKey()]: (node) => {
+                this.elements.placeholder = node;
+            }
+        };
+    }
+    // static get = getDropdownContext;
+    // static set = setDropdownContext;
+    static getContext() {
+        return PopoverBond.get();
+    }
+    static setContext(context) {
+        return PopoverBond.set(context);
+    }
+}
+export class DropdownBondState extends PopoverState {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    #keys = new Set();
+    #items = new SvelteMap();
+    #selectedItems = $derived(this.props.values?.map((value) => this.#items.get(value)).filter(Boolean) ?? []);
+    #index = $state(-1);
+    #highlightedItem = $derived(this.#items.values().toArray()[this.#index] ?? null);
+    #query = $state('');
+    constructor(props) {
+        super(props);
+        $effect(() => {
+            this.#keys.clear();
+            for (const key of this.props.keys ?? []) {
+                this.#keys.add(key);
+            }
+        });
+    }
+    get selectedItems() {
+        return this.#selectedItems;
+    }
+    get highlightedItem() {
+        return this.#highlightedItem;
+    }
+    get query() {
+        return this.#query;
+    }
+    set query(value) {
+        this.#query = value;
+        this.props.onquerychange?.(value);
+    }
+    mountItem(id, item) {
+        this.#items.set(id, item);
+        return () => this.unmountItem(id);
+    }
+    unmountItem(id) {
+        if (this.#keys.has(id))
+            return; // keep the item if it's still in the data source
+        this.#items.delete(id);
+    }
+    item(id) {
+        return this.#items.get(id);
+    }
+    select(ids) {
+        if (untrack(() => this.props.multiple)) {
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            const sequence = new Set(untrack(() => [...ids, ...(this.props.values ?? [])]));
+            this.props.values = [...sequence];
+        }
+        else {
+            this.props.values = [ids[0]].filter(Boolean);
+        }
+    }
+    unselect(ids) {
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        const sequence = new Set(untrack(() => this.props.values ?? []));
+        for (const v of ids) {
+            sequence.delete(v);
+        }
+        this.props.values = [...sequence];
+    }
+    highlightNextItem() {
+        const length = this.#items.size;
+        this.#index = Math.min((this.#index + 1) % length, length - 1);
+    }
+    highlightPreviousItem() {
+        if (this.#index <= 0) {
+            this.#index = this.#items.size - 1;
+            return;
+        }
+        this.#index = Math.max(this.#index - 1, 0);
+    }
+}

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

@@ -0,0 +1,41 @@
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { DropdownBond } from './bond.svelte';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type Base } from '../atom';
+	import { toClassValue } from '../../utils';
+
+	const bond = DropdownBond.get();
+	const preset = getPreset('dropdown.placeholder');
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	const hasValue = $derived(!!bond?.state.props.values?.length);
+
+	const placeholderProps = $derived({
+		...bond?.placeholder(),
+		...restProps
+	});
+</script>
+
+{#if !hasValue}
+	<HtmlAtom
+		class={[
+			'absolute inset-0 flex h-full w-full items-center px-2 leading-1 opacity-50 outline-none',
+			toClassValue.apply(bond, [preset?.class]),
+			toClassValue.apply(bond, [klass])
+		]}
+		{...placeholderProps}
+	>
+		{@render children?.()}
+	</HtmlAtom>
+{/if}

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

@@ -0,0 +1,34 @@
+import { type Base } from '../atom';
+declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: {
+        class?: string;
+        children?: any;
+        onmount?: any;
+        ondestroy?: any;
+        animate?: any;
+        enter?: any;
+        exit?: any;
+        initial?: any;
+    } & Record<string, any>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<T, B>>['props'];
+    events(): ReturnType<typeof $$render<T, B>>['events'];
+    slots(): ReturnType<typeof $$render<T, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, B>['props']>, ReturnType<__sveltets_Render<T, B>['events']>, ReturnType<__sveltets_Render<T, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, B>['exports']>;
+    <T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, B>['props']> & {}): ReturnType<__sveltets_Render<T, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DropdownPlaceholder: $$IsomorphicComponent;
+type DropdownPlaceholder<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DropdownPlaceholder<T, B>>;
+export default DropdownPlaceholder;

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

@@ -0,0 +1,64 @@
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell">
+	import { onMount, type Component } from 'svelte';
+	import { DropdownBond } from './bond.svelte';
+	import { Input } from '../input';
+	import { toClassValue, cn } from '../../utils';
+	import { getPreset } from '../../context';
+
+	const bond = DropdownBond.get() as DropdownBond;
+
+	if (!bond) {
+		throw new Error('Combobox atom was not found');
+	}
+
+	const preset = getPreset('dropdown.query');
+
+	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.Value
+	bind:value={bond.state.query}
+	class={[
+		'inline-flex w-min flex-1 py-1',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [klass])
+	]}
+	onpointerdown={(ev) => {
+		ev.stopPropagation();
+
+		bond.state.open();
+	}}
+	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-query.svelte.d.ts

@@ -0,0 +1,34 @@
+declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell>(): {
+    props: {
+        class?: string;
+        children?: any;
+        onpointerdown: any;
+        onmount?: any;
+        ondestroy?: any;
+        animate?: any;
+        enter?: any;
+        exit?: any;
+        initial?: any;
+    } & Record<string, any>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell> {
+    props(): ReturnType<typeof $$render<T, S>>['props'];
+    events(): ReturnType<typeof $$render<T, S>>['events'];
+    slots(): ReturnType<typeof $$render<T, S>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, S>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, S>['props']>, ReturnType<__sveltets_Render<T, S>['events']>, ReturnType<__sveltets_Render<T, S>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, S>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, S>['exports']>;
+    <T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell>(internal: unknown, props: ReturnType<__sveltets_Render<T, S>['props']> & {}): ReturnType<__sveltets_Render<T, S>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DropdownQuery: $$IsomorphicComponent;
+type DropdownQuery<T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell> = InstanceType<typeof DropdownQuery<T, S>>;
+export default DropdownQuery;

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

@@ -0,0 +1,59 @@
+<script lang="ts" generics="T">
+	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
+	import { defineProperty, defineState } from '../../utils';
+
+	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 })}