@nectary/components 3.3.1 → 3.3.3

package/lib/cjs/button-group/index.js

@@ -1,51 +0,0 @@
-"use strict";
-
-var _utils = require('../button/utils');
-var _utils2 = require('../utils');
-var _size = require('../utils/size');
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%}</style><div id="wrapper"><slot></slot></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-(0, _utils2.defineCustomElement)('sinch-button-group', class extends _utils2.NectaryElement {
-  #$slot;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$slot = shadowRoot.querySelector('slot');
-  }
-  static get observedAttributes() {
-    return ['size', 'type'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case 'size':
-        for (const $option of this.#$slot.assignedElements()) {
-          (0, _utils2.updateLiteralAttribute)($option, _size.sizeExValues, name, newVal);
-        }
-        break;
-      case 'type':
-        for (const $option of this.#$slot.assignedElements()) {
-          (0, _utils2.updateLiteralAttribute)($option, _utils.typeValues, name, newVal);
-        }
-        break;
-      default:
-        break;
-    }
-  }
-  set type(value) {
-    (0, _utils2.updateLiteralAttribute)(this, _utils.typeValues, 'type', value);
-  }
-  get type() {
-    return (0, _utils2.getLiteralAttribute)(this, _utils.typeValues, 'type', 'primary');
-  }
-  set size(size) {
-    (0, _utils2.updateLiteralAttribute)(this, _size.sizeExValues, 'size', size);
-  }
-  get size() {
-    return (0, _utils2.getLiteralAttribute)(this, _size.sizeExValues, 'size', _size.DEFAULT_SIZE);
-  }
-  connectedCallback() {
-    this.role = 'group';
-  }
-});

package/lib/cjs/button-group/types.js

@@ -1 +0,0 @@
-"use strict";

package/lib/cjs/button-group-item/index.js

@@ -1,81 +0,0 @@
-"use strict";
-
-var _utils = require('../utils');
-const templateHTML = '<style>:host{display:block;--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%;position:relative}:host(:is(:not(:first-of-type))) #wrapper::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-divider-color);opacity:.3;pointer-events:none;z-index:2;top:10%;bottom:10%;left:-.5px;width:1px}:host([type=primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-primary-default-text-initial)}:host([type=secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}:host([type=subtle-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-primary-default-text-initial)}:host([type=subtle-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-secondary-default-text-initial)}:host([type=cta-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-primary-default-text-initial)}:host([type=cta-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-secondary-default-text-initial)}:host([type=destructive]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-danger-default-text-initial)}#sinch-button-element{display:flex;box-sizing:border-box;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-button-shape-radius-top-right:0;--sinch-button-shape-radius-top-left:0;--sinch-button-shape-radius-bottom-right:0;--sinch-button-shape-radius-bottom-left:0}:host(:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host(:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="l"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-l)}:host([size="l"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-l)}:host([size="m"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host([size="m"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="s"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-s)}:host([size="s"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-s)}:host([size=xs]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-xs)}:host([size=xs]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-xs)}:host(:is(:not(:first-of-type,:last-of-type))) #sinch-button-element:not(:active){--sinch-button-border-left:none;--sinch-button-border-right:none}:host(:is(:first-of-type)) #sinch-button-element:not(:active){--sinch-button-border-right:none}:host(:is(:last-of-type)) #sinch-button-element:not(:active){--sinch-button-border-left:none}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="wrapper"><sinch-button id="sinch-button-element"><slot id="left-icon" name="left-icon" slot="left-icon"></slot><slot id="icon" name="icon" slot="icon"></slot><slot id="right-icon" name="right-icon" slot="right-icon"></slot></sinch-button></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-(0, _utils.defineCustomElement)('sinch-button-group-item', class extends _utils.NectaryElement {
-  #$sinchButton;
-  #controller = null;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$sinchButton = shadowRoot.querySelector('#sinch-button-element');
-  }
-  static get observedAttributes() {
-    return ['type', 'size', 'text', 'disabled', 'toggled'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    (0, _utils.updateAttribute)(this.#$sinchButton, name, newVal);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    this.role = 'button';
-    const forwardEvent = e => this.dispatchEvent(new CustomEvent(e.type, {
-      ...e
-    }));
-    this.addEventListener('-click', e => this.#onClickReactHandler(e), {
-      signal
-    });
-    this.addEventListener('-focus', () => this.#onFocusReactHandler(), {
-      signal
-    });
-    this.addEventListener('-blur', () => this.#onBlurReactHandler(), {
-      signal
-    });
-    this.#$sinchButton.addEventListener('-click', e => forwardEvent(e), {
-      signal
-    });
-    this.#$sinchButton.addEventListener('-focus', e => forwardEvent(e), {
-      signal
-    });
-    this.#$sinchButton.addEventListener('-blur', e => forwardEvent(e), {
-      signal
-    });
-  }
-  set text(value) {
-    (0, _utils.updateAttribute)(this, 'text', value);
-  }
-  get text() {
-    return (0, _utils.getAttribute)(this, 'text', '');
-  }
-  set disabled(isDisabled) {
-    (0, _utils.updateBooleanAttribute)(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return (0, _utils.getBooleanAttribute)(this, 'disabled');
-  }
-  set toggled(isToggled) {
-    (0, _utils.updateBooleanAttribute)(this, 'toggled', isToggled);
-  }
-  get toggled() {
-    return (0, _utils.getBooleanAttribute)(this, 'toggled');
-  }
-  get focusable() {
-    return true;
-  }
-  #onClickReactHandler = e => {
-    (0, _utils.getReactEventHandler)(this, 'on-click')?.(e);
-  };
-  #onFocusReactHandler = () => {
-    (0, _utils.getReactEventHandler)(this, 'on-focus')?.();
-  };
-  #onBlurReactHandler = () => {
-    (0, _utils.getReactEventHandler)(this, 'on-blur')?.();
-  };
-});

