@nectary/components 0.35.0 → 0.36.1

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, _onTargetBlur, _onTargetFocus;
 
 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(), _onTargetBlur = new WeakMap(), _onTargetFocus = 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,23 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onTargetKeydown, {
+    _classPrivateFieldInitSpec(this, _onTargetBlur, {
       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;
-            }
-        }
+        _classPrivateFieldGet(this, _$targetOpenSlot).removeEventListener('blur', _classPrivateFieldGet(this, _onTargetBlur), true);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onTargetFocus, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        _classPrivateFieldGet(this, _$targetOpenSlot).removeEventListener('focus', _classPrivateFieldGet(this, _onTargetFocus), true);
       }
     });
 
@@ -188,11 +186,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 +284,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 +308,38 @@ function _onExpand2() {
     return;
   }
 
-  if (this.modal) {
-    _classPrivateFieldGet(this, _$dialog).style.position = 'fixed';
+  if (!this.modal) {
+    _classPrivateFieldGet(this, _$targetOpenSlot).addEventListener('blur', _classPrivateFieldGet(this, _onTargetBlur), true);
+
+    _classPrivateFieldGet(this, _$targetOpenSlot).addEventListener('focus', _classPrivateFieldGet(this, _onTargetFocus), true);
 
-    _classPrivateFieldGet(this, _$dialog).showModal();
+    const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
 
-    _classPrivateFieldGet(this, _updateOrientationModal).call(this);
+    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, _$target).setAttribute('aria-expanded', 'true');
+  _classPrivateFieldGet(this, _$dialog).showModal();
 
-    _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
+  _classPrivateFieldGet(this, _updateOrientation).call(this);
 
-    document.body.style.overflow = 'hidden';
-    window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
-  } else {
-    this.addEventListener('keydown', _classPrivateFieldGet(this, _onTargetKeydown));
-    _classPrivateFieldGet(this, _$dialog).style.position = 'absolute';
+  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
 
-    _classPrivateFieldGet(this, _$dialog).setAttribute('open', '');
+  requestAnimationFrame(() => {
+    _classPrivateFieldGet(this, _targetActiveElement)?.focus();
 
-    _classPrivateFieldGet(this, _updateOrientation).call(this);
+    _classPrivateFieldSet(this, _targetActiveElement, null);
+  });
 
-    _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
-  }
+  _classPrivateFieldSet(this, _originalOverflowValue, document.body.style.overflow);
+
+  document.body.style.overflow = 'hidden';
+  window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
 }
 
 function _onCollapse2() {
@@ -336,20 +347,19 @@ function _onCollapse2() {
     return;
   }
 
-  if (this.modal) {
-    _classPrivateFieldGet(this, _$dialog).close?.();
-  } else {
-    _classPrivateFieldGet(this, _$dialog).removeAttribute('open');
-  }
+  _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);
+  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/select/index.js

@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import '../dropdown';
 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;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" 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 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 {

package/select/types.d.ts

