@nectary/components 0.22.0 → 0.24.0

package/table-head/index.js

@@ -1,13 +1,11 @@
-import { defineCustomElement } from '../utils';
+import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:table-header-group}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-table-head', class extends HTMLElement {
+defineCustomElement('sinch-table-head', class extends NectaryElement {
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      mode: 'closed'
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
 

package/table-head-cell/index.js

@@ -7,12 +7,12 @@ 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, getAttribute, getBooleanAttribute, getLiteralAttribute, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);--sinch-icon-button-color:var(--sinch-color-stormy-100)}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}</style><slot name="checkbox"></slot><div id="wrapper"><slot name="left"></slot><span id="text"></span><slot name="tooltip"></slot><slot name="right"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const alignValues = ['start', 'center', 'end'];
-defineCustomElement('sinch-table-head-cell', (_$text = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-table-head-cell', (_$text = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -21,9 +21,7 @@ defineCustomElement('sinch-table-head-cell', (_$text = new WeakMap(), class exte
       value: void 0
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed'
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));

package/table-row/index.js

@@ -1,13 +1,11 @@
-import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getBooleanAttribute, NectaryElement, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:table-row}:host([sticky]) ::slotted(sinch-table-head-cell){position:sticky;top:0;z-index:1;background-color:var(--sinch-color-snow-100)}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-table-row', class extends HTMLElement {
+defineCustomElement('sinch-table-row', class extends NectaryElement {
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      mode: 'closed'
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
 

package/tabs/index.js

@@ -12,7 +12,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
 import { isTabsOptionElement } from '../tabs-option';
-import { defineCustomElement, getAttribute, updateAttribute } from '../utils';
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;height:60px;width:100%;box-sizing:border-box;overflow-x:auto}</style><div id="wrapper"><slot></slot></div>';
 
 const findSelectedOption = elements => {
@@ -21,7 +21,7 @@ const findSelectedOption = elements => {
 
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _getEnabledRadioElements = new WeakSet(), class extends HTMLElement {
+defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _getEnabledRadioElements = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -99,10 +99,7 @@ defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = ne
       }
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     shadowRoot.addEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
     shadowRoot.addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));

package/tabs-option/index.js

@@ -6,14 +6,14 @@ 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, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content" aria-hidden="true"></label> <input id="input" type="radio" aria-hidden="true"/></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}:host()>*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content" aria-hidden="true"></label> <input id="input" type="radio" aria-hidden="true"/></div>';
 export const isTabsOptionElement = element => {
   return element instanceof Element && element.tagName === 'SINCH-TABS-OPTION';
 };
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -29,10 +29,7 @@ defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extend
       }
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.$input = shadowRoot.querySelector('input');
     this.$label = shadowRoot.querySelector('#content');

package/tag/index.d.ts

@@ -1,4 +1,4 @@
-import '../icon/cancel';
+import '../icons/cancel';
 import type { TSinchElementReact } from '../types';
 declare const categoryValues: readonly ["candy", "bolt", "aqua", "grass", "berry", "orange", "night", "mud", "dirt"];
 export declare type TSinchTagCategory = typeof categoryValues[number];

package/tag/index.js