package/lib/cjs/button-group-item/types.js

@@ -1 +0,0 @@
-"use strict";

package/lib/cjs/card/index.js

@@ -1,135 +0,0 @@
-"use strict";
-
-require('../title');
-require('../text');
-var _utils = require('../utils');
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-default-border-initial);background-color:var(--sinch-comp-card-color-default-background-initial);box-shadow:var(--sinch-comp-card-shadow-initial);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-comp-card-shadow-hover)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{--sinch-comp-text-font:var(--sinch-comp-card-font-label);--sinch-global-color-text:var(--sinch-comp-card-color-default-title-initial)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-global-size-icon:var(--sinch-comp-card-size-icon)}#caption{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-card-font-title);--sinch-global-color-text:var(--sinch-comp-card-color-default-title-initial)}#description{flex:1;min-height:0;max-height:120px;overflow-y:auto;--sinch-comp-text-font:var(--sinch-comp-card-font-description);--sinch-global-color-text:var(--sinch-comp-card-color-default-description-initial)}#description:empty{display:none}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}:host([draggable=true]) #header{cursor:grab}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><sinch-text id="label" type="s" emphasized ellipsis></sinch-text><div id="header"><slot name="icon"></slot><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title></div><sinch-text id="description" type="m"></sinch-text><slot name="action"></slot></div></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-(0, _utils.defineCustomElement)('sinch-card', class extends _utils.NectaryElement {
-  #$text;
-  #$label;
-  #$caption;
-  #$header;
-  #$cardBody;
-  #$iconSlot;
-  #$illustrationSlot;
-  #$illustrationSlotWrapper;
-  #isDraggingCorrectHandle = false;
-  #isDraggingSubscribed = false;
-  #controller = null;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#description');
-    this.#$label = shadowRoot.querySelector('#label');
-    this.#$caption = shadowRoot.querySelector('#caption');
-    this.#$header = shadowRoot.querySelector('#header');
-    this.#$cardBody = shadowRoot.querySelector('#wrapper');
-    this.#$iconSlot = shadowRoot.querySelector('slot[name="icon"]');
-    this.#$illustrationSlot = shadowRoot.querySelector('slot[name="illustration"]');
-    this.#$illustrationSlotWrapper = shadowRoot.querySelector('#illustration-wrapper');
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#controller = new AbortController();
-    const options = {
-      signal: this.#controller.signal
-    };
-    this.#$illustrationSlot.addEventListener('slotchange', this.#onIllustrationSlotChange, options);
-    this.#onIllustrationSlotChange();
-    if ((0, _utils.getBooleanAttribute)(this, 'draggable')) {
-      this.#enableDraggable();
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#disableDragging();
-    this.#controller.abort();
-    this.#controller = null;
-  }
-  static get observedAttributes() {
-    return ['text', 'label', 'caption', 'draggable'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'label':
-        {
-          this.#$label.textContent = newVal;
-          break;
-        }
-      case 'caption':
-        {
-          (0, _utils.updateAttribute)(this.#$caption, 'text', newVal);
-          break;
-        }
-      case 'draggable':
-        {
-          if ((0, _utils.isAttrEqual)(oldVal, newVal)) {
-            return;
-          }
-          const isDraggingEnabled = (0, _utils.isAttrTrue)(newVal);
-          if (isDraggingEnabled) {
-            this.#enableDraggable();
-          } else {
-            this.#disableDragging();
-          }
-          (0, _utils.updateBooleanAttribute)(this, name, isDraggingEnabled);
-          break;
-        }
-    }
-  }
-  set text(value) {
-    (0, _utils.updateAttribute)(this, 'text', value);
-  }
-  get text() {
-    return (0, _utils.getAttribute)(this, 'text', '');
-  }
-  set caption(value) {
-    (0, _utils.updateAttribute)(this, 'caption', value);
-  }
-  get caption() {
-    return (0, _utils.getAttribute)(this, 'caption', '');
-  }
-  set label(value) {
-    (0, _utils.updateAttribute)(this, 'label', value);
-  }
-  get label() {
-    return (0, _utils.getAttribute)(this, 'label', '');
-  }
-  get dragRect() {
-    return this.#isDraggingSubscribed ? (0, _utils.getRect)(this.#$header) : null;
-  }
-  #onIllustrationSlotChange = () => {
-    (0, _utils.setClass)(this.#$illustrationSlotWrapper, 'active', this.#$illustrationSlot.assignedElements().length > 0);
-  };
-  #enableDraggable() {
-    if (this.isDomConnected && !this.#isDraggingSubscribed) {
-      this.addEventListener('dragstart', this.#onDragStart);
-      this.#$cardBody.addEventListener('mousedown', this.#onDraggableMouseDown);
-      this.#isDraggingSubscribed = true;
-    }
-  }
-  #disableDragging() {
-    if (this.#isDraggingSubscribed) {
-      this.removeEventListener('dragstart', this.#onDragStart);
-      this.#$cardBody.removeEventListener('mousedown', this.#onDraggableMouseDown);
-      this.#isDraggingSubscribed = false;
-    }
-  }
-  #onDraggableMouseDown = e => {
-    this.#isDraggingCorrectHandle = this.#$header.contains(e.target) || this.#$iconSlot.assignedElements().includes(e.target);
-  };
-  #onDragStart = e => {
-    if (!this.#isDraggingCorrectHandle) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-});

package/lib/cjs/card/types.js

@@ -1 +0,0 @@
-"use strict";

package/lib/cjs/card-container/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-var _utils = require('../utils');
-const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-comp-card-color-default-background-initial);border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-default-border-initial)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-(0, _utils.defineCustomElement)('sinch-card-container', class extends _utils.NectaryElement {
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-});

