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

package/dist/components/scrollable/scrollable-thumb.svelte.d.ts

@@ -1,25 +1,25 @@
 import type { ScrollableThumbProps } from './types';
-declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
-    props: ScrollableThumbProps<T>;
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(): {
+    props: ScrollableThumbProps<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 = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond> {
+    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 = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(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 import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(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 ScrollableThumb: $$IsomorphicComponent;
-type ScrollableThumb<T extends keyof HTMLElementTagNameMap> = InstanceType<typeof ScrollableThumb<T>>;
+type ScrollableThumb<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond> = InstanceType<typeof ScrollableThumb<E, B>>;
 export default ScrollableThumb;

package/dist/components/scrollable/scrollable-track.svelte

@@ -1,21 +1,14 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond">
 	import type { ScrollableTrackProps } from './types';
 	import { ScrollableBond } from './bond.svelte';
 	import { HtmlAtom } from '../atom';
 
 	let {
 		class: klass = '',
-
-		orientation = undefined,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
+		orientation = 'vertical',
+		children,
 		...restProps
-	}: ScrollableTrackProps<T> = $props();
+	}: ScrollableTrackProps<E, B> = $props();
 
 	const bond = ScrollableBond.get();
 
@@ -25,19 +18,20 @@
 
 	const hasYScroll = $derived(bond.state.props.scrollHeight > bond.state.props.clientHeight);
 	const hasXScroll = $derived(bond.state.props.scrollWidth > bond.state.props.clientWidth);
-
 	const hasScroll = $derived(hasXScroll || hasYScroll);
-
 	const isOpen = $derived(bond?.state?.props?.open ?? true);
-
 	const isScrolling = $derived(bond?.state?.props?.isScrolling ?? false);
 
-	const trackProps = $derived(bond.track(orientation));
+	const trackProps = $derived({
+		...(orientation === 'horizontal' ? bond.trackX().spread : bond.trackY().spread),
+		...restProps
+	});
 </script>
 
 {#if (isOpen || isScrolling) && hasScroll}
 	<HtmlAtom
 		{bond}
+		as="div"
 		preset="scrollable.track"
 		class={[
 			'scrollable-track bg-foreground/10 hover:bg-foreground/15 border-border absolute z-10 rounded transition-opacity',
@@ -45,14 +39,7 @@
 			'$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)}
 		{...trackProps}
-		{...restProps}
 	>
 		{@render children?.()}
 	</HtmlAtom>

package/dist/components/scrollable/scrollable-track.svelte.d.ts

@@ -1,25 +1,25 @@
 import type { ScrollableTrackProps } from './types';
-declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
-    props: ScrollableTrackProps<T>;
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(): {
+    props: ScrollableTrackProps<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 = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond> {
+    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 = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(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 import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(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 ScrollableTrack: $$IsomorphicComponent;
-type ScrollableTrack<T extends keyof HTMLElementTagNameMap> = InstanceType<typeof ScrollableTrack<T>>;
+type ScrollableTrack<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond> = InstanceType<typeof ScrollableTrack<E, B>>;
 export default ScrollableTrack;

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

@@ -1,37 +1,14 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { Factory, Override } from '../../types';
 import type { ScrollableBond } from './bond.svelte';
-/**
- * Extend this interface to add custom scrollable root properties in your application.
- */
-export interface ScrollableExtendProps {
+export interface ScrollableSnippetProps extends SnippetProps {
+    scrollable: ScrollableBond;
 }
-/**
- * Extend this interface to add custom scrollable container properties in your application.
- */
-export interface ScrollableContainerExtendProps {
-}
-/**
- * Extend this interface to add custom scrollable content properties in your application.
- */
-export interface ScrollableContentExtendProps {
-}
-/**
- * Extend this interface to add custom scrollable track properties in your application.
- */
-export interface ScrollableTrackExtendProps {
-}
-/**
- * Extend this interface to add custom scrollable thumb properties in your application.
- */
-export interface ScrollableThumbExtendProps {
-}
-export interface ScrollableRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        scrollable: ScrollableBond;
-    }]>;
-}>, ScrollableExtendProps {
+export type ScrollableChildren = Snippet<[ScrollableSnippetProps]>;
+export interface ScrollableRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B, ScrollableChildren>, {
+    children?: ScrollableChildren;
+}> {
     factory?: Factory<ScrollableBond>;
     scrollX?: number;
     scrollY?: number;
@@ -42,21 +19,21 @@ export interface ScrollableRootProps<E extends keyof HTMLElementTagNameMap = 'di
     disabled?: boolean;
     open?: boolean;
 }
-export interface ScrollableContainerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+export interface ScrollableContainerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B, ScrollableChildren>, {
     children?: Snippet;
-}>, ScrollableContainerExtendProps {
+}> {
 }
-export interface ScrollableContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+export interface ScrollableContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B, ScrollableChildren>, {
     children?: Snippet;
-}>, ScrollableContentExtendProps {
+}> {
 }
-export interface ScrollableTrackProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+export interface ScrollableTrackProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B, ScrollableChildren>, {
     children?: Snippet;
-}>, ScrollableTrackExtendProps {
+}> {
     orientation: 'horizontal' | 'vertical';
 }
-export interface ScrollableThumbProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+export interface ScrollableThumbProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B, ScrollableChildren>, {
     children?: Snippet;
-}>, ScrollableThumbExtendProps {
+}> {
     orientation: 'horizontal' | 'vertical';
 }

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

@@ -0,0 +1,8 @@
+export { default as Root } from './select-root.svelte';
+export { default as Item } from './item/select-item.svelte';
+export { default as Trigger } from './select-trigger.svelte';
+export { default as Placeholder } from './select-placeholder.svelte';
+export { default as Selection } from './select-selection.svelte';
+export { default as Selections } from './select-selections.svelte';
+export { Arrow, Indicator } from '../popover/atoms';
+export { Content, List, Divider, Title, Group } from '../dropdown-menu/atoms';

package/dist/components/select/atoms.js

@@ -0,0 +1,8 @@
+export { default as Root } from './select-root.svelte';
+export { default as Item } from './item/select-item.svelte';
+export { default as Trigger } from './select-trigger.svelte';
+export { default as Placeholder } from './select-placeholder.svelte';
+export { default as Selection } from './select-selection.svelte';
+export { default as Selections } from './select-selections.svelte';
+export { Arrow, Indicator } from '../popover/atoms';
+export { Content, List, Divider, Title, Group } from '../dropdown-menu/atoms';

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

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

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

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

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

@@ -0,0 +1,52 @@
+import { DropdownMenuBond, DropdownMenuBondState, DropdownMenuContentAtom, type DropdownMenuBondElements, type DropdownMenuBondProps } from '../dropdown-menu/bond.svelte';
+import { BondAtom } from '../../shared/bond.svelte';
+import type { SelectItemAtom } from './item/bond.svelte';
+export type SelectStateProps = DropdownMenuBondProps & {
+    values?: string[];
+    value?: string;
+    labels?: string[];
+    label?: string;
+    multiple?: boolean;
+    keys?: string[];
+    readonly rest?: Record<string, unknown>;
+};
+export type SelectBondElements = DropdownMenuBondElements & {
+    placeholder?: HTMLElement;
+};
+declare class SelectContentAtom extends DropdownMenuContentAtom {
+    constructor(bond: SelectBond);
+    protected bond: SelectBond;
+    get attrs(): {
+        role: "listbox";
+        'aria-multiselectable': boolean;
+        'aria-activedescendant': string | undefined;
+        'aria-orientation': "vertical";
+        'data-active': boolean;
+    };
+}
+declare class SelectPlaceholderAtom extends BondAtom<SelectBond, HTMLElement> {
+    constructor(bond: SelectBond);
+    get attrs(): {
+        role: "group";
+    };
+}
+export declare class SelectBond<Props extends SelectStateProps = SelectStateProps, State extends SelectBondState<Props, any> = SelectBondState<Props, any>, Elements extends SelectBondElements = SelectBondElements, ItemData = unknown> extends DropdownMenuBond<Props, State, Elements> {
+    state: State & SelectBondState<Props, ItemData>;
+    constructor(state: State);
+    content(): SelectContentAtom;
+    item(): SelectItemAtom<unknown, SelectBond<SelectStateProps, SelectBondState<SelectStateProps, any>, SelectBondElements, unknown>>;
+    placeholder(): SelectPlaceholderAtom;
+    static get<Props extends SelectStateProps = SelectStateProps, State extends SelectBondState<Props, any> = SelectBondState<Props, any>, Elements extends SelectBondElements = SelectBondElements, ItemData = unknown>(): SelectBond<Props, State, Elements, ItemData> | undefined;
+    static set<Props extends SelectStateProps = SelectStateProps, State extends SelectBondState<Props, any> = SelectBondState<Props, any>, Elements extends SelectBondElements = SelectBondElements, ItemData = unknown>(context: SelectBond<Props, State, Elements, ItemData>): SelectBond<Props, State, Elements, ItemData>;
+}
+export declare class SelectBondState<Props extends SelectStateProps = SelectStateProps, ItemData = unknown> extends DropdownMenuBondState<Props> {
+    #private;
+    constructor(props: () => Props);
+    get selections(): SelectItemAtom<ItemData, SelectBond<SelectStateProps, SelectBondState<SelectStateProps, any>, SelectBondElements, unknown>>[];
+    registerItem(value: string, atom: SelectItemAtom<ItemData>): void;
+    unregisterItem(value: string): void;
+    select(ids: string[]): void;
+    unselect(ids: string[]): void;
+    protected updateLabels(): void;
+}
+export {};

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

@@ -0,0 +1,112 @@
+import { untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+import { DropdownMenuBond, DropdownMenuBondState, DropdownMenuContentAtom } from '../dropdown-menu/bond.svelte';
+import { BondAtom } from '../../shared/bond.svelte';
+const SELECT_ELEMENTS_KIND = {
+    placeholder: 'select-placeholder',
+    arrow: 'popover-arrow',
+    trigger: 'popover-trigger',
+    content: 'popover-content',
+    indicator: 'popover-indicator'
+};
+class SelectContentAtom extends DropdownMenuContentAtom {
+    constructor(bond) {
+        super(bond);
+    }
+    get attrs() {
+        const isMultiselect = untrack(() => this.bond.state.props).multiple ?? false;
+        const highlightedId = this.bond.state.highlightedItem?.id;
+        return {
+            ...super.attrs,
+            role: 'listbox',
+            'aria-multiselectable': isMultiselect,
+            'aria-activedescendant': highlightedId ? `item-${highlightedId}` : undefined,
+            'aria-orientation': 'vertical'
+        };
+    }
+}
+// class SelectItemAtom extends DropdownMenuItemAtom<SelectBond> {
+// 	constructor(bond: SelectBond) {
+// 		super(bond);
+// 	}
+// 	declare protected bond: SelectBond;
+// 	override get attrs() {
+// 		return {
+// 			...super.attrs,
+// 			role: 'option' as const
+// 		};
+// 	}
+// }
+class SelectPlaceholderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'placeholder');
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            role: 'group'
+        };
+    }
+}
+export class SelectBond extends DropdownMenuBond {
+    constructor(state) {
+        super(state);
+    }
+    content() {
+        return this.atom('content', () => new SelectContentAtom(this));
+    }
+    item() {
+        return this.atom('item', () => new SelectItemAtom(this));
+    }
+    placeholder() {
+        return this.atom('placeholder', () => new SelectPlaceholderAtom(this));
+    }
+    static get() {
+        return DropdownMenuBond.get();
+    }
+    static set(context) {
+        return DropdownMenuBond.set(context);
+    }
+}
+export class SelectBondState extends DropdownMenuBondState {
+    #selectItems = new SvelteMap();
+    #selections = $derived(this.props.values?.map((value) => this.#selectItems.get(value)).filter(Boolean) ?? []);
+    constructor(props) {
+        super(props);
+    }
+    get selections() {
+        return this.#selections;
+    }
+    registerItem(value, atom) {
+        this.#selectItems.set(value, atom);
+    }
+    unregisterItem(value) {
+        this.#selectItems.delete(value);
+    }
+    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 {
+            const value = ids[0];
+            this.props.values = value ? [value] : [];
+        }
+        this.updateLabels();
+    }
+    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];
+        this.updateLabels();
+    }
+    updateLabels() {
+        const labels = this.#selections.map((s) => s.label);
+        this.props.labels = labels;
+        this.props.label = labels[0] ?? '';
+    }
+}

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

@@ -0,0 +1,11 @@
+export * as Select from './atoms';
+export { SelectBond, type SelectBondElements, SelectBondState, type SelectStateProps } from './bond.svelte';
+export * from './item';
+export { filterSelectData } from './runes.svelte';
+/**
+ * @deprecated Use `filterSelectData` instead.
+ */
+export { filterSelectData as filter } from './runes.svelte';
+export * from './types';
+export type { AnimatePopoverContentParams as AnimateSelectContentParams, animatePopoverContent as animateSelectContent } from '../popover/motion.svelte';
+export { select } from './attachments.svelte';

package/dist/components/select/index.js

@@ -0,0 +1,10 @@
+export * as Select from './atoms';
+export { SelectBond, SelectBondState } from './bond.svelte';
+export * from './item';
+export { filterSelectData } from './runes.svelte';
+/**
+ * @deprecated Use `filterSelectData` instead.
+ */
+export { filterSelectData as filter } from './runes.svelte';
+export * from './types';
+export { select } from './attachments.svelte';

package/dist/components/select/item/attachments.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { SelectBond } from '../bond.svelte';
+import { SelectItemController } from './controller.svelte';
+export declare function selectItem(callback: (node: HTMLElement, item?: SelectItemController, select?: SelectBond) => any): (node: HTMLElement) => any;

package/dist/components/select/item/attachments.svelte.js

@@ -0,0 +1,6 @@
+import { SelectItemController } from './controller.svelte';
+export function selectItem(callback) {
+    const item = SelectItemController.get();
+    const bond = item?.select;
+    return (node) => callback(node, item, bond);
+}

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

@@ -0,0 +1,33 @@
+import { BondAtom } from '../../../shared/bond.svelte';
+import type { SelectBond } from '../bond.svelte';
+export type SelectItemAtomProps<T = unknown> = {
+    value: string;
+    label?: string;
+    data?: T;
+    id?: string;
+};
+export declare class SelectItemAtom<Data = unknown, B extends SelectBond = SelectBond> extends BondAtom<B, HTMLElement> {
+    #private;
+    constructor(props: () => SelectItemAtomProps<Data>, selectBond: B);
+    get id(): string;
+    get createdAt(): Date;
+    get props(): SelectItemAtomProps<Data>;
+    get value(): string;
+    get data(): Data | undefined;
+    get label(): string;
+    get isHighlighted(): boolean;
+    get isSelected(): boolean;
+    get attrs(): {
+        id: string;
+        role: string;
+        'aria-selected': boolean;
+        'data-selected': boolean;
+        'data-highlighted': boolean;
+    };
+    get handlers(): {};
+    select(): void;
+    unselect(): void;
+    toggle(): void;
+    close(): void;
+    onmount(): () => void;
+}

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

@@ -0,0 +1,77 @@
+import { BondAtom } from '../../../shared/bond.svelte';
+import { nanoid } from 'nanoid';
+export class SelectItemAtom extends BondAtom {
+    #id;
+    #props;
+    #selectBond;
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    #createdAt = new Date();
+    constructor(props, selectBond) {
+        super(selectBond, `item-${props().value}`);
+        this.#props = props;
+        this.#selectBond = selectBond;
+        this.#id = props().id ?? nanoid();
+    }
+    get id() {
+        return this.#id;
+    }
+    get createdAt() {
+        return this.#createdAt;
+    }
+    get props() {
+        return this.#props();
+    }
+    get value() {
+        return this.props.value;
+    }
+    get data() {
+        return this.props.data;
+    }
+    get label() {
+        const element = (this.element?.querySelector('[data-label]') ?? this.element);
+        return element?.innerText ?? this.#props().label ?? '';
+    }
+    get isHighlighted() {
+        return this.#selectBond.state.highlightedItem?.id === this.id;
+    }
+    get isSelected() {
+        return this.#selectBond.state.props.values?.includes(this.value) ?? false;
+    }
+    get attrs() {
+        const itemId = `select-item-${this.id}`;
+        return {
+            ...super.attrs,
+            id: itemId,
+            role: 'option',
+            'aria-selected': this.isSelected,
+            'data-selected': this.isSelected,
+            'data-highlighted': this.isHighlighted
+        };
+    }
+    get handlers() {
+        return {};
+    }
+    select() {
+        this.#selectBond?.state.select([this.value]);
+    }
+    unselect() {
+        this.#selectBond?.state.unselect([this.value]);
+    }
+    toggle() {
+        if (this.isSelected) {
+            this.unselect();
+        }
+        else {
+            this.select();
+        }
+    }
+    close() {
+        this.#selectBond?.state.close();
+    }
+    onmount() {
+        this.#selectBond?.state?.mountItem?.(this.value, this);
+        return () => {
+            this.#selectBond?.state?.unmountItem?.(this.value);
+        };
+    }
+}

package/dist/components/select/item/controller.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { DropdownMenuItemControllerInterface } from '../../dropdown-menu/item/controller.svelte';
+export type SelectItemProps<T = unknown> = {
+    readonly id: string;
+    readonly value: string;
+    readonly label?: string;
+    readonly data?: T;
+};
+export declare class SelectItemController<T = unknown> implements DropdownMenuItemControllerInterface<SelectItemProps<T>> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(props: () => SelectItemProps<T>);
+    get id(): string;
+    get createdAt(): Date;
+    get props(): SelectItemProps<T>;
+    get element(): HTMLElement | null;
+    get value(): string;
+    get data(): T | undefined;
+    get label(): string;
+    get isHighlighted(): boolean;
+    get isSelected(): boolean;
+    mount(): () => void;
+    unmount(): void;
+    destroy(): void;
+    select(): void;
+    unselect(): void;
+    toggle(): void;
+    close(): void;
+    share(): SelectItemController<T>;
+    elementProps(): {
+        readonly [x: symbol]: (node: HTMLElement) => () => void;
+        readonly id: string;
+        readonly role: "option";
+        readonly 'aria-selected': boolean;
+        readonly 'data-selected': boolean;
+        readonly 'data-highlighted': boolean;
+    };
+    static get<T = unknown>(): SelectItemController<T> | undefined;
+    static set<T = unknown>(item: SelectItemController<T>): SelectItemController<T>;
+}