@@ -7,13 +7,13 @@ 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 '../icon/cancel';
-import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
+import '../icons/cancel';
+import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;position:relative;padding:2px 8px;border-radius:12px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:100%;height:24px;box-sizing:border-box;--sinch-color-icon:var(--sinch-color-stormy-400);--sinch-size-icon:16px}:host([category=candy])>#wrapper{background-color:var(--sinch-color-candy-200)}:host([category=bolt])>#wrapper{background-color:var(--sinch-color-bolt-200)}:host([category=aqua])>#wrapper{background-color:var(--sinch-color-aqua-200)}:host([category=grass])>#wrapper{background-color:var(--sinch-color-grass-200)}:host([category=berry])>#wrapper{background-color:var(--sinch-color-berry-200)}:host([category=orange])>#wrapper{background-color:var(--sinch-color-orange-200)}:host([category=night])>#wrapper{background-color:var(--sinch-color-night-200)}:host([category=mud])>#wrapper{background-color:var(--sinch-color-mud-200)}:host([category=dirt])>#wrapper{background-color:var(--sinch-color-dirt-200)}:host([inverted]:not([inverted=false]))>#wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-snow-100)}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px;--sinch-size-icon:14px}#text{text-overflow:ellipsis;white-space:nowrap;overflow:auto;flex:1}</style><div id="wrapper"><slot name="icon"></slot><span id="text"></span><slot name="close"></slot></div>';
 const categoryValues = ['candy', 'bolt', 'aqua', 'grass', 'berry', 'orange', 'night', 'mud', 'dirt'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tag', (_$text = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-tag', (_$text = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -22,9 +22,7 @@ defineCustomElement('sinch-tag', (_$text = new WeakMap(), class extends HTMLElem
       value: void 0
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed'
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));

package/tag-close/index.d.ts

@@ -1,4 +1,4 @@
-import '../icon/cancel';
+import '../icons/cancel';
 import type { TSinchElementReact } from '../types';
 import type { FocusEvent, MouseEvent } from 'react';
 export declare type TSinchTagCloseElement = HTMLElement & {

package/tag-close/index.js

@@ -7,12 +7,12 @@ 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 '../icon/cancel';
-import { defineCustomElement } from '../utils';
+import '../icons/cancel';
+import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:14px;height:14px}button{all:initial;position:absolute;display:flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);cursor:pointer}button>*{pointer-events:none}</style><div id="wrapper"><button aria-label="dismiss tag"><sinch-icon-cancel></sinch-icon-cancel></button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tag-close', (_$button = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-tag-close', (_$button = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -21,10 +21,7 @@ defineCustomElement('sinch-tag-close', (_$button = new WeakMap(), class extends
       value: void 0
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('button'));

package/textarea/index.js

@@ -7,11 +7,11 @@ 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, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -104,10 +104,7 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       }
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));

package/title/index.d.ts

@@ -1,4 +1,4 @@
-import '../icon/cancel';
+import '../icons/cancel';
 import type { TSinchElementReact } from '../types';
 declare const typeValues: readonly ["xl", "l", "m", "s", "xs"];
 declare const levelValues: readonly ["1", "2", "3", "4", "5", "6"];

package/title/index.js

@@ -7,8 +7,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 '../icon/cancel';
-import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute } from '../utils';
+import '../icons/cancel';
+import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:block}:host([type=xl])>*{font:var(--sinch-font-title-xl)}:host([type="l"])>*{font:var(--sinch-font-title-l)}:host([type="m"])>*{font:var(--sinch-font-title-m)}:host([type="s"])>*{font:var(--sinch-font-title-s)}:host([type=xs])>*{font:var(--sinch-font-title-xs)}</style><span id="text"></span>';
 const typeValues = ['xl', 'l', 'm', 's', 'xs'];
 const levelValues = ['1', '2', '3', '4', '5', '6'];
@@ -27,7 +27,7 @@ const assertType = value => {
 
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -36,10 +36,7 @@ defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends HTMLEl
       value: void 0
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));

package/toggle/index.js

@@ -7,11 +7,11 @@ 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, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);text-align:initial}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-small-text)}#checkbox{all:initial;display:block;position:absolute;left:0;top:0;width:40px;height:20px;cursor:pointer;pointer-events:initial}#checkbox:disabled{cursor:initial}#knob-container{position:relative;box-sizing:border-box;align-self:center;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);overflow:hidden}:host([checked]:not([checked=false])) #knob-container{background-color:var(--sinch-color-tropical-500)}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);transform:translateX(0);transition:transform .1s ease-in-out}:host([checked]:not([checked=false])) #knob{transform:translateX(20px)}:host([small]:not([small=false])) #knob{width:12px;height:12px}:host([small]:not([small=false])[checked]:not([checked=false])) #knob{transform:translateX(16px)}#knob::after,#knob::before{color:var(--sinch-color-snow-100);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::after,:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}:host([disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-snow-700)}:host([checked]:not([checked=false])[disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><div id="knob-container"><div id="knob"></div><input id="checkbox" type="checkbox"></div><label for="checkbox" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -40,10 +40,7 @@ defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new Weak
       }
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));

package/tooltip/index.js

