@neovici/cosmoz-dropdown 4.4.2 → 5.1.0

package/dist/connectable.d.ts

@@ -0,0 +1,349 @@
+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;
+        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(force?: 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;
+        readonly classList: DOMTokenList;
+        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;
+        readonly part: DOMTokenList;
+        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;
+        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;
+        textContent: string | null;
+        appendChild<T extends Node>(node: T): T;
+        cloneNode(deep?: 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;
+        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;
+        ariaCurrent: string | null;
+        ariaDescription: string | null;
+        ariaDisabled: string | null;
+        ariaExpanded: string | null;
+        ariaHasPopup: string | null;
+        ariaHidden: string | null;
+        ariaInvalid: string | null;
+        ariaKeyShortcuts: string | null;
+        ariaLabel: string | null;
+        ariaLevel: string | null;
+        ariaLive: string | null;
+        ariaModal: string | null;
+        ariaMultiLine: string | null;
+        ariaMultiSelectable: string | null;
+        ariaOrientation: string | null;
+        ariaPlaceholder: string | null;
+        ariaPosInSet: string | null;
+        ariaPressed: string | null;
+        ariaReadOnly: 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;
+        readonly style: CSSStyleDeclaration;
+        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: MouseEvent) => any) | null;
+        onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => 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: MouseEvent) => any) | null;
+        onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => 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;
+        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: Event) => 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;
+    };
+};

package/dist/connectable.js

@@ -0,0 +1,10 @@
+export const connectable = (base = HTMLElement) => class extends base {
+    connectedCallback() {
+        super.connectedCallback?.();
+        this.dispatchEvent(new CustomEvent('connected'));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback?.();
+        this.dispatchEvent(new CustomEvent('disconnected'));
+    }
+};

package/dist/cosmoz-dropdown-content.d.ts

@@ -0,0 +1 @@
+export declare const Content: () => import("lit-html").TemplateResult<1>;

package/dist/cosmoz-dropdown-content.js

@@ -0,0 +1,31 @@
+import { component, css } from '@pionjs/pion';
+import { html } from 'lit-html';
+import { connectable } from './connectable';
+const style = css `
+	:host {
+		position: fixed;
+		left: -9999999999px;
+		min-width: 72px;
+		box-sizing: border-box;
+		padding: var(--cosmoz-dropdown-spacing, 0px);
+		z-index: var(--cosmoz-dropdown-z-index, 2);
+	}
+	:host(:popover-open) {
+		margin: 0;
+		border: 0;
+		padding: 0;
+		overflow: visible;
+	}
+	.wrap {
+		background: var(--cosmoz-dropdown-bg-color, #fff);
+		box-shadow: var(
+			--cosmoz-dropdown-box-shadow,
+			0px 3px 4px 2px rgba(0, 0, 0, 0.1)
+		);
+	}
+	::slotted(*) {
+		display: block;
+	}
+`;
+export const Content = () => html `<div class="wrap" part="wrap"><slot></slot></div>`;
+customElements.define('cosmoz-dropdown-content', connectable(component(Content, { styleSheets: [style] })));

package/dist/cosmoz-dropdown-menu.d.ts

@@ -0,0 +1,5 @@
+import { Props as DropdownProps } from './cosmoz-dropdown';
+export declare const List: () => import("lit-html").TemplateResult<1>;
+type MenuProps = Pick<DropdownProps, 'placement'>;
+export declare const Menu: ({ placement }: MenuProps) => import("lit-html").TemplateResult<1>;
+export {};

package/dist/cosmoz-dropdown-menu.js

@@ -0,0 +1,50 @@
+import { css, component } from '@pionjs/pion';
+import { html } from 'lit-html';
+const style = css `
+	:host {
+		display: contents;
+		max-height: var(--cosmoz-dropdown-menu-max-height, calc(96vh - 64px));
+		overflow-y: auto;
+	}
+	::slotted(:not(slot)) {
+		display: block;
+		--paper-button_-_display: block;
+		box-sizing: border-box;
+		padding: 10px 24px;
+		background: transparent;
+		color: var(--cosmoz-dropdown-menu-color, #101010);
+		transition:
+			background 0.25s,
+			color 0.25s;
+		border: none;
+		cursor: pointer;
+		font-size: 14px;
+		line-height: 20px;
+		text-align: left;
+		margin: 0;
+		width: 100%;
+	}
+
+	::slotted(:not(slot):hover) {
+		background: var(
+			--cosmoz-dropdown-menu-hover-color,
+			var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
+		);
+	}
+
+	::slotted(:not(slot)[disabled]) {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+`;
+export const List = () => html ` <slot></slot> `;
+customElements.define('cosmoz-dropdown-list', component(List, { styleSheets: [style] }));
+export const Menu = ({ placement }) => html ` <cosmoz-dropdown
+		.placement=${placement}
+		part="dropdown"
+		exportparts="anchor, button, content, wrap, dropdown"
+	>
+		<slot name="button" slot="button"></slot>
+		<cosmoz-dropdown-list><slot></slot></cosmoz-dropdown-list>
+	</cosmoz-dropdown>`;
+customElements.define('cosmoz-dropdown-menu', component(Menu));

