@neovici/cosmoz-autocomplete 10.12.1 → 12.0.0

package/dist/autocomplete/autocomplete-keybindings.d.ts

@@ -0,0 +1,31 @@
+import type { Activity } from '@neovici/cosmoz-utils/keybindings';
+export declare const AUTOCOMPLETE_DESELECT_LAST: Activity;
+export declare const autocompleteKeybindings: readonly [readonly [{
+    readonly key: "ArrowUp";
+}, [symbol], {
+    readonly title: "Navigate up";
+    readonly description: "Move to previous listbox item";
+}, {
+    readonly allowInEditable: true;
+}], readonly [{
+    readonly key: "ArrowDown";
+}, [symbol], {
+    readonly title: "Navigate down";
+    readonly description: "Move to next listbox item";
+}, {
+    readonly allowInEditable: true;
+}], readonly [{
+    readonly key: "Enter";
+}, [symbol], {
+    readonly title: "Select";
+    readonly description: "Select current listbox item";
+}, {
+    readonly allowInEditable: true;
+}], readonly [{
+    readonly key: "Backspace";
+}, [symbol], {
+    readonly title: "Deselect last";
+    readonly description: "Remove the last selected item";
+}, {
+    readonly allowInEditable: true;
+}]];

package/dist/autocomplete/autocomplete-keybindings.js

@@ -0,0 +1,14 @@
+import { listboxKeybindings } from '../listbox/listbox-keybindings';
+export const AUTOCOMPLETE_DESELECT_LAST = Symbol('autocomplete.deselect.last');
+export const autocompleteKeybindings = [
+    ...listboxKeybindings,
+    [
+        { key: 'Backspace' },
+        [AUTOCOMPLETE_DESELECT_LAST],
+        {
+            title: 'Deselect last',
+            description: 'Remove the last selected item',
+        },
+        { allowInEditable: true },
+    ],
+];

package/dist/autocomplete/autocomplete.d.ts

@@ -1,4 +1,4 @@
-import { Placement } from '@neovici/cosmoz-dropdown/use-floating';
+import '@neovici/cosmoz-dropdown/cosmoz-dropdown-next';
 import '@neovici/cosmoz-input';
 import { ItemRenderer } from '../listbox/item-renderer';
 import { ChipRenderer } from './selection';
@@ -18,7 +18,6 @@ export interface Props<I> extends Base<I> {
     wrap?: boolean;
     defaultIndex?: number;
     externalSearch?: boolean;
-    placement?: Placement;
     itemRenderer?: ItemRenderer<I>;
     chipRenderer?: ChipRenderer<I>;
 }

package/dist/autocomplete/autocomplete.js

@@ -1,12 +1,8 @@
-import { defaultMiddleware, size, useFloating, } from '@neovici/cosmoz-dropdown/use-floating';
+import '@neovici/cosmoz-dropdown/cosmoz-dropdown-next';
 import '@neovici/cosmoz-input';
-import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
-import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
-import { useEffect } from '@pionjs/pion';
 import { t } from 'i18next';
 import { html } from 'lit-html';
 import { live } from 'lit-html/directives/live.js';
-import { ref } from 'lit-html/directives/ref.js';
 import { until } from 'lit-html/directives/until.js';
 import { when } from 'lit-html/directives/when.js';
 import { listbox } from '../listbox';
@@ -18,45 +14,25 @@ import { useOverflow } from './use-overflow';
 const inputParts = ['input', 'control', 'label', 'line', 'error', 'wrap']
     .map((part) => `${part}: input-${part}`)
     .join();