@@ -20,7 +20,9 @@ export declare type TSinchSelectElement = HTMLElement & {
     readonly dropdownRect: TRect;
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Focus event */
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
     /** Value that matches one of the options `value` */
     setAttribute(name: 'value', value: string): void;
@@ -62,6 +64,8 @@ export declare type TSinchSelectReact = TSinchElementReact<TSinchSelectElement>
     onChange?: (e: SyntheticEvent<TSinchSelectElement, CustomEvent<string>>) => void;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
+    /** Focus handler */
     'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/select-option/types.d.ts

@@ -1,3 +1,26 @@
-import type { TSinchDropdownTextOptionElement, TSinchDropdownTextOptionReact } from '../dropdown-text-option/types';
-export declare type TSinchSelectOptionElement = TSinchDropdownTextOptionElement;
-export declare type TSinchSelectOptionReact = TSinchDropdownTextOptionReact;
+import type { TSinchElementReact } from '../types';
+export declare type TSinchSelectOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Text */
+    text: string;
+    /** Disabled */
+    disabled: boolean;
+    readonly icon: Element | null;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchSelectOptionReact = TSinchElementReact<TSinchSelectOptionElement> & {
+    /** Value */
+    value: string;
+    /** Text */
+    text: string;
+    /** Disabled */
+    disabled?: boolean;
+    /** Label that is used for a11y */
+    'aria-label': string;
+};

package/tag/index.js

@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icons/cancel';
 import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:2px 8px;border-radius:12px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);box-sizing:border-box;--sinch-color-icon:var(--sinch-color-stormy-400);--sinch-size-icon:16px}:host([category=candy])>#wrapper{background-color:var(--sinch-color-candy-200)}:host([category=bolt])>#wrapper{background-color:var(--sinch-color-bolt-200)}:host([category=aqua])>#wrapper{background-color:var(--sinch-color-aqua-200)}:host([category=grass])>#wrapper{background-color:var(--sinch-color-grass-200)}:host([category=berry])>#wrapper{background-color:var(--sinch-color-berry-200)}:host([category=orange])>#wrapper{background-color:var(--sinch-color-orange-200)}:host([category=night])>#wrapper{background-color:var(--sinch-color-night-200)}:host([category=mud])>#wrapper{background-color:var(--sinch-color-mud-200)}:host([category=dirt])>#wrapper{background-color:var(--sinch-color-dirt-200)}:host([inverted]:not([inverted=false]))>#wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-snow-100)}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px;--sinch-size-icon:14px}#text{text-overflow:ellipsis;white-space:nowrap;overflow:auto;flex:1}</style><div id="wrapper"><slot name="icon"></slot><span id="text"></span><slot name="close"></slot></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:2px 8px;border-radius:12px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);box-sizing:border-box;--sinch-color-icon:var(--sinch-color-stormy-400);--sinch-size-icon:16px}:host([category=candy])>#wrapper{background-color:var(--sinch-color-candy-200)}:host([category=bolt])>#wrapper{background-color:var(--sinch-color-bolt-200)}:host([category=aqua])>#wrapper{background-color:var(--sinch-color-aqua-200)}:host([category=grass])>#wrapper{background-color:var(--sinch-color-grass-200)}:host([category=berry])>#wrapper{background-color:var(--sinch-color-berry-200)}:host([category=orange])>#wrapper{background-color:var(--sinch-color-orange-200)}:host([category=night])>#wrapper{background-color:var(--sinch-color-night-200)}:host([category=mud])>#wrapper{background-color:var(--sinch-color-mud-200)}:host([category=dirt])>#wrapper{background-color:var(--sinch-color-dirt-200)}:host([inverted]:not([inverted=false]))>#wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-snow-100)}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px;--sinch-size-icon:14px}#text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;flex:1}</style><div id="wrapper"><slot name="icon"></slot><span id="text"></span><slot name="close"></slot></div>';
 import { categoryValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/text/index.js

@@ -1,6 +1,6 @@
 import '../icons/cancel';
 import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue } from '../utils';
-const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m)}:host([inline]:not([inline=false])){display:inline}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}</style><slot></slot>';
+const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m)}:host([inline]:not([inline=false])){display:inline}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}</style><slot></slot>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/time-picker/index.js