package/dist/cosmoz-dropdown.d.ts

@@ -1,13 +1,10 @@
-import { TemplateResult } from 'lit-html';
-import { Placement } from './use-position';
 import { UseFocusOpts } from './use-focus';
-interface ContentProps {
-    anchor: HTMLElement;
+import { Content } from './cosmoz-dropdown-content';
+import { Placement, Strategy } from './use-floating';
+export interface Props extends UseFocusOpts {
     placement?: Placement;
-    render?: () => TemplateResult;
+    strategy?: Strategy;
+    render: () => unknown;
 }
-declare const Content: (host: HTMLElement & ContentProps) => TemplateResult<1>;
-interface DropdownProps extends UseFocusOpts, Pick<ContentProps, 'placement' | 'render'> {
-}
-declare const Dropdown: (host: HTMLElement & DropdownProps) => TemplateResult<1>;
+declare const Dropdown: (host: HTMLElement & Props) => import("lit-html").TemplateResult<1>;
 export { Dropdown, Content };

package/dist/cosmoz-dropdown.js

@@ -1,104 +1,69 @@
-import { component, useCallback } from '@pionjs/pion';
+import { component, css } from '@pionjs/pion';
 import { html, nothing } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
 import { ref } from 'lit-html/directives/ref.js';
-import { usePosition } from './use-position';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { guard } from 'lit-html/directives/guard.js';
 import { useHostFocus } from './use-focus';
+import { Content } from './cosmoz-dropdown-content';
+import { useFloating } from './use-floating';
 const preventDefault = (e) => e.preventDefault();
-const supportsPopover = () => {
-    // eslint-disable-next-line no-prototype-builtins
-    return HTMLElement.prototype.hasOwnProperty('popover');
-};
-const showPopover = (popover) => {
-    const popoverElement = popover;
-    if (supportsPopover()) {
-        requestAnimationFrame(() => {
-            popoverElement?.showPopover();
-        });
-    }
-};
-const Content = (host) => {
-    const { anchor, placement, render } = host;
-    usePosition({ anchor, placement, host });
-    return html ` <style>
-			:host {
-				position: fixed;
-				left: -9999999999px;
-				min-width: 72px;
-				box-sizing: border-box;
-				padding: var(--cosmoz-dropdown-spacing, 0px);
-				z-index: var(--cosmoz-dropdown-z-index, 2);
-			}
-			:host(:popover-open) {
-				margin: 0;
-				border: 0;
-				padding: 0;
-				overflow: visible;
-			}
-			.wrap {
-				background: var(--cosmoz-dropdown-bg-color, #fff);
-				box-shadow: var(
-					--cosmoz-dropdown-box-shadow,
-					0px 3px 4px 2px rgba(0, 0, 0, 0.1)
-				);
-			}
-			::slotted(*) {
-				display: block;
-			}
-		</style>
-		<div class="wrap" part="wrap"><slot></slot>${render?.() || nothing}</div>`;
-};
+const style = css `
+	.anchor {
+		pointer-events: none;
+		padding: var(--cosmoz-dropdown-anchor-spacing);
+	}
+	button {
+		border: none;
+		cursor: pointer;
+		position: relative;
+		pointer-events: auto;
+		outline: none;
+		background: var(
+			--cosmoz-dropdown-button-bg-color,
+			var(--cosmoz-button-bg-color, #101010)
+		);
+		color: var(
+			--cosmoz-dropdown-button-color,
+			var(--cosmoz-button-color, #fff)
+		);
+		border-radius: var(--cosmoz-dropdown-button-radius, 50%);
+		width: var(
+			--cosmoz-dropdown-button-width,
+			var(--cosmoz-dropdown-button-size, 40px)
+		);
+		height: var(
+			--cosmoz-dropdown-button-height,
+			var(--cosmoz-dropdown-button-size, 40px)
+		);
+		padding: var(--cosmoz-dropdown-button-padding);
+	}
+	button:hover {
+		background: var(
+			--cosmoz-dropdown-button-hover-bg-color,
+			var(--cosmoz-button-hover-bg-color, #3a3f44)
+		);
+	}
+	::slotted(svg) {
+		pointer-events: none;
+	}
+	@-moz-document url-prefix() {
+		#content {
+			left: auto;
+		}
+	}
+`;
 const Dropdown = (host) => {
-    const { placement, render } = host, anchor = useCallback(() => host.shadowRoot.querySelector('.anchor'), []), { active, onToggle } = useHostFocus(host);
-    return html ` <style>
-			.anchor {
-				pointer-events: none;
-				padding: var(--cosmoz-dropdown-anchor-spacing);
-			}
-			button {
-				border: none;
-				cursor: pointer;
-				position: relative;
-				pointer-events: auto;
-				outline: none;
-				background: var(
-					--cosmoz-dropdown-button-bg-color,
-					var(--cosmoz-button-bg-color, #101010)
-				);
-				color: var(
-					--cosmoz-dropdown-button-color,
-					var(--cosmoz-button-color, #fff)
-				);
-				border-radius: var(--cosmoz-dropdown-button-radius, 50%);
-				width: var(
-					--cosmoz-dropdown-button-width,
-					var(--cosmoz-dropdown-button-size, 40px)
-				);
-				height: var(
-					--cosmoz-dropdown-button-height,
-					var(--cosmoz-dropdown-button-size, 40px)
-				);
-				padding: var(--cosmoz-dropdown-button-padding);
-			}
-			button:hover {
-				background: var(
-					--cosmoz-dropdown-button-hover-bg-color,
-					var(--cosmoz-button-hover-bg-color, #3a3f44)
-				);
-			}
-			::slotted(svg) {
-				pointer-events: none;
-			}
-			@-moz-document url-prefix() {
-				#content {
-					left: auto;
-				}
-			}
-		</style>
-		<div class="anchor" part="anchor">
+    const { placement, strategy, render } = host;
+    const { active, onToggle } = useHostFocus(host);
+    const { styles, setReference, setFloating } = useFloating({
+        placement,
+        strategy,
+    });
+    return html ` <div class="anchor" part="anchor" ${ref(setReference)}>
 			<button
-				@click=${onToggle}
 				@mousedown=${preventDefault}
+				@click=${onToggle}
 				part="button"
 				id="dropdownButton"
 			>
@@ -106,68 +71,15 @@ const Dropdown = (host) => {
 			</button>
 		</div>
 		${when(active, () => html `<cosmoz-dropdown-content
-					${ref(showPopover)}
 					popover
 					id="content"
 					part="content"
 					exportparts="wrap, content"
-					.anchor=${anchor}
-					.placement=${placement}
-					.render=${render}
-				>
-					<slot></slot>
-				</cosmoz-dropdown-content>`)}`;
+					style="${styleMap(styles)}"
+					@connected=${(e) => e.target.showPopover?.()}
+					${ref(setFloating)}
+					><slot></slot>${guard([render], () => render?.() || nothing)}</cosmoz-dropdown-content
+				> `)}`;
 };
-const List = () => html `
-	<style>
-		:host {
-			display: contents;
-			max-height: var(--cosmoz-dropdown-menu-max-height, calc(96vh - 64px));
-			overflow-y: auto;
-		}
-		::slotted(:not(slot)) {
-			display: block;
-			--paper-button_-_display: block;
-			box-sizing: border-box;
-			padding: 10px 24px;
-			background: transparent;
-			color: var(--cosmoz-dropdown-menu-color, #101010);
-			transition:
-				background 0.25s,
-				color 0.25s;
-			border: none;
-			cursor: pointer;
-			font-size: 14px;
-			line-height: 20px;
-			text-align: left;
-			margin: 0;
-			width: 100%;
-		}
-
-		::slotted(:not(slot):hover) {
-			background: var(
-				--cosmoz-dropdown-menu-hover-color,
-				var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
-			);
-		}
-
-		::slotted(:not(slot)[disabled]) {
-			opacity: 0.5;
-			pointer-events: none;
-		}
-	</style>
-	<slot></slot>
-`;
-const Menu = ({ placement }) => html ` <cosmoz-dropdown
-		.placement=${placement}
-		part="dropdown"
-		exportparts="anchor, button, content, wrap, dropdown"
-	>
-		<slot name="button" slot="button"></slot>
-		<cosmoz-dropdown-list><slot></slot></cosmoz-dropdown-list>
-	</cosmoz-dropdown>`;
-customElements.define('cosmoz-dropdown-content', component(Content));
-customElements.define('cosmoz-dropdown', component(Dropdown));
-customElements.define('cosmoz-dropdown-list', component(List));
-customElements.define('cosmoz-dropdown-menu', component(Menu));
+customElements.define('cosmoz-dropdown', component(Dropdown, { styleSheets: [style] }));
 export { Dropdown, Content };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
-export * from './cosmoz-dropdown';
 export * from './use-focus';
 export * from './use-position';
+export * from './cosmoz-dropdown-menu';
+export * from './cosmoz-dropdown';

package/dist/index.js

@@ -1,3 +1,4 @@
-export * from './cosmoz-dropdown';
 export * from './use-focus';
 export * from './use-position';
+export * from './cosmoz-dropdown-menu';
+export * from './cosmoz-dropdown';

package/dist/use-floating.d.ts

@@ -0,0 +1,15 @@
+import { ComputePositionConfig, Placement, Strategy } from '@floating-ui/dom';
+interface UseFloating extends Pick<ComputePositionConfig, 'placement' | 'strategy' | 'middleware'> {
+}
+export declare const useFloating: ({ placement, strategy, middleware, }: UseFloating) => {
+    setReference: (el?: Element) => void;
+    setFloating: (el?: Element) => void;
+    styles: {
+        left: string;
+        top: string;
+    } | {
+        left?: undefined;
+        top?: undefined;
+    };
+};
+export type { Placement, Strategy };

package/dist/use-floating.js

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useMemo, useState } from '@pionjs/pion';
+import { autoUpdate, computePosition, flip, shift, } from '@floating-ui/dom';
+const defaultMiddleware = [
+    flip({
+        fallbackAxisSideDirection: 'start',
+        crossAxis: false,
+    }),
+    shift(),
+];
+export const useFloating = ({ placement = 'bottom-start', strategy, middleware = defaultMiddleware, }) => {
+    const [[reference, floating], setRefs] = useState([]);
+    const [position, setPosition] = useState();
+    useEffect(() => {
+        if (!reference || !(floating instanceof HTMLElement)) {
+            setPosition(undefined);
+            return;
+        }
+        return autoUpdate(reference, floating, () => computePosition(reference, floating, {
+            placement,
+            strategy,
+            middleware,
+        }).then(setPosition));
+    }, [reference, floating, placement, strategy, middleware]);
+    return {
+        setReference: useCallback((el) => setRefs(([, _]) => [el, _]), []),
+        setFloating: useCallback((el) => setRefs(([_]) => [_, el]), []),
+        styles: useMemo(() => position ? { left: `${position.x}px`, top: `${position.y}px` } : {}, [position?.x, position?.y]),
+    };
+};

package/dist/use-position.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="../types/position.d.ts" />
 import type { Placement } from 'position.js';
 export declare const defaultPlacement: readonly ["bottom-left", "bottom-right", "bottom", "top-left", "top-right", "top"];
 export { Placement };

package/package.json

@@ -1,102 +1,109 @@
 {
-	"name": "@neovici/cosmoz-dropdown",
-	"version": "4.4.2",
-	"description": "A simple dropdown web component",
-	"keywords": [
-		"lit-html",
-		"web-components"
-	],
-	"homepage": "https://github.com/neovici/cosmoz-dropdown#readme",
-	"bugs": {
-		"url": "https://github.com/neovici/cosmoz-dropdown/issues"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/neovici/cosmoz-dropdown.git"
-	},
-	"license": "Apache-2.0",
-	"author": "",
-	"main": "dist/index.js",
-	"directories": {
-		"test": "test"
-	},
-	"scripts": {
-		"lint": "tsc && eslint --cache .",
-		"build": "tsc -p tsconfig.build.json",
-		"start": "wds",
-		"test": "wtr --coverage",
-		"test:watch": "wtr --watch",
-		"storybook:start": "storybook dev -p 8000",
-		"storybook:build": "storybook build",
-		"storybook:deploy": "storybook-to-ghpages",
-		"storybook:preview": "npm run storybook:build && http-server -d ./storybook-static/",
-		"prepare": "husky install"
-	},
-	"release": {
-		"plugins": [
-			"@semantic-release/commit-analyzer",
-			"@semantic-release/release-notes-generator",
-			"@semantic-release/changelog",
-			"@semantic-release/github",
-			"@semantic-release/npm",
-			"@semantic-release/git"
-		],
-		"branch": "master",
-		"preset": "conventionalcommits"
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"files": [
-		"dist/",
-		"types"
-	],
-	"commitlint": {
-		"extends": [
-			"@commitlint/config-conventional"
-		],
-		"rules": {
-			"body-max-line-length": [
-				1,
-				"always",
-				100
-			]
-		}
-	},
-	"exports": {
-		".": "./dist/index.js",
-		"./use-focus": "./dist/use-focus.js",
-		"./use-position": "./dist/use-position.js",
-		"./src/use-focus.js": "./dist/use-focus.js",
-		"./src/use-position.js": "./dist/use-position.js"
-	},
-	"dependencies": {
-		"@neovici/cosmoz-utils": "^6.8.1",
-		"@pionjs/pion": "^2.5.2",
-		"lit-html": "^3.1.2",
-		"position.js": "^1.1.0"
-	},
-	"devDependencies": {
-		"@commitlint/cli": "^19.2.1",
-		"@commitlint/config-conventional": "^19.1.0",
-		"@neovici/cfg": "^1.51.0",
-		"@open-wc/testing": "^4.0.0",
-		"@semantic-release/changelog": "^6.0.0",
-		"@semantic-release/git": "^10.0.0",
-		"@storybook/addon-essentials": "^7.0.0",
-		"@storybook/addon-links": "^7.0.0",
-		"@storybook/storybook-deployer": "^2.8.5",
-		"@storybook/web-components": "7.6.17",
-		"@types/mocha": "^10.0.6",
-		"@web/storybook-builder": "^0.1.9",
-		"@web/storybook-framework-web-components": "^0.1.1",
-		"esbuild": "^0.20.2",
-		"http-server": "^14.1.1",
-		"husky": "^9.0.11",
-		"rollup-plugin-esbuild": "^6.1.1",
-		"semantic-release": "^23.0.7",
-		"sinon": "^17.0.0",
-		"storybook": "^7.0.0",
-		"typescript": "^5.4.3"
-	}
+  "name": "@neovici/cosmoz-dropdown",
+  "version": "5.1.0",
+  "description": "A simple dropdown web component",
+  "keywords": [
+    "lit-html",
+    "web-components"
+  ],
+  "homepage": "https://github.com/neovici/cosmoz-dropdown#readme",
+  "bugs": {
+    "url": "https://github.com/neovici/cosmoz-dropdown/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/neovici/cosmoz-dropdown.git"
+  },
+  "license": "Apache-2.0",
+  "author": "",
+  "main": "dist/index.js",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "lint": "tsc && eslint --cache .",
+    "build": "tsc -p tsconfig.build.json",
+    "start": "wds",
+    "test": "wtr --coverage",
+    "test:watch": "wtr --watch",
+    "storybook:start": "storybook dev -p 8000",
+    "storybook:build": "storybook build",
+    "storybook:deploy": "storybook-to-ghpages",
+    "storybook:preview": "npm run storybook:build && http-server -d ./storybook-static/",
+    "prepare": "husky"
+  },
+  "release": {
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/changelog",
+      "@semantic-release/github",
+      "@semantic-release/npm",
+      "@semantic-release/git"
+    ],
+    "branch": "master",
+    "preset": "conventionalcommits"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/",
+    "types"
+  ],
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ],
+    "rules": {
+      "body-max-line-length": [
+        1,
+        "always",
+        100
+      ]
+    }
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./use-focus": "./dist/use-focus.js",
+    "./use-position": "./dist/use-position.js",
+    "./use-floating": "./dist/use-floating.js",
+    "./connectable": "./dist/connectable.js",
+    "./src/use-focus.js": "./dist/use-focus.js",
+    "./src/use-position.js": "./dist/use-position.js"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.12",
+    "@neovici/cosmoz-utils": "^6.8.1",
+    "@pionjs/pion": "^2.5.2",
+    "lit-html": "^3.1.2",
+    "position.js": "^1.1.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@neovici/cfg": "^1.51.0",
+    "@open-wc/testing": "^4.0.0",
+    "@semantic-release/changelog": "^6.0.0",
+    "@semantic-release/git": "^10.0.0",
+    "@storybook/addon-essentials": "^7.0.0",
+    "@storybook/addon-links": "^7.0.0",
+    "@storybook/storybook-deployer": "^2.8.5",
+    "@storybook/web-components": "7.6.17",
+    "@types/mocha": "^10.0.6",
+    "@types/node": "^22.10.2",
+    "@web/storybook-builder": "^0.1.9",
+    "@web/storybook-framework-web-components": "^0.1.1",
+    "esbuild": "^0.24.0",
+    "http-server": "^14.1.1",
+    "husky": "^9.0.11",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "semantic-release": "^24.0.0",
+    "sinon": "^19.0.0",
+    "storybook": "^7.0.0",
+    "typescript": "^5.4.3"
+  },
+  "overrides": {
+    "conventional-changelog-conventionalcommits": ">= 8.0.0"
+  }
 }