@neovici/cosmoz-dropdown 7.1.0 → 7.3.0

package/README.md

@@ -1,48 +1,106 @@
-# cosmoz-dropdown
+# @neovici/cosmoz-dropdown
 
-A dropdown web component built with [pionjs](https://github.com/pionjs/pion) and lit-html.
+Dropdown components for Neovici applications.
 
-## Install
+## Installation
 
-```sh
+```bash
 npm install @neovici/cosmoz-dropdown
 ```
 
 ## Components
 
-### cosmoz-dropdown
+### cosmoz-dropdown-next
 
-Classic dropdown with floating-ui positioning.
+Modern dropdown using the Popover API and CSS Anchor Positioning.
 
-```js
-import '@neovici/cosmoz-dropdown';
-```
+#### Usage
 
 ```html
-<cosmoz-dropdown-menu>
-  <span slot="button">Menu</span>
-  <div>Item 1</div>
-  <div>Item 2</div>
-</cosmoz-dropdown-menu>
+<script type="module">
+	import '@neovici/cosmoz-dropdown';
+</script>
+
+<cosmoz-dropdown-next placement="bottom span-right">
+	<button slot="button">Open Menu</button>
+	<div>Dropdown content</div>
+</cosmoz-dropdown-next>
 ```
 
-### cosmoz-dropdown-next
+#### Properties
 
-Next-gen dropdown using the Popover API and CSS Anchor Positioning.
+| Property        | Type      | Default               | Description                                                                                                              |
+| --------------- | --------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `placement`     | `string`  | `'bottom span-right'` | CSS anchor `position-area` value. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position-area) for options. |
+| `open-on-hover` | `boolean` | `false`               | Open on pointer hover.                                                                                                   |
+| `open-on-focus` | `boolean` | `false`               | Open when the trigger receives focus.                                                                                    |
 
-```js
-import '@neovici/cosmoz-dropdown/cosmoz-dropdown-next';
-```
+#### Auto-open Modes
+
+The `open-on-hover` and `open-on-focus` attributes can be used independently or together:
 
 ```html
-<cosmoz-dropdown-next placement="bottom span-right">
-  <button slot="button">Open</button>
-  <div>Popover content</div>
+<!-- Open on hover only -->
+<cosmoz-dropdown-next open-on-hover>
+	<button slot="button">Hover me</button>
+	<div>Content appears on hover</div>
+</cosmoz-dropdown-next>
+
+<!-- Open on focus only -->
+<cosmoz-dropdown-next open-on-focus>
+	<button slot="button">Focus me</button>
+	<div>Content appears on focus</div>
+</cosmoz-dropdown-next>
+
+<!-- Open on hover or focus -->
+<cosmoz-dropdown-next open-on-hover open-on-focus>
+	<button slot="button">Hover or focus</button>
+	<div>Content appears on either</div>
 </cosmoz-dropdown-next>
 ```
 
-The `placement` prop accepts any CSS [`position-area`](https://developer.mozilla.org/en-US/docs/Web/CSS/position-area) value.
+When auto-open is enabled:
+
+- The dropdown closes with a 100ms delay to allow moving between trigger and content
+- When `open-on-focus` is active, clicking the button only opens (does not toggle)
+- Otherwise, click works as a toggle
+
+#### Slots
+
+| Slot      | Description                                 |
+| --------- | ------------------------------------------- |
+| `button`  | The trigger element that opens the dropdown |
+| (default) | The dropdown content                        |
+
+#### Events
+
+The dropdown listens for a `select` event on its content and automatically closes when triggered. This allows menu items to close the dropdown when selected:
+
+```javascript
+menuItem.dispatchEvent(new Event('select', { bubbles: true }));
+```
+
+The dropdown dispatches a `dropdown-toggle` event (a [`ToggleEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent)) when the popover opens or closes, allowing parent components across shadow boundaries to observe state changes:
+
+```javascript
+dropdown.addEventListener('dropdown-toggle', (e) => {
+	console.log(e.oldState, '->', e.newState); // 'closed' -> 'open' or 'open' -> 'closed'
+});
+```
+
+## Development
+
+```bash
+npm install
+npm run storybook:start
+```
+
+## Testing
+
+```bash
+npm test
+```
 
