@nectary/components 0.9.0 → 0.11.0

package/card-link/index.js

@@ -0,0 +1,121 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$anchor, _$text, _onClick;
+
+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 '../icon/cancel';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline;outline:0}a{display:flex;flex-direction:row;gap:8px;font:var(--sinch-font-emphasized-body);color:var(--sinch-color-tropical-500);text-decoration:none;outline:0;--sinch-color-icon:var(--sinch-color-tropical-500)}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-300);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-300)}span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}</style><a><span></span><sinch-icon-arrow-forward size="24"></sinch-icon-arrow-forward></a>';
+export const isSinchCardLinkElement = el => {
+  return el.tagName === 'SINCH-CARD-LINK';
+};
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-card-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), _onClick = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$anchor, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onClick, {
+      writable: true,
+      value: e => {
+        if (this.disabled) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$anchor, shadowRoot.querySelector('a'));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('span'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$anchor).addEventListener('click', _classPrivateFieldGet(this, _onClick));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$anchor).removeEventListener('click', _classPrivateFieldGet(this, _onClick));
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get href() {
+    return getAttribute(this, 'href', '');
+  }
+
+  set href(value) {
+    updateAttribute(this, 'href', value);
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  set external(isExternal) {
+    updateBooleanAttribute(this, 'external', isExternal);
+  }
+
+  get external() {
+    return getBooleanAttribute(this, 'external');
+  }
+
+  static get observedAttributes() {
+    return ['text', 'href'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+
+      case 'href':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$anchor), 'href', newVal);
+          break;
+        }
+    }
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$anchor).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$anchor).blur();
+  }
+
+}));

package/checkbox/index.d.ts

@@ -4,6 +4,7 @@ export declare type TSinchCheckboxElement = HTMLElement & {
     checked: boolean;
     indeterminate: boolean;
     disabled: boolean;
+    invalid: boolean;
     text: string | null;
     focus(): void;
     blur(): void;
@@ -12,7 +13,9 @@ export declare type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxEleme
     checked?: boolean;
     indeterminate?: boolean;
     disabled?: boolean;
+    invalid?: boolean;
     text?: string;
+    'aria-label': string;
     onChange: (event: SyntheticEvent<TSinchCheckboxElement, CustomEvent<boolean>>) => void;
     onFocus?: (e: FocusEvent<TSinchCheckboxElement>) => void;
     onBlur?: (e: FocusEvent<TSinchCheckboxElement>) => void;

package/checkbox/index.js

@@ -1,18 +1,17 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label;
+var _$input, _$label, _onCheckboxInput;
 
 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{--sinch-color-icon:var(--sinch-color-snow-100);--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-800);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:2px;pointer-events:none;background-color:var(--sinch-color-checkbox-background);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border) inset;transition:background-color .1s linear}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0%;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0%;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}:host(:is(:not([indeterminate]),[indeterminate=false])) #checkbox:checked~#icon-checkmark{opacity:100%}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:100%}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-checked) inset}#checkbox:focus::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus::after{background-color:var(--sinch-color-checkbox-background-focus);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-focus) inset}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-hover) inset}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-active) inset}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-disabled) inset}#checkbox:focus:checked::before{background-color:var(--sinch-color-checkbox-circle-focus-checked)}#checkbox:focus:checked::after{background-color:var(--sinch-color-checkbox-background-focus-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-focus-checked) inset}#checkbox:hover:checked::before{background-color:var(--sinch-color-checkbox-circle-hover-checked)}#checkbox:hover:checked::after{background-color:var(--sinch-color-checkbox-background-hover-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-hover-checked) inset}#checkbox:active:checked::before{background-color:var(--sinch-color-checkbox-circle-active-checked)}#checkbox:active:checked::after{background-color:var(--sinch-color-checkbox-background-active-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-active-checked) inset}#checkbox:disabled:checked::before{background-color:var(--sinch-color-checkbox-circle-disabled-checked)}#checkbox:disabled:checked::after{background-color:var(--sinch-color-checkbox-background-disabled-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-disabled-checked) inset}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/> <svg id="icon-checkmark" width="14" height="11"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z" fill="white"/></svg> <svg id="icon-indeterminate" width="12" height="2"><line y1="1" x2="12" y2="1" stroke="white" stroke-width="2"/></svg></div><label for="checkbox" id="label"></label></div>';