-const middleware = [
-    size({
-        apply({ rects, elements }) {
-            Object.assign(elements.floating.style, {
-                minWidth: `${Math.max(rects.reference.width, rects.floating.width)}px`,
-            });
-        },
-    }),
-    ...defaultMiddleware,
-];
-const shouldShowDropdown = ({ active, isSingle, showSingle, }) => {
-    if (!active)
+const shouldShowDropdown = ({ opened, isSingle, showSingle, hasResultsOrQuery, }) => {
+    if (!opened)
+        return false;
+    if (isSingle && !showSingle)
         return false;
-    const disallowedSingle = isSingle && !showSingle;
-    return !disallowedSingle;
+    return hasResultsOrQuery;
 };
 const autocomplete = (props) => {
-    const { active, invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, min, showSingle, items, source$, placement, loading, chipRenderer, } = props, host = useHost(), isOne = limit == 1, // eslint-disable-line eqeqeq
+    const { opened, invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onToggle, onDeselect, value, limit, min, showSingle, items, source$, loading, chipRenderer, } = props, isOne = limit == 1, // eslint-disable-line eqeqeq
     isSingle = isOne && value?.[0] != null;
-    const { styles, setReference, setFloating } = useFloating({
-        placement,
-        middleware,
-    });
-    useEffect(() => {
-        host.addEventListener('focusin', onFocus);
-        host.addEventListener('focusout', onFocus);
-        return () => {
-            host.removeEventListener('focusin', onFocus);
-            host.removeEventListener('focusout', onFocus);
-        };
-    }, [onFocus]);
-    useImperativeApi({
-        focus: () => host.shadowRoot?.querySelector('#input')?.focus(),
-    }, []);
     const hasResultsOrQuery = loading || items.length > 0 || (text != null && text.length > 0);
-    return html `<cosmoz-input
+    return html `<cosmoz-dropdown-next
+			open-on-focus
+			@dropdown-toggle=${onToggle}
+		>
+			<cosmoz-input
+				slot="button"
 				id="input"
 				part="input"
-				${ref(setReference)}
 				.label=${label}
 				.placeholder=${isSingle ? undefined : placeholder}
 				?no-label-float=${noLabelFloat}
@@ -67,7 +43,6 @@ const autocomplete = (props) => {
 				.errorMessage=${until(source$.then(() => errorMessage, (e) => e.message), errorMessage)}
 				.value=${live(text)}
 				@value-changed=${onText}
-				@click=${onClick}
 				autocomplete="off"
 				exportparts=${inputParts}
 				?data-one=${isOne}
@@ -87,23 +62,18 @@ const autocomplete = (props) => {
 			</cosmoz-input>
 
 			${when(shouldShowDropdown({
-        active,
+        opened,
         isSingle,
         showSingle,
+        hasResultsOrQuery,
     }), () => listbox({
         ...props,
         items,
         multi: !isOne,
-        setFloating,
-        styles: {
-            ...styles,
-            // WORKAROUND: hide the listbox if there are no results, don't remove it from DOM
-            // TODO: revert https://github.com/Neovici/cosmoz-autocomplete/pull/206 after https://github.com/pionjs/pion/issues/64 is fixed
-            display: hasResultsOrQuery ? undefined : 'none',
-        },
     }, when(loading, () => html `<cosmoz-autocomplete-skeleton-span></cosmoz-autocomplete-skeleton-span>`, () => when(text != null && text.length > 0 && items.length === 0, () => html `<slot name="no-result">
 											<p class="no-result">${t('No results found')}</p>
-										</slot>`))))}`;
+										</slot>`))))}
+		</cosmoz-dropdown-next>`;
 }, Autocomplete = (props) => {
     const thru = {
         ...props,

package/dist/autocomplete/index.js

@@ -24,5 +24,6 @@ const Standalone = (host) => {
     });
 };
 const styleSheets = [sheet(style)];
-customElements.define('cosmoz-autocomplete-ui', component(Autocomplete, { observedAttributes, styleSheets }));
-customElements.define('cosmoz-autocomplete', component(Standalone, { observedAttributes, styleSheets }));
+const shadowRootInit = { mode: 'open', delegatesFocus: true };
+customElements.define('cosmoz-autocomplete-ui', component(Autocomplete, { observedAttributes, styleSheets, shadowRootInit }));
+customElements.define('cosmoz-autocomplete', component(Standalone, { observedAttributes, styleSheets, shadowRootInit }));

package/dist/autocomplete/styles.css.js

@@ -6,6 +6,10 @@ export default css `
 		min-width: 35px;
 	}
 
