@svelte-atoms/core 1.0.0-alpha.31 → 1.0.0-alpha.32

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

@@ -1,49 +1,49 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom as Atom, type Base } from '../atom';
-	import type { SlideoverContentProps } from './types';
-	import { DrawerBond } from './bond.svelte';
-	import { animateDrawerContent } from './motion';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = DrawerBond.get();
-	const isOpen = $derived(bond?.state.props.open);
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = animateDrawerContent({ ease: 'easeOut', side: 'left' }),
-		enter = undefined,
-		exit = undefined,
-		initial = animateDrawerContent({ ease: 'easeOut', side: 'left', duration: 0 }),
-		...restProps
-	}: SlideoverContentProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const contentProps = $derived({
-		...bond?.content(),
-		...restProps
-	});
-</script>
-
-<Atom
-	preset="drawer.content"
-	class={[
-		'bg-card text-foreground border-border pointer-events-none absolute',
-		isOpen && 'pointer-events-auto',
-		'$preset',
-		klass
-	]}
-	{bond}
-	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)}
-	{...contentProps}
->
-	{@render children?.({ drawer: bond })}
-</Atom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom as Atom, type Base } from '../atom';
+	import type { SlideoverContentProps } from './types';
+	import { DrawerBond } from './bond.svelte';
+	import { animateDrawerContent } from './motion';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = DrawerBond.get();
+	const isOpen = $derived(bond?.state.props.open);
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = animateDrawerContent({ ease: 'easeOut', side: 'left' }),
+		enter = undefined,
+		exit = undefined,
+		initial = animateDrawerContent({ ease: 'easeOut', side: 'left', duration: 0 }),
+		...restProps
+	}: SlideoverContentProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const contentProps = $derived({
+		...bond?.content(),
+		...restProps
+	});
+</script>
+
+<Atom
+	preset="drawer.content"
+	class={[
+		'bg-card text-foreground border-border pointer-events-none absolute',
+		isOpen && 'pointer-events-auto',
+		'$preset',
+		klass
+	]}
+	{bond}
+	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)}
+	{...contentProps}
+>
+	{@render children?.({ drawer: bond })}
+</Atom>

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

@@ -6,6 +6,7 @@
 	import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
 	import type { SlideoverRootProps } from './types';
 	import { ActivePortal } from '../portal';
+	import { animateDrawerRoot } from './motion';
 
 	type Element = HTMLElementTagNameMap[E];
 
@@ -13,16 +14,16 @@
 		open = $bindable(false),
 		children = undefined,
 		class: klass = '',
-		as = 'dialog',
+		as = 'div',
 		disabled = false,
 		portal = undefined,
 		onclose = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
-		animate = undefined,
 		enter = undefined,
 		exit = undefined,
-		initial = undefined,
+		initial = animateDrawerRoot({ duration: 0 }),
+		animate = animateDrawerRoot({}),
 		factory = _factory,
 		...restProps
 	}: SlideoverRootProps<E, B> & HTMLAttributes<Element> = $props();