+const templateHTML = '<style>:host{--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-800);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-text:var(--sinch-color-text-default);--sinch-color-checkbox-text-disabled:var(--sinch-color-stormy-200);display:inline-block;vertical-align:middle;outline:0}:host([invalid]:not([invalid=false])){--sinch-color-checkbox-border:var(--sinch-color-raspberry-500);--sinch-color-checkbox-background-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-raspberry-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-raspberry-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-disabled:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-text:var(--sinch-color-text-invalid);--sinch-color-checkbox-text-disabled:var(--sinch-color-raspberry-200)}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:2px;pointer-events:none;background-color:var(--sinch-color-checkbox-background);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border) inset;transition:background-color .1s linear}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0%;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0%;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-body);color:var(--sinch-color-checkbox-text)}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-checkbox-text-disabled)}:host(:is(:not([indeterminate]),[indeterminate=false])) #checkbox:checked~#icon-checkmark{opacity:100%}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:100%}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-checked) inset}#checkbox:focus::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus::after{background-color:var(--sinch-color-checkbox-background-focus);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-focus) inset}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-hover) inset}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-active) inset}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-disabled) inset}#checkbox:focus:checked::before{background-color:var(--sinch-color-checkbox-circle-focus-checked)}#checkbox:focus:checked::after{background-color:var(--sinch-color-checkbox-background-focus-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-focus-checked) inset}#checkbox:hover:checked::before{background-color:var(--sinch-color-checkbox-circle-hover-checked)}#checkbox:hover:checked::after{background-color:var(--sinch-color-checkbox-background-hover-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-hover-checked) inset}#checkbox:active:checked::before{background-color:var(--sinch-color-checkbox-circle-active-checked)}#checkbox:active:checked::after{background-color:var(--sinch-color-checkbox-background-active-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-active-checked) inset}#checkbox:disabled:checked::before{background-color:var(--sinch-color-checkbox-circle-disabled-checked)}#checkbox:disabled:checked::after{background-color:var(--sinch-color-checkbox-background-disabled-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-disabled-checked) inset}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/> <svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z" fill="white"/></svg> <svg id="icon-indeterminate" width="12" height="2" aria-hidden="true"><line y1="1" x2="12" y2="1" stroke="white" stroke-width="2"/></svg></div><label for="checkbox" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new WeakMap(), _onCheckboxInput = new WeakMap(), class extends HTMLElement {
   constructor() {
     super();
 
@@ -26,20 +25,23 @@ defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new We
       value: void 0
     });
 
-    _defineProperty(this, 'onCheckboxInput', e => {
-      e.stopPropagation();
+    _classPrivateFieldInitSpec(this, _onCheckboxInput, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
 
-      const isChecked = _classPrivateFieldGet(this, _$input).checked;
+        const isChecked = _classPrivateFieldGet(this, _$input).checked;
 
-      _classPrivateFieldGet(this, _$input).checked = this.checked;
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: isChecked,
-        bubbles: true
-      }));
+        _classPrivateFieldGet(this, _$input).checked = this.checked;
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: isChecked,
+          bubbles: true
+        }));
+      }
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -47,14 +49,12 @@ defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new We
     _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
 
     _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('label'));
-  }
 
-  connectedCallback() {
-    _classPrivateFieldGet(this, _$input).addEventListener('input', this.onCheckboxInput);
+    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onCheckboxInput));
   }
 
-  disconnectedCallback() {
-    _classPrivateFieldGet(this, _$input).removeEventListener('input', this.onCheckboxInput);
+  connectedCallback() {
+    this.setAttribute('role', 'checkbox');
   }
 
   static get observedAttributes() {
@@ -93,6 +93,14 @@ defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new We
     return getBooleanAttribute(this, 'disabled');
   }
 
+  set invalid(isInvalid) {
+    updateBooleanAttribute(this, 'invalid', isInvalid);
+  }
+
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
+  }
+
   set text(value) {
     updateAttribute(this, 'text', value);
   }
@@ -112,6 +120,7 @@ defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new We
       case 'checked':
         {
           _classPrivateFieldGet(this, _$input).checked = isAttrTrue(newVal);
+          updateAttribute(this, 'aria-checked', isAttrTrue(newVal));
           break;
         }
 

package/dialog/index.d.ts

@@ -0,0 +1,23 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+declare type TSinchDialogElement = HTMLElement & {
+    title: string;
+    readonly dialogRect: TRect;
+    readonly closeButtonRect: TRect;
+};
+declare type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
+    title: string;
+    'aria-label': string;
+    onClose: (event: SyntheticEvent<TSinchDialogElement, CustomEvent<void>>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-dialog': TSinchDialogReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-dialog': TSinchDialogElement;
+    }
+}
+export {};

package/dialog/index.js

