@nectary/components 0.9.0 → 0.11.0

package/illustration/create-illustration-class.js

@@ -0,0 +1,53 @@
+import { getIntegerAttribute, updateAttribute, updateIntegerAttribute } from '../utils';
+const illustrationStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block}</style>';
+const DEFAULT_SIZE = 256;
+const MIN_SIZE = 16;
+const MAX_SIZE = 2048;
+export const createIllustrationClass = templateHTML => {
+  const template = document.createElement('template');
+  template.innerHTML = illustrationStylesHtml + templateHTML;
+  return class extends HTMLElement {
+    constructor() {
+      super();
+      const shadowRoot = this.attachShadow({
+        mode: 'closed'
+      });
+      shadowRoot.appendChild(template.content.cloneNode(true));
+      this.$svg = shadowRoot.querySelector('svg');
+    }
+
+    static get observedAttributes() {
+      return ['size'];
+    }
+
+    set size(value) {
+      updateAttribute(this, 'size', value);
+    }
+
+    get size() {
+      return getIntegerAttribute(this, 'size', DEFAULT_SIZE);
+    }
+
+    connectedCallback() {
+      updateAttribute(this.$svg, 'preserveAspectRatio', 'xMinYMin meet');
+
+      if (!this.hasAttribute('size')) {
+        updateAttribute(this, 'size', DEFAULT_SIZE);
+      }
+    }
+
+    attributeChangedCallback(name, _, newVal) {
+      switch (name) {
+        case 'size':
+          {
+            updateIntegerAttribute(this.$svg, 'height', newVal, {
+              min: MIN_SIZE,
+              max: MAX_SIZE
+            });
+            break;
+          }
+      }
+    }
+
+  };
+};

package/illustration/phone-and-cat/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIllustrationElement, TSinchIllustrationReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-illustration-phone-and-cat': TSinchIllustrationReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-illustration-phone-and-cat': TSinchIllustrationElement;
+    }
+}