-## Storybook
+## License
 
-https://neovici.github.io/cosmoz-dropdown/
+Apache-2.0

package/dist/connectable.d.ts

@@ -1,365 +1,5 @@
-declare global {
-    interface HTMLElement {
-        connectedCallback(): void;
-        disconnectedCallback(): void;
-    }
-}
-export declare const connectable: (base?: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-}) => {
-    new (): {
-        connectedCallback(): void;
-        disconnectedCallback(): void;
-        accessKey: string;
-        readonly accessKeyLabel: string;
-        autocapitalize: string;
-        autocorrect: boolean;
-        dir: string;
-        draggable: boolean;
-        hidden: boolean;
-        inert: boolean;
-        innerText: string;
-        lang: string;
-        readonly offsetHeight: number;
-        readonly offsetLeft: number;
-        readonly offsetParent: Element | null;
-        readonly offsetTop: number;
-        readonly offsetWidth: number;
-        outerText: string;
-        popover: string | null;
-        spellcheck: boolean;
-        title: string;
-        translate: boolean;
-        writingSuggestions: string;
-        attachInternals(): ElementInternals;
-        click(): void;
-        hidePopover(): void;
-        showPopover(): void;
-        togglePopover(options?: boolean): boolean;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-        readonly attributes: NamedNodeMap;
-        get classList(): DOMTokenList;
-        set classList(value: string);
-        className: string;
-        readonly clientHeight: number;
-        readonly clientLeft: number;
-        readonly clientTop: number;
-        readonly clientWidth: number;
-        readonly currentCSSZoom: number;
-        id: string;
-        innerHTML: string;
-        readonly localName: string;
-        readonly namespaceURI: string | null;
-        onfullscreenchange: ((this: Element, ev: Event) => any) | null;
-        onfullscreenerror: ((this: Element, ev: Event) => any) | null;
-        outerHTML: string;
-        readonly ownerDocument: Document;
-        get part(): DOMTokenList;
-        set part(value: string);
-        readonly prefix: string | null;
-        readonly scrollHeight: number;
-        scrollLeft: number;
-        scrollTop: number;
-        readonly scrollWidth: number;
-        readonly shadowRoot: ShadowRoot | null;
-        slot: string;
-        readonly tagName: string;
-        attachShadow(init: ShadowRootInit): ShadowRoot;
-        checkVisibility(options?: CheckVisibilityOptions): boolean;
-        closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
-        closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
-        closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
-        closest<E extends Element = Element>(selectors: string): E | null;
-        computedStyleMap(): StylePropertyMapReadOnly;
-        getAttribute(qualifiedName: string): string | null;
-        getAttributeNS(namespace: string | null, localName: string): string | null;
-        getAttributeNames(): string[];
-        getAttributeNode(qualifiedName: string): Attr | null;
-        getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
-        getBoundingClientRect(): DOMRect;
-        getClientRects(): DOMRectList;
-        getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
-        getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
-        getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
-        getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
-        getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
-        getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
-        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
-        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
-        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
-        getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
-        getHTML(options?: GetHTMLOptions): string;
-        hasAttribute(qualifiedName: string): boolean;
-        hasAttributeNS(namespace: string | null, localName: string): boolean;
-        hasAttributes(): boolean;
-        hasPointerCapture(pointerId: number): boolean;
-        insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
-        insertAdjacentHTML(position: InsertPosition, string: string): void;
-        insertAdjacentText(where: InsertPosition, data: string): void;
-        matches(selectors: string): boolean;
-        releasePointerCapture(pointerId: number): void;
-        removeAttribute(qualifiedName: string): void;
-        removeAttributeNS(namespace: string | null, localName: string): void;
-        removeAttributeNode(attr: Attr): Attr;
-        requestFullscreen(options?: FullscreenOptions): Promise<void>;
-        requestPointerLock(options?: PointerLockOptions): Promise<void>;
-        scroll(options?: ScrollToOptions): void;
-        scroll(x: number, y: number): void;
-        scrollBy(options?: ScrollToOptions): void;
-        scrollBy(x: number, y: number): void;
-        scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
-        scrollTo(options?: ScrollToOptions): void;
-        scrollTo(x: number, y: number): void;
-        setAttribute(qualifiedName: string, value: string): void;
-        setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
-        setAttributeNode(attr: Attr): Attr | null;
-        setAttributeNodeNS(attr: Attr): Attr | null;
-        setHTMLUnsafe(html: string): void;
-        setPointerCapture(pointerId: number): void;
-        toggleAttribute(qualifiedName: string, force?: boolean): boolean;
-        webkitMatchesSelector(selectors: string): boolean;
-        get textContent(): string;
-        set textContent(value: string | null);
-        readonly baseURI: string;
-        readonly childNodes: NodeListOf<ChildNode>;
-        readonly firstChild: ChildNode | null;
-        readonly isConnected: boolean;
-        readonly lastChild: ChildNode | null;
-        readonly nextSibling: ChildNode | null;
-        readonly nodeName: string;
-        readonly nodeType: number;
-        nodeValue: string | null;
-        readonly parentElement: HTMLElement | null;
-        readonly parentNode: ParentNode | null;
-        readonly previousSibling: ChildNode | null;
-        appendChild<T extends Node>(node: T): T;
-        cloneNode(subtree?: boolean): Node;
-        compareDocumentPosition(other: Node): number;
-        contains(other: Node | null): boolean;
-        getRootNode(options?: GetRootNodeOptions): Node;
-        hasChildNodes(): boolean;
-        insertBefore<T extends Node>(node: T, child: Node | null): T;
-        isDefaultNamespace(namespace: string | null): boolean;
-        isEqualNode(otherNode: Node | null): boolean;
-        isSameNode(otherNode: Node | null): boolean;
-        lookupNamespaceURI(prefix: string | null): string | null;
-        lookupPrefix(namespace: string | null): string | null;
-        normalize(): void;
-        removeChild<T extends Node>(child: T): T;
-        replaceChild<T extends Node>(node: Node, child: T): T;
-        readonly ELEMENT_NODE: 1;
-        readonly ATTRIBUTE_NODE: 2;
-        readonly TEXT_NODE: 3;
-        readonly CDATA_SECTION_NODE: 4;
-        readonly ENTITY_REFERENCE_NODE: 5;
-        readonly ENTITY_NODE: 6;
-        readonly PROCESSING_INSTRUCTION_NODE: 7;
-        readonly COMMENT_NODE: 8;
-        readonly DOCUMENT_NODE: 9;
-        readonly DOCUMENT_TYPE_NODE: 10;
-        readonly DOCUMENT_FRAGMENT_NODE: 11;
-        readonly NOTATION_NODE: 12;
-        readonly DOCUMENT_POSITION_DISCONNECTED: 1;
-        readonly DOCUMENT_POSITION_PRECEDING: 2;
-        readonly DOCUMENT_POSITION_FOLLOWING: 4;
-        readonly DOCUMENT_POSITION_CONTAINS: 8;
-        readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
-        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
-        dispatchEvent(event: Event): boolean;
-        ariaActiveDescendantElement: Element | null;
-        ariaAtomic: string | null;
-        ariaAutoComplete: string | null;
-        ariaBrailleLabel: string | null;
-        ariaBrailleRoleDescription: string | null;
-        ariaBusy: string | null;
-        ariaChecked: string | null;
-        ariaColCount: string | null;
-        ariaColIndex: string | null;
-        ariaColIndexText: string | null;
-        ariaColSpan: string | null;
-        ariaControlsElements: ReadonlyArray<Element> | null;
-        ariaCurrent: string | null;
-        ariaDescribedByElements: ReadonlyArray<Element> | null;
-        ariaDescription: string | null;
-        ariaDetailsElements: ReadonlyArray<Element> | null;
-        ariaDisabled: string | null;
-        ariaErrorMessageElements: ReadonlyArray<Element> | null;
-        ariaExpanded: string | null;
-        ariaFlowToElements: ReadonlyArray<Element> | null;
-        ariaHasPopup: string | null;
-        ariaHidden: string | null;
-        ariaInvalid: string | null;
-        ariaKeyShortcuts: string | null;
-        ariaLabel: string | null;
-        ariaLabelledByElements: ReadonlyArray<Element> | null;
-        ariaLevel: string | null;
-        ariaLive: string | null;
-        ariaModal: string | null;
-        ariaMultiLine: string | null;
-        ariaMultiSelectable: string | null;
-        ariaOrientation: string | null;
-        ariaOwnsElements: ReadonlyArray<Element> | null;
-        ariaPlaceholder: string | null;
-        ariaPosInSet: string | null;
-        ariaPressed: string | null;
-        ariaReadOnly: string | null;
-        ariaRelevant: string | null;
-        ariaRequired: string | null;
-        ariaRoleDescription: string | null;
-        ariaRowCount: string | null;
-        ariaRowIndex: string | null;
-        ariaRowIndexText: string | null;
-        ariaRowSpan: string | null;
-        ariaSelected: string | null;
-        ariaSetSize: string | null;
-        ariaSort: string | null;
-        ariaValueMax: string | null;
-        ariaValueMin: string | null;
-        ariaValueNow: string | null;
-        ariaValueText: string | null;
-        role: string | null;
-        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
-        getAnimations(options?: GetAnimationsOptions): Animation[];
-        after(...nodes: (Node | string)[]): void;
-        before(...nodes: (Node | string)[]): void;
-        remove(): void;
-        replaceWith(...nodes: (Node | string)[]): void;
-        readonly nextElementSibling: Element | null;
-        readonly previousElementSibling: Element | null;
-        readonly childElementCount: number;
-        readonly children: HTMLCollection;
-        readonly firstElementChild: Element | null;
-        readonly lastElementChild: Element | null;
-        append(...nodes: (Node | string)[]): void;
-        prepend(...nodes: (Node | string)[]): void;
-        querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
-        querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
-        querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
-        querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
-        querySelector<E extends Element = Element>(selectors: string): E | null;
-        querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
-        querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
-        querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
-        querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
-        querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
-        replaceChildren(...nodes: (Node | string)[]): void;
-        readonly assignedSlot: HTMLSlotElement | null;
-        readonly attributeStyleMap: StylePropertyMap;
-        get style(): CSSStyleDeclaration;
-        set style(cssText: string);
-        contentEditable: string;
-        enterKeyHint: string;
-        inputMode: string;
-        readonly isContentEditable: boolean;
-        onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
-        onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
-        onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
-        onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
-        oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
-        oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
-        ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onerror: OnErrorEventHandler;
-        onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
-        onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
-        ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
-        onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
-        onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
-        onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
-        onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
-        onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
-        onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
-        onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
-        onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
-        ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-        ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-        ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-        ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-        onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
-        autofocus: boolean;
-        readonly dataset: DOMStringMap;
-        nonce?: string;
-        tabIndex: number;
-        blur(): void;
-        focus(options?: FocusOptions): void;
-    };
-};
+/**
+ * @deprecated Import from '@neovici/cosmoz-utils/connectable' instead.
+ * This export will be removed in the next major version.
+ */
+export { connectable } from '@neovici/cosmoz-utils/connectable';