@@ -0,0 +1,181 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$main, _$closeButton, _$backDrop, _$title, _$prevActiveElement, _focusIn, _onCloseByMouse, _onCloseByEsc, _onClose, _onCloseReactHandler;
+
+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, getRect, updateAttribute } from '../utils';
+const templateHTML = '<style>#wrapper{position:fixed;top:0;left:0;height:100vh;width:100vw;color:var(--sinch-color-text-default);font:var(--sinch-font-body);z-index:1}#backdrop{background-color:#000;position:absolute;left:0;top:0;opacity:55%;width:100%;height:100%}#main{display:flex;flex-direction:column;position:relative;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);padding:24px;width:100%;max-width:512px;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100)}#header{display:flex;flex-direction:row;justify-content:space-between;align-content:center;margin-bottom:16px}#title{font:var(--sinch-font-title-3);color:var(--sinch-color-text-default)}#content-wrapper{max-height:50vh;overflow-y:auto;margin-top:16px}#close{all:initial;cursor:pointer}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}</style><div id="wrapper"><div id="backdrop"></div><div id="main"><div id="header"><span id="title"></span> <button id="close"><sinch-icon-close size="24"></sinch-icon-close></button></div><div id="content-wrapper"><slot name="content"></slot></div><div id="buttons"><slot name="buttons"></slot></div></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+
+const getReactEventHandler = ($element, handlerName) => {
+  for (const key in $element) {
+    if (key.startsWith('__reactProps$')) {
+      return $element[key][handlerName];
+    }
+  }
+
+  return null;
+};
+
+defineCustomElement('sinch-dialog', (_$main = new WeakMap(), _$closeButton = new WeakMap(), _$backDrop = new WeakMap(), _$title = new WeakMap(), _$prevActiveElement = new WeakMap(), _focusIn = new WeakMap(), _onCloseByMouse = new WeakMap(), _onCloseByEsc = new WeakMap(), _onClose = new WeakMap(), _onCloseReactHandler = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$main, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$closeButton, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$backDrop, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$title, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$prevActiveElement, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _focusIn, {
+      writable: true,
+      value: e => {
+        if (e.target === this) {
+          return;
+        }
+
+        if (!this.contains(e.target)) {
+          _classPrivateFieldGet(this, _$closeButton).focus();
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloseByMouse, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        _classPrivateFieldGet(this, _onClose).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloseByEsc, {
+      writable: true,
+      value: e => {
+        switch (e.key) {
+          case 'Escape':
+            {
+              e.preventDefault();
+              e.stopPropagation();
+
+              _classPrivateFieldGet(this, _onClose).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onClose, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$prevActiveElement)?.focus();
+        this.dispatchEvent(new CustomEvent('close', {
+          bubbles: true
+        }));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'onClose')?.();
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$main, shadowRoot.querySelector('#main'));
+
+    _classPrivateFieldSet(this, _$closeButton, shadowRoot.querySelector('#close'));
+
+    _classPrivateFieldSet(this, _$backDrop, shadowRoot.querySelector('#backdrop'));
+
+    _classPrivateFieldSet(this, _$title, shadowRoot.querySelector('#title'));
+  }
+
+  static get observedAttributes() {
+    return ['title'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'title':
+        {
+          _classPrivateFieldGet(this, _$title).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+  set title(title) {
+    updateAttribute(this, 'title', title);
+  }
+
+  get title() {
+    return getAttribute(this, 'title', '');
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'dialog');
+
+    _classPrivateFieldSet(this, _$prevActiveElement, document.activeElement);
+
+    _classPrivateFieldGet(this, _$closeButton).addEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
+
+    _classPrivateFieldGet(this, _$backDrop).addEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
+
+    this.addEventListener('keydown', _classPrivateFieldGet(this, _onCloseByEsc));
+    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    document.addEventListener('focusin', _classPrivateFieldGet(this, _focusIn));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldSet(this, _$prevActiveElement, null);
+
+    _classPrivateFieldGet(this, _$closeButton).removeEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
+
+    _classPrivateFieldGet(this, _$backDrop).removeEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
+
+    this.removeEventListener('keydown', _classPrivateFieldGet(this, _onCloseByEsc));
+    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    document.removeEventListener('focusin', _classPrivateFieldGet(this, _focusIn));
+  }
+
+  get dialogRect() {
+    return getRect(_classPrivateFieldGet(this, _$main));
+  }
+
+  get closeButtonRect() {
+    return getRect(_classPrivateFieldGet(this, _$closeButton));
+  }
+
+}));

package/dropdown/index.d.ts

@@ -0,0 +1,34 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { FocusEvent, SyntheticEvent } from 'react';
+declare const orientationValues: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
+export declare type TSinchDropdownOrientation = typeof orientationValues[number];
+export declare type TSinchDropdownElement = HTMLElement & {
+    orientation: TSinchDropdownOrientation;
+    value: string;
+    disabled: boolean;
+    maxVisibleItems: number | null;
+    readonly dropdownRect: TRect;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchDropdownReact = TSinchElementReact<TSinchDropdownElement> & {
+    orientation?: TSinchDropdownOrientation;
+    value: string;
+    disabled?: boolean;
+    maxVisibleItems?: number;
+    'aria-label': string;
+    onChange: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
+    onFocus?: (e: FocusEvent<TSinchDropdownElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchDropdownElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-dropdown': TSinchDropdownReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-dropdown': TSinchDropdownElement;
+    }
+}
+export {};