package/lib/cjs/card-container/types.js

@@ -1 +0,0 @@
-"use strict";

package/lib/cjs/checkbox/index.js

@@ -1,128 +0,0 @@
-"use strict";
-
-var _utils = require('../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%;min-height:24px;--sinch-local-color-background:var(--sinch-comp-checkbox-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-default-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-default-text-initial)}:host([invalid])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-invalid-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-invalid-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-invalid-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-invalid-text-initial)}:host([checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-checked-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-checked-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-checkbox-color-disabled-text-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-disabled-border-initial)}#checkbox{width:18px;height:18px;cursor:pointer}:host([disabled]) #checkbox{cursor:initial}#icon-container{position:relative;width:18px;height:18px;align-self:flex-start;margin-top:3px}#checkbox::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-checkbox-color-default-outline-focus);border-radius:calc(var(--sinch-comp-checkbox-shape-radius) + 3px);transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}:host(:focus-visible) #checkbox::before{opacity:1}#checkbox::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-comp-checkbox-shape-radius);transition:background-color .1s linear;box-sizing:border-box;pointer-events:none}:host(:hover:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}:host(:active:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#icon-checkmark,#icon-indeterminate{position:absolute;left:1px;top:1px;width:16px;height:16px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-sys-color-surface-primary-default)}:host(:not([indeterminate])[checked]) #icon-checkmark{opacity:1}:host([indeterminate][checked]) #icon-indeterminate{opacity:1}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{flex:1;align-self:center;padding-left:8px;font:var(--sinch-comp-checkbox-font-label);color:var(--sinch-local-color-text);cursor:pointer}#label:empty{display:none}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="icon-container"><div id="checkbox"></div><svg id="icon-checkmark" viewBox="0 0 24 24" aria-hidden="true"><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><svg id="icon-indeterminate" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1Z"/></svg></div><span id="label"></span></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-(0, _utils.defineCustomElement)('sinch-checkbox', class extends _utils.NectaryElement {
-  #$label;
-  #controller = null;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$label = shadowRoot.querySelector('#label');
-  }
-  connectedCallback() {
-    this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    const options = {
-      signal
-    };
-    this.role = 'checkbox';
-    this.tabIndex = 0;
-    this.addEventListener('click', this.#onClick, options);
-    this.addEventListener('focus', this.#onFocus, options);
-    this.addEventListener('blur', this.#onBlur, options);
-    this.addEventListener('-change', this.#onChangeReactHandler, options);
-    this.addEventListener('-focus', this.#onFocusReactHandler, options);
-    this.addEventListener('-blur', this.#onBlurReactHandler, options);
-  }
-  disconnectedCallback() {
-    this.#controller.abort();
-    this.#controller = null;
-  }
-  static get observedAttributes() {
-    return ['checked', 'disabled', 'text', 'invalid', 'indeterminate'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if ((0, _utils.isAttrEqual)(oldVal, newVal)) {
-      return;
-    }
-    switch (name) {
-      case 'text':
-        {
-          this.#$label.textContent = newVal;
-          break;
-        }
-      case 'checked':
-        {
-          const isChecked = (0, _utils.isAttrTrue)(newVal);
-          (0, _utils.updateExplicitBooleanAttribute)(this, 'aria-checked', isChecked);
-          (0, _utils.updateBooleanAttribute)(this, 'checked', isChecked);
-          break;
-        }
-      case 'disabled':
-        {
-          const isDisabled = (0, _utils.isAttrTrue)(newVal);
-          (0, _utils.updateExplicitBooleanAttribute)(this, 'aria-disabled', isDisabled);
-          (0, _utils.updateBooleanAttribute)(this, 'disabled', isDisabled);
-          break;
-        }
-      case 'invalid':
-      case 'indeterminate':
-        {
-          (0, _utils.updateBooleanAttribute)(this, name, (0, _utils.isAttrTrue)(newVal));
-          break;
-        }
-    }
-  }
-  set checked(isChecked) {
-    (0, _utils.updateBooleanAttribute)(this, 'checked', isChecked);
-  }
-  get checked() {
-    return (0, _utils.getBooleanAttribute)(this, 'checked');
-  }
-  set indeterminate(isIndeterminate) {
-    (0, _utils.updateBooleanAttribute)(this, 'indeterminate', isIndeterminate);
-  }
-  get indeterminate() {
-    return (0, _utils.getBooleanAttribute)(this, 'indeterminate');
-  }
-  set disabled(isDisabled) {
-    (0, _utils.updateBooleanAttribute)(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return (0, _utils.getBooleanAttribute)(this, 'disabled');
-  }
-  set invalid(isInvalid) {
-    (0, _utils.updateBooleanAttribute)(this, 'invalid', isInvalid);
-  }
-  get invalid() {
-    return (0, _utils.getBooleanAttribute)(this, 'invalid');
-  }
-  set text(value) {
-    (0, _utils.updateAttribute)(this, 'text', value);
-  }
-  get text() {
-    return (0, _utils.getAttribute)(this, 'text');
-  }
-  get focusable() {
-    return true;
-  }
-  #onClick = () => {
-    if (this.disabled) {
-      return;
-    }
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail: !this.checked
-    }));
-  };
-  #onFocus = () => {
-    this.dispatchEvent(new CustomEvent('-focus'));
-  };
-  #onBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
-  };
-  #onChangeReactHandler = e => {
-    (0, _utils.getReactEventHandler)(this, 'on-change')?.(e);
-  };
-  #onFocusReactHandler = e => {
-    (0, _utils.getReactEventHandler)(this, 'on-focus')?.(e);
-  };
-  #onBlurReactHandler = e => {
-    (0, _utils.getReactEventHandler)(this, 'on-blur')?.(e);
-  };
-});

