@nectary/components 0.36.0 → 0.37.0

package/link/index.js

@@ -8,8 +8,9 @@ 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 '../icons/open-in-new';
+import '../icons/arrow-forward';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{display:inline;outline:0}a{font:var(--sinch-font-body);font-size:inherit;line-height:inherit;color:var(--sinch-color-text-link);fill:var(--sinch-color-text-link);--sinch-size-icon:1em}#icon{display:none;margin-left:.2em;vertical-align:-.25em}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;fill:var(--sinch-color-tropical-200)}:host([external]:not([external=false])) #icon{display:inline-block}</style><a><span id="content"></span><sinch-icon-open-in-new id="icon"></sinch-icon-open-in-new></a>';
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-font-text-m);font-size:inherit;line-height:inherit;color:var(--sinch-color-tropical-500);border-radius:.5em;--sinch-size-icon:1em;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);--sinch-color-icon:var(--sinch-color-tropical-600)}a:focus-visible{outline:2px solid var(--sinch-color-aqua-400);outline-offset:2px}@supports not selector(:focus-visible){a:focus{outline:2px solid var(--sinch-color-aqua-400);outline-offset:2px}}#external-icon{display:none;margin-right:.2em;vertical-align:-.2em}#standalone-icon{display:none}:host([external]:not([external=false])) #external-icon{display:inline-block}:host([standalone]:not([standalone=false])){display:block}:host([standalone]:not([standalone=false])) a{display:block;font:var(--sinch-font-text-m);font-weight:var(--sinch-font-weight-emphasized);text-decoration:none;border-radius:var(--sinch-shape-radius-m);width:fit-content;--sinch-size-icon:24px}:host([standalone]:not([standalone=false])) #external-icon{margin-right:8px;vertical-align:-7px}:host([standalone]:not([standalone=false]):is([external=false],:not([external]))) #standalone-icon{display:inline-block;vertical-align:-7px;margin-left:8px}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-200)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon-open-in-new id="external-icon"></sinch-icon-open-in-new><span id="content"></span><sinch-icon-arrow-forward id="standalone-icon"></sinch-icon-arrow-forward></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), _onAnchorClick = new WeakMap(), _onAnchorFocus = new WeakMap(), _onAnchorBlur = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), _onClickReactHandler = new WeakMap(), class extends NectaryElement {
@@ -81,6 +82,8 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
   }
 
   connectedCallback() {
+    this.setAttribute('role', 'link');
+
     _classPrivateFieldGet(this, _$anchor).addEventListener('click', _classPrivateFieldGet(this, _onAnchorClick));
 
     _classPrivateFieldGet(this, _$anchor).addEventListener('focus', _classPrivateFieldGet(this, _onAnchorFocus));
@@ -136,6 +139,14 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
     return getBooleanAttribute(this, 'external');
   }
 
+  set standalone(isstandalone) {
+    updateBooleanAttribute(this, 'standalone', isstandalone);
+  }
+
+  get standalone() {
+    return getBooleanAttribute(this, 'standalone');
+  }
+
   set preventDefault(isPrevented) {
     updateBooleanAttribute(this, 'preventdefault', isPrevented);
   }
@@ -145,10 +156,14 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
   }
 
   static get observedAttributes() {
-    return ['text', 'href', 'external', 'disabled'];
+    return ['text', 'href', 'external'];
   }
 
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'text':
         {
@@ -156,12 +171,6 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
           break;
         }
 
-      case 'disabled':
-        {
-          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
-          break;
-        }
-
       case 'href':
         {
           updateAttribute(_classPrivateFieldGet(this, _$anchor), 'href', newVal);
@@ -170,9 +179,7 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
 
       case 'external':
         {
-          const isExternal = isAttrTrue(newVal);
-          updateAttribute(_classPrivateFieldGet(this, _$anchor), 'target', isExternal ? '_blank' : null);
-          updateBooleanAttribute(this, 'external', isExternal);
+          updateAttribute(_classPrivateFieldGet(this, _$anchor), 'target', isAttrTrue(newVal) ? '_blank' : null);
           break;
         }
     }

package/link/types.d.ts