package/illustration/phone-and-cat/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIllustrationClass } from '../create-illustration-class';
+const templateHTML = '<svg viewBox="0 0 868 800"><g clip-path="url(#a)"><path d="M743.029 800a65.073 65.073 0 0 1-53.216-27.573 65.073 65.073 0 0 1-8.106-59.384c5.049-14.202 10.693-26.125 17.244-36.43a16.512 16.512 0 0 1 10.349-7.26 16.52 16.52 0 0 1 17.112 6.636 16.528 16.528 0 0 1 2.747 12.34 16.528 16.528 0 0 1-2.331 6.009c-5.205 8.187-9.786 17.932-14.002 29.789a32.047 32.047 0 0 0 33.77 42.64c.093 0 .187-.02.281-.027a31.99 31.99 0 0 0 24.058-16.208l10.086-18.181a58.267 58.267 0 0 1 77.436-23.645 16.526 16.526 0 0 1 5.133 3.949 16.538 16.538 0 0 1 3.219 5.62 16.516 16.516 0 0 1-16.974 21.708 16.524 16.524 0 0 1-6.23-1.769 25.243 25.243 0 0 0-33.704 10.161l-10.088 18.184a65.081 65.081 0 0 1-49.516 33.037l-.404.041a65.03 65.03 0 0 1-6.864.363Z" fill="#F2A068"/><path d="M21.409 0h323.305a20.795 20.795 0 0 1 20.773 20.773V232.84H21.409A20.793 20.793 0 0 1 .636 212.063V20.773A20.793 20.793 0 0 1 21.409 0" fill="#007171"/><path d="M222.723 274.478H21.416a20.79 20.79 0 0 0-20.78 20.775v83.553h222.087a20.795 20.795 0 0 0 20.773-20.773v-62.78a20.796 20.796 0 0 0-20.773-20.775Z" fill="#FFBE3C"/><path d="M168.062 337.607c6.056 0 10.965-4.909 10.965-10.966 0-6.056-4.909-10.965-10.965-10.965-6.057 0-10.966 4.909-10.966 10.965 0 6.057 4.909 10.966 10.966 10.966Zm-45.997 0c6.056 0 10.965-4.909 10.965-10.966 0-6.056-4.909-10.965-10.965-10.965s-10.966 4.909-10.966 10.965c0 6.057 4.91 10.966 10.966 10.966Zm-45.992 0c6.056 0 10.965-4.909 10.965-10.966 0-6.056-4.91-10.965-10.965-10.965-6.057 0-10.966 4.909-10.966 10.965 0 6.057 4.91 10.966 10.966 10.966ZM275.57 92.165H90.555a5.386 5.386 0 0 1 0-10.771H275.57a5.386 5.386 0 1 1 0 10.771Zm-92.537 59.28H90.555a5.386 5.386 0 0 1 0-10.772h92.478a5.386 5.386 0 0 1 0 10.772Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M615.675 402.718S506.567 240.893 512.588 287.271c10.022 77.194-28.652 55.324-28.549 143.141l131.636-27.694Z" fill="#FFD03C"/><path d="M277.401 386.038c3.642 5.698 6.05 11.584 6.768 17.594.717 6.009-.089 12.206-2.169 18.991l-1.732 5.513a59.046 59.046 0 0 0-1.677 6.901 63.145 63.145 0 0 0-1.008 14.117c.364 9.405 2.681 18.401 6.01 26.604l.286.701.42.72a16513.683 16513.683 0 0 0 38.013 64.194l19.116 32.031 19.213 31.974a10.593 10.593 0 0 0 14.477 3.621 10.592 10.592 0 0 0 3.739-14.447l-18.9-32.161-18.999-32.098a10513.726 10513.726 0 0 0-38.217-64.073l.709 1.419c-2.644-6.398-4.289-12.942-4.57-19.342a42.001 42.001 0 0 1 .612-9.467c.27-1.557.634-3.096 1.09-4.609l.818-2.742.882-3.08c2.308-8.338 3.82-18.177 2.031-27.827a53.554 53.554 0 0 0-4.341-13.764 61.473 61.473 0 0 0-7.372-11.782 9.387 9.387 0 0 0-12.851-1.906 9.391 9.391 0 0 0-2.458 12.758l.114.171-.004-.011Z" fill="#894915"/><path fill-rule="evenodd" clip-rule="evenodd" d="m413.954 576.288 29.177-60.157a30.487 30.487 0 0 1 19.292-16.079 38.811 38.811 0 0 1 45.387 54.136l-46.18 96.655 28.823 45.069h-71.817a47.175 47.175 0 0 1-42.602-26.915l-93.433-196.475a29.248 29.248 0 0 1 9.154-36.183l22.281-16.292 99.918 156.241Zm391.608-43.01a40.67 40.67 0 0 0-39.183-23.337l-9.69.564a40.68 40.68 0 0 0-38.301 41.27 40.68 40.68 0 0 0 5.493 19.756c19.347 33.317 43.264 74.49 60.566 104.293a40 40 0 0 0 27.069 19.203 40.01 40.01 0 0 0 32.249-7.837 39.705 39.705 0 0 0 11.425-48.074L805.571 533.28l-.009-.002Z" fill="#894915"/><path fill-rule="evenodd" clip-rule="evenodd" d="M377.824 344.949a12.204 12.204 0 0 0-11.115-7.168h-78.603a4.447 4.447 0 0 0-4.052 6.281l69.304 152.996a4.445 4.445 0 0 0 4.049 2.612h77.034a8.69 8.69 0 0 0 8.662-8.045 8.688 8.688 0 0 0-.751-4.223c-14.487-31.99-53.076-117.177-64.528-142.453Z" fill="#666"/><path fill-rule="evenodd" clip-rule="evenodd" d="M362.697 337.781h-74.443a12.207 12.207 0 0 0-10.253 5.589 12.196 12.196 0 0 0-.861 11.646l62.278 137.486a12.195 12.195 0 0 0 11.114 7.168h85.497l-73.332-161.889Z" fill="#CCC"/><path d="m306.957 436.433 69.078 1.008a9.722 9.722 0 0 0 .527-19.439l-69.027-2.755a10.6 10.6 0 0 0-.845 21.179h.267" fill="#894915"/><path d="m311.941 433.234 50.786-38.74a8.576 8.576 0 0 0-9.958-13.954l-53.145 35.442a10.605 10.605 0 1 0 12.317 17.252" fill="#894915"/><path d="m312.976 454.594 70.035.094a9.428 9.428 0 0 0 6.592-2.705 9.428 9.428 0 0 0 .24-13.192 9.429 9.429 0 0 0-6.49-2.943l-69.993-2.445a10.6 10.6 0 0 0-.741 21.187h.357" fill="#894915"/><path d="m318.832 472.223 69.075-.122a8.792 8.792 0 0 0 8.82-8.581 8.796 8.796 0 0 0-8.392-8.999l-68.986-3.485a10.604 10.604 0 0 0-11.189 10.048 10.594 10.594 0 0 0 2.745 7.668 10.596 10.596 0 0 0 7.374 3.457c.174 0 .38.014.553.014" fill="#894915"/><path d="m724.223 600.317-.616 95.556H418.485l69.064-149.989-46.043-26.175 46.507-100.311a50.8 50.8 0 0 1 45.514-29.433l169.531-1.917 22.393 22.361-.172 26.205 26.89-17.037 59.448 126.764-84.071 59.019-3.323-5.043Z" fill="#E83452"/><path d="M557.319 352.94a62.209 62.209 0 0 1-6.19-1.828 78.44 78.44 0 0 1-52.411-74.512l.299-65.106a78.392 78.392 0 0 1 11.777-41.066c16.146-25.985 45.044-40.056 75.404-36.729a78.44 78.44 0 0 1 70.058 78.517l-.285 65.113a78.75 78.75 0 0 1-15.324 46.262l8.24 43.835c4.301 14.496 9.597 21.436 21.433 21.436h6.444l-89.524 62.401a22.706 22.706 0 0 1-22.125 2.154 22.985 22.985 0 0 1-13.714-21.766 22.98 22.98 0 0 1 2.06-8.804c8.156-17.366 18.911-40.673 22.597-50.455 2.957-7.847-4.497-15.538-12.929-18.296a78.337 78.337 0 0 1-5.372-1.044c-.164 0-.331-.016-.498-.021l.057-.085.003-.006Z" fill="#894915"/><path d="M499.89 206.638c0-24.892 20.624-44.973 45.718-44.079 23.903.85 42.501 21.22 42.501 45.137v99.733c0 40.975 47.148 94.857 109.757 94.857 51.326 0 93.148-45.871 93.148-91.582 0-14.608-4.84-31.442-10.612-46.326a61.775 61.775 0 0 0-57.687-39.679v-.046a25.351 25.351 0 0 1-24.403-18.508c-5.425-19.304-13.939-47.59-18.822-53.627-13.175-16.298-29.999-19.136-42.958-18.19-12.567.925-25.066-3.231-34.731-11.318-12.074-10.093-31.682-20.741-59.108-18.081-54.897 5.331-81.467 68.801-42.803 102.806v-1.097Z" fill="#FFD03C"/><path d="m544.235 648.578 6.06-20.583c1.713-5.689 8.482-8.984 14.852-7.083 1.193.357 2.32.907 3.336 1.627a12.68 12.68 0 0 1 9.775-1.639c5.338 1.264 8.788 5.656 8.542 10.367a12.568 12.568 0 0 1 6.359 1.129c4.837 2.267 7.083 7.365 5.666 12.067l-.361 1.2c.08.018.16.027.229.046 6.156 1.457 9.809 7.083 8.164 12.546l-4.853 16.146-65.538-3.35s6.009-16.477 7.769-22.473" fill="#842306"/><path fill-rule="evenodd" clip-rule="evenodd" d="M794.51 319.469h.023s-3.59-16.909-6.663-31.407a6.855 6.855 0 0 0-12.933-1.417l-13.4 29.451-37.492-1.081-6.66-31.407a6.852 6.852 0 0 0-5.957-5.377 6.85 6.85 0 0 0-4.129.853 6.85 6.85 0 0 0-2.85 3.108l-36.989 81.247a28.247 28.247 0 0 0-1.444 19.494 28.259 28.259 0 0 0 11.557 15.766l3.581 2.371-121.276 262.123 194.176-24.87 16.098-41.198a493.41 493.41 0 0 0 30.635-235.66c-1.849-16.132-3.942-30.832-6.277-41.996Z" fill="#F2A068"/><path d="M297.328 363.199a6.942 6.942 0 1 0 0-13.884 6.942 6.942 0 0 0 0 13.884Z" fill="#666"/><path d="M789.706 625.226 663.321 642.93a49.191 49.191 0 0 1-16.109-.409l-11.708-2.251a49.199 49.199 0 0 0-32.134 4.744c-14.519 7.59-35.929 17.781-46.17 17.781h-17.535c-7.445 0-13.939 5.736-14.167 13.178a13.59 13.59 0 0 0 3.83 9.88 13.6 13.6 0 0 0 9.759 4.131h28.909c2.248 0 4.487.27 6.67.805l10.669 2.614a77.667 77.667 0 0 0 18.476 2.23h217.714l-31.832-70.407h.013Z" fill="#894915"/><path d="M532.62 303.419c1.787.351 3.608.504 5.429.457a25.29 25.29 0 0 0 17.014-7.209 2.774 2.774 0 0 0 .83-1.981 2.77 2.77 0 0 0-.83-1.981 2.853 2.853 0 0 0-4.005 0 19.426 19.426 0 0 1-26.552.644 2.857 2.857 0 0 0-4.001.192 2.773 2.773 0 0 0-.467 3.088 2.8 2.8 0 0 0 .661.877c3.375 3 7.492 5.041 11.923 5.909" fill="#842306"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.636)" d="M0 0h867.101v800H0z"/></clipPath></defs></svg>';
+defineCustomElement('sinch-illustration-phone-and-cat', createIllustrationClass(templateHTML));

