@nectary/components 0.39.0 → 0.41.0

package/chat-block/index.js

@@ -1,72 +1,30 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$firstName, _$lastName, _$timeStamp, _$bubbleSlot, _onBubbleSlotChange, _updateBubbleTypes;
-
-function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
-
-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"); } }
-
-function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-
 import { typeValues } from '../chat-bubble/utils';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:72px}#stamp{display:flex;gap:4px;margin:0;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-stormy-400)}#avatar{display:none;position:absolute;left:0;top:24px}:host([type=customer])>#wrapper{align-items:flex-start}:host([type=customer]) #avatar{display:block}</style><div id="wrapper"><div id="avatar"><slot name="avatar"></slot></div><p id="stamp"><span id="firstname"></span><span id="lastname"></span>&bull;<span id="time"></span></p><slot name="bubble"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-chat-block', (_$firstName = new WeakMap(), _$lastName = new WeakMap(), _$timeStamp = new WeakMap(), _$bubbleSlot = new WeakMap(), _onBubbleSlotChange = new WeakMap(), _updateBubbleTypes = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-chat-block', class extends NectaryElement {
+  #$firstName;
+  #$lastName;
+  #$timeStamp;
+  #$bubbleSlot;
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _updateBubbleTypes);
-
-    _classPrivateFieldInitSpec(this, _$firstName, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$lastName, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$timeStamp, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$bubbleSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onBubbleSlotChange, {
-      writable: true,
-      value: () => {
-        _classPrivateMethodGet(this, _updateBubbleTypes, _updateBubbleTypes2).call(this);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$firstName, shadowRoot.querySelector('#firstname'));
-
-    _classPrivateFieldSet(this, _$lastName, shadowRoot.querySelector('#lastname'));
-
-    _classPrivateFieldSet(this, _$timeStamp, shadowRoot.querySelector('#time'));
-
-    _classPrivateFieldSet(this, _$bubbleSlot, shadowRoot.querySelector('slot[name="bubble"]'));
+    this.#$firstName = shadowRoot.querySelector('#firstname');
+    this.#$lastName = shadowRoot.querySelector('#lastname');
+    this.#$timeStamp = shadowRoot.querySelector('#time');
+    this.#$bubbleSlot = shadowRoot.querySelector('slot[name="bubble"]');
   }
 
   connectedCallback() {
-    _classPrivateFieldGet(this, _$bubbleSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onBubbleSlotChange));
+    this.#$bubbleSlot.addEventListener('slotchange', this.#onBubbleSlotChange);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$bubbleSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onBubbleSlotChange));
+    this.#$bubbleSlot.removeEventListener('slotchange', this.#onBubbleSlotChange);
   }
 
   static get observedAttributes() {
@@ -77,26 +35,25 @@ defineCustomElement('sinch-chat-block', (_$firstName = new WeakMap(), _$lastName
     switch (name) {
       case 'firstname':
         {
-          _classPrivateFieldGet(this, _$firstName).textContent = newVal;
+          this.#$firstName.textContent = newVal;
           break;
         }
 
       case 'lastname':
         {
-          _classPrivateFieldGet(this, _$lastName).textContent = newVal;
+          this.#$lastName.textContent = newVal;
           break;
         }
 
       case 'timestamp':
         {
-          _classPrivateFieldGet(this, _$timeStamp).textContent = newVal;
+          this.#$timeStamp.textContent = newVal;
           break;
         }
 
       case 'type':
         {
-          _classPrivateMethodGet(this, _updateBubbleTypes, _updateBubbleTypes2).call(this);
-
+          this.#updateBubbleTypes();
           break;
         }
     }
@@ -115,7 +72,7 @@ defineCustomElement('sinch-chat-block', (_$firstName = new WeakMap(), _$lastName
   }
 
   get firstName() {
-    return getAttribute(this, 'firstname', null);
+    return getAttribute(this, 'firstname');
   }
 
   set lastName(value) {
@@ -123,7 +80,7 @@ defineCustomElement('sinch-chat-block', (_$firstName = new WeakMap(), _$lastName
   }
 
   get lastName() {
-    return getAttribute(this, 'lastname', null);
+    return getAttribute(this, 'lastname');
   }
 
   set timestamp(value) {
@@ -131,15 +88,18 @@ defineCustomElement('sinch-chat-block', (_$firstName = new WeakMap(), _$lastName
   }
 
   get timestamp() {
-    return getAttribute(this, 'timestamp', null);
+    return getAttribute(this, 'timestamp');
   }
 
-}));
+  #onBubbleSlotChange = () => {
+    this.#updateBubbleTypes();
+  };
 
-function _updateBubbleTypes2() {
-  const typeValue = getAttribute(this, 'type');
+  #updateBubbleTypes() {
+    const typeValue = getAttribute(this, 'type');
+    this.#$bubbleSlot.assignedElements().forEach(el => {
+      updateAttribute(el, 'data-type', typeValue);
+    });
+  }
 
-  _classPrivateFieldGet(this, _$bubbleSlot).assignedElements().forEach(el => {
-    updateAttribute(el, 'data-type', typeValue);
-  });
-}
+});