+	cosmoz-dropdown-next {
+		display: block;
+	}
+
 	cosmoz-input::part(control) {
 		display: flex;
 		gap: 4px;

package/dist/autocomplete/use-autocomplete.d.ts

@@ -13,7 +13,7 @@ interface Base<I> {
     onSelect: (value: I, meta: Meta<I>) => void;
 }
 interface Meta<I> extends Omit<Base<I>, 'value'> {
-    setClosed: (closed: boolean) => void;
+    setOpened: (opened: boolean) => void;
     value: I[];
 }
 export interface Props<I> extends Base<I> {
@@ -23,21 +23,19 @@ export interface Props<I> extends Base<I> {
     textual?: (prop?: string) => (i: I) => string;
     valueProperty?: string;
     disabled?: boolean;
-    onFocus?: (focused?: boolean) => void;
     preserveOrder?: boolean;
     defaultIndex?: number;
     externalSearch?: boolean;
 }
-export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, externalSearch, ...thru }: Props<I>) => {
-    active: boolean | undefined;
+export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, externalSearch, }: Props<I>) => {
+    opened: boolean;
     query: string | undefined;
     textual: (i: I) => string;
     value: I[];
     source$: Promise<I[]>;
     loading: boolean;
     items: I[];
-    onClick: () => void;
-    onFocus: (e: FocusEvent) => void;
+    onToggle: (e: Event) => void;
     onText: (e: InputEvent) => void;
     onSelect: (newVal: I) => void;
     onDeselect: (val: I | I[]) => void;

package/dist/autocomplete/use-autocomplete.js

@@ -1,30 +1,43 @@
-import { useFocus } from '@neovici/cosmoz-dropdown/use-focus';
 import { array, without } from '@neovici/cosmoz-utils/array';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
 import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 import { usePromise } from '@neovici/cosmoz-utils/hooks/use-promise';
+import { useActivity } from '@neovici/cosmoz-utils/keybindings';
 import { prop, strProp } from '@neovici/cosmoz-utils/object';
 import { useCallback, useEffect, useMemo, useState } from '@pionjs/pion';
-import { useKeys } from './use-keys';
-import { EMPTY, normalize, notify, search, useNotify } from './util';
-export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, externalSearch, ...thru }) => {
-    const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), { active, focused, onFocus, setClosed } = useFocus(thru), empty = !text, query = useMemo(() => text?.trim(), [text]), host = useHost(), onText = useNotify(host, _onText, 'text'), onChange = useCallback((val) => {
-        _onChange?.(val, () => setClosed(true));
+import { AUTOCOMPLETE_DESELECT_LAST } from './autocomplete-keybindings';
+import { EMPTY, normalize, notify, search } from './util';
+const useNotify = (host, fn, name) => useCallback((val) => {
+    fn?.(val);
+    host.dispatchEvent(new CustomEvent(name, { detail: val }));
+}, [fn]);
+export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, externalSearch, }) => {
+    const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), host = useHost(), 
+    // Popover open/close state, synced from cosmoz-dropdown-next's dropdown-toggle event
+    [opened, setOpened] = useState(false), empty = !text, query = useMemo(() => text?.trim(), [text]), onText = useNotify(host, _onText, 'text'), onChange = useCallback((val) => {
+        _onChange?.(val, () => setOpened(false));
         notify(host, 'value', val);
-    }, [_onChange]), [options, setOptions] = useState([]), source$ = useMemo(() => Promise.resolve(typeof source === 'function' ? source({ query, active }) : source).then(normalize), [source, active, query]), value = useMemo(() => array(_value), [_value]);
+    }, [_onChange]), [options, setOptions] = useState([]), source$ = useMemo(() => Promise.resolve(typeof source === 'function'
+        ? source({ query, active: opened })
+        : source).then(normalize), [source, opened, query]), value = useMemo(() => array(_value), [_value]);
     useEffect(() => source$.then(setOptions), [source$]);