package/illustration/types.d.ts

@@ -0,0 +1,7 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchIllustrationElement = HTMLElement & {
+    size: number;
+};
+export declare type TSinchIllustrationReact = TSinchElementReact<TSinchIllustrationElement> & {
+    size?: number;
+};

package/illustration/types.js

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

package/index.d.ts

@@ -5,6 +5,9 @@ import './alert';
 import './alert-button';
 import './alert-close';
 import './button';
+import './card';
+import './card-button';
+import './card-link';
 import './checkbox';
 import './input';
 import './help-tooltip';
@@ -19,6 +22,12 @@ import './tag-close';
 import './textarea';
 import './toggle';
 import './tooltip';
+import './dropdown';
+import './dropdown-option';
+import './icon/arrow-back';
+import './icon/arrow-downward';
+import './icon/arrow-forward';
+import './icon/arrow-upward';
 import './icon/keyboard-arrow-down';
 import './icon/keyboard-arrow-left';
 import './icon/keyboard-arrow-right';
@@ -43,6 +52,7 @@ import './icon/south';
 import './icon/south-east';
 import './icon/south-west';
 import './icon/west';
+import './illustration/phone-and-cat';
 import './pagination';
 import './table';
 import './table-cell';
@@ -65,3 +75,4 @@ import './icon-branded/rocket';
 import './icon-branded/settings';
 import './icon-branded/user';
 import './icon-branded/users';