package/chat-bubble/index.js

@@ -1,12 +1,3 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$text;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import '../icons/query-builder';
 import '../icons/check';
 import '../icons/done-all';
@@ -16,19 +7,14 @@ const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:rel
 import { statusValues, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-chat-bubble', (_$text = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
+  #$text;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+    this.#$text = shadowRoot.querySelector('#text');
   }
 
   static get observedAttributes() {
@@ -39,7 +25,7 @@ defineCustomElement('sinch-chat-bubble', (_$text = new WeakMap(), class extends
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
     }
@@ -65,4 +51,4 @@ defineCustomElement('sinch-chat-bubble', (_$text = new WeakMap(), class extends
     return getLiteralAttribute(this, statusValues, 'status', null);
   }
 
-}));
+});

package/checkbox/index.js

@@ -1,115 +1,36 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$input, _$label, _onCheckboxInput, _onCheckboxFocus, _onCheckboxBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
-
-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, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-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:var(--sinch-shape-radius-xs);pointer-events:none;background-color:var(--sinch-color-checkbox-background);border:2px solid var(--sinch-color-checkbox-border);transition:background-color .1s linear;box-sizing:border-box}#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:1}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:1}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);border-color:var(--sinch-color-checkbox-border-checked)}#checkbox:focus::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus::after{background-color:var(--sinch-color-checkbox-background-focus);border-color:var(--sinch-color-checkbox-border-focus)}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);border-color:var(--sinch-color-checkbox-border-hover)}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);border-color:var(--sinch-color-checkbox-border-active)}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);border-color:var(--sinch-color-checkbox-border-disabled)}#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);border-color:var(--sinch-color-checkbox-border-focus-checked)}#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);border-color:var(--sinch-color-checkbox-border-hover-checked)}#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);border-color:var(--sinch-color-checkbox-border-active-checked)}#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);border-color:var(--sinch-color-checkbox-border-disabled-checked)}</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 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-700);--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-text-disabled);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:var(--sinch-shape-radius-xs);pointer-events:none;background-color:var(--sinch-color-checkbox-background);border:2px solid var(--sinch-color-checkbox-border);transition:background-color .1s linear;box-sizing:border-box}#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:1}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:1}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);border-color:var(--sinch-color-checkbox-border-checked)}#checkbox:focus::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus::after{background-color:var(--sinch-color-checkbox-background-focus);border-color:var(--sinch-color-checkbox-border-focus)}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);border-color:var(--sinch-color-checkbox-border-hover)}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);border-color:var(--sinch-color-checkbox-border-active)}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);border-color:var(--sinch-color-checkbox-border-disabled)}#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);border-color:var(--sinch-color-checkbox-border-focus-checked)}#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);border-color:var(--sinch-color-checkbox-border-hover-checked)}#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);border-color:var(--sinch-color-checkbox-border-active-checked)}#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);border-color:var(--sinch-color-checkbox-border-disabled-checked)}</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(), _onCheckboxInput = new WeakMap(), _onCheckboxFocus = new WeakMap(), _onCheckboxBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-checkbox', class extends NectaryElement {
+  #$input;
+  #$label;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$input, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onCheckboxInput, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        const isChecked = _classPrivateFieldGet(this, _$input).checked;
-
-        _classPrivateFieldGet(this, _$input).checked = this.checked;
-        this.dispatchEvent(new CustomEvent('change', {
-          detail: isChecked,
-          bubbles: true
-        }));
-        this.dispatchEvent(new CustomEvent('-change', {
-          detail: isChecked
-        }));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCheckboxFocus, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-focus'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCheckboxBlur, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-blur'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-focus')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-blur')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('label'));
+    this.#$input = shadowRoot.querySelector('input');
+    this.#$label = shadowRoot.querySelector('label');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
-
-    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onCheckboxInput));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onCheckboxFocus));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onCheckboxBlur));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$input.addEventListener('input', this.#onCheckboxInput);
+    this.#$input.addEventListener('focus', this.#onCheckboxFocus);
+    this.#$input.addEventListener('blur', this.#onCheckboxBlur);
+    this.addEventListener('-change', this.#onChangeReactHandler);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onCheckboxInput));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onCheckboxFocus));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onCheckboxBlur));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$input.removeEventListener('input', this.#onCheckboxInput);
+    this.#$input.removeEventListener('focus', this.#onCheckboxFocus);
+    this.#$input.removeEventListener('blur', this.#onCheckboxBlur);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
 
   static get observedAttributes() {
@@ -161,21 +82,21 @@ defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new We
   }
 
   get text() {
-    return getAttribute(this, 'text', null);
+    return getAttribute(this, 'text');
   }
 
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          this.#$label.textContent = newVal;
           break;
         }
 
       case 'checked':
         {
           const isChecked = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$input).checked = isChecked;
+          this.#$input.checked = isChecked;
           updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
           break;
         }
