@nectary/components 0.33.0 → 0.34.0

package/dialog/index.d.ts

@@ -1,5 +1,6 @@
 import '../icon-button';
 import '../icons/close';
+import '../stop-events';
 import type { TSinchDialogElement, TSinchDialogReact } from './types';
 declare global {
     namespace JSX {

package/dialog/index.js

@@ -14,8 +14,9 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 import dialogPolyfill from 'dialog-polyfill';
 import '../icon-button';
 import '../icons/close';
+import '../stop-events';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#content-wrapper{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><span id="caption"></span><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content-wrapper"><slot name="content"></slot></div><div id="buttons"><slot name="buttons"></slot></div></dialog>';
+const templateHTML = '<style>dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><span id="caption"></span><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = new WeakMap(), _$caption = new WeakMap(), _isConnected = new WeakMap(), _prevOverflowValue = new WeakMap(), _onCancel = new WeakMap(), _onCloseClick = new WeakMap(), _onBackdropClick = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _setOpen = new WeakSet(), class extends NectaryElement {
@@ -62,9 +63,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 
     _classPrivateFieldInitSpec(this, _onCloseClick, {
       writable: true,
-      value: e => {
-        e.stopPropagation();
-
+      value: () => {
         _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
       }
     });
@@ -80,8 +79,6 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
         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);
         }
       }

package/horizontal-stepper/index.d.ts

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

package/horizontal-stepper/index.js

@@ -0,0 +1,104 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$itemsSlot, _$progressBar, _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:row;gap:28px;width:fit-content}#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"><div id="progress"><div id="bar"></div></div><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-horizontal-stepper', (_$itemsSlot = new WeakMap(), _$progressBar = new WeakMap(), _updateItems = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$itemsSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$progressBar, {
+      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');
+          }
+        }
+
+        const valueIndex = clampNumber(activeIndex - 1, 0, $items.length - 1);
+        _classPrivateFieldGet(this, _$progressBar).style.width = `${Math.floor(valueIndex / Math.max(1, $items.length - 1) * 100)}%`;
+        this.setAttribute('aria-valuemax', String($items.length));
+        this.setAttribute('aria-valuenow', String(valueIndex + 1));
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$itemsSlot, shadowRoot.querySelector('slot'));
+
+    _classPrivateFieldSet(this, _$progressBar, shadowRoot.querySelector('#bar'));
+  }
+
+  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/horizontal-stepper/types.d.ts

@@ -0,0 +1,9 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchHorizontalStepperElement = HTMLElement & {
+    index: string;
+    setAttribute(name: 'index', value: string): void;
+};
+export declare type TSinchHorizontalStepperReact = TSinchElementReact<TSinchHorizontalStepperElement> & {
+    index: string;
+    'aria-label': string;
+};

package/horizontal-stepper/types.js

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

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

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

package/horizontal-stepper-item/index.js

@@ -0,0 +1,100 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$label, _$description, _$circleText;
+
+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/exclamation';
+import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:144px;min-height:64px;display:flex;flex-direction:column}#circle{position:relative;display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-icon-size:20px}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:8px}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-error-200);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}</style><div id="wrapper"><div id="circle" aria-hidden="true"><sinch-icon-check id="icon-success"></sinch-icon-check><sinch-icon-exclamation id="icon-error"></sinch-icon-exclamation><span id="circle-text"></span></div><span id="label"></span> <span id="description"></span></div>';
+import { statusValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-horizontal-stepper-item', (_$label = new WeakMap(), _$description = new WeakMap(), _$circleText = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$label, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$description, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$circleText, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
+
+    _classPrivateFieldSet(this, _$description, shadowRoot.querySelector('#description'));
+
+    _classPrivateFieldSet(this, _$circleText, shadowRoot.querySelector('#circle-text'));
+  }
+
+  connectedCallback() {}
+
+  disconnectedCallback() {}
+
+  static get observedAttributes() {
+    return ['label', 'description', 'data-index'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'label':
+        {
+          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          break;
+        }
+
+      case 'description':
+        {
+          _classPrivateFieldGet(this, _$description).textContent = newVal;
+          break;
+        }
+
+      case 'data-index':
+        {
+          _classPrivateFieldGet(this, _$circleText).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+  set label(value) {
+    updateAttribute(this, 'label', value);
+  }
+
+  get label() {
+    return getAttribute(this, 'label', '');
+  }
+
+  set description(value) {
+    updateAttribute(this, 'description', value);
+  }
+
+  get description() {
+    return getAttribute(this, 'description', '');
+  }
+
+  get status() {
+    return getLiteralAttribute(this, statusValues, 'status', null);
+  }
+
+  set status(value) {
+    updateLiteralAttribute(this, statusValues, 'status', value);
+  }
+
+}));

package/horizontal-stepper-item/types.d.ts