@@ -1,26 +1,55 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchLinkElement = HTMLElement & {
+    /** Text content of hyperlink */
     text: string;
+    /** URL that hyperlink point to */
     href: string;
+    /** Disabled */
     disabled: boolean;
+    /** Sets `target="_blank" and a special external icon on the left side */
     external: boolean;
+    /** Special standalone (`display: block`) mode with an arrow icon on the right side */
+    standalone: boolean;
+    /** Prevents default behaviour on hyperlink click */
     preventDefault: boolean;
+    /** Click event */
     addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
+    /** Focus event */
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Text content of hyperlink */
     setAttribute(name: 'text', value: string): void;
+    /** URL that hyperlink point to */
     setAttribute(name: 'href', value: string): void;
+    /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Sets `target="_blank" and a special external icon on the left side */
     setAttribute(name: 'external', value: ''): void;
+    /** Special standalone (`display: block`) mode with an arrow icon on the right side */
+    setAttribute(name: 'standalone', value: ''): void;
+    /** Prevents default behaviour on hyperlink click */
     setAttribute(name: 'preventdefault', value: ''): void;
 };
 export declare type TSinchLinkReact = TSinchElementReact<TSinchLinkElement> & {
+    /** Text content of hyperlink */
     text: string;
+    /** URL that hyperlink point to */
     href: string;
+    /** Disabled */
     disabled?: boolean;
+    /** Sets `target="_blank" and a special external icon on the left side */
     external?: boolean;
+    /** Special standalone (`display: block`) mode with an arrow icon on the right side */
+    standalone?: boolean;
+    /** Prevents default behaviour on hyperlink click */
     preventDefault?: boolean;
+    /** Label that is used for a11y – might be different from `text` */
+    'aria-label': string;
+    /** Click even handler */
     'on-click'?: (e: CustomEvent<void>) => void;
+    /** Focus even handler */
     'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur even handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "files": [
     "theme.css",
     "**/*/*.js",
@@ -11,7 +11,7 @@
     "colors.json"
   ],
   "scripts": {
-    "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc"
+    "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.0",

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, _resizeThrottle, _prevOverflowValue, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _updateOrientationModal, _onBackdropMouseDown, _onCancel, _onCloseReactHandler, _onTargetKeydown, _dispatchCloseEvent;
+var _$target, _$dialog, _isConnected, _resizeThrottle, _originalOverflowValue, _$targetSlot, _$targetOpenSlot, _$targetOpenWrapper, _targetActiveElement, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _onBackdropMouseDown, _onCancel, _onCloseReactHandler, _dispatchCloseEvent, _captureActiveElement, _stopPropagation;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -13,12 +13,12 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import dialogPolyfill from 'dialog-polyfill';
 import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, 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-popover-shape-radius,var(--sinch-shape-radius-l));contain:content;padding:0;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1}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>';
