@nectary/components 0.8.1 → 0.10.0

package/accordion/index.js

@@ -50,7 +50,7 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -65,6 +65,10 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
     return ['value'];
   }
 
+  connectedCallback() {
+    this.setAttribute('aria-label', 'accordion');
+  }
+
   get nodeName() {
     return 'select';
   }

package/accordion-item/index.js

@@ -1,21 +1,21 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$labelContent, _onButtonClick;
+var _$button, _$buttonContent, _onButtonClick;
 
 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, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200)}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-4);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#box{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#box{display:block}</style><div id="wrapper"><button id="button" aria-haspopup="box" aria-expanded="false" aria-labelledby="button"><slot name="icon"></slot><span id="content"></span> <svg id="dropdown-icon" width="12" height="8"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><div id="box"><slot name="content"></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200)}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-4);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#title{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><span id="title"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
 export const isAccordionItemElement = element => {
   return element instanceof Element && element.tagName === 'SINCH-ACCORDION-ITEM';
 };
 const statusValues = ['info', 'success', 'warn', 'error'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$labelContent = new WeakMap(), _onButtonClick = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _onButtonClick = new WeakMap(), class extends HTMLElement {
   constructor() {
     super();
 
@@ -24,7 +24,7 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$labelCo
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$labelContent, {
+    _classPrivateFieldInitSpec(this, _$buttonContent, {
       writable: true,
       value: void 0
     });
@@ -44,14 +44,14 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$labelCo
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
 
-    _classPrivateFieldSet(this, _$labelContent, shadowRoot.querySelector('#content'));
+    _classPrivateFieldSet(this, _$buttonContent, shadowRoot.querySelector('#title'));
   }
 
   connectedCallback() {
@@ -110,7 +110,7 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$labelCo
     switch (name) {
       case 'label':
         {
-          _classPrivateFieldGet(this, _$labelContent).textContent = newVal;
+          _classPrivateFieldGet(this, _$buttonContent).textContent = newVal;
           break;
         }
 

package/alert/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{--sinch-color-alert-info-background:#D5E5F8;--sinch-color-alert-success-background:#D7F1D8;--sinch-color-alert-warn-background:#FFE8D6;--sinch-color-alert-error-background:#FCD7D4;display:block}#wrapper{display:flex;flex-direction:row;column-gap:12px;align-items:center;position:relative;padding:12px 18px;border-radius:4px;font:var(--sinch-font-body);color:var(--sinch-color-stormy-600);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%;min-height:56px}#body-wrapper{display:flex;flex-direction:row;align-items:center;column-gap:12px;flex:1;min-width:0}#title{display:none;font:var(--sinch-font-title-4);margin:0;margin-bottom:4px}#text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;flex:1;min-width:0}:is(#icon-info,#icon-success,#icon-warn,#icon-error){display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-alert-success-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-alert-warn-background)}:host([type=error]) #wrapper{background-color:var(--sinch-color-alert-error-background)}:host([type=info]) #wrapper{background-color:var(--sinch-color-alert-info-background)}:host([type=success]) #icon-success{display:block}:host([type=warn]) #icon-warn{display:block}:host([type=error]) #icon-error{display:block}:host(:is([type=info],:not([type]))) #icon-info{display:block}:host([multiline]:not([multiline=false])) #wrapper{align-items:flex-start;padding:16px 18px}:host([multiline]:not([multiline=false])) #body-wrapper{flex-direction:column;align-items:flex-start}:host([multiline]:not([multiline=false])) #title{display:block}:host([multiline]:not([multiline=false])) :is(#icon-info,#icon-success,#icon-warn,#icon-error){margin-top:2px}:host([multiline]:not([multiline=false])) #text{overflow:unset;text-overflow:unset;white-space:unset}:host([multiline]:not([multiline=false])) ::slotted(sinch-alert-button){margin-top:10px}</style><div id="wrapper"><svg id="icon-info" width="20" height="20" viewBox="0 0 20 20"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8H9V5h2v2Z" fill="#2071CE"/></svg> <svg id="icon-success" width="20" height="20" viewBox="0 0 20 20"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0ZM7.29 14.29 3.7 10.7a.996.996 0 1 1 1.41-1.41L8 12.17l6.88-6.88a.996.996 0 1 1 1.41 1.41L8.7 14.29a.996.996 0 0 1-1.41 0Z" fill="#2E8540"/></svg> <svg id="icon-warn" width="20" height="20" viewBox="0 0 20 20"><path d="M2.47 18h15.06c1.54 0 2.5-1.67 1.73-3L11.73 1.99c-.77-1.33-2.69-1.33-3.46 0L.74 15c-.77 1.33.19 3 1.73 3ZM10 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1Zm1 4H9v-2h2v2Z" fill="#FF8C34"/></svg> <svg id="icon-error" width="20" height="20" viewBox="0 0 18 18"><path d="M12.32 0H5.68c-.26 0-.52.11-.7.29L.29 4.98c-.18.18-.29.44-.29.7v6.63c0 .27.11.52.29.71l4.68 4.68c.19.19.45.3.71.3h6.63c.27 0 .52-.11.71-.29l4.68-4.68a.99.99 0 0 0 .29-.71V5.68c0-.27-.11-.52-.29-.71L13.02.29c-.18-.18-.44-.29-.7-.29ZM9 14.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3ZM9 10c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z" fill="#E31C3D"/></svg><div id="body-wrapper"><p id="title"></p><p id="text"></p><slot name="button"></slot></div><slot name="close"></slot></div>';
+const templateHTML = '<style>:host{--sinch-color-alert-info-background:#D5E5F8;--sinch-color-alert-success-background:#D7F1D8;--sinch-color-alert-warn-background:#FFE8D6;--sinch-color-alert-error-background:#FCD7D4;display:block}#wrapper{display:flex;flex-direction:row;column-gap:12px;align-items:center;position:relative;padding:12px 18px;border-radius:4px;font:var(--sinch-font-body);color:var(--sinch-color-stormy-600);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%;min-height:56px}#body-wrapper{display:flex;flex-direction:row;align-items:center;column-gap:12px;flex:1;min-width:0}#title{display:none;font:var(--sinch-font-title-4);margin:0;margin-bottom:4px}#text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;flex:1;min-width:0}:is(#icon-info,#icon-success,#icon-warn,#icon-error){display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-alert-success-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-alert-warn-background)}:host([type=error]) #wrapper{background-color:var(--sinch-color-alert-error-background)}:host([type=info]) #wrapper{background-color:var(--sinch-color-alert-info-background)}:host([type=success]) #icon-success{display:block}:host([type=warn]) #icon-warn{display:block}:host([type=error]) #icon-error{display:block}:host(:is([type=info],:not([type]))) #icon-info{display:block}:host([multiline]:not([multiline=false])) #wrapper{align-items:flex-start;padding:16px 18px}:host([multiline]:not([multiline=false])) #body-wrapper{flex-direction:column;align-items:flex-start}:host([multiline]:not([multiline=false])) #title{display:block}:host([multiline]:not([multiline=false])) :is(#icon-info,#icon-success,#icon-warn,#icon-error){margin-top:2px}:host([multiline]:not([multiline=false])) #text{overflow:unset;text-overflow:unset;white-space:unset}:host([multiline]:not([multiline=false])) ::slotted(sinch-alert-button){margin-top:10px}</style><div id="wrapper"><svg id="icon-info" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8H9V5h2v2Z" fill="#2071CE"/></svg> <svg id="icon-success" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0ZM7.29 14.29 3.7 10.7a.996.996 0 1 1 1.41-1.41L8 12.17l6.88-6.88a.996.996 0 1 1 1.41 1.41L8.7 14.29a.996.996 0 0 1-1.41 0Z" fill="#2E8540"/></svg> <svg id="icon-warn" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M2.47 18h15.06c1.54 0 2.5-1.67 1.73-3L11.73 1.99c-.77-1.33-2.69-1.33-3.46 0L.74 15c-.77 1.33.19 3 1.73 3ZM10 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1Zm1 4H9v-2h2v2Z" fill="#FF8C34"/></svg> <svg id="icon-error" width="20" height="20" viewBox="0 0 18 18" aria-hidden="true"><path d="M12.32 0H5.68c-.26 0-.52.11-.7.29L.29 4.98c-.18.18-.29.44-.29.7v6.63c0 .27.11.52.29.71l4.68 4.68c.19.19.45.3.71.3h6.63c.27 0 .52-.11.71-.29l4.68-4.68a.99.99 0 0 0 .29-.71V5.68c0-.27-.11-.52-.29-.71L13.02.29c-.18-.18-.44-.29-.7-.29ZM9 14.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3ZM9 10c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z" fill="#E31C3D"/></svg><div id="body-wrapper"><p id="title"></p><p id="text"></p><slot name="button"></slot></div><slot name="close"></slot></div>';
 const typeValues = ['info', 'success', 'warn', 'error'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -27,7 +27,7 @@ defineCustomElement('sinch-alert', (_$text = new WeakMap(), _$title = new WeakMa
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed'
+      mode: 'closed'
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
 

package/alert-button/index.js

@@ -21,7 +21,7 @@ defineCustomElement('sinch-alert-button', (_$button = new WeakMap(), class exten
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));

package/alert-close/index.js

@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icon/close';
 import { defineCustomElement } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;display:block;width:24px;height:24px;box-sizing:border-box;cursor:pointer}sinch-icon-close{display:block;pointer-events:none}</style><button><sinch-icon-close size="24"></sinch-icon-close></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;display:block;width:24px;height:24px;box-sizing:border-box;cursor:pointer}sinch-icon-close{display:block;pointer-events:none}</style><button aria-label="close"><sinch-icon-close size="24"></sinch-icon-close></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-alert-close', (_$button = new WeakMap(), class extends HTMLElement {
@@ -22,7 +22,7 @@ defineCustomElement('sinch-alert-close', (_$button = new WeakMap(), class extend
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));

package/button/index.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
 import type { FocusEvent, MouseEvent } from 'react';
-declare const buttonTypes: readonly ["primary", "secondary", "cta", "destructive"];
+declare const buttonTypes: readonly ["primary", "secondary", "cta-primary", "cta-secondary", "destructive"];
 export declare type TSinchButtonType = typeof buttonTypes[number];
 export declare type TSinchButtonElement = HTMLElement & {
     type: TSinchButtonType;
@@ -13,6 +13,7 @@ export declare type TSinchButtonElement = HTMLElement & {
 export declare type TSinchButtonReact = TSinchElementReact<TSinchButtonElement> & {
     type: TSinchButtonType;
     text: string;
+    'aria-label': string;
     disabled?: boolean;
     small?: boolean;
     onClick: (e: MouseEvent<TSinchButtonElement>) => void;

package/button/index.js

@@ -8,8 +8,8 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{--sinch-color-button-background:var(--sinch-color-tropical-500);--sinch-color-button-background-hover:var(--sinch-color-tropical-400);--sinch-color-button-background-focus:var(--sinch-color-tropical-500);--sinch-color-button-background-active:var(--sinch-color-tropical-600);--sinch-color-button-background-disabled:var(--sinch-color-tropical-100);--sinch-color-button-text:var(--sinch-color-text-inverted);--sinch-color-button-text-disabled:var(--sinch-color-text-inverted);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-text-inverted);display:inline-block;vertical-align:middle;outline:0}:host([type=secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-tropical-100);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-tropical-100);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-tropical-500);--sinch-color-button-text-disabled:var(--sinch-color-tropical-100);--sinch-color-button-border:var(--sinch-color-tropical-500);--sinch-color-button-border-hover:var(--sinch-color-tropical-500);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-tropical-500);--sinch-color-button-border-disabled:var(--sinch-color-tropical-100);--sinch-color-spinner-bg:var(--sinch-color-tropical-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([type=secondary]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}:host([type=secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200);--sinch-color-spinner-fg:var(--sinch-color-tropical-400)}:host([type=cta]){--sinch-color-button-background:var(--sinch-color-honey-500);--sinch-color-button-background-hover:var(--sinch-color-honey-400);--sinch-color-button-background-focus:var(--sinch-color-honey-500);--sinch-color-button-background-active:var(--sinch-color-honey-600);--sinch-color-button-background-disabled:var(--sinch-color-honey-100);--sinch-color-button-text:var(--sinch-color-text-default);--sinch-color-button-text-disabled:var(--sinch-color-stormy-300);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-text-default);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-text-default)}:host([type=cta]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=destructive]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-error-200);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-error-200);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-text-invalid);--sinch-color-button-text-disabled:var(--sinch-color-error-200);--sinch-color-button-border:var(--sinch-color-error-500);--sinch-color-button-border-hover:var(--sinch-color-error-500);--sinch-color-button-border-focus:var(--sinch-color-error-800);--sinch-color-button-border-active:var(--sinch-color-error-500);--sinch-color-button-border-disabled:var(--sinch-color-error-200);--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500);--sinch-color-icon:var(--sinch-color-text-invalid)}:host([type=destructive]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}button{all:initial;display:flex;align-items:center;justify-content:center;gap:15px;box-sizing:border-box;width:100%;height:48px;padding:12px 24px;border-radius:4px;font:var(--sinch-font-title-4);color:var(--sinch-color-button-text);background-color:var(--sinch-color-button-background);box-shadow:0 0 0 1px var(--sinch-color-button-border) inset;cursor:pointer}button:focus{background-color:var(--sinch-color-button-background-focus);box-shadow:0 0 0 2px var(--sinch-color-button-border-focus) inset}button:hover{background-color:var(--sinch-color-button-background-hover);box-shadow:0 0 0 1px var(--sinch-color-button-border-hover) inset}button:active{background-color:var(--sinch-color-button-background-active);box-shadow:0 0 0 2px var(--sinch-color-button-border-active) inset}button:disabled{color:var(--sinch-color-button-text-disabled);background-color:var(--sinch-color-button-background-disabled);box-shadow:0 0 0 1px var(--sinch-color-button-border-disabled) inset;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-200);--sinch-color-icon:var(--sinch-color-button-text-disabled)}button>*{pointer-events:none}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([small]:not([small=false]))>button{height:32px;padding:8px 16px;line-height:16px;font-size:14px;gap:8px}</style><button><slot name="icon"></slot><span id="text"></span></button>';
-const buttonTypes = ['primary', 'secondary', 'cta', 'destructive'];
+const templateHTML = '<style>:host{--sinch-color-button-background:var(--sinch-color-tropical-500);--sinch-color-button-background-hover:var(--sinch-color-tropical-400);--sinch-color-button-background-focus:var(--sinch-color-tropical-500);--sinch-color-button-background-active:var(--sinch-color-tropical-600);--sinch-color-button-background-disabled:var(--sinch-color-tropical-100);--sinch-color-button-text:var(--sinch-color-text-inverted);--sinch-color-button-text-disabled:var(--sinch-color-text-inverted);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-text-inverted);display:inline-block;vertical-align:middle;outline:0}:host([type=secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-tropical-100);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-tropical-100);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-tropical-500);--sinch-color-button-text-disabled:var(--sinch-color-tropical-100);--sinch-color-button-border:var(--sinch-color-tropical-500);--sinch-color-button-border-hover:var(--sinch-color-tropical-500);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-tropical-500);--sinch-color-button-border-disabled:var(--sinch-color-tropical-100);--sinch-color-spinner-bg:var(--sinch-color-tropical-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([type=secondary]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}:host([type=secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200);--sinch-color-spinner-fg:var(--sinch-color-tropical-400)}:host([type=cta-primary]){--sinch-color-button-background:var(--sinch-color-honey-500);--sinch-color-button-background-hover:var(--sinch-color-honey-400);--sinch-color-button-background-focus:var(--sinch-color-honey-500);--sinch-color-button-background-active:var(--sinch-color-honey-600);--sinch-color-button-background-disabled:var(--sinch-color-honey-100);--sinch-color-button-text:var(--sinch-color-text-default);--sinch-color-button-text-disabled:var(--sinch-color-stormy-300);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-text-default);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-text-default)}:host([type=cta-primary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=cta-secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-snow-500);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-snow-500);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-stormy-500);--sinch-color-button-text-disabled:var(--sinch-color-stormy-200);--sinch-color-button-border:var(--sinch-color-stormy-500);--sinch-color-button-border-hover:var(--sinch-color-stormy-500);--sinch-color-button-border-focus:var(--sinch-color-stormy-500);--sinch-color-button-border-active:var(--sinch-color-stormy-500);--sinch-color-button-border-disabled:var(--sinch-color-stormy-200);--sinch-color-spinner-bg:var(--sinch-color-snow-800);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([type=cta-secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-600);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-200)}:host([type=destructive]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-error-200);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-error-200);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-text-invalid);--sinch-color-button-text-disabled:var(--sinch-color-error-200);--sinch-color-button-border:var(--sinch-color-error-500);--sinch-color-button-border-hover:var(--sinch-color-error-500);--sinch-color-button-border-focus:var(--sinch-color-error-800);--sinch-color-button-border-active:var(--sinch-color-error-500);--sinch-color-button-border-disabled:var(--sinch-color-error-200);--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500);--sinch-color-icon:var(--sinch-color-text-invalid)}:host([type=destructive]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}button{all:initial;display:flex;align-items:center;justify-content:center;gap:15px;box-sizing:border-box;width:100%;height:48px;padding:12px;border-radius:4px;font:var(--sinch-font-title-4);color:var(--sinch-color-button-text);background-color:var(--sinch-color-button-background);box-shadow:0 0 0 1px var(--sinch-color-button-border) inset;cursor:pointer}button:focus{background-color:var(--sinch-color-button-background-focus);box-shadow:0 0 0 2px var(--sinch-color-button-border-focus) inset}button:hover{background-color:var(--sinch-color-button-background-hover);box-shadow:0 0 0 1px var(--sinch-color-button-border-hover) inset}button:active{background-color:var(--sinch-color-button-background-active);box-shadow:0 0 0 2px var(--sinch-color-button-border-active) inset}button:disabled{color:var(--sinch-color-button-text-disabled);background-color:var(--sinch-color-button-background-disabled);box-shadow:0 0 0 1px var(--sinch-color-button-border-disabled) inset;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-200);--sinch-color-icon:var(--sinch-color-button-text-disabled)}button>*{pointer-events:none}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:none}:host([text]:not([text=""])) #text{display:initial}:host([text]:not([text=""])) button{padding:12px 24px}:host([small]:not([small=false]))>button{height:32px;padding:8px;line-height:16px;font-size:14px;gap:8px}:host([text]:not([text=""])[small]:not([small=false])) button{padding:8px 16px}</style><button><slot name="icon"></slot><span id="text"></span></button>';
+const buttonTypes = ['primary', 'secondary', 'cta-primary', 'cta-secondary', 'destructive'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-button', (_$button = new WeakMap(), _$text = new WeakMap(), class extends HTMLElement {
@@ -27,7 +27,7 @@ defineCustomElement('sinch-button', (_$button = new WeakMap(), _$text = new Weak
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -37,6 +37,10 @@ defineCustomElement('sinch-button', (_$button = new WeakMap(), _$text = new Weak
     _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
   }
 
+  connectedCallback() {
+    this.setAttribute('role', 'button');
+  }
+
   static get observedAttributes() {
     return ['text', 'disabled'];
   }

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/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 {};