@nectary/components 0.44.1 → 0.45.0

package/select-menu/index.js

@@ -1,18 +1,30 @@
-import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
+import '../input';
+import '../icon-button';
+import '../icons/search';
+import '../icons/close';
+import '../text';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#not-found{display:none;width:100%;height:30px;align-items:center;justify-content:center;margin-bottom:10px;color:var(--sinch-color-text-muted);pointer-events:none;user-select:none}#not-found.active{display:flex}::slotted(.hidden){display:none}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon-search slot="icon"></sinch-icon-search></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
+const NUM_ITEMS_SEARCH = 20;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #$optionSlot;
   #$listbox;
+  #$search;
+  #$notFound;
   #controller = null;
+  #searchDebounce;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$optionSlot = shadowRoot.querySelector('slot');
     this.#$listbox = shadowRoot.querySelector('#listbox');
+    this.#$search = shadowRoot.querySelector('#search');
+    this.#$notFound = shadowRoot.querySelector('#not-found');
+    this.#searchDebounce = debounceTimeout(200)(this.#updateSearch);
   }
   connectedCallback() {
     this.#controller = new AbortController();
@@ -24,9 +36,6 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.addEventListener('keydown', this.#onListboxKeyDown, {
       signal
     });
-    this.addEventListener('-keydown', this.#onContexKeydown, {
-      signal
-    });
     this.addEventListener('blur', this.#onListboxBlur, {
       signal
     });
@@ -36,22 +45,21 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.#$listbox.addEventListener('click', this.#onListboxClick, {
       signal
     });
-    this.#$optionSlot.addEventListener('slotchange', this.#onOptionSlotChange, {
+    this.#$search.addEventListener('-change', this.#onSearchChange, {
       signal
     });
-    this.addEventListener('-change', this.#onChangeReactHandler, {
+    this.#$optionSlot.addEventListener('slotchange', this.#onOptionSlotChange, {
       signal
     });
-    this.addEventListener('-visibility', this.#onContextVisibility, {
+    this.addEventListener('-change', this.#onChangeReactHandler, {
       signal
     });
-    dispatchContextConnectEvent(this, 'keydown');
-    dispatchContextConnectEvent(this, 'visibility');
+    subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
+    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
   }
   disconnectedCallback() {
-    dispatchContextDisconnectEvent(this, 'keydown');
-    dispatchContextDisconnectEvent(this, 'visibility');
     this.#controller.abort();
+    this.#searchDebounce.cancel();
   }
   static get observedAttributes() {
     return ['value', 'rows', 'multiple'];
@@ -115,7 +123,23 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
       this.#selectOption($elem);
     }
   };
-  #onContexKeydown = e => {
+  #onSearchChange = e => {
+    this.#$search.value = e.detail;
+    this.#searchDebounce.fn();
+  };
+  #updateSearch = () => {
+    const searchValue = this.#$search.value.toLowerCase();
+    const $options = this.#getOptionElements();
+    let someFound = false;
+    for (const $opt of $options) {
+      const isHidden = searchValue.length > 0 && !$opt.matchesSearch(searchValue);
+      someFound ||= !isHidden;
+      setClass($opt, 'hidden', isHidden);
+    }
+    setClass(this.#$notFound, 'active', !someFound);
+    this.#selectOption(null);
+  };
+  #onContextKeyDown = e => {
     this.#handleKeydown(e.detail);
   };
   #onContextVisibility = e => {
@@ -155,6 +179,11 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     }
   }
   #onOptionSlotChange = () => {