+import './dialog';

package/index.js

@@ -5,6 +5,9 @@ import './alert';
 import './alert-button';
 import './alert-close';
 import './button';
+import './card';
+import './card-button';
+import './card-link';
 import './checkbox';
 import './input';
 import './help-tooltip';
@@ -19,6 +22,12 @@ import './tag-close';
 import './textarea';
 import './toggle';
 import './tooltip';
+import './dropdown';
+import './dropdown-option';
+import './icon/arrow-back';
+import './icon/arrow-downward';
+import './icon/arrow-forward';
+import './icon/arrow-upward';
 import './icon/keyboard-arrow-down';
 import './icon/keyboard-arrow-left';
 import './icon/keyboard-arrow-right';
@@ -43,6 +52,7 @@ import './icon/south';
 import './icon/south-east';
 import './icon/south-west';
 import './icon/west';
+import './illustration/phone-and-cat';
 import './pagination';
 import './table';
 import './table-cell';
@@ -64,4 +74,5 @@ import './icon-branded/multiple-channels';
 import './icon-branded/rocket';
 import './icon-branded/settings';
 import './icon-branded/user';
-import './icon-branded/users';
+import './icon-branded/users';
+import './dialog';

package/input/index.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-import type { FocusEvent, SyntheticEvent } from 'react';
+import type { DOMAttributes, FocusEvent, SyntheticEvent } from 'react';
 export declare type TSinchInputElement = HTMLElement & {
     value: string;
     label: string;
@@ -19,7 +19,9 @@ export declare type TSinchInputReact = TSinchElementReact<TSinchInputElement> &
     invalidText?: string;
     additionalText?: string;
     disabled?: boolean;
+    'aria-label': string;
     onChange: (e: SyntheticEvent<TSinchInputElement, CustomEvent<string>>) => void;
+    onKeyPress?: DOMAttributes<TSinchInputElement>['onKeyPress'];
     onFocus?: (e: FocusEvent<TSinchInputElement>) => void;
     onBlur?: (e: FocusEvent<TSinchInputElement>) => void;
 };

package/input/index.js