@@ -183,19 +104,50 @@ defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new We
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$input).disabled = isDisabled;
+          this.#$input.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
     }
   }
 
-  focus() {
-    _classPrivateFieldGet(this, _$input).focus();
+  get focusable() {
+    return true;
   }
 
-  blur() {
-    _classPrivateFieldGet(this, _$input).blur();
+  focus() {
+    this.#$input.focus();
   }
 
-}));
+  blur() {
+    this.#$input.blur();
+  }
+
+  #onCheckboxInput = e => {
+    e.stopPropagation();
+    const isChecked = this.#$input.checked;
+    this.#$input.checked = this.checked;
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: isChecked,
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: isChecked
+    }));
+  };
+  #onCheckboxFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onCheckboxBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onFocusReactHandler = e => {
+    getReactEventHandler(this, 'on-focus')?.(e);
+  };
+  #onBlurReactHandler = e => {
+    getReactEventHandler(this, 'on-blur')?.(e);
+  };
+});

package/chip/index.d.ts

@@ -0,0 +1,13 @@
+import '../text';
+import '../icons/cancel';
+import type { TSinchChipElement, TSinchChipReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-chip': TSinchChipReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-chip': TSinchChipElement;
+    }
+}

package/chip/index.js

@@ -0,0 +1,140 @@
+import '../text';
+import '../icons/cancel';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler } from '../utils';
+import { NO_COLOR } from '../utils/colors';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 9px;border-radius:12px;background-color:var(--sinch-color-snow-500);color:var(--sinch-color-text-default);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}@supports not selector(:focus-visible){#button:focus::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}:host([small]:not([small=false])) #button:focus::after{border-radius:14px}}#text{flex:1}:host([small]:not([small=false])) #button{height:20px;border-radius:10px;padding:0 3px 0 7px}:host([small]:not([small=false])) #button:focus-visible::after{border-radius:14px}::slotted(*){margin-left:-4px}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon-cancel id="close"></sinch-icon-cancel></button>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-chip', class extends NectaryElement {
+  #$text;
+  #$button;
+  #controller = null;
+
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$text = shadowRoot.querySelector('#text');
+  }
+
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.setAttribute('role', 'button');
+    this.#$button.addEventListener('click', this.#onButtonClick, {
+      signal
+    });
+    this.#$button.addEventListener('focus', this.#onButtonFocus, {
+      signal
+    });
+    this.#$button.addEventListener('blur', this.#onButtonBlur, {
+      signal
+    });
+    this.addEventListener('-click', this.#onClickReactHandler, {
+      signal
+    });
+    this.addEventListener('-focus', this.#onFocusReactHandler, {
+      signal
+    });
+    this.addEventListener('-blur', this.#onBlurReactHandler, {
+      signal
+    });
+    this.#updateColor();
+  }
+
+  disconnectedCallback() {
+    this.#controller.abort();
+  }
+
+  get color() {
+    return getAttribute(this, 'color');
+  }
+
+  set color(value) {
+    updateAttribute(this, 'color', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get small() {
+    return getBooleanAttribute(this, 'small');
+  }
+
+  set small(isSmall) {
+    updateBooleanAttribute(this, 'small', isSmall);
+  }
+
+  static get observedAttributes() {
+    return ['text', 'color'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'color':
+        {
+          this.#updateColor();
+          break;
+        }
+
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+    }
+  }
+
+  #updateColor() {
+    const colorName = this.color ?? NO_COLOR;
+
+    if (colorName !== NO_COLOR) {
+      this.#$button.style.setProperty('background-color', `var(--sinch-color-map-${colorName}-bg)`);
+      this.#$button.style.setProperty('color', `var(--sinch-color-map-${colorName}-fg)`);
+      this.#$button.style.setProperty('--sinch-color-icon', `var(--sinch-color-map-${colorName}-fg)`);
+    } else {
+      this.#$button.style.removeProperty('background-color');
+      this.#$button.style.removeProperty('color');
+      this.#$button.style.removeProperty('--sinch-color-icon');
+    }
+  }
+
+  get focusable() {
+    return true;
+  }
+
+  focus() {
+    this.#$button.focus();
+  }
+
+  blur() {
+    this.#$button.blur();
+  }
+
+  #onButtonClick = () => {
+    this.dispatchEvent(new CustomEvent('-click'));
+  };
+  #onButtonFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onButtonBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
+  };
+});