@@ -73,7 +74,7 @@
 	portal={portal ?? 'root.l1'}
 	preset="drawer"
 	class={[
-		'border-border pointer-events-auto h-full w-full overflow-hidden bg-transparent',
+		'border-border pointer-events-none fixed inset-0 h-full w-full overflow-hidden bg-transparent',
 		!open && 'pointer-events-none',
 		'$preset',
 		klass

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

@@ -1,144 +1,141 @@
-<script module>
-	import { animate } from 'motion';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { clickoutDrawer, Drawer as Drawer_ } from '.';
-
-	// 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">
-	import { animateDrawerContent, animateDrawerRoot } from './motion';
-
-	let isOpen = $state(false);
-</script>
-
-<Story name="Left" args={{}}>
-	<Drawer_.Root
-		bind:open={isOpen}
-		class=" border backdrop-blur-md backdrop-grayscale-100"
-		animate={animateDrawerRoot({})}
-	>
-		<Drawer_.Content
-			class="border-border flex min-h-full w-md flex-col border-r p-8 whitespace-nowrap shadow-md"
-			animate={animateDrawerContent({ ease: 'easeOut', side: 'left' })}
-			{@attach clickoutDrawer((_, bond) => {
-				bond?.state?.close?.();
-			})}
-		>
-			<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
-	>
-</Story>
-
-<Story name="Top" args={{}}>
-	<Drawer_.Root
-		bind:open={isOpen}
-		class=" border backdrop-blur-md backdrop-grayscale-100"
-		animate={animateDrawerRoot({})}
-	>
-		<Drawer_.Content
-			class="border-border flex w-md min-w-full flex-col border-b p-8 whitespace-nowrap shadow-md"
-			animate={animateDrawerContent({ ease: 'easeOut', side: 'top' })}
-			{@attach clickoutDrawer((_, bond) => {
-				bond?.state?.close?.();
-			})}
-		>
-			<div>
-				<div>Svelte Fluent</div>
-			</div>
-		</Drawer_.Content>
-	</Drawer_.Root>
-
-	<button
-		class="bg-red-500 p-2"
-		onclick={() => {
-			isOpen = !isOpen;
-		}}>Open</button
-	>
-</Story>
-
-<Story name="Right" args={{}}>
-	<Drawer_.Root
-		bind:open={isOpen}
-		class=" border backdrop-blur-md backdrop-grayscale-100"
-		animate={animateDrawerRoot({})}
-	>
-		<Drawer_.Content
-			class="border-border shadow-foreground/50 inset-y-0 flex w-md flex-col border-l p-8 whitespace-nowrap shadow-sm"
-			animate={animateDrawerContent({ ease: 'easeOut', side: 'right' })}
-			{@attach clickoutDrawer((_, bond) => {
-				bond?.state?.close?.();
-			})}
-		>
-			<div>
-				<div>Svelte Fluent</div>
-			</div>
-		</Drawer_.Content>
-	</Drawer_.Root>
-
-	<button
-		class="bg-red-500 p-2"
-		onclick={() => {
-			isOpen = !isOpen;
-		}}>Open</button
-	>
-</Story>
-
-<Story name="Bottom" args={{}}>
-	<Drawer_.Root
-		bind:open={isOpen}
-		class=" border backdrop-blur-md backdrop-grayscale-100"
-		initial={(node) => {
-			animate(node, { opacity: +isOpen }, { duration: 0 });
-		}}
-		animate={animateDrawerRoot()}
-	>
-		<Drawer_.Content
-			class="border-border flex w-md min-w-full flex-col border-t p-8 whitespace-nowrap shadow-md"
-			animate={animateDrawerContent({ ease: 'easeOut', side: 'bottom' })}
-			{@attach clickoutDrawer((_, bond) => {
-				bond?.state?.close?.();
-			})}
-		>
-			<div>
-				<div>Svelte Fluent</div>
-			</div>
-		</Drawer_.Content>
-	</Drawer_.Root>
-
-	<button
-		class="bg-red-500 p-2"
-		onclick={() => {
-			isOpen = !isOpen;
-		}}>Open</button
-	>
-</Story>
+<script module>
+	import { animate } from 'motion';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { clickoutDrawer, Drawer as Drawer_ } from '.';
+
+	// 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">
+	import { animateDrawerContent, animateDrawerRoot } from './motion';
+
+	let isOpen = $state(false);
+</script>
+
+<Story name="Left" args={{}}>
+	<Drawer_.Root
+		bind:open={isOpen}
+		class=" border backdrop-blur-md backdrop-grayscale-100"
+		animate={animateDrawerRoot({})}
+	>
+		<Drawer_.Content
+			class="border-border flex min-h-full w-md flex-col border-r p-8 whitespace-nowrap shadow-md"
+			animate={animateDrawerContent({ ease: 'easeOut', side: 'left' })}
+		>
+			<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
+	>
+</Story>
+
+<Story name="Top" args={{}}>
+	<Drawer_.Root
+		bind:open={isOpen}
+		class=" border backdrop-blur-md backdrop-grayscale-100"
+		animate={animateDrawerRoot({})}
+	>
+		<Drawer_.Content
+			class="border-border flex w-md min-w-full flex-col border-b p-8 whitespace-nowrap shadow-md"
+			animate={animateDrawerContent({ ease: 'easeOut', side: 'top' })}
+			{@attach clickoutDrawer((_, bond) => {
+				bond?.state?.close?.();
+			})}
+		>
+			<div>
+				<div>Svelte Fluent</div>
+			</div>
+		</Drawer_.Content>
+	</Drawer_.Root>
+
+	<button
+		class="bg-red-500 p-2"
+		onclick={() => {
+			isOpen = !isOpen;
+		}}>Open</button
+	>
+</Story>
+
+<Story name="Right" args={{}}>
+	<Drawer_.Root
+		bind:open={isOpen}
+		class=" border backdrop-blur-md backdrop-grayscale-100"
+		animate={animateDrawerRoot({})}
+	>
+		<Drawer_.Content
+			class="border-border shadow-foreground/50 inset-y-0 flex w-md flex-col border-l p-8 whitespace-nowrap shadow-sm"
+			animate={animateDrawerContent({ ease: 'easeOut', side: 'right' })}
+			{@attach clickoutDrawer((_, bond) => {
+				bond?.state?.close?.();
+			})}
+		>
+			<div>
+				<div>Svelte Fluent</div>
+			</div>
+		</Drawer_.Content>
+	</Drawer_.Root>
+
+	<button
+		class="bg-red-500 p-2"
+		onclick={() => {
+			isOpen = !isOpen;
+		}}>Open</button
+	>
+</Story>
+
+<Story name="Bottom" args={{}}>
+	<Drawer_.Root
+		bind:open={isOpen}
+		class=" border backdrop-blur-md backdrop-grayscale-100"
+		initial={(node) => {
+			animate(node, { opacity: +isOpen }, { duration: 0 });
+		}}
+		animate={animateDrawerRoot()}
+	>
+		<Drawer_.Content
+			class="border-border flex w-md min-w-full flex-col border-t p-8 whitespace-nowrap shadow-md"
+			animate={animateDrawerContent({ ease: 'easeOut', side: 'bottom' })}
+			{@attach clickoutDrawer((_, bond) => {
+				bond?.state?.close?.();
+			})}
+		>
+			<div>
+				<div>Svelte Fluent</div>
+			</div>
+		</Drawer_.Content>
+	</Drawer_.Root>
+
+	<button
+		class="bg-red-500 p-2"
+		onclick={() => {
+			isOpen = !isOpen;
+		}}>Open</button
+	>
+</Story>

package/dist/components/drawer/motion.js

@@ -4,11 +4,11 @@ import { DrawerBond } from '.';
 export function animateDrawerContent(params) {
     const { duration = DURATION.fast / 1000, delay = 0, ease = 'easeInOut', side = 'left' } = params;
     const bond = DrawerBond.get();
-    const isOpen = bond?.state.props.open ?? false;
     const mainProp = side === 'left' || side === 'right' ? 'x' : 'y';
     const crossProp = mainProp === 'x' ? 'y' : 'x';
     const d = side === 'left' || side === 'top' ? -1 : 1;
     return (node) => {
+        const isOpen = bond?.state.props.open ?? false;
         animate(node, {
             [mainProp]: isOpen ? 0 : d * 100 + '%',
             [crossProp]: 0,

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

@@ -6,4 +6,4 @@ 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, Divider, Title, Group } from '../menu/atoms';
+export { Content, List, Divider, Title, Group } from '../menu/atoms';

package/dist/components/dropdown/atoms.js

@@ -6,4 +6,4 @@ 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, Divider, Title, Group } from '../menu/atoms';
+export { Content, List, Divider, Title, Group } from '../menu/atoms';

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

@@ -1,30 +1,35 @@
-import { PopoverBond, PopoverState, type PopoverDomElements, type PopoverStateProps } from '../popover/bond.svelte';
-import type { DropdownItemBond } from './item/bond.svelte';
-export type DropdownStateProps = PopoverStateProps & {
+import { MenuBond, MenuBondState, type MenuBondElements, type MenuBondProps } from '../menu/bond.svelte';
+import type { DropdownItemController } from './item/controller.svelte';
+export type DropdownStateProps = MenuBondProps & {
     values?: string[];
     value?: string;
     multiple?: boolean;
     keys?: string[];
     onquerychange?: (query: string) => void;
 };
-export type DropdownBondElements = PopoverDomElements & {
+export type DropdownBondElements = MenuBondElements & {
     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> {
+export declare class DropdownBond<Props extends DropdownStateProps = DropdownStateProps, State extends DropdownBondState<Props> = DropdownBondState<Props>, Elements extends DropdownBondElements = DropdownBondElements> extends MenuBond<Props, State, Elements> {
     constructor(state: State);
-    content(props?: Record<string, unknown>): {
-        onchange?: (node: HTMLElement, position: import("@floating-ui/core").ComputePositionReturn) => void;
-        id: string;
+    content(): {
         role: string;
+        'aria-multiselectable': boolean;
+        'aria-activedescendant': string | undefined;
+        'aria-orientation': "vertical";
+        onkeydown: (ev: KeyboardEvent) => void;
+        id: string;
         'aria-modal': boolean;
         'aria-labelledby': string;
-        'aria-hidden': boolean;
-        inert: string | undefined;
+        inert: boolean | undefined;
         tabindex: number;
         'data-atom': string;
         'data-kind': string;
         'data-active': boolean;
-        onkeydown: ((ev: KeyboardEvent) => void) | undefined;
+    };
+    item(): {
+        role: string;
+        onkeyup: (ev: KeyboardEvent) => void;
     };
     placeholder(): {
         [x: symbol]: (node: HTMLElement) => void;
@@ -33,21 +38,15 @@ export declare class DropdownBond<Props extends DropdownStateProps = DropdownSta
         '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>;
+    static get<Props extends DropdownStateProps = DropdownStateProps, State extends DropdownBondState<Props> = DropdownBondState<Props>, Elements extends DropdownBondElements = DropdownBondElements>(): DropdownBond<Props, State, Elements> | undefined;
+    static set<Props extends DropdownStateProps = DropdownStateProps, State extends DropdownBondState<Props> = DropdownBondState<Props>, Elements extends DropdownBondElements = DropdownBondElements>(context: DropdownBond<Props, State, Elements>): DropdownBond<Props, State, Elements>;
 }
-export declare class DropdownBondState<Props extends DropdownStateProps = DropdownStateProps> extends PopoverState<Props> {
+export declare class DropdownBondState<Props extends DropdownStateProps = DropdownStateProps> extends MenuBondState<Props> {
     #private;
-    constructor(props: () => DropdownStateProps);
-    get selectedItems(): DropdownItemBond<unknown>[];
-    get highlightedItem(): DropdownItemBond<unknown> | null;
+    constructor(props: () => Props);
+    get selectedItems(): DropdownItemController<unknown>[];
     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

@@ -1,23 +1,33 @@
-import { SvelteMap } from 'svelte/reactivity';
-import { PopoverBond, PopoverState } from '../popover/bond.svelte';
 import { untrack } from 'svelte';
 import { createAttachmentKey } from 'svelte/attachments';
+import { MenuBond, MenuBondState } from '../menu/bond.svelte';
 const DROPDOWN_ELEMENTS_KIND = {
     placeholder: 'dropdown-placeholder',
     arrow: 'popover-arrow',
-    overlay: 'popover-overlay',
-    trigger: 'popover-trigger'
+    trigger: 'popover-trigger',
+    content: 'popover-content',
+    indicator: 'popover-indicator'
 };
-export class DropdownBond extends PopoverBond {
+export class DropdownBond extends MenuBond {
     constructor(state) {
         super(state);
     }
-    content(props) {
+    content() {
         const isMultiselect = this.state.props.multiple ?? false;
-        return super.content({
+        const highlightedId = this.state.highlightedItem?.id;
+        return {
+            ...super.content(),
+            role: 'listbox',
             'aria-multiselectable': isMultiselect,
-            ...props
-        });
+            'aria-activedescendant': highlightedId ? `item-${highlightedId}` : undefined,
+            'aria-orientation': 'vertical'
+        };
+    }
+    item() {
+        return {
+            ...super.item(),
+            role: 'option'
+        };
     }
     placeholder() {
         const id = [DROPDOWN_ELEMENTS_KIND.placeholder, this.id].join('-');
@@ -33,36 +43,24 @@ export class DropdownBond extends PopoverBond {
     }
     // static get = getDropdownContext;
     // static set = setDropdownContext;
-    static getContext() {
-        return PopoverBond.get();
+    static get() {
+        return MenuBond.get();
     }
-    static setContext(context) {
-        return PopoverBond.set(context);
+    static set(context) {
+        return MenuBond.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);
+export class DropdownBondState extends MenuBondState {
+    #selectedItems = $derived(this.props.values
+        ?.map((value) => this.items.get(value))
+        .filter(Boolean) ?? []);
     #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;
     }
@@ -70,18 +68,6 @@ export class DropdownBondState extends PopoverState {
         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
@@ -89,7 +75,8 @@ export class DropdownBondState extends PopoverState {
             this.props.values = [...sequence];
         }
         else {
-            this.props.values = [ids[0]].filter(Boolean);
+            const value = ids[0];
+            this.props.values = value ? [value] : [];
         }
     }
     unselect(ids) {
@@ -100,15 +87,4 @@ export class DropdownBondState extends PopoverState {
         }
         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);
-    }
 }