+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;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}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}#content{position:relative;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-popover-shape-radius,var(--sinch-shape-radius-l));outline:0}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content" tabindex="-1"><slot name="content"></slot></div></dialog></div>';
 import { orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 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(), _updateOrientationModal = new WeakMap(), _onBackdropMouseDown = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _onTargetKeydown = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _resizeThrottle = new WeakMap(), _originalOverflowValue = new WeakMap(), _$targetSlot = new WeakMap(), _$targetOpenSlot = new WeakMap(), _$targetOpenWrapper = new WeakMap(), _targetActiveElement = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _onResize = new WeakMap(), _updateOrientation = new WeakMap(), _onBackdropMouseDown = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _captureActiveElement = new WeakMap(), _stopPropagation = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -50,52 +50,39 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _prevOverflowValue, {
+    _classPrivateFieldInitSpec(this, _originalOverflowValue, {
       writable: true,
       value: ''
     });
 
-    _classPrivateFieldInitSpec(this, _onResize, {
+    _classPrivateFieldInitSpec(this, _$targetSlot, {
       writable: true,
-      value: () => {
-        _classPrivateFieldGet(this, _resizeThrottle).fn();
-      }
+      value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _updateOrientation, {
+    _classPrivateFieldInitSpec(this, _$targetOpenSlot, {
       writable: true,
-      value: () => {
-        _classPrivateFieldGet(this, _$dialog).style.width = 'max-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 = orient === 'top' || orient === 'bottom';
-        const resultWidth = shouldExpandWidthToTarget ? Math.max(modalRect.width, targetRect.width) : modalRect.width;
-
-        if (orient === 'bottom-left' || orient === 'top-left') {
-          leftPos = targetRect.width - resultWidth;
-        }
+      value: void 0
+    });
 
-        if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom') {
-          topPos = targetRect.height + POPOVER_OFFSET;
-        }
+    _classPrivateFieldInitSpec(this, _$targetOpenWrapper, {
+      writable: true,
+      value: void 0
+    });
 
-        if (orient === 'top-left' || orient === 'top-right' || orient === 'top') {
-          topPos = -(modalRect.height + POPOVER_OFFSET);
-        }
+    _classPrivateFieldInitSpec(this, _targetActiveElement, {
+      writable: true,
+      value: null
+    });
 
-        _classPrivateFieldGet(this, _$dialog).style.left = `${leftPos}px`;
-        _classPrivateFieldGet(this, _$dialog).style.top = `${topPos}px`;
-        _classPrivateFieldGet(this, _$dialog).style.width = `${resultWidth}px`;
+    _classPrivateFieldInitSpec(this, _onResize, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _resizeThrottle).fn();
       }
     });
 
-    _classPrivateFieldInitSpec(this, _updateOrientationModal, {
+    _classPrivateFieldInitSpec(this, _updateOrientation, {
       writable: true,
       value: () => {
         _classPrivateFieldGet(this, _$dialog).style.width = 'max-content';
@@ -129,6 +116,13 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
         _classPrivateFieldGet(this, _$dialog).style.left = `${leftPos}px`;
         _classPrivateFieldGet(this, _$dialog).style.top = `${topPos}px`;
         _classPrivateFieldGet(this, _$dialog).style.width = `${resultWidth}px`;
+
+        if (!this.modal) {
+          const targetLeftPos = targetRect.left - leftPos;
+          const targetTopPos = targetRect.top - topPos;
+          _classPrivateFieldGet(this, _$targetOpenWrapper).style.left = `${targetLeftPos}px`;
+          _classPrivateFieldGet(this, _$targetOpenWrapper).style.top = `${targetTopPos}px`;
+        }
       }
     });
 
@@ -165,19 +159,19 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onTargetKeydown, {
+    _classPrivateFieldInitSpec(this, _captureActiveElement, {
       writable: true,
       value: e => {
-        switch (e.key) {
-          case 'Escape':
-            {
-              e.preventDefault();
+        e.stopPropagation();
 
-              _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+        _classPrivateFieldSet(this, _targetActiveElement, e.target);
+      }
+    });
 
-              break;
-            }
-        }
+    _classPrivateFieldInitSpec(this, _stopPropagation, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
       }
     });
 
@@ -188,11 +182,19 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldSet(this, _$dialog, shadowRoot.querySelector('#dialog'));
 
+    _classPrivateFieldSet(this, _$targetSlot, shadowRoot.querySelector('slot[name="target"]'));
+
+    _classPrivateFieldSet(this, _$targetOpenSlot, shadowRoot.querySelector('slot[name="target-open"]'));
+
+    _classPrivateFieldSet(this, _$targetOpenWrapper, shadowRoot.querySelector('#target-open'));
+
     _classPrivateFieldSet(this, _isConnected, false);
 
-    _classPrivateFieldSet(this, _resizeThrottle, throttleAnimationFrame(_classPrivateFieldGet(this, _updateOrientationModal)));
+    _classPrivateFieldSet(this, _resizeThrottle, throttleAnimationFrame(_classPrivateFieldGet(this, _updateOrientation)));
 
     dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
+
+    dialogPolyfill.dm.handleFocus_ = function () {};
   }
 
   connectedCallback() {
@@ -278,11 +280,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
       case 'orientation':
         {
           if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-            if (this.modal) {
-              _classPrivateFieldGet(this, _updateOrientationModal).call(this);
-            } else {
-              _classPrivateFieldGet(this, _updateOrientation).call(this);
-            }
+            _classPrivateFieldGet(this, _updateOrientation).call(this);
           }
 
           break;
@@ -306,29 +304,50 @@ function _onExpand2() {
     return;
   }
 
-  if (this.modal) {
-    _classPrivateFieldGet(this, _$dialog).style.position = 'fixed';
+  const isNonModal = !this.modal;
+
+  _classPrivateFieldGet(this, _$targetSlot).addEventListener('blur', _classPrivateFieldGet(this, _stopPropagation), true);
+
+  if (isNonModal) {
+    _classPrivateFieldGet(this, _$targetOpenSlot).addEventListener('blur', _classPrivateFieldGet(this, _captureActiveElement), true);
+
+    const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
 
-    _classPrivateFieldGet(this, _$dialog).showModal();
+    const widthPx = `${targetRect.width}px`;
+    const heightPx = `${targetRect.height}px`;
+    _classPrivateFieldGet(this, _$target).style.width = widthPx;
+    _classPrivateFieldGet(this, _$target).style.height = heightPx;
+    _classPrivateFieldGet(this, _$targetOpenWrapper).style.width = widthPx;
+    _classPrivateFieldGet(this, _$targetOpenWrapper).style.height = heightPx;
+    _classPrivateFieldGet(this, _$targetSlot).assignedElements()[0]?.setAttribute('slot', 'target-open');
+  }
+
+  _classPrivateFieldGet(this, _$dialog).showModal();
 
-    _classPrivateFieldGet(this, _updateOrientationModal).call(this);
+  _classPrivateFieldGet(this, _updateOrientation).call(this);
 
-    _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
 
-    _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
+  _classPrivateFieldGet(this, _$targetSlot).removeEventListener('blur', _classPrivateFieldGet(this, _stopPropagation), true);
 
-    document.body.style.overflow = 'hidden';
-    window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
-  } else {
-    this.addEventListener('keydown', _classPrivateFieldGet(this, _onTargetKeydown));
-    _classPrivateFieldGet(this, _$dialog).style.position = 'absolute';
+  if (isNonModal) {
+    _classPrivateFieldGet(this, _$targetOpenSlot).removeEventListener('blur', _classPrivateFieldGet(this, _captureActiveElement), true);
 
-    _classPrivateFieldGet(this, _$dialog).setAttribute('open', '');
+    if (_classPrivateFieldGet(this, _targetActiveElement) !== null) {
+      requestAnimationFrame(() => {
+        _classPrivateFieldGet(this, _$targetOpenSlot).addEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
 
-    _classPrivateFieldGet(this, _updateOrientation).call(this);
+        _classPrivateFieldGet(this, _targetActiveElement)?.focus();
 
-    _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+        _classPrivateFieldGet(this, _$targetOpenSlot).removeEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
+      });
+    }
   }
+
+  _classPrivateFieldSet(this, _originalOverflowValue, document.body.style.overflow);
+
+  document.body.style.overflow = 'hidden';
+  window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
 }
 
 function _onCollapse2() {
@@ -336,20 +355,33 @@ function _onCollapse2() {
     return;
   }
 
-  if (this.modal) {
-    _classPrivateFieldGet(this, _$dialog).close?.();
-  } else {
-    _classPrivateFieldGet(this, _$dialog).removeAttribute('open');
+  _classPrivateFieldGet(this, _$targetSlot).addEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
+
+  if (_classPrivateFieldGet(this, _targetActiveElement) !== null) {
+    _classPrivateFieldGet(this, _$targetOpenSlot).addEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
+
+    _classPrivateFieldGet(this, _targetActiveElement).focus();
+
+    _classPrivateFieldSet(this, _targetActiveElement, null);
+
+    _classPrivateFieldGet(this, _$targetOpenSlot).removeEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
   }
 
+  _classPrivateFieldGet(this, _$targetOpenSlot).assignedElements()[0]?.setAttribute('slot', 'target');
+  _classPrivateFieldGet(this, _$target).style.width = 'unset';
+  _classPrivateFieldGet(this, _$target).style.height = 'unset';
+
+  _classPrivateFieldGet(this, _$dialog).close();
+
   _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
 
-  document.body.style.overflow = _classPrivateFieldGet(this, _prevOverflowValue);
+  _classPrivateFieldGet(this, _$targetSlot).removeEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
+
+  document.body.style.overflow = _classPrivateFieldGet(this, _originalOverflowValue);
 
   _classPrivateFieldGet(this, _resizeThrottle).cancel();
 
   window.removeEventListener('resize', _classPrivateFieldGet(this, _onResize));
-  this.removeEventListener('keydown', _classPrivateFieldGet(this, _onTargetKeydown));
 }
 
 function _isOpen2() {

package/search/index.js

@@ -12,7 +12,7 @@ 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, 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>';
+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);background-color:var(--sinch-color-snow-100)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#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';

package/select/index.d.ts

@@ -1,4 +1,5 @@
 import '../dropdown';
+import '../icons/keyboard-arrow-down';
 import type { TSinchSelectElement, TSinchSelectReact } from './types';
 declare global {
     namespace JSX {

package/select/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$buttonContent, _$label, _$optionalText, _$additionalText, _$invalidText, _$dropdown, _$optionSlot, _$sh, _createElement, _updateButtonContent, _onValueChange, _getOptionWithValue, _onLabelClick, _onDropdownClick, _onDropdownClose, _onButtonFocus, _onButtonBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
+var _$button, _$buttonContent, _$dropdown, _$optionSlot, _$sh, _createElement, _updateButtonContent, _onValueChange, _getOptionWithValue, _onDropdownClick, _onDropdownClose, _onButtonFocus, _onButtonBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -12,11 +12,12 @@ 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 '../dropdown';
+import '../icons/keyboard-arrow-down';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);box-sizing:border-box;width:100%;height:48px;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="button"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown" modal orientation="bottom"><button slot="target" id="button"><span id="content"></span><svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span><span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#dropdown{display:block;width:100%}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);box-sizing:border-box;width:100%;height:48px;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalid]:not([invalid=false])) #button:enabled{border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([disabled]:not([disabled=false])) #button{--sinch-color-icon:var(--sinch-color-stormy-100)}</style><sinch-dropdown id="dropdown" orientation="bottom"><button slot="target" id="button"><span id="content"></span><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></button><slot name="option" slot="option"></slot></sinch-dropdown>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _$sh = new WeakMap(), _createElement = new WeakSet(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onLabelClick = new WeakMap(), _onDropdownClick = new WeakMap(), _onDropdownClose = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _$sh = new WeakMap(), _createElement = new WeakSet(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onDropdownClick = new WeakMap(), _onDropdownClose = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -36,26 +37,6 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$optionalText, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$additionalText, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$invalidText, {
-      writable: true,
-      value: void 0
-    });
-
     _classPrivateFieldInitSpec(this, _$dropdown, {
       writable: true,
       value: void 0
@@ -86,13 +67,6 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onLabelClick, {
-      writable: true,
-      value: () => {
-        this.focus();
-      }
-    });
-
     _classPrivateFieldInitSpec(this, _onDropdownClick, {
       writable: true,
       value: () => {
@@ -151,15 +125,7 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
 
     _classPrivateFieldSet(this, _$buttonContent, shadowRoot.querySelector('#content'));
 
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
-
-    _classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
-
-    _classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
-
-    _classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
-
-    _classPrivateFieldSet(this, _$dropdown, shadowRoot.querySelector('sinch-dropdown'));
+    _classPrivateFieldSet(this, _$dropdown, shadowRoot.querySelector('#dropdown'));
 
     _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
   }
@@ -178,8 +144,6 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
 
     _classPrivateFieldGet(this, _$button).addEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
 
-    _classPrivateFieldGet(this, _$label).addEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
-
     this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
     this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
     this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
@@ -196,15 +160,13 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
 
     _classPrivateFieldGet(this, _$button).removeEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
 
-    _classPrivateFieldGet(this, _$label).removeEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
-
     this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
     this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
     this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
   }
 
   static get observedAttributes() {
-    return ['value', 'label', 'placeholder', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled', 'maxvisibleitems'];
+    return ['value', 'placeholder', 'invalid', 'disabled', 'maxvisibleitems'];
   }
 
   get nodeName() {
@@ -227,36 +189,12 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
     return getAttribute(this, 'placeholder', null);
   }
 
-  set label(value) {
-    updateAttribute(this, 'label', value);
-  }
-
-  get label() {
-    return getAttribute(this, 'label', '');
-  }
-
-  set optionalText(value) {
-    updateAttribute(this, 'optionaltext', value);
-  }
-
-  get optionalText() {
-    return getAttribute(this, 'optionaltext', null);
-  }
-
-  set additionalText(value) {
-    updateAttribute(this, 'additionaltext', value);
-  }
-
-  get additionalText() {
-    return getAttribute(this, 'additionaltext', null);
-  }
-
-  set invalidText(value) {
-    updateAttribute(this, 'invalidtext', value);
+  set invalid(value) {
+    updateBooleanAttribute(this, 'invalid', value);
   }
 
-  get invalidText() {
-    return getAttribute(this, 'placeholder', null);
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
   }
 
   set disabled(isDisabled) {
@@ -303,29 +241,9 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
           break;
         }
 
-      case 'label':
-        {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
-          break;
-        }
-
-      case 'optionaltext':
-        {
-          _classPrivateFieldGet(this, _$optionalText).textContent = newVal;
-          break;
-        }
-
-      case 'additionaltext':
-        {
-          _classPrivateFieldGet(this, _$additionalText).textContent = newVal;
-          break;
-        }
-
-      case 'invalidtext':
+      case 'invalid':
         {
-          const isInvalid = newVal !== null && newVal !== '';
-          _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
-          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isAttrTrue(newVal));
           break;
         }