package/lib/cjs/checkbox/types.js

@@ -1 +0,0 @@
-"use strict";

package/lib/cjs/chip/index.js

@@ -1,146 +0,0 @@
-"use strict";
-
-require('../text');
-require('../icon');
-var _utils = require('../utils');
-var _utils2 = require('./utils');
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:focus-visible)>#button::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--sinch-comp-chip-shape-radius) + 4px);border:2px solid var(--sinch-comp-chip-color-outiline-focus);pointer-events:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([small]) #button{height:var(--sinch-comp-chip-size-container-s);padding:0 3px 0 7px;--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-s)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-chip-font-size-s-label)}::slotted([slot=icon]){margin-left:-4px}</style><div id="button" inert><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><slot name="right-icon"><sinch-icon id="icon-close" name="cancel"></sinch-icon></slot></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-(0, _utils.defineCustomElement)('sinch-chip', class extends _utils.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() {
-    super.connectedCallback();
-    this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    this.role = 'button';
-    this.tabIndex = 0;
-    this.addEventListener('click', this.#onClick, {
-      signal
-    });
-    this.addEventListener('focus', this.#onFocus, {
-      signal
-    });
-    this.addEventListener('blur', this.#onBlur, {
-      signal
-    });
-    this.addEventListener('keydown', this.#onKeydown, {
-      signal
-    });
-    this.addEventListener('-click', this.#onClickReactHandler, {
-      signal
-    });
-    this.addEventListener('-focus', this.#onFocusReactHandler, {
-      signal
-    });
-    this.addEventListener('-blur', this.#onBlurReactHandler, {
-      signal
-    });
-    this.#updateColor();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#controller.abort();
-    this.#controller = null;
-  }
-  static get observedAttributes() {
-    return ['text', 'color', 'small'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if ((0, _utils.isAttrEqual)(oldVal, newVal)) {
-      return;
-    }
-    switch (name) {
-      case 'color':
-        {
-          this.#updateColor();
-          break;
-        }
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'small':
-        {
-          (0, _utils.updateBooleanAttribute)(this, name, (0, _utils.isAttrTrue)(newVal));
-          break;
-        }
-    }
-  }
-  get color() {
-    return (0, _utils.getAttribute)(this, 'color');
-  }
-  set color(value) {
-    (0, _utils.updateAttribute)(this, 'color', value);
-  }
-  get text() {
-    return (0, _utils.getAttribute)(this, 'text', '');
-  }
-  set text(value) {
-    (0, _utils.updateAttribute)(this, 'text', value);
-  }
-  get small() {
-    return (0, _utils.getBooleanAttribute)(this, 'small');
-  }
-  set small(isSmall) {
-    (0, _utils.updateBooleanAttribute)(this, 'small', isSmall);
-  }
-  #updateColor() {
-    if (!this.isDomConnected) {
-      return;
-    }
-    const colorName = this.color;
-    if (colorName !== null && colorName.length > 0) {
-      const bg = (0, _utils2.getChipColorBg)(colorName);
-      const fg = (0, _utils2.getChipColorFg)(colorName);
-      this.#$button.style.setProperty('background-color', bg);
-      this.#$button.style.setProperty('--sinch-global-color-text', fg);
-      this.#$button.style.setProperty('--sinch-global-color-icon', fg);
-    } else {
-      this.#$button.style.removeProperty('background-color');
-      this.#$button.style.removeProperty('--sinch-global-color-text');
-      this.#$button.style.removeProperty('--sinch-global-color-icon');
-    }
-  }
-  get focusable() {
-    return true;
-  }
-  #onKeydown = e => {
-    switch (e.code) {
-      case 'Space':
-        {
-          this.click();
-        }
-    }
-  };
-  #onClick = () => {
-    this.dispatchEvent(new CustomEvent('-click'));
-  };
-  #onFocus = () => {
-    this.dispatchEvent(new CustomEvent('-focus'));
-  };
-  #onBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
-  };
-  #onFocusReactHandler = () => {
-    (0, _utils.getReactEventHandler)(this, 'on-focus')?.();
-  };
-  #onBlurReactHandler = () => {
-    (0, _utils.getReactEventHandler)(this, 'on-blur')?.();
-  };
-  #onClickReactHandler = e => {
-    (0, _utils.getReactEventHandler)(this, 'on-click')?.(e);
-  };
-});