package/chip/types.d.ts

@@ -0,0 +1,37 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchChipElement = HTMLElement & {
+    /** Text */
+    text: string;
+    /** Color, gray by default */
+    color: string | null;
+    /** Small */
+    small: boolean;
+    /** Click event */
+    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
+    /** Focus event */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Color, gray by default */
+    setAttribute(name: 'color', value: string): void;
+    /** Small */
+    setAttribute(name: 'small', value: ''): void;
+};
+export declare type TSinchChipReact = TSinchElementReact<TSinchChipElement> & {
+    /** Text */
+    text: string;
+    /** Color, gray by default */
+    color?: string;
+    /** Small */
+    small?: boolean;
+    /** Click event handler */
+    'on-click'?: (e: CustomEvent<void>) => void;
+    /** Focus event handler */
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur event handler */
+    'on-blur'?: (e: CustomEvent<void>) => void;
+    /** Label that is used for a11y` */
+    'aria-label': string;
+};

package/color-menu/index.d.ts

@@ -0,0 +1,14 @@
+import '../color-swatch';
+import '../tooltip';
+import '../icons/check';
+import type { TSinchSelectMenuElement, TSinchSelectMenuReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-color-menu': TSinchSelectMenuReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-color-menu': TSinchSelectMenuElement;
+    }
+}