package/dist/connectable.js

@@ -1,10 +1,5 @@
-export const connectable = (base = HTMLElement) => class extends base {
-    connectedCallback() {
-        super.connectedCallback?.();
-        this.dispatchEvent(new CustomEvent('connected'));
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback?.();
-        this.dispatchEvent(new CustomEvent('disconnected'));
-    }
-};
+/**
+ * @deprecated Import from '@neovici/cosmoz-utils/connectable' instead.
+ * This export will be removed in the next major version.
+ */
+export { connectable } from '@neovici/cosmoz-utils/connectable';

package/dist/next/cosmoz-dropdown-next.js

@@ -1,6 +1,7 @@
 import { component, css, useRef } from '@pionjs/pion';
 import { html } from 'lit-html';
 import { ref } from 'lit-html/directives/ref.js';
+import { useAutoOpen } from './use-auto-open.js';
 /**
  * Autofocus polyfill for slotted content.
  *
@@ -49,6 +50,7 @@ const style = css `
 		padding: 0;
 		background: transparent;
 		overflow: visible;
+		min-width: anchor-size(width);
 
 		/* Animation - open state */
 		opacity: 1;
@@ -75,25 +77,43 @@ const style = css `
 		opacity: 0;
 		transform: translateY(-4px) scale(0.96);
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[popover] {
+			transition: none;
+		}
+	}
 `;