package/lib/cjs/chip/types.js

@@ -1 +0,0 @@
-"use strict";

package/lib/cjs/chip/utils.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getChipColorFg = exports.getChipColorBg = void 0;
-const getChipColorBg = id => {
-  return `var(--sinch-comp-chip-color-${id}-default-background-initial)`;
-};
-exports.getChipColorBg = getChipColorBg;
-const getChipColorFg = id => {
-  return `var(--sinch-comp-chip-color-${id}-default-foreground-initial)`;
-};
-exports.getChipColorFg = getChipColorFg;

package/lib/cjs/code-tag/index.js

@@ -1,33 +0,0 @@
-"use strict";
-
-var _utils = require('../utils');
-const templateHTML = '<style>:host{display:inline}#content{font:var(--sinch-comp-code-tag-font-text);font-size:inherit;line-height:inherit;color:var(--sinch-comp-code-tag-color-default-text-initial);border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius);white-space:var(--sinch-global-text-white-space,normal)}</style><span id="content"></span>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-(0, _utils.defineCustomElement)('sinch-code-tag', class extends _utils.NectaryElement {
-  #$text;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#content');
-  }
-  static get observedAttributes() {
-    return ['text'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-    }
-  }
-  get text() {
-    return (0, _utils.getAttribute)(this, 'text', '');
-  }
-  set text(value) {
-    (0, _utils.updateAttribute)(this, 'text', value);
-  }
-});

package/lib/cjs/code-tag/types.js

@@ -1 +0,0 @@
-"use strict";