@@ -1,14 +1,12 @@
-import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, getRect } from '../utils';
+import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, getRect, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:block}#tooltip{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .2s linear .2s}@media (prefers-reduced-motion){#tooltip{transition:none}}:host(:hover) #tooltip{opacity:1}#text{position:absolute;padding:2px 6px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:max-content;border-radius:2px;top:-8px;left:50%;transform:translateX(-50%) translateY(-100%)}#arrow{position:absolute;top:-8px;left:50%;transform:translateX(-50%);fill:var(--sinch-color-snow-600)}:host([orientation=top-left]) #text{transform:translateX(-80%) translateY(-100%)}:host([orientation=top-right]) #text{transform:translateX(-20%) translateY(-100%)}:host([orientation=bottom-right]) #text{top:calc(100% + 8px);transform:translateX(-20%)}:host([orientation=bottom-left]) #text{top:calc(100% + 8px);transform:translateX(-80%)}:host([orientation=bottom]) #text{top:calc(100% + 8px);transform:translateX(-50%)}:host([orientation^=bottom]) #arrow{top:calc(100% + 4px);transform:translateX(-50%) rotate(180deg)}:host([orientation=left]) #text{left:unset;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=left]) #arrow{left:-11px;top:50%;transform:translateY(-50%) rotate(270deg)}:host([orientation=right]) #text{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=right]) #arrow{top:50%;left:calc(100% + 2px);transform:translateY(-50%) rotate(90deg)}:host([inverted]:not([inverted=false])) #text{color:var(--sinch-color-text-inverted);background-color:var(--sinch-color-stormy-500)}:host([inverted]:not([inverted=false])) #arrow{fill:var(--sinch-color-stormy-500)}::slotted(*){display:block}</style><div id="wrapper"><slot></slot><div id="tooltip"><div id="text"></div><svg id="arrow" width="9" height="4" aria-hidden="true"><path d="m4.5 4 4-4h-8l4 4Z"/></svg></div></div>';
 const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tooltip', class extends HTMLElement {