@@ -1,17 +1,17 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _onInput;
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _onInput;
 
 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, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:2px;width:100%;height:48px;margin:2px 0;padding:0 12px;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)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-300)}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);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)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::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><input id="input" type="text"/><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{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:2px;width:100%;height:48px;margin:2px 0;padding:0 12px;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)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-300)}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);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)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::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><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 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(), _onInput = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
   constructor() {
     super();
 
@@ -40,21 +40,55 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _selectionStart, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _selectionEnd, {
+      writable: true,
+      value: null
+    });
+
     _classPrivateFieldInitSpec(this, _onInput, {
       writable: true,
       value: e => {
         e.stopPropagation();
-        const value = e.target.value;
-        _classPrivateFieldGet(this, _$input).value = this.value;
-        this.dispatchEvent(new CustomEvent('change', {
-          detail: value,
-          bubbles: true
-        }));
+
+        const nextValue = _classPrivateFieldGet(this, _$input).value;
+
+        const prevValue = this.value;
+
+        if (prevValue !== nextValue) {
+          const nextSelectionStart = _classPrivateFieldGet(this, _$input).selectionStart;
+
+          const nextSelectionEnd = _classPrivateFieldGet(this, _$input).selectionEnd;
+
+          const prevSelectionStart = _classPrivateFieldGet(this, _selectionStart);
+
+          const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
+
+          const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
+          _classPrivateFieldGet(this, _$input).value = prevValue;
+
+          if (!isPrevCursorEnd) {
+            _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
+          }
+
+          _classPrivateFieldSet(this, _selectionStart, nextSelectionStart);
+
+          _classPrivateFieldSet(this, _selectionEnd, nextSelectionEnd);
+
+          this.dispatchEvent(new CustomEvent('change', {
+            detail: nextValue,
+            bubbles: true
+          }));
+        }
       }
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -71,6 +105,8 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
   }
 
   connectedCallback() {
+    this.setAttribute('role', 'textbox');
+
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
   }
 
@@ -150,7 +186,17 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
     switch (name) {
       case 'value':
         {
-          _classPrivateFieldGet(this, _$input).value = newVal ?? '';
+          const nextVal = newVal ?? '';
+
+          if (nextVal !== _classPrivateFieldGet(this, _$input).value) {
+            _classPrivateFieldGet(this, _$input).value = nextVal;
+            const isNextCursorEnd = _classPrivateFieldGet(this, _selectionStart) === _classPrivateFieldGet(this, _selectionEnd) && (_classPrivateFieldGet(this, _selectionStart) === null || _classPrivateFieldGet(this, _selectionStart) === nextVal.length);
+
+            if (!isNextCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _selectionStart), _classPrivateFieldGet(this, _selectionEnd));
+            }
+          }
+
           break;
         }
 
@@ -163,6 +209,7 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       case 'placeholder':
         {
           _classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
+          updateAttribute(this, 'aria-placeholder', newVal);
           break;
         }
 
@@ -181,6 +228,7 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       case 'invalidtext':
         {
           _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
+          updateAttribute(this, 'aria-invalid', String(newVal !== null && newVal !== ''));
           break;
         }
 

package/link/index.js

@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icon/cancel';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute } 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)}svg{display:none;transform:translateY(.15em);margin-left:.4em;width:.8em;pointer-events:none}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])) svg{display:inline-block}</style><a><span></span><svg viewBox="0 0 16 16"><path d="M14.222 14.222H1.778V1.778H8V0H1.778C.79 0 0 .8 0 1.778v12.444C0 15.2.791 16 1.778 16h12.444C15.2 16 16 15.2 16 14.222V8h-1.778v6.222ZM9.778 0v1.778h3.19l-8.737 8.738 1.253 1.253 8.738-8.738v3.191H16V0H9.778Z"/></svg></a>';
+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)}svg{display:none;transform:translateY(.15em);margin-left:.4em;width:.8em;pointer-events:none}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])) svg{display:inline-block}</style><a><span></span><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M14.222 14.222H1.778V1.778H8V0H1.778C.79 0 0 .8 0 1.778v12.444C0 15.2.791 16 1.778 16h12.444C15.2 16 16 15.2 16 14.222V8h-1.778v6.222ZM9.778 0v1.778h3.19l-8.737 8.738 1.253 1.253 8.738-8.738v3.191H16V0H9.778Z"/></svg></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), _onClick = new WeakMap(), class extends HTMLElement {
@@ -37,7 +37,7 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));

package/logo/create-logo-class.js