@@ -18,7 +18,7 @@ import '../icons/arrow-drop-down';
 import '../segmented-control';
 import '../segmented-control-option';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-font-title-xl);line-height:48px}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-color-stormy-500)}#digit-minutes,#picker-hours{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;font:var(--sinch-font-text-s);line-height:28px;text-align:center;color:var(--sinch-color-text-default);top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-24{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-minute{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-hour-12:hover,.digit-hour-24:hover,.digit-minute:hover{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected,.digit-hour-24.selected,.digit-minute.selected{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected{font-size:16px}.digit-hour-24.selected{font-size:16px}.digit-minute.selected{font-size:16px}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-color-stormy-500)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-color-tropical-500)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0;--sinch-icon-size:24px}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-hours::before,#header-minutes::before{content:"";display:none;position:absolute;border-radius:12px;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);padding:1px;border:1px solid var(--sinch-color-aqua-400)}#header-hours-down,#header-hours-up,#header-minutes-down,#header-minutes-up{display:none;position:absolute;left:50%;transform:translateX(-50%)}#header-hours-up,#header-minutes-up{top:-18px}#header-hours-down,#header-minutes-down{bottom:-18px}#header-hours:focus #header-hours-down,#header-hours:focus #header-hours-up,#header-hours:focus::before{display:block}#header-minutes:focus #header-minutes-down,#header-minutes:focus #header-minutes-up,#header-minutes:focus::before{display:block}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-hours-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-hours-down"></sinch-icon-arrow-drop-down></div><div id="header-colon">&colon;</div><div id="header-minutes" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-minutes-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-minutes-down"></sinch-icon-arrow-drop-down></div><sinch-icon-button id="submit" small aria-label="Submit"><sinch-icon-done slot="icon"></sinch-icon-done></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour"></div><div id="needle-minute"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-font-title-xl);line-height:48px}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-color-stormy-500)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;font:var(--sinch-font-text-s);line-height:28px;text-align:center;color:var(--sinch-color-text-default);top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-24{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-minute{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-hour-12:hover,.digit-hour-24:hover,.digit-minute:hover{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected,.digit-hour-24.selected,.digit-minute.selected{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected{font-size:16px}.digit-hour-24.selected{font-size:16px}.digit-minute.selected{font-size:16px}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-color-stormy-500)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-color-tropical-500)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0;--sinch-icon-size:24px}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-hours::before,#header-minutes::before{content:"";display:none;position:absolute;border-radius:12px;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);padding:1px;border:1px solid var(--sinch-color-aqua-400)}#header-hours-down,#header-hours-up,#header-minutes-down,#header-minutes-up{display:none;position:absolute;left:50%;transform:translateX(-50%)}#header-hours-up,#header-minutes-up{top:-18px}#header-hours-down,#header-minutes-down{bottom:-18px}#header-hours:focus #header-hours-down,#header-hours:focus #header-hours-up,#header-hours:focus::before{display:block}#header-minutes:focus #header-minutes-down,#header-minutes:focus #header-minutes-up,#header-minutes:focus::before{display:block}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-hours-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-hours-down"></sinch-icon-arrow-drop-down></div><div id="header-colon">&colon;</div><div id="header-minutes" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-minutes-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-minutes-down"></sinch-icon-arrow-drop-down></div><sinch-icon-button id="submit" small aria-label="Submit"><sinch-icon-done slot="icon"></sinch-icon-done></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour"></div><div id="needle-minute"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
 import { getNeedleRotationDeg, getShortestCssDeg, hourToIndex, parseTime, stringifyHour, stringifyHourFace, stringifyMinute, stringifyTime } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -194,6 +194,8 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
         switch (e.key) {
           case 'ArrowUp':
             {
+              e.preventDefault();
+
               _classPrivateFieldSet(this, _hour, (_classPrivateFieldGet(this, _hour) + 1) % 24);
 
               _classPrivateMethodGet(this, _render, _render2).call(this);
@@ -203,6 +205,8 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
 
           case 'ArrowDown':
             {
+              e.preventDefault();
+
               _classPrivateFieldSet(this, _hour, (_classPrivateFieldGet(this, _hour) + 23) % 24);
 
               _classPrivateMethodGet(this, _render, _render2).call(this);
@@ -219,6 +223,8 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
         switch (e.key) {
           case 'ArrowUp':
             {
+              e.preventDefault();
+
               _classPrivateFieldSet(this, _minute, (_classPrivateFieldGet(this, _minute) + 1) % 60);
 
               _classPrivateMethodGet(this, _render, _render2).call(this);
@@ -228,6 +234,8 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
 
           case 'ArrowDown':
             {
+              e.preventDefault();
+
               _classPrivateFieldSet(this, _minute, (_classPrivateFieldGet(this, _minute) + 59) % 60);
 
               _classPrivateMethodGet(this, _render, _render2).call(this);

package/vertical-stepper/index.d.ts

@@ -0,0 +1,13 @@
+import '../icons/check';
+import '../icons/error-outline';
+import type { TSinchVerticalStepperElement, TSinchVerticalStepperReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-vertical-stepper': TSinchVerticalStepperReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-vertical-stepper': TSinchVerticalStepperElement;
+    }
+}

package/vertical-stepper/index.js

@@ -0,0 +1,95 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$itemsSlot, _updateItems;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import '../icons/check';
+import '../icons/error-outline';
+import { clampNumber, defineCustomElement, getAttribute, getIntegerAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;width:100%}#progress{position:absolute;height:1px;background-color:var(--sinch-color-snow-700);left:72px;right:72px;top:16px;transform:translateY(-50%)}#bar{position:absolute;height:1px;background-color:var(--sinch-color-stormy-400);left:0;top:0}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-vertical-stepper', (_$itemsSlot = new WeakMap(), _updateItems = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$itemsSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _updateItems, {
+      writable: true,
+      value: () => {
+        const $items = _classPrivateFieldGet(this, _$itemsSlot).assignedElements();
+
+        const activeIndex = clampNumber(getIntegerAttribute(this, 'index', 0), 0, $items.length + 1);
+
+        for (let i = 0; i < $items.length; i++) {
+          const $el = $items[i];
+          const itemIndex = i + 1;
+          $el.setAttribute('data-index', String(itemIndex));
+
+          if (itemIndex === activeIndex) {
+            $el.setAttribute('data-progress', 'active');
+          } else if (itemIndex < activeIndex) {
+            $el.setAttribute('data-progress', 'done');
+          } else {
+            $el.removeAttribute('data-progress');
+          }
+        }
+
+        this.setAttribute('aria-valuemax', String($items.length));
+        this.setAttribute('aria-valuenow', String(clampNumber(activeIndex, 0, $items.length)));
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$itemsSlot, shadowRoot.querySelector('slot'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'progressbar');
+    this.setAttribute('aria-valuemin', '0');
+
+    _classPrivateFieldGet(this, _$itemsSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$itemsSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+  }
+
+  static get observedAttributes() {
+    return ['index'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'index':
+        {
+          _classPrivateFieldGet(this, _updateItems).call(this);
+
+          break;
+        }
+    }
+  }
+
+  set index(value) {
+    updateAttribute(this, 'index', value);
+  }
+
+  get index() {
+    return getAttribute(this, 'index', '1');
+  }
+
+}));

package/vertical-stepper/types.d.ts

@@ -0,0 +1,13 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchVerticalStepperElement = HTMLElement & {
+    /** Current item index, starting from 1 */
+    index: string;
+    /** Current item index, starting from 1 */
+    setAttribute(name: 'index', value: string): void;
+};
+export declare type TSinchVerticalStepperReact = TSinchElementReact<TSinchVerticalStepperElement> & {
+    /** Current item index, starting from 1 */
+    index: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+};

package/vertical-stepper/types.js

@@ -0,0 +1 @@
+export {};

package/vertical-stepper-item/index.d.ts

@@ -0,0 +1,13 @@
+import '../icons/check';
+import '../icons/exclamation';
+import type { TSinchVerticalStepperItemElement, TSinchVerticalStepperItemReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-vertical-stepper-item': TSinchVerticalStepperItemReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-vertical-stepper-item': TSinchVerticalStepperItemElement;
+    }
+}