@nectary/components 0.29.0 → 0.30.0

package/logo/create-logo-class.d.ts

@@ -1,311 +1 @@
-export declare const createLogoClass: (templateHTML: string) => {
-    new (): {
-        $svg: SVGElement;
-        size: number;
-        inverted: boolean;
-        connectedCallback(): void;
-        attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
-        attachShadow(options?: Partial<ShadowRootInit> | undefined): ShadowRoot;
-        accessKey: string;
-        readonly accessKeyLabel: string;
-        autocapitalize: string;
-        dir: string;
-        draggable: boolean;
-        hidden: boolean;
-        innerText: string;
-        lang: string;
-        readonly offsetHeight: number;
-        readonly offsetLeft: number;
-        readonly offsetParent: Element | null;
-        readonly offsetTop: number;
-        readonly offsetWidth: number;
-        outerText: string;
-        spellcheck: boolean;
-        title: string;
-        translate: boolean;
-        attachInternals(): ElementInternals;
-        click(): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-        removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        readonly attributes: NamedNodeMap;
-        readonly classList: DOMTokenList;
-        className: string;
-        readonly clientHeight: number;
-        readonly clientLeft: number;
-        readonly clientTop: number;
-        readonly clientWidth: number;
-        id: 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;
-        closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
-        closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
-        closest<E extends Element = Element>(selectors: string): E | null;
-        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_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
-        getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
-        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(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
-        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, text: 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 | undefined): Promise<void>;
-        requestPointerLock(): void;
-        scroll(options?: ScrollToOptions | undefined): void;
-        scroll(x: number, y: number): void;
-        scrollBy(options?: ScrollToOptions | undefined): void;
-        scrollBy(x: number, y: number): void;
-        scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
-        scrollTo(options?: ScrollToOptions | undefined): 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;
-        setPointerCapture(pointerId: number): void;
-        toggleAttribute(qualifiedName: string, force?: boolean | undefined): 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 | undefined): Node;
-        compareDocumentPosition(other: Node): number;
-        contains(other: Node | null): boolean;
-        getRootNode(options?: GetRootNodeOptions | undefined): Node;
-        hasChildNodes(): boolean;
-        insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
-        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_2 extends Node>(child: T_2): T_2;
-        replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
-        readonly ATTRIBUTE_NODE: number;
-        readonly CDATA_SECTION_NODE: number;
-        readonly COMMENT_NODE: number;
-        readonly DOCUMENT_FRAGMENT_NODE: number;
-        readonly DOCUMENT_NODE: number;
-        readonly DOCUMENT_POSITION_CONTAINED_BY: number;
-        readonly DOCUMENT_POSITION_CONTAINS: number;
-        readonly DOCUMENT_POSITION_DISCONNECTED: number;
-        readonly DOCUMENT_POSITION_FOLLOWING: number;
-        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
-        readonly DOCUMENT_POSITION_PRECEDING: number;
-        readonly DOCUMENT_TYPE_NODE: number;
-        readonly ELEMENT_NODE: number;
-        readonly ENTITY_NODE: number;
-        readonly ENTITY_REFERENCE_NODE: number;
-        readonly NOTATION_NODE: number;
-        readonly PROCESSING_INSTRUCTION_NODE: number;
-        readonly TEXT_NODE: number;
-        dispatchEvent(event: Event): boolean;
-        ariaAtomic: string | null;
-        ariaAutoComplete: string | null;
-        ariaBusy: string | null;
-        ariaChecked: string | null;
-        ariaColCount: string | null;
-        ariaColIndex: string | null;
-        ariaColSpan: string | null;
-        ariaCurrent: string | null;
-        ariaDisabled: string | null;
-        ariaExpanded: string | null;
-        ariaHasPopup: string | null;
-        ariaHidden: 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;
-        ariaRowSpan: string | null;
-        ariaSelected: string | null;
-        ariaSetSize: string | null;
-        ariaSort: string | null;
-        ariaValueMax: string | null;
-        ariaValueMin: string | null;
-        ariaValueNow: string | null;
-        ariaValueText: string | null;
-        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
-        getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
-        after(...nodes: (string | Node)[]): void;
-        before(...nodes: (string | Node)[]): void;
-        remove(): void;
-        replaceWith(...nodes: (string | Node)[]): void;
-        innerHTML: string;
-        readonly nextElementSibling: Element | null;
-        readonly previousElementSibling: Element | null;
-        readonly childElementCount: number;
-        readonly children: HTMLCollection;
-        readonly firstElementChild: Element | null;
-        readonly lastElementChild: Element | null;
-        append(...nodes: (string | Node)[]): void;
-        prepend(...nodes: (string | Node)[]): void;
-        querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
-        querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
-        querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
-        querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
-        querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
-        querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
-        replaceChildren(...nodes: (string | Node)[]): void;
-        readonly assignedSlot: HTMLSlotElement | null;
-        oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-        oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-        onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-        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;
-        onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => 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;
-        oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        oncuechange: ((this: GlobalEventHandlers, ev: Event) => 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;
-        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<EventTarget>) => 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;
-        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 | undefined;
-        tabIndex: number;
-        blur(): void;
-        focus(options?: FocusOptions | undefined): void;
-    };
-    readonly observedAttributes: string[];
-};
+export declare const createLogoClass: (templateHTML: string) => CustomElementConstructor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "files": [
     "theme.css",
     "**/*/*.js",

package/popover/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$target, _$dialog, _isConnected, _onExpand, _onCollapse, _isOpen, _updateOrientation, _onBackdropClick, _onCancel, _onCloseReactHandler, _dispatchCloseEvent;
+var _$target, _$dialog, _isConnected, _resizeThrottle, _prevOverflowValue, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _onBackdropClick, _onCancel, _onCloseReactHandler, _dispatchCloseEvent;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -12,20 +12,18 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
 import dialogPolyfill from 'dialog-polyfill';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, getCssVar } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;left:0;right:0;margin:auto;outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 6px rgba(0,0,0,.15);border:1px solid var(--sinch-color-snow-500);border-radius:4px;contain:content;padding:0;box-sizing:border-box}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#target{display:flex;flex-direction:column}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, getCssVar, throttleAnimationFrame } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;top:0;left:0;margin:0;outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-s);contain:content;padding:0;box-sizing:border-box;max-width:unset;max-height:unset}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#target{display:flex;flex-direction:column}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
 import { orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-const POPOVER_VERTICAL_OFFSET = 4;
-defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _updateOrientation = new WeakSet(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends NectaryElement {
+const POPOVER_OFFSET = 4;
+defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _resizeThrottle = new WeakMap(), _prevOverflowValue = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _onResize = new WeakMap(), _updateOrientation = new WeakMap(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
     _classPrivateMethodInitSpec(this, _dispatchCloseEvent);
 
-    _classPrivateMethodInitSpec(this, _updateOrientation);
-
     _classPrivateMethodInitSpec(this, _isOpen);
 
     _classPrivateMethodInitSpec(this, _onCollapse);
@@ -44,7 +42,62 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldInitSpec(this, _isConnected, {
       writable: true,
-      value: false
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _resizeThrottle, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _prevOverflowValue, {
+      writable: true,
+      value: ''
+    });
+
+    _classPrivateFieldInitSpec(this, _onResize, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _resizeThrottle).fn();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _updateOrientation, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$dialog).style.width = 'fit-content';
+
+        const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
+
+        const modalRect = _classPrivateFieldGet(this, _$dialog).getBoundingClientRect();
+
+        let leftPos = 0;
+        let topPos = 0;
+        const orient = this.orientation;
+        const shouldExpandWidthToTarget = getCssVar(this, '--sinch-popover-expand-width') !== null;
+        const largestWidth = Math.max(modalRect.width, targetRect.width);
+        const resultWidth = shouldExpandWidthToTarget ? largestWidth : modalRect.width;
+
+        if (orient === 'bottom-right' || orient === 'top-right') {
+          leftPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.x, window.innerWidth - resultWidth - POPOVER_OFFSET));
+        }
+
+        if (orient === 'bottom-left' || orient === 'top-left') {
+          leftPos = Math.max(POPOVER_OFFSET, targetRect.right - resultWidth);
+        }
+
+        if (orient === 'bottom-left' || orient === 'bottom-right') {
+          topPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.bottom + POPOVER_OFFSET, window.innerHeight - modalRect.height - POPOVER_OFFSET));
+        }
+
+        if (orient === 'top-left' || orient === 'top-right') {
+          topPos = Math.max(POPOVER_OFFSET, targetRect.top - POPOVER_OFFSET - modalRect.height);
+        }
+
+        _classPrivateFieldGet(this, _$dialog).style.left = `${leftPos}px`;
+        _classPrivateFieldGet(this, _$dialog).style.top = `${topPos}px`;
+        _classPrivateFieldGet(this, _$dialog).style.width = `${resultWidth}px`;
+      }
     });
 
     _classPrivateFieldInitSpec(this, _onBackdropClick, {
@@ -58,6 +111,8 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
         const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
 
         if (!isInside) {
+          e.stopPropagation();
+
           _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
         }
       }
@@ -86,6 +141,10 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldSet(this, _$dialog, shadowRoot.querySelector('#dialog'));
 
+    _classPrivateFieldSet(this, _isConnected, false);
+
+    _classPrivateFieldSet(this, _resizeThrottle, throttleAnimationFrame(_classPrivateFieldGet(this, _updateOrientation)));
+
     dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
   }
 