@@ -10,7 +10,7 @@ export const createLogoClass = templateHTML => {
     constructor() {
       super();
       const shadowRoot = this.attachShadow({
-        mode: 'production' === 'development' ? 'open' : 'closed'
+        mode: 'closed'
       });
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');

package/logo/sinch-icon/index.js

@@ -1,4 +1,4 @@
 import { defineCustomElement } from '../../utils';
 import { createLogoClass } from '../create-logo-class';
-const templateHTML = '<svg viewBox="0 0 93 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M92.298 25.271a17.167 17.167 0 0 1-.814 5.312c-1.51 4.734-5.27 8.678-10.06 10.549-5.64 2.202-12.252 1.416-18.624-2.21l-4.649-2.67a16.424 16.424 0 0 1-3.563 3.064l-14.817 8.679-.027.015v-7.501l.027-.014 22.29-13.057a16.017 16.017 0 0 1-.713 3.206l4.656 2.65c5.95 3.386 10.388 2.85 13.065 1.806 2.991-1.167 5.323-3.59 6.245-6.483.692-2.15.679-4.467-.04-6.609-.955-2.88-3.319-5.275-6.324-6.41-2.688-1.014-7.132-1.494-13.04 1.962L29.7 38.747l-.043.028c-4.017 2.35-8.14 3.556-12.065 3.58a18.162 18.162 0 0 1-6.53-1.145C6.247 39.396 2.44 35.498.874 30.783A17.116 17.116 0 0 1 .81 20.166c1.51-4.733 5.272-8.676 10.063-10.548 5.64-2.202 12.252-1.416 18.623 2.212l4.649 2.67a16.377 16.377 0 0 1 3.563-3.067l.281-.163 1.726-1.011-7.37-4.197A3.238 3.238 0 0 1 35.551.437l10.591 6.06L56.52.457a3.238 3.238 0 0 1 3.27 5.588l-29.528 17.05c.132-1.017.36-2.019.683-2.992l-4.656-2.65c-5.946-3.383-10.384-2.847-13.061-1.803-2.991 1.167-5.325 3.59-6.247 6.481a10.623 10.623 0 0 0 .039 6.608c.956 2.882 3.321 5.277 6.324 6.41 2.689 1.012 7.136 1.495 13.042-1.966l36.256-21.208c4.017-2.349 8.14-3.555 12.067-3.579a18.112 18.112 0 0 1 6.53 1.145c4.812 1.813 8.62 5.712 10.187 10.426a17.23 17.23 0 0 1 .872 5.304Z"/></svg>';
+const templateHTML = '<svg viewBox="0 0 93 48" aria-hidden="true"><path d="M92.298 25.271a17.167 17.167 0 0 1-.814 5.312c-1.51 4.734-5.27 8.678-10.06 10.549-5.64 2.202-12.252 1.416-18.624-2.21l-4.649-2.67a16.424 16.424 0 0 1-3.563 3.064l-14.817 8.679-.027.015v-7.501l.027-.014 22.29-13.057a16.017 16.017 0 0 1-.713 3.206l4.656 2.65c5.95 3.386 10.388 2.85 13.065 1.806 2.991-1.167 5.323-3.59 6.245-6.483.692-2.15.679-4.467-.04-6.609-.955-2.88-3.319-5.275-6.324-6.41-2.688-1.014-7.132-1.494-13.04 1.962L29.7 38.747l-.043.028c-4.017 2.35-8.14 3.556-12.065 3.58a18.162 18.162 0 0 1-6.53-1.145C6.247 39.396 2.44 35.498.874 30.783A17.116 17.116 0 0 1 .81 20.166c1.51-4.733 5.272-8.676 10.063-10.548 5.64-2.202 12.252-1.416 18.623 2.212l4.649 2.67a16.377 16.377 0 0 1 3.563-3.067l.281-.163 1.726-1.011-7.37-4.197A3.238 3.238 0 0 1 35.551.437l10.591 6.06L56.52.457a3.238 3.238 0 0 1 3.27 5.588l-29.528 17.05c.132-1.017.36-2.019.683-2.992l-4.656-2.65c-5.946-3.383-10.384-2.847-13.061-1.803-2.991 1.167-5.325 3.59-6.247 6.481a10.623 10.623 0 0 0 .039 6.608c.956 2.882 3.321 5.277 6.324 6.41 2.689 1.012 7.136 1.495 13.042-1.966l36.256-21.208c4.017-2.349 8.14-3.555 12.067-3.579a18.112 18.112 0 0 1 6.53 1.145c4.812 1.813 8.62 5.712 10.187 10.426a17.23 17.23 0 0 1 .872 5.304Z"/></svg>';
 defineCustomElement('sinch-logo-sinch-icon', createLogoClass(templateHTML));

package/logo/sinch-icon-wordmark/index.js

@@ -1,4 +1,4 @@
 import { defineCustomElement } from '../../utils';
 import { createLogoClass } from '../create-logo-class';
-const templateHTML = '<svg viewBox="0 0 236 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m100.82 36.72 6.606-3.801c1.299 2.603 3.5 3.903 6.602 3.9 2.914 0 4.704-1.299 4.704-3.201 0-1.902-2.498-2.498-6.806-3.401-5.903-1.303-9.703-3.7-9.703-8.704 0-5.412 5.503-9.108 11.605-9.108 5.204 0 8.804 1.403 12.006 5.411l-6.303 3.605c-1.199-2.081-3.001-3.101-5.603-3.101-2.701 0-4.2 1.199-4.2 2.802 0 1.998 3.001 2.397 7.002 3.4 5.503 1.4 9.707 3.301 9.707 8.805 0 5.702-5.603 9.603-12.609 9.603-5.802-.008-10.207-1.607-13.008-6.21Zm29.618 5.41V16.739l7.405-4.333v29.717l-7.405.009Zm12.608 0V26.517c0-8.004 5.903-14.111 14.108-14.111 8.325 0 14.107 6.506 14.107 14.111v15.606h-7.493V27.016c0-4.604-2.801-7.306-6.602-7.306-4.104 0-6.606 2.914-6.606 7.306v15.106l-7.514.009Zm32.203-14.515c0-8.904 6.402-15.21 15.402-15.21 5.603 0 10.602 2.914 13.004 7.405l-6.402 3.805a7.36 7.36 0 0 0-6.702-4.005c-4.404 0-7.705 3.302-7.705 8.005 0 4.604 3.101 8.105 7.705 8.105 3.001 0 5.603-1.503 6.802-4.004l6.402 3.704a14.887 14.887 0 0 1-13.104 7.493c-8.883.009-15.402-6.394-15.402-15.298Zm32.519 14.507V4.304L215.186 0v14.607a12.584 12.584 0 0 1 6.902-2.202c8.204 0 13.907 5.603 13.907 13.907v15.819h-7.493V27.016c0-4.604-2.801-7.306-6.602-7.306-4.104 0-6.606 2.914-6.606 7.306v15.106h-7.526ZM82.892 27.578a15.068 15.068 0 0 1-9.766 14.244C68.06 43.8 62.124 43.072 56.4 39.837l-4.162-2.398a14.752 14.752 0 0 1-3.197 2.752l-13.32 7.792h-.026v-6.722h.025l20.02-11.735a14.647 14.647 0 0 1-.641 2.876l4.162 2.381c5.345 3.04 9.333 2.56 11.735 1.624a9.484 9.484 0 0 0 5.607-5.828 9.67 9.67 0 0 0 .458-2.972 9.257 9.257 0 0 0-6.17-8.717c-2.418-.911-6.406-1.344-11.713 1.761L26.675 39.679l-.038.025c-3.605 2.11-7.31 3.197-10.823 3.217-2.001.02-3.99-.328-5.865-1.028a15.185 15.185 0 0 1-9.22-18.898 15.352 15.352 0 0 1 9.037-9.475c5.066-1.977 11.002-1.274 16.725 1.986l4.163 2.398a14.678 14.678 0 0 1 3.201-2.752l.28-.166 1.552-.908-6.619-3.746a2.915 2.915 0 0 1 2.86-5.058l9.512 5.44 9.32-5.41a2.914 2.914 0 0 1 2.939 5.007l-26.52 15.31a14.67 14.67 0 0 1 .616-2.68l-4.163-2.382c-5.341-3.038-9.325-2.56-11.73-1.619a9.317 9.317 0 0 0 .103 17.508c2.415.912 6.407 1.345 11.714-1.76l32.557-19.053c3.604-2.11 7.31-3.193 10.823-3.214 2-.02 3.987.329 5.86 1.029a15.077 15.077 0 0 1 9.937 14.128"/></svg>';
+const templateHTML = '<svg viewBox="0 0 236 48" aria-hidden="true"><path d="m100.82 36.72 6.606-3.801c1.299 2.603 3.5 3.903 6.602 3.9 2.914 0 4.704-1.299 4.704-3.201 0-1.902-2.498-2.498-6.806-3.401-5.903-1.303-9.703-3.7-9.703-8.704 0-5.412 5.503-9.108 11.605-9.108 5.204 0 8.804 1.403 12.006 5.411l-6.303 3.605c-1.199-2.081-3.001-3.101-5.603-3.101-2.701 0-4.2 1.199-4.2 2.802 0 1.998 3.001 2.397 7.002 3.4 5.503 1.4 9.707 3.301 9.707 8.805 0 5.702-5.603 9.603-12.609 9.603-5.802-.008-10.207-1.607-13.008-6.21Zm29.618 5.41V16.739l7.405-4.333v29.717l-7.405.009Zm12.608 0V26.517c0-8.004 5.903-14.111 14.108-14.111 8.325 0 14.107 6.506 14.107 14.111v15.606h-7.493V27.016c0-4.604-2.801-7.306-6.602-7.306-4.104 0-6.606 2.914-6.606 7.306v15.106l-7.514.009Zm32.203-14.515c0-8.904 6.402-15.21 15.402-15.21 5.603 0 10.602 2.914 13.004 7.405l-6.402 3.805a7.36 7.36 0 0 0-6.702-4.005c-4.404 0-7.705 3.302-7.705 8.005 0 4.604 3.101 8.105 7.705 8.105 3.001 0 5.603-1.503 6.802-4.004l6.402 3.704a14.887 14.887 0 0 1-13.104 7.493c-8.883.009-15.402-6.394-15.402-15.298Zm32.519 14.507V4.304L215.186 0v14.607a12.584 12.584 0 0 1 6.902-2.202c8.204 0 13.907 5.603 13.907 13.907v15.819h-7.493V27.016c0-4.604-2.801-7.306-6.602-7.306-4.104 0-6.606 2.914-6.606 7.306v15.106h-7.526ZM82.892 27.578a15.068 15.068 0 0 1-9.766 14.244C68.06 43.8 62.124 43.072 56.4 39.837l-4.162-2.398a14.752 14.752 0 0 1-3.197 2.752l-13.32 7.792h-.026v-6.722h.025l20.02-11.735a14.647 14.647 0 0 1-.641 2.876l4.162 2.381c5.345 3.04 9.333 2.56 11.735 1.624a9.484 9.484 0 0 0 5.607-5.828 9.67 9.67 0 0 0 .458-2.972 9.257 9.257 0 0 0-6.17-8.717c-2.418-.911-6.406-1.344-11.713 1.761L26.675 39.679l-.038.025c-3.605 2.11-7.31 3.197-10.823 3.217-2.001.02-3.99-.328-5.865-1.028a15.185 15.185 0 0 1-9.22-18.898 15.352 15.352 0 0 1 9.037-9.475c5.066-1.977 11.002-1.274 16.725 1.986l4.163 2.398a14.678 14.678 0 0 1 3.201-2.752l.28-.166 1.552-.908-6.619-3.746a2.915 2.915 0 0 1 2.86-5.058l9.512 5.44 9.32-5.41a2.914 2.914 0 0 1 2.939 5.007l-26.52 15.31a14.67 14.67 0 0 1 .616-2.68l-4.163-2.382c-5.341-3.038-9.325-2.56-11.73-1.619a9.317 9.317 0 0 0 .103 17.508c2.415.912 6.407 1.345 11.714-1.76l32.557-19.053c3.604-2.11 7.31-3.193 10.823-3.214 2-.02 3.987.329 5.86 1.029a15.077 15.077 0 0 1 9.937 14.128"/></svg>';
 defineCustomElement('sinch-logo-sinch-icon-wordmark', createLogoClass(templateHTML));

package/package.json

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

package/pagination/index.js

@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import '../icon/keyboard-arrow-left';
 import '../icon/keyboard-arrow-right';
-import { defineCustomElement, updateAttribute, getIntegerAttribute } from '../utils';
+import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;box-sizing:border-box}button{all:initial;width:28px;height:28px;box-sizing:border-box;cursor:pointer;text-align:center;contain:strict;--sinch-color-icon:var(--sinch-color-stormy-500)}button:disabled{--sinch-color-icon:var(--sinch-color-stormy-100);cursor:initial}button>*{pointer-events:none}.page{border-radius:50%;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-font-emphasized-body);background-color:var(--sinch-color-snow-600);pointer-events:none;cursor:initial}.page.hidden{display:none}</style><div id="wrapper"><button id="left"><sinch-icon-keyboard-arrow-left></sinch-icon-keyboard-arrow-left></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right"><sinch-icon-keyboard-arrow-right></sinch-icon-keyboard-arrow-right></button></div>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
@@ -21,11 +21,6 @@ const FIRST_BTN_INDEX = 0;
 const LAST_BTN_INDEX = NUM_BUTTONS - 1;
 const DOTS_LEFT_INDEX = 1;
 const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
-
-const setClass = (elem, name, isSet) => {
-  isSet ? elem.classList.add(name) : elem.classList.remove(name);
-};
-
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new WeakMap(), _$buttons = new WeakMap(), _$wrapper = new WeakMap(), _onValueChange = new WeakSet(), _onButtonClick = new WeakMap(), _clamp = new WeakSet(), _dispatchChangeEvent = new WeakSet(), class extends HTMLElement {

package/radio/index.d.ts

@@ -5,6 +5,7 @@ export declare type TSinchRadioElement = HTMLElement & {
 };
 export declare type TSinchRadioReact = TSinchElementReact<TSinchRadioElement> & {
     value: string;
+    'aria-label': string;
     onChange: (event: SyntheticEvent<TSinchRadioElement, CustomEvent<boolean>>) => void;
 };
 declare global {