+defineCustomElement('sinch-tooltip', class extends NectaryElement {
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      mode: 'closed'
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.$tooltipText = shadowRoot.querySelector('#text');
   }

package/utils.d.ts

@@ -1,8 +1,15 @@
 import type { TRect } from './types';
-export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;
 export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
-export declare const defineNectaryElements: (registry: CustomElementRegistry) => void;
-export declare type TEventHandler = (arg?: any) => void;
+export declare const setNectaryRegistry: (registry: CustomElementRegistry) => void;
+declare global {
+    interface ShadowRootInit {
+        customElements?: CustomElementRegistry;
+    }
+}
+export declare class NectaryElement extends HTMLElement {
+    attachShadow(): ShadowRoot;
+}
+export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;
 export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
 export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
 export declare const isAttrTrue: (attrValue: string | null) => boolean;

package/utils.js

@@ -1,14 +1,5 @@
 const nectaryDefinitions = new Map();
 let nectaryRegistry = null;
-export const getReactEventHandler = ($element, handlerName) => {
-  for (const key in $element) {
-    if (key.startsWith('__reactProps$')) {
-      return $element[key][handlerName];
-    }
-  }
-
-  return null;
-};
 export const defineCustomElement = (name, constructor) => {
   if (nectaryRegistry !== null) {
     if (nectaryRegistry.get(name) == null) {
@@ -19,12 +10,8 @@ export const defineCustomElement = (name, constructor) => {
   }
 
   nectaryDefinitions.set(name, constructor);
-
-  if (customElements.get(name) == null) {
-    customElements.define(name, constructor);
-  }
 };
-export const defineNectaryElements = registry => {
+export const setNectaryRegistry = registry => {
   if (nectaryRegistry !== null) {
     throw new Error('Nectary elements already registered');
   }
@@ -36,6 +23,27 @@ export const defineNectaryElements = registry => {
       nectaryRegistry.define(name, ctor);
     }
   }
+
+  nectaryDefinitions.clear();
+};
+export class NectaryElement extends HTMLElement {
+  attachShadow() {
+    return super.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true,
+      customElements: nectaryRegistry
+    });
+  }
+
+}
+export const getReactEventHandler = ($element, handlerName) => {
+  for (const key in $element) {
+    if (key.startsWith('__reactProps$')) {
+      return $element[key][handlerName];
+    }
+  }
+
+  return null;
 };
 export const updateBooleanAttribute = ($element, attrName, attrValue) => {
   if (attrValue === true) {

package/icon/add-alert/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M12 23c1.1 0 1.99-.89 1.99-1.99h-3.98c0 1.1.89 1.99 1.99 1.99Zm7-6v-6c0-3.35-2.36-6.15-5.5-6.83V3c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v1.17C7.36 4.85 5 7.65 5 11v6l-1.29 1.29c-.63.63-.19 1.71.7 1.71h15.17c.89 0 1.34-1.08.71-1.71L19 17Zm-4-3.99h-2v2c0 .55-.45 1-1 1s-1-.45-1-1v-2H9c-.55 0-1-.45-1-1V12c0-.55.45-1 1-1h2V9c0-.55.45-1 1-1s1 .45 1 1v2h2c.55 0 1 .45 1 1v.01c0 .55-.45 1-1 1Z"/></svg>';
-defineCustomElement('sinch-icon-add-alert', createIconClass(templateHTML));

package/icon/app-settings-alt/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="m21.81 12.74-.82-.63v-.22l.8-.63c.16-.12.2-.34.1-.51l-.85-1.48a.395.395 0 0 0-.35-.2c-.05 0-.1.01-.15.03l-.95.38c-.08-.05-.11-.07-.19-.11l-.15-1.01a.408.408 0 0 0-.4-.36h-1.71c-.2 0-.37.15-.4.34l-.14 1.01c-.03.02-.07.03-.1.05l-.09.06-.95-.38a.401.401 0 0 0-.5.17l-.85 1.48c-.1.17-.06.39.1.51l.8.63v.23l-.8.63a.39.39 0 0 0-.1.51l.85 1.48c.07.13.21.2.35.2.05 0 .1-.01.15-.03l.95-.37c.08.05.12.07.2.11l.15 1.01c.03.2.2.34.4.34h1.71c.2 0 .37-.15.4-.34l.15-1.01c.03-.02.07-.03.1-.05l.09-.06.95.38a.401.401 0 0 0 .5-.17l.85-1.48a.39.39 0 0 0-.1-.51ZM18 13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5ZM17 17h2v4c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v4h-2V6H7v12h10v-1Z"/></svg>';
-defineCustomElement('sinch-icon-app-settings-alt', createIconClass(templateHTML));

package/icon/apps/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M4 8h4V4H4v4Zm6 12h4v-4h-4v4Zm-6 0h4v-4H4v4Zm0-6h4v-4H4v4Zm6 0h4v-4h-4v4Zm6-10v4h4V4h-4Zm-6 4h4V4h-4v4Zm6 6h4v-4h-4v4Zm0 6h4v-4h-4v4Z"/></svg>';
-defineCustomElement('sinch-icon-apps', createIconClass(templateHTML));

package/icon/arrow-back/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59a.996.996 0 0 0 0 1.41l6.59 6.59a.996.996 0 1 0 1.41-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1Z"/></svg>';
-defineCustomElement('sinch-icon-arrow-back', createIconClass(templateHTML));

package/icon/arrow-back-ios/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M16.62 2.99a1.25 1.25 0 0 0-1.77 0L6.54 11.3a.996.996 0 0 0 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76Z"/></svg>';
-defineCustomElement('sinch-icon-arrow-back-ios', createIconClass(templateHTML));

package/icon/arrow-downward/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M11 5v11.17l-4.88-4.88c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 1 0-1.41-1.41L13 16.17V5c0-.55-.45-1-1-1s-1 .45-1 1Z"/></svg>';
-defineCustomElement('sinch-icon-arrow-downward', createIconClass(templateHTML));

package/icon/arrow-drop-down/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="m8.71 11.71 2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71Z"/></svg>';
-defineCustomElement('sinch-icon-arrow-drop-down', createIconClass(templateHTML));

package/icon/arrow-drop-down-circle/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-.35 12.65-2.79-2.79c-.32-.32-.1-.86.35-.86h5.59c.45 0 .67.54.35.85l-2.79 2.79c-.2.2-.52.2-.71.01Z"/></svg>';
-defineCustomElement('sinch-icon-arrow-drop-down-circle', createIconClass(templateHTML));

package/icon/arrow-drop-up/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M8.71 12.29 11.3 9.7a.996.996 0 0 1 1.41 0l2.59 2.59c.63.63.18 1.71-.71 1.71H9.41c-.89 0-1.33-1.08-.7-1.71Z"/></svg>';
-defineCustomElement('sinch-icon-arrow-drop-up', createIconClass(templateHTML));

package/icon/arrow-forward/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 0 0 0-1.41l-6.58-6.6a.996.996 0 1 0-1.41 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1Z"/></svg>';
-defineCustomElement('sinch-icon-arrow-forward', createIconClass(templateHTML));

package/icon/arrow-forward-ios/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31a.996.996 0 0 0 0-1.41L9.15 2.98a1.25 1.25 0 0 0-1.77 0 1.25 1.25 0 0 0 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76Z"/></svg>';
-defineCustomElement('sinch-icon-arrow-forward-ios', createIconClass(templateHTML));

package/icon/arrow-left/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M12.29 8.71 9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7Z" fill="#0A273D"/></svg>';
-defineCustomElement('sinch-icon-arrow-left', createIconClass(templateHTML));

package/icon/arrow-right/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="m11.71 15.29 2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71Z"/></svg>';
-defineCustomElement('sinch-icon-arrow-right', createIconClass(templateHTML));

package/icon/arrow-upward/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M13 19V7.83l4.88 4.88c.39.39 1.03.39 1.42 0a.996.996 0 0 0 0-1.41l-6.59-6.59a.996.996 0 0 0-1.41 0l-6.6 6.58a.996.996 0 1 0 1.41 1.41L11 7.83V19c0 .55.45 1 1 1s1-.45 1-1Z"/></svg>';
-defineCustomElement('sinch-icon-arrow-upward', createIconClass(templateHTML));

package/icon/attach-email/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M21 10V4c0-1.1-.9-2-2-2H3c-1.1 0-1.99.9-1.99 2L1 16c0 1.1.9 2 2 2h11v-5c0-1.66 1.34-3 3-3h4Zm-9.47.67c-.32.2-.74.2-1.06 0L3.4 6.25a.85.85 0 1 1 .9-1.44L11 9l6.7-4.19a.85.85 0 1 1 .9 1.44l-7.07 4.42Z" fill="#0A273D"/><path d="M22 14c-.55 0-1 .45-1 1v3c0 1.1-.9 2-2 2s-2-.9-2-2v-4.5c0-.28.22-.5.5-.5s.5.22.5.5V17c0 .55.45 1 1 1s1-.45 1-1v-3.5a2.5 2.5 0 0 0-5 0V18c0 2.21 1.79 4 4 4s4-1.79 4-4v-3c0-.55-.45-1-1-1Z"/></svg>';
-defineCustomElement('sinch-icon-attach-email', createIconClass(templateHTML));

package/icon/attachment/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M17.75 16H7.17c-2.09 0-3.95-1.53-4.15-3.61A3.998 3.998 0 0 1 7 8h12.36c1.31 0 2.5.94 2.63 2.24A2.5 2.5 0 0 1 19.5 13H9c-.55 0-1-.45-1-1s.45-1 1-1h8.75c.41 0 .75-.34.75-.75s-.34-.75-.75-.75H9.14c-1.31 0-2.5.94-2.63 2.24A2.5 2.5 0 0 0 9 14.5h10.33c2.09 0 3.95-1.53 4.15-3.61A3.993 3.993 0 0 0 19.5 6.5H7.23c-2.87 0-5.44 2.1-5.71 4.96A5.505 5.505 0 0 0 7 17.5h10.75c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/></svg>';
-defineCustomElement('sinch-icon-attachment', createIconClass(templateHTML));

package/icon/auto-delete/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M16 9c-.7 0-1.37.1-2 .29V7c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h5.68A6.999 6.999 0 0 0 23 16c0-3.87-3.13-7-7-7Zm0 12c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5ZM14 4c.55 0 1-.45 1-1s-.45-1-1-1h-2.5l-.71-.71c-.18-.18-.44-.29-.7-.29H5.91c-.26 0-.52.11-.7.29L4.5 2H2c-.55 0-1 .45-1 1s.45 1 1 1h12Z"/><path d="M15.75 12c-.41 0-.75.34-.75.75v3.68c0 .36.19.68.5.86l2.52 1.47c.33.19.75.09.96-.22a.72.72 0 0 0-.24-1.02L16.5 16.2v-3.45c0-.41-.34-.75-.75-.75Z"/></svg>';
-defineCustomElement('sinch-icon-auto-delete', createIconClass(templateHTML));

package/icon/campaign/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M18 12c0 .55.45 1 1 1h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1Zm-1.41 4.82a.966.966 0 0 0 .2 1.37c.53.39 1.09.81 1.62 1.21.44.33 1.06.24 1.38-.2 0-.01.01-.01.01-.02a.978.978 0 0 0-.2-1.38c-.53-.4-1.09-.82-1.61-1.21a.993.993 0 0 0-1.39.21c0 .01-.01.02-.01.02Zm3.22-12.01c0-.01-.01-.01-.01-.02a.98.98 0 0 0-1.38-.2c-.53.4-1.1.82-1.62 1.22-.44.33-.52.95-.19 1.38 0 .01.01.01.01.02.33.44.94.53 1.38.2.53-.39 1.09-.82 1.62-1.22.43-.32.51-.94.19-1.38ZM8 9H4c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h1v3c0 .55.45 1 1 1s1-.45 1-1v-3h1l5 3V6L8 9Zm7.5 3c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34Z"/></svg>';
-defineCustomElement('sinch-icon-campaign', createIconClass(templateHTML));

package/icon/cancel/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2Zm4.3 14.3a.996.996 0 0 1-1.41 0L12 13.41 9.11 16.3a.996.996 0 1 1-1.41-1.41L10.59 12 7.7 9.11A.996.996 0 1 1 9.11 7.7L12 10.59l2.89-2.89a.996.996 0 1 1 1.41 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41Z"/></svg>';
-defineCustomElement('sinch-icon-cancel', createIconClass(templateHTML));

package/icon/check/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"/></svg>';
-defineCustomElement('sinch-icon-check', createIconClass(templateHTML));

package/icon/chevron-left/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59a.996.996 0 1 0 1.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41Z"/></svg>';
-defineCustomElement('sinch-icon-chevron-left', createIconClass(templateHTML));

package/icon/chevron-right/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01Z"/></svg>';
-defineCustomElement('sinch-icon-chevron-right', createIconClass(templateHTML));

package/icon/close/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4Z"/></svg>';
-defineCustomElement('sinch-icon-close', createIconClass(templateHTML));

package/icon/cloud/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96Z"/></svg>';
-defineCustomElement('sinch-icon-cloud', createIconClass(templateHTML));

package/icon/cloud-circle/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm4.5 14H8c-1.66 0-3-1.34-3-3s1.34-3 3-3h.14c.44-1.73 1.99-3 3.86-3 2.21 0 4 1.79 4 4h.5a2.5 2.5 0 0 1 0 5Z"/></svg>';
-defineCustomElement('sinch-icon-cloud-circle', createIconClass(templateHTML));

package/icon/cloud-done/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96Zm-8.64 6.25a.996.996 0 0 1-1.41 0L7.2 14.2a.996.996 0 1 1 1.41-1.41L10 14.18l4.48-4.48a.996.996 0 1 1 1.41 1.41l-5.18 5.18Z"/></svg>';
-defineCustomElement('sinch-icon-cloud-done', createIconClass(templateHTML));

package/icon/cloud-download/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96ZM17 13l-4.65 4.65c-.2.2-.51.2-.71 0L7 13h3V9h4v4h3Z"/></svg>';
-defineCustomElement('sinch-icon-cloud-download', createIconClass(templateHTML));

package/icon/cloud-off/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M24 15c0-2.64-2.05-4.78-4.65-4.96A7.49 7.49 0 0 0 12 4c-1.33 0-2.57.36-3.65.97l1.49 1.49C10.51 6.17 11.23 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19a2.996 2.996 0 0 1 1.79 5.4l1.41 1.41c1.09-.92 1.8-2.27 1.8-3.81ZM3.71 4.56a.996.996 0 0 0 0 1.41l2.06 2.06h-.42a5.99 5.99 0 0 0-5.29 6.79C.46 17.84 3.19 20 6.22 20h11.51l1.29 1.29a.996.996 0 1 0 1.41-1.41L5.12 4.56a.996.996 0 0 0-1.41 0ZM6 18c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73l8 8H6Z"/></svg>';
-defineCustomElement('sinch-icon-cloud-off', createIconClass(templateHTML));

package/icon/cloud-queue/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24"><path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96ZM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 7.69 9.48 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3s-1.34 3-3 3Z"/></svg>';
-defineCustomElement('sinch-icon-cloud-queue', createIconClass(templateHTML));