@@ -159,7 +218,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
       case 'orientation':
         {
           if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-            _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
+            _classPrivateFieldGet(this, _updateOrientation).call(this);
           }
 
           break;
@@ -178,9 +237,12 @@ function _onExpand2() {
 
   _classPrivateFieldGet(this, _$dialog).showModal();
 
-  _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
+  _classPrivateFieldGet(this, _updateOrientation).call(this);
+
+  _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
 
   document.body.style.overflow = 'hidden';
+  window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
 }
 
 function _onCollapse2() {
@@ -191,49 +253,16 @@ function _onCollapse2() {
   _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
 
   _classPrivateFieldGet(this, _$dialog).close?.();
-  document.body.style.overflow = '';
+  document.body.style.overflow = _classPrivateFieldGet(this, _prevOverflowValue);
+  window.removeEventListener('resize', _classPrivateFieldGet(this, _onResize));
+
+  _classPrivateFieldGet(this, _resizeThrottle).cancel();
 }
 
 function _isOpen2() {
   return _classPrivateFieldGet(this, _isConnected) && getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open');
 }
 
-function _updateOrientation2() {
-  _classPrivateFieldGet(this, _$dialog).style.transform = 'initial';
-  _classPrivateFieldGet(this, _$dialog).style.width = 'fit-content';
-
-  const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
-
-  const modalRect = _classPrivateFieldGet(this, _$dialog).getBoundingClientRect();
-
-  let leftOffset = 0;
-  let topOffset = 0;
-  const orient = this.orientation;
-  const shouldExpandWidthToTarget = getCssVar(this, '--sinch-popover-expand-width') !== null;
-  const largestWidth = Math.max(modalRect.width, targetRect.width);
-  const widthDiff = shouldExpandWidthToTarget ? Math.max(largestWidth - modalRect.width, 0) * 0.5 : 0;
-  const resultWidth = shouldExpandWidthToTarget ? largestWidth : modalRect.width;
-
-  if (orient === 'bottom-right' || orient === 'top-right') {
-    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, targetRect.x - modalRect.x) + widthDiff);
-  }
-
-  if (orient === 'bottom-left' || orient === 'top-left') {
-    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, targetRect.x + targetRect.width - modalRect.x - modalRect.width) - widthDiff);
-  }
-
-  if (orient === 'bottom-left' || orient === 'bottom-right') {
-    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, targetRect.y + targetRect.height - modalRect.y + POPOVER_VERTICAL_OFFSET));
-  }
-
-  if (orient === 'top-left' || orient === 'top-right') {
-    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, targetRect.y - modalRect.y - modalRect.height - POPOVER_VERTICAL_OFFSET));
-  }
-
-  _classPrivateFieldGet(this, _$dialog).style.transform = `translate(${leftOffset}px, ${topOffset}px)`;
-  _classPrivateFieldGet(this, _$dialog).style.width = `${resultWidth}px`;
-}
-
 function _dispatchCloseEvent2() {
   this.dispatchEvent(new CustomEvent('close', {
     bubbles: true

package/popover/types.d.ts

@@ -1,7 +1,6 @@
 import type { TRect, TSinchElementReact } from '../types';
-import type { orientationValues } from './utils';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchPopoverOrientation = typeof orientationValues[number];
+export declare type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export declare type TSinchPopoverElement = HTMLElement & {
     open: boolean;
     orientation: TSinchPopoverOrientation;

package/popover/utils.d.ts

@@ -1 +1,2 @@
-export declare const orientationValues: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
+import type { TSinchPopoverOrientation } from './types';
+export declare const orientationValues: readonly TSinchPopoverOrientation[];

package/radio-option/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{--sinch-color-radio-outer-circle:var(--sinch-color-transparent);--sinch-color-radio-background:var(--sinch-color-snow-100);--sinch-color-radio-border:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-checked:var(--sinch-color-transparent);--sinch-color-radio-border-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-hover:var(--sinch-color-snow-500);--sinch-color-radio-border-hover:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-radio-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-focus:var(--sinch-color-snow-800);--sinch-color-radio-border-focus:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-radio-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-active:var(--sinch-color-stormy-100);--sinch-color-radio-border-active:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-radio-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-disabled:var(--sinch-color-transparent);--sinch-color-radio-border-disabled:var(--sinch-color-stormy-100);--sinch-color-radio-outer-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-radio-border-disabled-checked:var(--sinch-color-stormy-100);display:block;outline:0}#wrapper{display:flex;height:32px;box-sizing:border-box;width:100%}#input{all:initial;display:block;width:32px;height:32px;cursor:pointer}#input:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#input::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-outer-circle);transition:background-color .1s linear}#input::after{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-background);box-shadow:0 0 0 2px var(--sinch-color-radio-border) inset;transition:background-color .1s linear}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-color-radio-border);pointer-events:none}@media (prefers-reduced-motion){#icon-knob,#input::after,#input::before{transition:none}}#label{align-self:center;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}#input:checked::before{background-color:var(--sinch-color-radio-outer-circle-checked)}#input:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-checked) inset}#input:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-checked)}#input:focus::before{background-color:var(--sinch-color-radio-outer-circle-focus)}#input:focus::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-focus) inset}#input:focus~#icon-knob{background-color:var(--sinch-color-radio-border-focus)}#input:hover::before{background-color:var(--sinch-color-radio-outer-circle-hover)}#input:hover::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-hover) inset}#input:hover~#icon-knob{background-color:var(--sinch-color-radio-border-hover)}#input:active::before{background-color:var(--sinch-color-radio-outer-circle-active)}#input:active::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-active) inset}#input:active~#icon-knob{background-color:var(--sinch-color-radio-border-active)}#input:disabled::before{background-color:var(--sinch-color-radio-outer-circle-disabled)}#input:disabled::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-disabled) inset}#input:disabled~#icon-knob{background-color:var(--sinch-color-radio-border-disabled)}#input:focus:checked::before{background-color:var(--sinch-color-radio-outer-circle-focus-checked)}#input:focus:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-focus-checked) inset}#input:focus:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-focus-checked)}#input:hover:checked::before{background-color:var(--sinch-color-radio-outer-circle-hover-checked)}#input:hover:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-hover-checked) inset}#input:hover:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-hover-checked)}#input:active:checked::before{background-color:var(--sinch-color-radio-outer-circle-active-checked)}#input:active:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-active-checked) inset}#input:active:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-active-checked)}#input:disabled:checked::before{background-color:var(--sinch-color-radio-outer-circle-disabled-checked)}#input:disabled:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-disabled-checked) inset}#input:disabled:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="input" type="radio"/><div id="icon-knob"></div></div><label for="input" id="label"></label></div>';
+const templateHTML = '<style>:host{--sinch-color-radio-outer-circle:var(--sinch-color-transparent);--sinch-color-radio-background:var(--sinch-color-snow-100);--sinch-color-radio-border:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-checked:var(--sinch-color-transparent);--sinch-color-radio-border-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-hover:var(--sinch-color-snow-500);--sinch-color-radio-border-hover:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-radio-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-focus:var(--sinch-color-snow-800);--sinch-color-radio-border-focus:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-radio-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-active:var(--sinch-color-stormy-100);--sinch-color-radio-border-active:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-radio-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-disabled:var(--sinch-color-transparent);--sinch-color-radio-border-disabled:var(--sinch-color-stormy-100);--sinch-color-radio-outer-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-radio-border-disabled-checked:var(--sinch-color-stormy-100);display:block;outline:0}#wrapper{display:flex;height:32px;box-sizing:border-box;width:100%}#input{all:initial;display:block;width:32px;height:32px;cursor:pointer}#input:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#input::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-outer-circle);transition:background-color .1s linear}#input::after{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-background);border:2px solid var(--sinch-color-radio-border);transition:background-color .1s linear;box-sizing:border-box}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-color-radio-border);pointer-events:none}@media (prefers-reduced-motion){#icon-knob,#input::after,#input::before{transition:none}}#label{align-self:center;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}#input:checked::before{background-color:var(--sinch-color-radio-outer-circle-checked)}#input:checked::after{border-color:var(--sinch-color-radio-border-checked)}#input:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-checked)}#input:focus::before{background-color:var(--sinch-color-radio-outer-circle-focus)}#input:focus::after{border-color:var(--sinch-color-radio-border-focus)}#input:focus~#icon-knob{background-color:var(--sinch-color-radio-border-focus)}#input:hover::before{background-color:var(--sinch-color-radio-outer-circle-hover)}#input:hover::after{border-color:var(--sinch-color-radio-border-hover)}#input:hover~#icon-knob{background-color:var(--sinch-color-radio-border-hover)}#input:active::before{background-color:var(--sinch-color-radio-outer-circle-active)}#input:active::after{border-color:var(--sinch-color-radio-border-active)}#input:active~#icon-knob{background-color:var(--sinch-color-radio-border-active)}#input:disabled::before{background-color:var(--sinch-color-radio-outer-circle-disabled)}#input:disabled::after{border-color:var(--sinch-color-radio-border-disabled)}#input:disabled~#icon-knob{background-color:var(--sinch-color-radio-border-disabled)}#input:focus:checked::before{background-color:var(--sinch-color-radio-outer-circle-focus-checked)}#input:focus:checked::after{border-color:var(--sinch-color-radio-border-focus-checked)}#input:focus:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-focus-checked)}#input:hover:checked::before{background-color:var(--sinch-color-radio-outer-circle-hover-checked)}#input:hover:checked::after{border-color:var(--sinch-color-radio-border-hover-checked)}#input:hover:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-hover-checked)}#input:active:checked::before{background-color:var(--sinch-color-radio-outer-circle-active-checked)}#input:active:checked::after{border-color:var(--sinch-color-radio-border-active-checked)}#input:active:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-active-checked)}#input:disabled:checked::before{background-color:var(--sinch-color-radio-outer-circle-disabled-checked)}#input:disabled:checked::after{border-color:var(--sinch-color-radio-border-disabled-checked)}#input:disabled:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="input" type="radio"/><div id="icon-knob"></div></div><label for="input" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {

package/search/index.js

@@ -11,8 +11,8 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getRect, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);overflow-y:auto}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
 import '../icons/search';
 import '../icons/close';
 import '../icon-button';
@@ -502,7 +502,7 @@ function _getPrevOption2() {
 function _selectOption2($option) {
   for (const $op of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
     const isSelected = $op === $option;
-    $op.selected = isSelected;
+    updateBooleanAttribute($op, 'data-selected', isSelected);
 
     if (isSelected) {
       $op.scrollIntoView?.({
@@ -514,7 +514,7 @@ function _selectOption2($option) {
 
 function _findSelectedOption2() {
   for (const $option of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
-    if ($option.selected) {
+    if (getBooleanAttribute($option, 'data-selected')) {
       return $option;
     }
   }

package/search-option/index.js

@@ -7,7 +7,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:block;box-sizing:border-box;line-height:40px;padding:0 12px;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}</style><div id="wrapper"></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -35,10 +35,6 @@ defineCustomElement('sinch-search-option', (_$content = new WeakMap(), class ext
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
-
     switch (name) {
       case 'text':
         {
@@ -56,13 +52,4 @@ defineCustomElement('sinch-search-option', (_$content = new WeakMap(), class ext
     return getAttribute(this, 'text', '');
   }
 
-  set selected(isSelected) {
-    updateBooleanAttribute(this, 'data-selected', isSelected);
-    updateExplicitBooleanAttribute(this, 'aria-selected', isSelected);
-  }
-
-  get selected() {
-    return getBooleanAttribute(this, 'data-selected');
-  }
-
 }));

package/search-option/types.d.ts

@@ -1,7 +1,6 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchSearchOptionElement = HTMLElement & {
     text: string;
-    selected: boolean;
     setAttribute(name: 'text', value: string): void;
 };
 export declare type TSinchSearchOptionReact = TSinchElementReact<TSinchSearchOptionElement> & {