@@ -0,0 +1,15 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchHorizontalStepperStatusType = 'error' | 'skip';
+export declare type TSinchHorizontalStepperItemElement = HTMLElement & {
+    label: string;
+    description: string | null;
+    status: TSinchHorizontalStepperStatusType | null;
+    setAttribute(name: 'label', value: string): void;
+    setAttribute(name: 'description', value: string): void;
+    setAttribute(name: 'status', value: TSinchHorizontalStepperStatusType): void;
+};
+export declare type TSinchHorizontalStepperItemReact = TSinchElementReact<TSinchHorizontalStepperItemElement> & {
+    label: string;
+    description?: string;
+    status?: TSinchHorizontalStepperStatusType;
+};

package/horizontal-stepper-item/types.js

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

package/horizontal-stepper-item/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchHorizontalStepperStatusType } from './types';
+export declare const statusValues: TSinchHorizontalStepperStatusType[];

package/horizontal-stepper-item/utils.js

@@ -0,0 +1 @@
+export const statusValues = ['skip', 'error'];

package/icons/exclamation/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-exclamation': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-exclamation': TSinchIconElement;
+    }
+}

package/icons/exclamation/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11 14V5h2v9Zm0 5v-2h2v2Z"/></svg>';
+defineCustomElement('sinch-icon-exclamation', createIconClass(templateHTML));

package/input/index.d.ts

@@ -1,3 +1,4 @@
+import '../stop-events';
 import type { TSinchInputElement, TSinchInputReact } from './types';
 declare global {
     namespace JSX {

package/input/index.js

@@ -1,18 +1,19 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _$iconSlot, _$iconWrapper, _$rightSlot, _$rightWrapper, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onIconSlotChange, _onRightSlotChange, _onEventFilter;
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _$iconSlot, _$iconWrapper, _$rightSlot, _$rightWrapper, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onIconSlotChange, _onRightSlotChange;
 
 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 '../stop-events';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;background-color:var(--sinch-color-snow-100)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 12px 0 44px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#border{position:absolute;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);left:0;right:0;top:0;bottom:0;pointer-events:none}:host([invalidtext]:not([invalidtext=""]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled{color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#input:focus+#border{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#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}#icon{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-icon-size:24px}#icon.empty{display:none}#icon.empty~#input{padding-left:12px}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:8px}#right.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="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><div id="input-wrapper"><div id="icon"><slot name="icon"></slot></div><input id="input" type="text"/><div id="border"></div><div id="right"><slot name="right"></slot></div></div><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;background-color:var(--sinch-color-snow-100)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 12px 0 44px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#border{position:absolute;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);left:0;right:0;top:0;bottom:0;pointer-events:none}:host([invalidtext]:not([invalidtext=""]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled{color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#input:focus+#border{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#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}#icon{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-icon-size:24px}#icon.empty{display:none}#icon.empty~#input{padding-left:12px}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:8px}#right.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="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><div id="input-wrapper"><div id="icon"><slot name="icon"></slot></div><input id="input" type="text"/><div id="border"></div><div id="right"><sinch-stop-events events="input,change,focusin,focusout"><slot name="right"></slot></sinch-stop-events></div></div><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 import { inputTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$iconSlot = new WeakMap(), _$iconWrapper = new WeakMap(), _$rightSlot = new WeakMap(), _$rightWrapper = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), _onIconSlotChange = new WeakMap(), _onRightSlotChange = new WeakMap(), _onEventFilter = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$iconSlot = new WeakMap(), _$iconWrapper = new WeakMap(), _$rightSlot = new WeakMap(), _$rightWrapper = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), _onIconSlotChange = new WeakMap(), _onRightSlotChange = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -135,13 +136,6 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onEventFilter, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -179,14 +173,6 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
 
     _classPrivateFieldGet(this, _$rightSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onRightSlotChange));
 
-    _classPrivateFieldGet(this, _$rightSlot).addEventListener('input', _classPrivateFieldGet(this, _onEventFilter));
-
-    _classPrivateFieldGet(this, _$rightSlot).addEventListener('change', _classPrivateFieldGet(this, _onEventFilter));
-
-    _classPrivateFieldGet(this, _$rightSlot).addEventListener('focusin', _classPrivateFieldGet(this, _onEventFilter));
-
-    _classPrivateFieldGet(this, _$rightSlot).addEventListener('focusout', _classPrivateFieldGet(this, _onEventFilter));
-
     _classPrivateFieldGet(this, _onIconSlotChange).call(this);
 
     _classPrivateFieldGet(this, _onRightSlotChange).call(this);
@@ -204,14 +190,6 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
     _classPrivateFieldGet(this, _$iconSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onIconSlotChange));
 
     _classPrivateFieldGet(this, _$rightSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onRightSlotChange));
-
-    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('input', _classPrivateFieldGet(this, _onEventFilter));
-
-    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('change', _classPrivateFieldGet(this, _onEventFilter));
-
-    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('focusin', _classPrivateFieldGet(this, _onEventFilter));
-
-    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('focusout', _classPrivateFieldGet(this, _onEventFilter));
   }
 
   static get observedAttributes() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.33.0",