-    useKeys({
-        focused,
-        empty,
-        limit,
-        value,
-        onChange,
-        onText,
-    });
+    // Backspace to deselect last chip (when input is empty and multi-select)
+    useActivity({
+        activity: AUTOCOMPLETE_DESELECT_LAST,
+        callback: () => {
+            const values = array(value);
+            if (values.length > 0) {
+                onChange(values.slice(0, -1));
+            }
+        },
+        check: () => empty && limit !== 1 && host.matches(':focus-within'),
+        element: () => host,
+    }, []);
+    // Clear query when popover closes
     useEffect(() => {
-        if (!focused && !keepQuery)
+        if (!opened && !keepQuery)
             onText('');
-    }, [focused, keepQuery]);
+    }, [opened, keepQuery]);
     const meta = useMeta({
         onText,
         onChange,
@@ -33,19 +46,19 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         min,
         keepQuery,
         keepOpened,
-        setClosed,
+        setOpened,
         onSelect,
     });
     const [, , state] = usePromise(source$);
     return {
-        active,
+        opened,
         query,
         textual,
         value,
         source$,
         loading: state === 'pending',
         items: useMemo(() => {
-            if (!active)
+            if (!opened)
                 return EMPTY;
             const items = preserveOrder
                 ? options
@@ -53,7 +66,7 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
             return externalSearch ? items : search(items, query, textual);
         }, [
             options,
-            active,
+            opened,
             query,
             textual,
             empty,
@@ -62,19 +75,21 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
             valueProperty,
             externalSearch,
         ]),
-        onClick: useCallback(() => setClosed(false), []),
-        onFocus,
+        // Sync opened state from cosmoz-dropdown-next's composed dropdown-toggle event
+        onToggle: useCallback((e) => {
+            setOpened(e.newState === 'open');
+        }, []),
         onText: useCallback((e) => {
             onText(e.target.value);
-            setClosed(false);
-        }, [onText, text, setClosed]),
+            setOpened(true);
+        }, [onText, text, setOpened]),
         onSelect: useCallback((newVal) => {
             meta.onSelect?.(newVal, meta);
-            const { onChange, onText, limit, min, value: val, keepQuery, keepOpened, setClosed, } = meta;
+            const { onChange, onText, limit, min, value: val, keepQuery, keepOpened, setOpened, } = meta;
             if (!keepQuery)
                 onText('');
             if (!keepOpened)
-                setClosed(true);
+                setOpened(false);
             const value = array(val), deselect = value.includes(newVal);
             if (deselect && value.length === min)
                 return;

package/dist/autocomplete/use-overflow.d.ts

@@ -1,6 +1,6 @@
-export declare const useOverflow: <I>({ value, active, wrap, limit, }: {
+export declare const useOverflow: <I>({ value, opened, wrap, limit, }: {
     value: I[];
-    active?: boolean;
+    opened?: boolean;
     wrap?: boolean;
     limit?: number;
 }) => void;

package/dist/autocomplete/use-overflow.js

@@ -29,7 +29,7 @@ const overflow = (host) => {
         chips[i].hidden = true;
     }
 };
-export const useOverflow = ({ value, active, wrap, limit, }) => {
+export const useOverflow = ({ value, opened, wrap, limit, }) => {
     const host = useHost();
     // eslint-disable-next-line eqeqeq
     const enabled = !(wrap || limit == 1);
@@ -45,5 +45,5 @@ export const useOverflow = ({ value, active, wrap, limit, }) => {
         observer.observe(input);
         return () => observer.disconnect();
     }, [enabled]);
-    useLayoutEffect(() => (enabled ? doRaf() : undefined), [enabled, width, active, value]);
+    useLayoutEffect(() => (enabled ? doRaf() : undefined), [enabled, width, opened, value]);
 };

package/dist/autocomplete/util.d.ts

@@ -1,9 +1,31 @@
+/**
+ * Remove accents/diacritics from a string.
+ * @see https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
+ * @see https://medium.com/nerd-for-tech/basics-of-javascript-string-normalize-method-f3241174c2d0
+ * @see https://www.codu.co/articles/remove-accents-from-a-javascript-string-skgp1inb
+ *
+ * @param str string from which to remove accents
+ * @returns string w/o accents
+ */
+export declare const removeAccents: (str: string) => string;
+/**
+ * Search items by query string, returning matches sorted by position.
+ * Accent-insensitive search.
+ */
 export declare const search: <I>(source: I[], query: string | undefined, textual: (i: I) => string) => I[];
+/**
+ * Normalize source to an array.
+ */
 export declare const normalize: <I>(source: I[] | false | null | undefined) => I[];
+/**
+ * Dispatch a custom event with detail.
+ */
 export declare const notify: <T>(host: EventTarget, name: string, detail: T) => boolean;
-export declare const useNotify: <V>(host: EventTarget, fn: undefined | ((v: V) => void), name: string) => (val: V) => void;
 export declare const EMPTY: never[];
 type Arr = unknown[];
 type ArrFn<T extends Arr> = (...args: T) => void;
+/**
+ * Request animation frame wrapper with cleanup.
+ */
 export declare const raf: <A extends Arr, F extends ArrFn<A> = ArrFn<A>>(fn: F) => (...args: A) => () => void;
 export {};

package/dist/autocomplete/util.js

@@ -1,15 +1,19 @@
-import { useCallback } from '@pionjs/pion';
 /**
+ * Remove accents/diacritics from a string.
  * @see https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
  * @see https://medium.com/nerd-for-tech/basics-of-javascript-string-normalize-method-f3241174c2d0
  * @see https://www.codu.co/articles/remove-accents-from-a-javascript-string-skgp1inb
  *
- * @param {string} str string from which to remove accents
- * @returns {string} string w/o accents
+ * @param str string from which to remove accents
+ * @returns string w/o accents
  */
-const removeAccents = (str) => {
+export const removeAccents = (str) => {
     return str.normalize('NFD').replace(/[\u0300-\u036f]/gu, '');
 };
+/**
+ * Search items by query string, returning matches sorted by position.
+ * Accent-insensitive search.
+ */
 export const search = (source, query, textual) => {
     if (!query)
         return source;
@@ -28,17 +32,22 @@ export const search = (source, query, textual) => {
     }
     return matches.sort((a, b) => a.index - b.index).map(({ item }) => item);
 };
+/**
+ * Normalize source to an array.
+ */
 export const normalize = (source) => {
     if (source === false || source == null)
         return [];
     return source;
 };
+/**
+ * Dispatch a custom event with detail.
+ */
 export const notify = (host, name, detail) => host.dispatchEvent(new CustomEvent(name, { detail }));
-export const useNotify = (host, fn, name) => useCallback((val) => {
-    fn?.(val);
-    notify(host, name, val);
-}, [fn]);
 export const EMPTY = [];
+/**
+ * Request animation frame wrapper with cleanup.
+ */
 export const raf = (fn) => (...args) => {
     let id;
     const cleanup = () => {

package/dist/excluding/index.js

@@ -55,7 +55,9 @@ const AutocompleteExcluding = (props) => {
         chipRenderer: useMemo(() => mkChipRenderer(value, onClear), [value, onClear]),
     });
 };
+const shadowRootInit = { mode: 'open', delegatesFocus: true };
 customElements.define('cosmoz-autocomplete-excluding', component(AutocompleteExcluding, {
     observedAttributes,
     styleSheets: [style, excludingStyle],
+    shadowRootInit,
 }));

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 import './autocomplete/';
+export { AUTOCOMPLETE_DESELECT_LAST, autocompleteKeybindings, } from './autocomplete/autocomplete-keybindings';
 export type { Source } from './autocomplete/use-autocomplete';
+export { LISTBOX_NAVIGATE_DOWN, LISTBOX_NAVIGATE_UP, LISTBOX_SELECT, listboxKeybindings, } from './listbox/listbox-keybindings';

package/dist/index.js

@@ -1 +1,3 @@
 import './autocomplete/';
+export { AUTOCOMPLETE_DESELECT_LAST, autocompleteKeybindings, } from './autocomplete/autocomplete-keybindings';
+export { LISTBOX_NAVIGATE_DOWN, LISTBOX_NAVIGATE_UP, LISTBOX_SELECT, listboxKeybindings, } from './listbox/listbox-keybindings';

package/dist/listbox/index.d.ts

@@ -1,9 +1,6 @@
-import { StyleInfo } from 'lit-html/directives/style-map.js';
 import { Props } from './use-listbox';
 interface ListboxProps<I> extends Props<I> {
     multi?: boolean;
-    setFloating: (el?: Element) => void;
-    styles: StyleInfo;
 }
-export declare const listbox: <I>({ multi, setFloating, styles, ...thru }: ListboxProps<I>, content: unknown) => import("lit-html").TemplateResult<1>;
+export declare const listbox: <I>({ multi, ...thru }: ListboxProps<I>, content: unknown) => import("lit-html").TemplateResult<1>;
 export {};

package/dist/listbox/index.js

@@ -1,5 +1,4 @@
 import { virtualize, virtualizerRef, } from '@lit-labs/virtualizer/virtualize.js';
-import { connectable } from '@neovici/cosmoz-utils/connectable';
 import { sheet } from '@neovici/cosmoz-utils';
 import { spreadProps } from '@neovici/cosmoz-utils/directives/spread-props';
 import { noop } from '@neovici/cosmoz-utils/function';
@@ -7,7 +6,6 @@ import { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
 import { props } from '@neovici/cosmoz-utils/object';
 import { component, html, useEffect, useRef } from '@pionjs/pion';
 import { ref } from 'lit-html/directives/ref.js';
-import { styleMap } from 'lit-html/directives/style-map.js';
 import style, { styles } from './style.css';
 import { properties, useListbox } from './use-listbox';
 const ignore = noop;
@@ -51,14 +49,10 @@ const Listbox = (host) => {
 		</div>
 		<slot></slot>`;
 };
-customElements.define('cosmoz-listbox', connectable(component(Listbox, { styleSheets: [sheet(style)] })));
-export const listbox = ({ multi, setFloating, styles, ...thru }, content) => html `<cosmoz-listbox
-		style="${styleMap(styles)}"
-		@connected="${(e) => e.target.showPopover?.()}"
-		popover="manual"
+customElements.define('cosmoz-listbox', component(Listbox, { styleSheets: [sheet(style)] }));
+export const listbox = ({ multi, ...thru }, content) => html `<cosmoz-listbox
 		part="listbox"
 		?multi=${multi}
-		${ref(setFloating)}
 		...=${spreadProps(props(properties)(thru))}
 		>${content}</cosmoz-listbox
 	>`;

package/dist/listbox/listbox-keybindings.d.ts

@@ -0,0 +1,26 @@
+import type { Activity } from '@neovici/cosmoz-utils/keybindings';
+export declare const LISTBOX_NAVIGATE_UP: Activity;
+export declare const LISTBOX_NAVIGATE_DOWN: Activity;
+export declare const LISTBOX_SELECT: Activity;
+export declare const listboxKeybindings: readonly [readonly [{
+    readonly key: "ArrowUp";
+}, [symbol], {
+    readonly title: "Navigate up";
+    readonly description: "Move to previous listbox item";
+}, {
+    readonly allowInEditable: true;
+}], readonly [{
+    readonly key: "ArrowDown";
+}, [symbol], {
+    readonly title: "Navigate down";
+    readonly description: "Move to next listbox item";
+}, {
+    readonly allowInEditable: true;
+}], readonly [{
+    readonly key: "Enter";
+}, [symbol], {
+    readonly title: "Select";
+    readonly description: "Select current listbox item";
+}, {
+    readonly allowInEditable: true;
+}]];

package/dist/listbox/listbox-keybindings.js

@@ -0,0 +1,23 @@
+export const LISTBOX_NAVIGATE_UP = Symbol('listbox.navigate.up');
+export const LISTBOX_NAVIGATE_DOWN = Symbol('listbox.navigate.down');
+export const LISTBOX_SELECT = Symbol('listbox.select');
+export const listboxKeybindings = [
+    [
+        { key: 'ArrowUp' },
+        [LISTBOX_NAVIGATE_UP],
+        { title: 'Navigate up', description: 'Move to previous listbox item' },
+        { allowInEditable: true },
+    ],
+    [
+        { key: 'ArrowDown' },
+        [LISTBOX_NAVIGATE_DOWN],
+        { title: 'Navigate down', description: 'Move to next listbox item' },
+        { allowInEditable: true },
+    ],
+    [
+        { key: 'Enter' },
+        [LISTBOX_SELECT],
+        { title: 'Select', description: 'Select current listbox item' },
+        { allowInEditable: true },
+    ],
+];

package/dist/listbox/style.css.js

@@ -7,42 +7,21 @@ const checkSVG =
 /* eslint-enable quotes */
 const style = css `
 	:host {
-		position: fixed;
-		z-index: 1000;
+		display: block;
 		font-family: var(--paper-font-subhead_-_font-family, inherit);
 		background: var(
 			--cosmoz-autocomplete-listbox-bg,
 			rgba(255, 255, 255, 0.75)
 		);
-		min-width: 50px;
 		backdrop-filter: blur(16px) saturate(180%);
 		-webkit-backdrop-filter: blur(16px) saturate(180%);
 		border-radius: 6px;
 		box-shadow:
 			0 4px 24px 0 rgba(0, 0, 0, 0.18),
 			0 1.5px 6px 0 rgba(0, 0, 0, 0.1);
+		border: 1px solid rgba(200, 200, 200, 0.25);
 		text-transform: var(--cosmoz-autocomplete-listbox-text-transform, initial);
 		overflow: hidden;
-		transition:
-			opacity 150ms ease-in-out,
-			transform 100ms ease-in-out;
-	}
-	:host(:popover-open) {
-		box-sizing: border-box;
-		display: block;
-		margin: 0;
-		border: 1px solid rgba(200, 200, 200, 0.25);
-
-		opacity: 1;
-		transform: translateY(0);
-
-		@starting-style {
-			opacity: 0;
-			transform: translateY(-50px);
-		}
-	}
-	:host([popover]) {
-		padding: 0;
 	}
 	.items {
 		position: relative;
@@ -106,15 +85,6 @@ const style = css `
 		padding-left: 33px;
 	}
 
-	.swatch {
-		width: 18px;
-		height: 18px;
-		display: inline-block;
-		box-sizing: border-box;
-		vertical-align: middle;
-		border-radius: 50%;
-	}
-
 	[virtualizer-sizer]:not(.sizer) {
 		line-height: 1;
 	}

package/dist/listbox/use-keyboard.d.ts

@@ -4,5 +4,5 @@ export interface Handlers {
     onDown: Handler;
     onEnter: Handler;
 }
-export declare const useKeyboard: (handlers: Handlers) => void;
+export declare const useKeyboard: ({ onUp, onDown, onEnter }: Handlers) => void;
 export {};

package/dist/listbox/use-keyboard.js

@@ -1,32 +1,21 @@
-import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
-import { useEffect } from '@pionjs/pion';
-export const useKeyboard = (handlers) => {
-    const listeners = useMeta(handlers);
-    useEffect(() => {
-        const handler = (e) => {
-            if ((e.ctrlKey && e.altKey) || e.defaultPrevented) {
-                return;
-            }
-            switch (e.key) {
-                case 'Up':
-                case 'ArrowUp':
-                    e.preventDefault();
-                    listeners.onUp();
-                    break;
-                case 'Down':
-                case 'ArrowDown':
-                    e.preventDefault();
-                    listeners.onDown();
-                    break;
-                case 'Enter':
-                    e.preventDefault();
-                    listeners.onEnter();
-                    break;
-                default:
-                    break;
-            }
-        };
-        document.addEventListener('keydown', handler, true);
-        return () => document.removeEventListener('keydown', handler, true);
-    }, [listeners]);
+import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
+import { useActivity } from '@neovici/cosmoz-utils/keybindings';
+import { LISTBOX_NAVIGATE_DOWN, LISTBOX_NAVIGATE_UP, LISTBOX_SELECT, } from './listbox-keybindings';
+export const useKeyboard = ({ onUp, onDown, onEnter }) => {
+    const host = useHost();
+    useActivity({
+        activity: LISTBOX_NAVIGATE_UP,
+        callback: onUp,
+        element: () => host,
+    }, []);
+    useActivity({
+        activity: LISTBOX_NAVIGATE_DOWN,
+        callback: onDown,
+        element: () => host,
+    }, []);
+    useActivity({
+        activity: LISTBOX_SELECT,
+        callback: onEnter,
+        element: () => host,
+    }, []);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "10.12.1",
+	"version": "12.0.0",
 	"type": "module",
 	"description": "A autocomplete input web component",
 	"keywords": [
@@ -26,8 +26,10 @@
 		"build": "tsc -p tsconfig.build.json",
 		"check:duplicates": "check-duplicate-components",
 		"start": "npm run storybook:start",
-		"test": "wtr --coverage",
-		"test:watch": "wtr --watch",
+		"test": "vitest --run && npm run e2e",
+		"test:unit": "vitest --project=unit --run",
+		"test:storybook": "vitest --project=storybook --run",
+		"test:watch": "vitest",
 		"e2e": "playwright test",
 		"prepare": "husky",
 		"prettier": "prettier --write \"**/*.{js,ts,json,css,md}\"",
@@ -70,13 +72,15 @@
 	"exports": {
 		".": "./dist/index.js",
 		"./autocomplete": "./dist/autocomplete/index.js",
+		"./keybindings": "./dist/autocomplete/autocomplete-keybindings.js",
 		"./listbox": "./dist/listbox/index.js",
+		"./listbox/keybindings": "./dist/listbox/listbox-keybindings.js",
 		"./item-renderer": "./dist/listbox/item-renderer.js"
 	},
 	"dependencies": {
 		"@lit-labs/virtualizer": "^2.0.0",
-		"@neovici/cosmoz-dropdown": "^6.0.0 || ^7.0.0",
-		"@neovici/cosmoz-input": "^5.0.2",
+		"@neovici/cosmoz-dropdown": "^7.3.0",
+		"@neovici/cosmoz-input": "^5.6.0",
 		"@neovici/cosmoz-utils": "^6.19.0",
 		"@pionjs/pion": "^2.7.1",
 		"i18next": "^23.16.8",
@@ -86,23 +90,28 @@
 		"@commitlint/cli": "^20.0.0",
 		"@commitlint/config-conventional": "^20.0.0",
 		"@neovici/cfg": "^2.8.0",
-		"@open-wc/testing": "^4.0.0",
 		"@playwright/test": "^1.43.1",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
+		"@storybook/addon-docs": "^10.0.0",
+		"@storybook/addon-vitest": "^10.0.0",
 		"@storybook/web-components-vite": "^10.0.0",
-		"@types/mocha": "^10.0.0",
 		"@types/node": "24.0.0",
+		"@vitest/browser": "^4.0.0",
+		"@vitest/browser-playwright": "^4.0.0",
 		"esbuild": "^0.24.0",
 		"eslint": "^9.0.0",
 		"http-server": "^14.1.1",
 		"husky": "^9.0.0",
+		"jsdom": "^26.1.0",
 		"lint-staged": "^16.2.7",
 		"rollup-plugin-esbuild": "^6.1.1",
 		"rollup-plugin-terser": "^7.0.2",
 		"semantic-release": "^25.0.0",
+		"shadow-dom-testing-library": "^1.13.1",
 		"sinon": "^19.0.0",
-		"storybook": "^10.0.0"
+		"storybook": "^10.0.0",
+		"vitest": "^4.0.0"
 	},
 	"overrides": {
 		"conventional-changelog-conventionalcommits": ">= 8.0.0"

package/dist/autocomplete/use-keys.d.ts

@@ -1,9 +0,0 @@
-export interface Props<I> {
-    focused?: boolean;
-    empty?: boolean;
-    value: I | I[];
-    limit?: number;
-    onChange: (v: I[]) => void;
-    onText: (s: string) => void;
-}
-export declare const useKeys: <I>({ focused, empty, ...rest }: Props<I>) => void;

package/dist/autocomplete/use-keys.js

@@ -1,23 +0,0 @@
-import { array } from '@neovici/cosmoz-utils/array';
-import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
-import { useEffect } from '@pionjs/pion';
-export const useKeys = ({ focused, empty, ...rest }) => {
-    const enabled = focused && empty && rest.limit !== 1, meta = useMeta(rest);
-    useEffect(() => {
-        if (!enabled) {
-            return;
-        }
-        const handler = (e) => {
-            if (e.defaultPrevented) {
-                return;
-            }
-            const { key } = e, values = array(meta.value), isOne = meta.limit == 1; //eslint-disable-line eqeqeq
-            if (values.length > 0 &&
-                (key === 'Backspace' || (isOne && key.length === 1))) {
-                return meta.onChange(values.slice(0, -1));
-            }
-        };
-        document.addEventListener('keydown', handler, true);
-        return () => document.removeEventListener('keydown', handler, true);
-    }, [enabled, meta]);
-};