+    const isSearchActive = this.#$optionSlot.assignedElements().length >= NUM_ITEMS_SEARCH;
+    if (!isSearchActive) {
+      updateAttribute(this.#$search, 'value', null);
+    }
+    setClass(this.#$search, 'active', isSearchActive);
     this.#onValueChange(this.value);
   };
   #onValueChange(csv) {
@@ -176,7 +205,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     const $options = this.#getOptionElements();
     for (let i = 0; i < $options.length; i++) {
       const el = $options[i];
-      if (!getBooleanAttribute(el, 'disabled')) {
+      if (!getBooleanAttribute(el, 'disabled') && !el.classList.contains('hidden')) {
         return el;
       }
     }
@@ -186,7 +215,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     const $options = this.#getOptionElements();
     for (let i = $options.length - 1; i >= 0; i--) {
       const el = $options[i];
-      if (!getBooleanAttribute(el, 'disabled')) {
+      if (!getBooleanAttribute(el, 'disabled') && !el.classList.contains('hidden')) {
         return el;
       }
     }
@@ -198,7 +227,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
       const $options = this.#getOptionElements();
       for (let i = 1; i <= $options.length; i++) {
         const el = $options[(i + index) % $options.length];
-        if (!getBooleanAttribute(el, 'disabled')) {
+        if (!getBooleanAttribute(el, 'disabled') && !el.classList.contains('hidden')) {
           return el;
         }
       }
@@ -211,7 +240,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
       const $options = this.#getOptionElements();
       for (let i = 1; i <= $options.length; i++) {
         const el = $options[(index - i + $options.length) % $options.length];
-        if (!getBooleanAttribute(el, 'disabled')) {
+        if (!getBooleanAttribute(el, 'disabled') && !el.classList.contains('hidden')) {
           return el;
         }
       }

package/select-menu-option/index.d.ts

@@ -14,6 +14,7 @@ export declare class SelectMenuOption extends NectaryElement {
     get text(): string;
     set disabled(isDisabled: boolean);
     get disabled(): boolean;
+    matchesSearch(searchValue: string): boolean;
 }
 declare global {
     namespace JSX {

package/select-menu-option/index.js

@@ -58,5 +58,8 @@ export class SelectMenuOption extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
+  matchesSearch(searchValue) {
+    return this.text.toLowerCase().includes(searchValue);
+  }
 }
 defineCustomElement('sinch-select-menu-option', SelectMenuOption);

package/select-menu-option/types.d.ts

@@ -6,6 +6,7 @@ export declare type TSinchSelectMenuOptionElement = HTMLElement & {
     text: string;
     /** Disabled state */
     disabled: boolean;
+    matchesSearch(value: string): boolean;
     /** Value */
     setAttribute(name: 'value', value: string): void;
     /** Display text */

package/spinner/index.js

@@ -1,22 +1,67 @@
-import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}div{animation:1.5s linear infinite spinner;animation-play-state:running;border:solid 3px var(--sinch-color-spinner-bg,#d4dadd);border-bottom-color:var(--sinch-color-spinner-fg,#0a273d);border-radius:50%;height:20px;width:20px;box-sizing:border-box;will-change:transform;margin:2px}:host([type=large]) div{height:48px;width:48px;border-width:4px}:host([type=small]) div{height:14px;width:14px;border-width:2px;margin:1px}:host([static]:not([static=false])) div{animation-play-state:paused}</style><div></div>';
-import { spinnerTypes } from './utils';
+import { defineCustomElement, getLiteralAttribute, NectaryElement, subscribeContext, updateAttribute, updateLiteralAttribute } from '../utils';
+import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block;--sinch-size-icon:var(--sinch-spinner-size-m);--sinch-spinner-thickness:3px}:host([data-size="l"]){--sinch-size-icon:var(--sinch-spinner-size-l);--sinch-spinner-thickness:4px}:host([data-size="m"]){--sinch-size-icon:var(--sinch-spinner-size-m);--sinch-spinner-thickness:3px}:host([data-size="s"]){--sinch-size-icon:var(--sinch-spinner-size-s);--sinch-spinner-thickness:2px}#wrapper{position:relative;height:var(--sinch-size-icon);width:var(--sinch-size-icon)}#bg{position:absolute;inset:1px;border:solid var(--sinch-spinner-thickness) var(--sinch-color-icon);border-radius:50%;opacity:.3}#fg{position:absolute;inset:1px;border:solid var(--sinch-spinner-thickness) transparent;border-bottom-color:var(--sinch-color-icon);border-radius:50%;will-change:transform;animation:1.5s linear infinite spinner;animation-play-state:running}</style><div id="wrapper"><div id="bg"></div><div id="fg"></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-spinner', class extends NectaryElement {
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
   connectedCallback() {
+    this.#controller = new AbortController();
     this.setAttribute('aria-live', 'polite');
     this.setAttribute('aria-busy', 'true');
+    subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
   }
-  set type(value) {
-    updateLiteralAttribute(this, spinnerTypes, 'type', value);
+  disconnectedCallback() {
+    this.#controller.abort();
   }
-  get type() {
-    return getLiteralAttribute(this, spinnerTypes, 'type', 'medium');
+  static get observedAttributes() {
+    return ['size', 'data-size'];
   }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'size':
+        {
+          updateAttribute(this, 'data-size', newVal);
+          break;
+        }
+      case 'data-size':
+        {
+          if ('production' !== 'production') {
+            assertSize(newVal, 'sinch-spinner');
+          }
+          break;
+        }
+    }
+  }
+  set size(size) {
+    updateLiteralAttribute(this, sizeValues, 'size', size);
+  }
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
+  }
+  #onContextSize = e => {
+    if (this.hasAttribute('size')) {
+      return;
+    }
+    switch (e.detail) {
+      case 'l':
+      case 'm':
+        {
+          this.setAttribute('data-size', 'm');
+          break;
+        }
+      default:
+        {
+          this.setAttribute('data-size', 's');
+        }
+    }
+  };
 });

package/spinner/types.d.ts

@@ -1,10 +1,9 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchSpinnerType = 'large' | 'medium' | 'small';
+import type { TSinchSize } from '../utils/size';
 export declare type TSinchSpinnerElement = HTMLElement & {
-    type: TSinchSpinnerType;
-    setAttribute(name: 'type', value: TSinchSpinnerType): void;
+    size: TSinchSize;
+    setAttribute(name: 'size', value: TSinchSize): void;
 };
 export declare type TSinchSpinnerReact = TSinchElementReact<TSinchSpinnerElement> & {
-    type?: TSinchSpinnerType;
-    static?: boolean;
+    size?: TSinchSize;
 };

package/stop-events/index.js

@@ -1,20 +1,24 @@
 import { defineCustomElement, unpackCsv } from '../utils';
 defineCustomElement('sinch-stop-events', class extends HTMLElement {
+  #controller = null;
   constructor() {
     super();
     this.style.display = 'contents';
   }
   connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
     const events = unpackCsv(this.getAttribute('events'));
     for (const event of events) {
-      this.addEventListener(event, this.#stopEvent);
+      this.addEventListener(event, this.#stopEvent, {
+        signal
+      });
     }
   }
   disconnectedCallback() {
-    const events = unpackCsv(this.getAttribute('events'));
-    for (const event of events) {
-      this.removeEventListener(event, this.#stopEvent);
-    }
+    this.#controller.abort();
   }
   #stopEvent = e => {
     e.stopPropagation();

package/table/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:table;font:var(--sinch-font-body);color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-text-default)}</style><slot></slot>';
+const templateHTML = '<style>:host{display:table;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500)}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-table', class extends NectaryElement {

package/tag/index.js

@@ -7,7 +7,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-tag', class extends NectaryElement {
   #$text;
   #$wrapper;
-  #isConnected = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -16,12 +15,9 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
     this.#$text = shadowRoot.querySelector('#text');
   }
   connectedCallback() {
-    this.#isConnected = true;
+    super.connectedCallback();
     this.#updateColor();
   }
-  disconnectedCallback() {
-    this.#isConnected = false;
-  }
   get color() {
     return getAttribute(this, 'color');
   }
@@ -58,7 +54,7 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
     }
   }
   #updateColor() {
-    if (!this.#isConnected) {
+    if (!this.isConnected) {
       return;
     }
     const colorName = this.color;

package/text/index.js

@@ -46,7 +46,9 @@ defineCustomElement('sinch-text', class extends NectaryElement {
     switch (name) {
       case 'type':
         {
-          assertType(newVal);
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
           break;
         }
       case 'inline':

package/textarea/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#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([invalid]:not([invalid=false])) #input:enabled{border-color:var(--sinch-color-text-invalid)}</style><textarea id="input"></textarea>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 12px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-text-m);color:var(--sinch-color-text-muted);opacity:1}#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([invalid]:not([invalid=false])) #input:enabled{border-color:var(--sinch-color-text-invalid)}</style><textarea id="input"></textarea>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-textarea', class extends NectaryElement {

package/theme/button.css

@@ -0,0 +1,146 @@
+:root,
+:host {
+  /* Primary */
+  --sinch-button-primary-color-background: var(--sinch-color-tropical-500);
+  --sinch-button-primary-color-background-hover: var(--sinch-color-tropical-400);
+  --sinch-button-primary-color-background-active: var(--sinch-color-tropical-600);
+  --sinch-button-primary-color-background-disabled: var(--sinch-color-tropical-200);
+  --sinch-button-primary-color-border: transparent;
+  --sinch-button-primary-color-border-hover: transparent;
+  --sinch-button-primary-color-border-active: transparent;
+  --sinch-button-primary-color-border-disabled: transparent;
+  --sinch-button-primary-color-text: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-text-hover: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-text-active: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-text-disabled: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-icon: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-icon-hover: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-icon-active: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-icon-disabled: var(--sinch-color-snow-100);
+  --sinch-button-primary-mix-blend-mode: initial;
+
+  /* Secondary */
+  --sinch-button-secondary-color-background: var(--sinch-color-snow-100);
+  --sinch-button-secondary-color-background-hover: var(--sinch-color-tropical-100);
+  --sinch-button-secondary-color-background-active: var(--sinch-color-tropical-200);
+  --sinch-button-secondary-color-background-disabled: var(--sinch-color-snow-100);
+  --sinch-button-secondary-color-border: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-border-hover: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-border-active: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-border-disabled: var(--sinch-color-tropical-200);
+  --sinch-button-secondary-color-text: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-text-hover: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-text-active: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-text-disabled: var(--sinch-color-tropical-200);
+  --sinch-button-secondary-color-icon: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-icon-hover: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-icon-active: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-icon-disabled: var(--sinch-color-tropical-200);
+  --sinch-button-secondary-mix-blend-mode: initial;
+
+  /* Tertiary */
+  --sinch-button-tertiary-color-background: transparent;
+  --sinch-button-tertiary-color-background-hover: var(--sinch-color-bg-hover);
+  --sinch-button-tertiary-color-background-active: var(--sinch-color-bg-active);
+  --sinch-button-tertiary-color-background-disabled: transparent;
+  --sinch-button-tertiary-color-border: transparent;
+  --sinch-button-tertiary-color-border-hover: transparent;
+  --sinch-button-tertiary-color-border-active: transparent;
+  --sinch-button-tertiary-color-border-disabled: transparent;
+  --sinch-button-tertiary-color-text: var(--sinch-color-tropical-500);
+  --sinch-button-tertiary-color-text-hover: var(--sinch-color-tropical-500);
+  --sinch-button-tertiary-color-text-active: var(--sinch-color-tropical-500);
+  --sinch-button-tertiary-color-text-disabled: var(--sinch-color-tropical-200);
+  --sinch-button-tertiary-color-icon: var(--sinch-color-tropical-500);
+  --sinch-button-tertiary-color-icon-hover: var(--sinch-color-tropical-500);
+  --sinch-button-tertiary-color-icon-active: var(--sinch-color-tropical-500);
+  --sinch-button-tertiary-color-icon-disabled: var(--sinch-color-tropical-200);
+  --sinch-button-tertiary-mix-blend-mode: multiply;
+
+  /* Cta Primary */
+  --sinch-button-cta-primary-color-background: var(--sinch-color-honey-500);
+  --sinch-button-cta-primary-color-background-hover: var(--sinch-color-honey-400);
+  --sinch-button-cta-primary-color-background-active: var(--sinch-color-honey-600);
+  --sinch-button-cta-primary-color-background-disabled: var(--sinch-color-honey-200);
+  --sinch-button-cta-primary-color-border: transparent;
+  --sinch-button-cta-primary-color-border-hover: transparent;
+  --sinch-button-cta-primary-color-border-active: transparent;
+  --sinch-button-cta-primary-color-border-disabled: transparent;
+  --sinch-button-cta-primary-color-text: var(--sinch-color-stormy-500);
+  --sinch-button-cta-primary-color-text-hover: var(--sinch-color-stormy-500);
+  --sinch-button-cta-primary-color-text-active: var(--sinch-color-stormy-500);
+  --sinch-button-cta-primary-color-text-disabled: var(--sinch-color-stormy-300);
+  --sinch-button-cta-primary-color-icon: var(--sinch-color-stormy-500);
+  --sinch-button-cta-primary-color-icon-hover: var(--sinch-color-stormy-500);
+  --sinch-button-cta-primary-color-icon-active: var(--sinch-color-stormy-500);
+  --sinch-button-cta-primary-color-icon-disabled: var(--sinch-color-stormy-300);
+  --sinch-button-cta-primary-mix-blend-mode: initial;
+
+  /* Cta Secondary */
+  --sinch-button-cta-secondary-color-background: var(--sinch-color-snow-100);
+  --sinch-button-cta-secondary-color-background-hover: var(--sinch-color-snow-200);
+  --sinch-button-cta-secondary-color-background-active: var(--sinch-color-snow-400);
+  --sinch-button-cta-secondary-color-background-disabled: var(--sinch-color-snow-100);
+  --sinch-button-cta-secondary-color-border: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-border-hover: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-border-active: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-border-disabled: var(--sinch-color-stormy-100);
+  --sinch-button-cta-secondary-color-text: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-text-hover: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-text-active: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-text-disabled: var(--sinch-color-stormy-100);
+  --sinch-button-cta-secondary-color-icon: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-icon-hover: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-icon-active: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-icon-disabled: var(--sinch-color-stormy-100);
+  --sinch-button-cta-secondary-mix-blend-mode: initial;
+
+  /* Destructive */
+  --sinch-button-destructive-color-background: transparent;
+  --sinch-button-destructive-color-background-hover: var(--sinch-color-raspberry-100);
+  --sinch-button-destructive-color-background-active: var(--sinch-color-raspberry-100);
+  --sinch-button-destructive-color-background-disabled: transparent;
+  --sinch-button-destructive-color-border: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-border-hover: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-border-active: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-border-disabled: var(--sinch-color-raspberry-200);
+  --sinch-button-destructive-color-text: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-text-hover: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-text-active: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-text-disabled: var(--sinch-color-raspberry-200);
+  --sinch-button-destructive-color-icon: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-icon-hover: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-icon-active: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-icon-disabled: var(--sinch-color-raspberry-200);
+  --sinch-button-destructive-mix-blend-mode: initial;
+
+  /* Default */
+  --sinch-button-color-background: var(--sinch-button-primary-color-background);
+  --sinch-button-color-background-hover: var(--sinch-button-primary-color-background-hover);
+  --sinch-button-color-background-active: var(--sinch-button-primary-color-background-active);
+  --sinch-button-color-background-disabled: var(--sinch-button-primary-color-background-disabled);
+  --sinch-button-color-border: var(--sinch-button-primary-color-border);
+  --sinch-button-color-border-hover: var(--sinch-button-primary-color-border-hover);
+  --sinch-button-color-border-active: var(--sinch-button-primary-color-border-active);
+  --sinch-button-color-border-disabled: var(--sinch-button-primary-color-border-disabled);
+  --sinch-button-color-text: var(--sinch-button-primary-color-text);
+  --sinch-button-color-text-hover: var(--sinch-button-primary-color-text-hover);
+  --sinch-button-color-text-active: var(--sinch-button-primary-color-text-active);
+  --sinch-button-color-text-disabled: var(--sinch-button-primary-color-text-disabled);
+  --sinch-button-color-icon: var(--sinch-button-primary-color-icon);
+  --sinch-button-color-icon-hover: var(--sinch-button-primary-color-icon-hover);
+  --sinch-button-color-icon-active: var(--sinch-button-primary-color-icon-active);
+  --sinch-button-color-icon-disabled: var(--sinch-button-primary-color-icon-disabled);
+  --sinch-button-mix-blend-mode: var(--sinch-button-primary-mix-blend-mode);
+
+  /* Font */
+  --sinch-button-font-l: 700 16px/24px var(--sinch-font-family);
+  --sinch-button-font-m: 700 16px/24px var(--sinch-font-family);
+  --sinch-button-font-s: 700 14px/20px var(--sinch-font-family);
+  --sinch-button-font: var(--sinch-button-font-m);
+
+  /* Icon Size */
+  --sinch-button-icon-size-l: 24px;
+  --sinch-button-icon-size-m: 24px;
+  --sinch-button-icon-size-s: 16px;
+}

package/{theme.css → theme/contextual.css}

@@ -1,22 +1,5 @@
-@import "theme/palette.css";
-@import "theme/fonts.css";
-@import "theme/typography.css";
-@import "theme/shapes.css";
-@import "theme/elevation.css";
-
-/* Components */
-@import "theme/avatar.css";
-@import "theme/badge.css";
-@import "theme/chip.css";
-@import "theme/color-swatch.css";
-@import "theme/tag.css";
-@import "theme/emoji.css";
-@import "theme/icon.css";
-
 :root,
 :host {
-  --sinch-theme: 1;
-
   /* Contextual */
   --sinch-color-bg-primary-light: var(--sinch-color-snow-100);
   --sinch-color-bg-primary-contrast: var(--sinch-color-snow-200);
@@ -24,6 +7,8 @@
   --sinch-color-bg-comp-blue: var(--sinch-color-ocean-100);
   --sinch-color-bg-comp-yellow: var(--sinch-color-honey-200);
   --sinch-color-bg-comp-red: var(--sinch-color-raspberry-100);
+  --sinch-color-bg-hover: var(--sinch-color-snow-200);
+  --sinch-color-bg-active: var(--sinch-color-snow-400);
   --sinch-color-text-default: var(--sinch-color-stormy-700);
   --sinch-color-text-inverted: var(--sinch-color-snow-100);
   --sinch-color-text-muted: var(--sinch-color-stormy-300);
@@ -39,12 +24,5 @@
   --sinch-color-border-disabled: var(--sinch-color-snow-400);
   --sinch-color-border-focus: var(--sinch-color-ocean-500);
   --sinch-color-border-invalid: var(--sinch-color-raspberry-600);
-
-  /* Deprecated */
-  --sinch-font-hero: 700 56px/72px var(--sinch-font-family);
-  --sinch-font-body: 400 16px/24px var(--sinch-font-family);
-  --sinch-font-emphasized-body: 600 16px/24px var(--sinch-font-family);
-  --sinch-font-small-text: 400 14px/22px var(--sinch-font-family);
-  --sinch-font-extra-small-text: 400 12px/20px var(--sinch-font-family);
-  --sinch-font-monospace: 400 16px/24px "monospace";
+  --sinch-color-icon: var(--sinch-color-stormy-500);
 }

package/theme/elevation.css

@@ -1,6 +1,6 @@
 :root,
 :host {
-  --sinch-elevation-level-0: 0 0 0 0 rgba(10, 39, 61, 0.1);
+  --sinch-elevation-level-0: none;
   --sinch-elevation-level-1: 1px 2px 6px rgba(10, 39, 61, 0.1);
   --sinch-elevation-level-2: 1px 4px 8px rgba(10, 39, 61, 0.1);
   --sinch-elevation-level-3: 1px 6px 12px rgba(10, 39, 61, 0.15);

package/theme/flag.css

@@ -0,0 +1,4 @@
+:root,
+:host {
+  --sinch-flag-src-url: "https://flagcdn.com/%s.svg";
+}

package/theme/fonts.css

@@ -1,36 +1,3 @@
-@font-face {
-  font-family: "Gilroy";
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-  src:
-    local("Gilroy-Regular"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2") format("woff2"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Gilroy";
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-  src:
-    local("Gilroy-SemiBold"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2") format("woff2"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Gilroy";
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-  src:
-    local("Gilroy-Bold"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2") format("woff2"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff") format("woff");
-}
-
 @font-face {
   font-family: "DM Sans";
   font-weight: 400;

package/theme/fonts.json

@@ -1,37 +1,4 @@
 [
-  {
-    "family": "Gilroy",
-    "weight": 400,
-    "style": "normal",
-    "display": "swap",
-    "src": {
-      "local": "Gilroy-Regular",
-      "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2",
-      "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff"
-    }
-  },
-  {
-    "family": "Gilroy",
-    "weight": 600,
-    "style": "normal",
-    "display": "swap",
-    "src": {
-      "local": "Gilroy-SemiBold",
-      "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2",
-      "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff"
-    }
-  },
-  {
-    "family": "Gilroy",
-    "weight": 700,
-    "style": "normal",
-    "display": "swap",
-    "src": {
-      "local": "Gilroy-Bold",
-      "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2",
-      "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff"
-    }
-  },
   {
     "family": "DM Sans",
     "weight": 400,