+  "version": "0.34.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, _resizeThrottle, _prevOverflowValue, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _updateOrientationModal, _onBackdropClick, _onCancel, _onCloseReactHandler, _onTargetKeydown, _dispatchCloseEvent;
+var _$target, _$dialog, _isConnected, _resizeThrottle, _prevOverflowValue, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _updateOrientationModal, _onBackdropMouseDown, _onCancel, _onCloseReactHandler, _onTargetKeydown, _dispatchCloseEvent;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -18,7 +18,7 @@ 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(), _onBackdropClick = 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(), _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 {
   constructor() {
     super();
 
@@ -132,7 +132,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onBackdropClick, {
+    _classPrivateFieldInitSpec(this, _onBackdropMouseDown, {
       writable: true,
       value: e => {
         if (e.target !== _classPrivateFieldGet(this, _$dialog)) {
@@ -143,8 +143,6 @@ 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);
         }
       }
@@ -201,7 +199,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
+    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropMouseDown));
 
     this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
@@ -217,7 +215,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropMouseDown));
 
     this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
 

package/select/types.d.ts

@@ -1,33 +1,61 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchSelectElement = HTMLElement & {
+    /** Value that matches one of the options `value` */
     value: string;
+    /** Label */
     label: string;
+    /** Text that appears when it has no value set */
     placeholder: string | null;
+    /** Optional text */
     optionalText: string | null;
-    invalidText: string | null;
+    /** Additional text */
     additionalText: string | null;
-    maxVisibleItems: number | null;
+    /** Invalid text, controls the overall invalid state */
+    invalidText: string | null;
+    /** Disabled */
     disabled: boolean;
+    /** Number of visible at the same time options in the list */
+    maxVisibleItems: number | null;
     readonly dropdownRect: TRect;
+    /** Change value event */
     addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    /** Value that matches one of the options `value` */
     setAttribute(name: 'value', value: string): void;
+    /** Label */
     setAttribute(name: 'label', value: string): void;
+    /** Text that appears when it has no value set */
     setAttribute(name: 'placeholder', value: string): void;
+    /** Optional text */
     setAttribute(name: 'optionaltext', value: string): void;
+    /** Additional text */
     setAttribute(name: 'additionaltext', value: string): void;
-    setAttribute(name: 'maxvisibleitems', value: string): void;
+    /** Invalid text, controls the overall invalid state */
+    setAttribute(name: 'invalidtext', value: string): void;
+    /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Number of visible at the same time options in the list */
+    setAttribute(name: 'maxvisibleitems', value: string): void;
 };
 export declare type TSinchSelectReact = TSinchElementReact<TSinchSelectElement> & {
+    /** Value that matches one of the options `value` */
     value: string;
+    /** Label */
     label: string;
+    /** Label that is used for a11y – might be different from `label` */
+    'aria-label': string;
+    /** Text that appears when it has no value set */
     placeholder?: string;
+    /** Optional text */
     optionalText?: string;
-    invalidText?: string;
+    /** Additional text */
     additionalText?: string;
+    /** Invalid text, controls the overall invalid state */
+    invalidText?: string;
+    /** Disabled */
     disabled?: boolean;
+    /** Number of visible at the same time options in the list */
     maxVisibleItems?: number;
-    'aria-label': string;
+    /** Change value handler */
     onChange: (e: SyntheticEvent<TSinchSelectElement, CustomEvent<string>>) => void;
 };

package/stop-events/index.d.ts

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

package/stop-events/index.js

@@ -0,0 +1,40 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+
+var _stopEvent;
+
+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 { defineCustomElement, getCsvSet } from '../utils';
+defineCustomElement('sinch-stop-events', (_stopEvent = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _stopEvent, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+      }
+    });
+
+    this.style.display = 'contents';
+  }
+
+  connectedCallback() {
+    const events = getCsvSet(this.getAttribute('events'));
+
+    for (const event of events) {
+      this.addEventListener(event, _classPrivateFieldGet(this, _stopEvent));
+    }
+  }
+
+  disconnectedCallback() {
+    const events = getCsvSet(this.getAttribute('events'));
+
+    for (const event of events) {
+      this.removeEventListener(event, _classPrivateFieldGet(this, _stopEvent));
+    }
+  }
+
+}));

package/utils.d.ts

@@ -23,6 +23,7 @@ export declare const updateLiteralAttribute: <T extends readonly string[]>($elem
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string): T[number];
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
+export declare const clampNumber: (value: number, min: number, max: number) => number;
 declare type TRange = {
     min?: number;
     max?: number;

package/utils.js

@@ -99,6 +99,9 @@ export function getLiteralAttribute($element, literals, attrName, defaultValue)
 
   return defaultValue;
 }
+export const clampNumber = (value, min, max) => {
+  return Math.min(max, Math.max(min, value));
+};
 
 const applyRange = (value, range) => {
   let result = value;