-const CosmozDropdownNext = ({ placement = 'bottom span-right', }) => {
-    const popover = useRef();
-    const toggle = () => {
-        popover.current?.togglePopover();
-    };
-    const close = () => {
-        popover.current?.hidePopover();
+const CosmozDropdownNext = (host) => {
+    const { placement = 'bottom span-right', openOnHover, openOnFocus } = host;
+    const popoverRef = useRef();
+    const open = () => popoverRef.current?.showPopover();
+    const close = () => popoverRef.current?.hidePopover();
+    const toggle = () => popoverRef.current?.togglePopover();
+    useAutoOpen({ host, popoverRef, openOnHover, openOnFocus, open, close });
+    // When open-on-focus is active, clicking the button should only open
+    // (not toggle), since focusin already handles opening and toggle would
+    // race with the focusin handler (focusin opens, then click toggles closed).
+    const handleClick = openOnFocus ? open : toggle;
+    const onToggle = (e) => {
+        autofocus(e);
+        // Re-dispatch as a composed event so parent components across
+        // shadow boundaries can observe popover state changes.
+        // The native ToggleEvent is composed: false, bubbles: false.
+        host.dispatchEvent(new ToggleEvent('dropdown-toggle', {
+            newState: e.newState,
+            oldState: e.oldState,
+            composed: true,
+        }));
     };
     return html `
-		<slot name="button" @click=${toggle}></slot>
+		<slot name="button" @click=${handleClick}></slot>
 		<div
 			popover
 			style="position-area: ${placement}"
-			@toggle=${autofocus}
+			@toggle=${onToggle}
 			@select=${close}
-			${ref((el) => {
-        popover.current = el;
-    })}
+			${ref((el) => el && (popoverRef.current = el))}
 		>
 			<slot></slot>
 		</div>
@@ -101,6 +121,6 @@ const CosmozDropdownNext = ({ placement = 'bottom span-right', }) => {
 };
 customElements.define('cosmoz-dropdown-next', component(CosmozDropdownNext, {
     styleSheets: [style],
-    observedAttributes: ['placement'],
+    observedAttributes: ['placement', 'open-on-hover', 'open-on-focus'],
     shadowRootInit: { mode: 'open', delegatesFocus: true },
 }));

package/dist/next/use-auto-open.d.ts

@@ -0,0 +1,12 @@
+interface UseAutoOpenOptions {
+    host: HTMLElement;
+    popoverRef: {
+        current?: HTMLElement;
+    };
+    openOnHover?: boolean;
+    openOnFocus?: boolean;
+    open: () => void;
+    close: () => void;
+}
+export declare const useAutoOpen: ({ host, popoverRef, openOnHover, openOnFocus, open, close, }: UseAutoOpenOptions) => void;
+export {};

package/dist/next/use-auto-open.js

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from '@pionjs/pion';
+export const useAutoOpen = ({ host, popoverRef, openOnHover, openOnFocus, open, close, }) => {
+    const closeTimeout = useRef();
+    const cancelClose = () => clearTimeout(closeTimeout.current);
+    const scheduleClose = () => {
+        clearTimeout(closeTimeout.current);
+        closeTimeout.current = setTimeout(() => {
+            const popover = popoverRef.current;
+            if (openOnHover &&
+                (host.matches(':hover') || popover?.matches(':hover'))) {
+                return;
+            }
+            if (openOnFocus &&
+                (host.matches(':focus-within') || popover?.matches(':focus-within'))) {
+                return;
+            }
+            close();
+        }, 100);
+    };
+    const handleEnter = () => {
+        cancelClose();
+        open();
+    };
+    // Auto-open on hover
+    useEffect(() => {
+        if (!openOnHover)
+            return;
+        host.addEventListener('pointerenter', handleEnter);
+        host.addEventListener('pointerleave', scheduleClose);
+        return () => {
+            cancelClose();
+            host.removeEventListener('pointerenter', handleEnter);
+            host.removeEventListener('pointerleave', scheduleClose);
+        };
+    }, [openOnHover, host]);
+    // Auto-open on focus
+    useEffect(() => {
+        if (!openOnFocus)
+            return;
+        host.addEventListener('focusin', handleEnter);
+        host.addEventListener('focusout', scheduleClose);
+        return () => {
+            cancelClose();
+            host.removeEventListener('focusin', handleEnter);
+            host.removeEventListener('focusout', scheduleClose);
+        };
+    }, [openOnFocus, host]);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-dropdown",
-	"version": "7.1.0",
+	"version": "7.3.0",
 	"description": "A simple dropdown web component",
 	"keywords": [
 		"lit-html",
@@ -25,8 +25,10 @@
 		"check:duplicates": "check-duplicate-components",
 		"build": "tsc -p tsconfig.build.json",
 		"start": "wds",
-		"test": "wtr --coverage",
+		"test": "wtr --coverage && vitest --project=storybook --run",
 		"test:watch": "wtr --watch",
+		"test:storybook": "vitest --project=storybook --run",
+		"test:storybook:watch": "vitest --project=storybook",
 		"storybook:start": "storybook dev -p 8000",
 		"storybook:build": "storybook build",
 		"storybook:deploy": "storybook-to-ghpages",
@@ -74,7 +76,7 @@
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.6.12",
-		"@neovici/cosmoz-utils": "^6.8.1",
+		"@neovici/cosmoz-utils": "^6.19.0",
 		"@pionjs/pion": "^2.5.2",
 		"lit-html": "^3.1.2"
 	},
@@ -88,18 +90,23 @@
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/addon-docs": "^10.0.0",
+		"@storybook/addon-vitest": "^10.2.4",
 		"@storybook/web-components-vite": "^10.0.0",
 		"@types/mocha": "^10.0.6",
 		"@types/node": "^24.0.0",
+		"@vitest/browser": "^4.0.18",
+		"@vitest/browser-playwright": "^4.0.18",
 		"esbuild": "^0.25.0",
 		"http-server": "^14.1.1",
 		"husky": "^9.0.11",
 		"lint-staged": "^16.2.7",
 		"rollup-plugin-esbuild": "^6.1.1",
 		"semantic-release": "^25.0.0",
+		"shadow-dom-testing-library": "^1.13.1",
 		"sinon": "^21.0.0",
 		"storybook": "^10.0.0",
-		"typescript": "^5.4.3"
+		"typescript": "^5.4.3",
+		"vitest": "^4.0.18"
 	},
 	"overrides": {
 		"conventional-changelog-conventionalcommits": ">= 8.0.0"