@nectary/components 0.42.1 → 0.43.0

package/icon-button/index.js

@@ -1,6 +1,6 @@
 import '../tooltip';
 import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;contain:size;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500));--sinch-icon-button-shape-radius:var(--sinch-shape-radius-l)}button::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--sinch-icon-button-shape-radius);pointer-events:none;box-sizing:border-box;border:1px solid transparent;background-color:transparent;mix-blend-mode:multiply}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}}button:enabled:hover::before{background-color:#f1f2f4}button:enabled:active::before{background-color:#e3e6e8}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false])) #button{width:32px;height:32px;--sinch-icon-button-shape-radius:var(--sinch-shape-radius-m)}button>*{pointer-events:none}</style><sinch-tooltip id="tooltip"><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;contain:size;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500));--sinch-icon-button-shape-radius:var(--sinch-shape-radius-l)}button::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--sinch-icon-button-shape-radius);pointer-events:none;box-sizing:border-box;border:1px solid transparent;background-color:transparent;mix-blend-mode:multiply}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}}button:enabled:hover::before{background-color:#f1f2f4}button:enabled:active::before{background-color:#e3e6e8}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false])) #button{width:32px;height:32px;--sinch-icon-button-shape-radius:var(--sinch-shape-radius-m)}button>*{pointer-events:none}</style><sinch-tooltip id="tooltip" inverted><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon-button', class extends NectaryElement {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nectary/components",
-  "version": "0.42.1",
+  "version": "0.43.0",
   "files": [
     "theme.css",
     "theme/*.css",
-    "theme/fonts.json",
+    "theme/*.json",
     "**/*/*.js",
     "**/*/*.d.ts",
     "types.d.ts",

package/pop/index.js

@@ -1,6 +1,5 @@
 import dialogPolyfill from 'dialog-polyfill';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement } from '../utils';
-import { Context, dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils';
 const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" aria-haspopup="dialog" aria-expanded="false" name="target"></slot><div id="focus" tabindex="-1"></div><dialog id="dialog"><div id="content"><slot name="content"></slot></div><div id="target-open"><slot name="target-open"></slot></div></dialog>';
 import { assertOrientation, disableScroll, enableScroll, orientationValues } from './utils';
 const template = document.createElement('template');

package/popover/index.js

@@ -1,6 +1,5 @@
 import '../pop';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap } from '../utils';
-import { dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap, dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils';
 const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px}#content{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-m);box-shadow:var(--sinch-elevation-level-2);overflow:hidden}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-color-snow-100);stroke:var(--sinch-color-snow-500);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}:host([tip]) #content{box-shadow:none}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-elevation-level-2))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 import { assertOrientation, getPopOrientation, orientationValues } from './utils';
 const TIP_SIZE = 16;

package/segment/index.js

@@ -1,7 +1,7 @@
 import '../title';
 import { getTitleLevelFromType } from '../title/utils';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:16px;width:100%;height:100%;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);box-shadow:var(--sinch-elevation-level-2);padding:8px 24px 16px}#header{display:flex;flex-direction:row;align-items:center;height:48px;gap:8px;--sinch-size-icon:32px}#caption{color:var(--sinch-color-text-default);min-width:1em}#info{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto;align-self:stretch}#info.empty{display:none}#preview{flex:1;flex-basis:auto;height:48px;min-width:0;overflow:hidden;margin-left:24px}#preview.empty{display:none}#info.empty+#collapse{margin-left:auto}#collapse.empty{display:none}#preview:not(.empty)+#info.empty+#collapse:not(.empty),#preview:not(.empty)+#info:not(.empty){margin-left:24px}#content-wrapper{flex:1;min-height:0;overflow-y:auto}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px}#action.empty{display:none}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #wrapper{padding-bottom:8px}::slotted([slot=icon]){margin-right:8px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><sinch-title id="caption" level="3" type="m" ellipsis></sinch-title><div id="preview"><slot name="preview"></slot></div><div id="info"><slot name="info"></slot></div><div id="collapse"><slot name="collapse"></slot></div></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:12px;width:100%;height:100%;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);box-shadow:var(--sinch-elevation-level-2);padding:8px 0 16px}#header{display:flex;flex-direction:row;align-items:center;height:48px;gap:8px;padding:0 24px;--sinch-size-icon:32px}#caption{color:var(--sinch-color-text-default);min-width:1em}#info{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto;align-self:stretch}#info.empty{display:none}#preview{flex:1;flex-basis:auto;height:48px;min-width:0;overflow:hidden;margin-left:24px}#preview.empty{display:none}#info.empty+#collapse{margin-left:auto}#collapse.empty{display:none}#preview:not(.empty)+#info.empty+#collapse:not(.empty),#preview:not(.empty)+#info:not(.empty){margin-left:24px}#content-wrapper{flex:1;min-height:0;overflow-y:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:0 24px}#action.empty{display:none}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #wrapper{padding-bottom:8px}::slotted([slot=icon]){margin-right:8px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><sinch-title id="caption" level="3" type="m" ellipsis></sinch-title><div id="preview"><slot name="preview"></slot></div><div id="info"><slot name="info"></slot></div><div id="collapse"><slot name="collapse"></slot></div></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
 import { assertSize, sizeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/select-menu/index.js

@@ -1,5 +1,4 @@
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
-import { dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
+import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, getCsvSet, 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>';
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');

package/tabs/index.js

@@ -1,12 +1,10 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;height:44px;width:100%;box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
-const findSelectedOption = elements => {
-  return elements.find(el => el.checked) ?? null;
-};
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%;border-bottom:1px solid var(--sinch-color-border-default)}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs', class extends NectaryElement {
   #$slot;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -14,17 +12,23 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
     this.#$slot = shadowRoot.querySelector('slot');
   }
   connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
     this.setAttribute('role', 'tablist');
-    this.#$slot.addEventListener('keydown', this.#onOptionKeyDown);
-    this.#$slot.addEventListener('option-change', this.#onOptionChange);
-    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
-    this.addEventListener('-change', this.#onChangeReactHandler);
+    this.#$slot.addEventListener('option-change', this.#onOptionChange, {
+      signal
+    });
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange, {
+      signal
+    });
+    this.addEventListener('-change', this.#onChangeReactHandler, {
+      signal
+    });
   }
   disconnectedCallback() {
-    this.#$slot.removeEventListener('keydown', this.#onOptionKeyDown);
-    this.#$slot.removeEventListener('option-change', this.#onOptionChange);
-    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
-    this.removeEventListener('-change', this.#onChangeReactHandler);
+    this.#controller.abort();
   }
   static get observedAttributes() {
     return ['value'];
@@ -47,32 +51,13 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
         }
     }
   }
-  #onOptionKeyDown = e => {
-    switch (e.code) {
-      case 'ArrowUp':
-      case 'ArrowLeft':
-        {
-          e.preventDefault();
-          const $option = this.#getPrevOption();
-          if ($option !== null) {
-            $option.focus();
-            this.#dispatchChangeEvent($option.value);
-          }
-          break;
-        }
-      case 'ArrowDown':
-      case 'ArrowRight':
-        {
-          e.preventDefault();
-          const $option = this.#getNextOption();
-          if ($option !== null) {
-            $option.focus();
-            this.#dispatchChangeEvent($option.value);
-          }
-          break;
-        }
+  nthOptionRect(index) {
+    const $el = this.#$slot.assignedElements()[index];
+    if ($el != null) {
+      return getRect($el);
     }
-  };
+    return null;
+  }
   #onSlotChange = () => {
     this.#onValueChange(this.value);
   };
@@ -83,7 +68,7 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
   #onValueChange(value) {
     for (const $option of this.#$slot.assignedElements()) {
       const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
-      updateBooleanAttribute($option, 'checked', isChecked);
+      updateBooleanAttribute($option, 'data-checked', isChecked);
     }
   }
   #dispatchChangeEvent(value) {
@@ -95,43 +80,6 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
       detail: value
     }));
   }
-  #getFirstOption() {
-    for (const $option of this.#$slot.assignedElements()) {
-      if ($option.disabled !== true) {
-        return $option;
-      }
-    }
-    return null;
-  }
-  #getLastOption() {
-    for (const $option of this.#$slot.assignedElements().reverse()) {
-      if ($option.disabled !== true) {
-        return $option;
-      }
-    }
-    return null;
-  }
-  #getNextOption() {
-    const $options = this.#getEnabledRadioElements();
-    const $selectedOption = findSelectedOption($options);
-    const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
-    if (currentIndex < 0) {
-      return this.#getFirstOption();
-    }
-    return $options[(currentIndex + 1) % $options.length];
-  }
-  #getPrevOption() {
-    const $options = this.#getEnabledRadioElements();
-    const $selectedOption = findSelectedOption($options);
-    const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
-    if (currentIndex < 0) {
-      return this.#getLastOption();
-    }
-    return $options[(currentIndex - 1 + $options.length) % $options.length];
-  }
-  #getEnabledRadioElements() {
-    return this.#$slot.assignedElements().filter(opt => opt.disabled !== true);
-  }
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/tabs/types.d.ts

@@ -1,14 +1,21 @@
-import type { TSinchElementReact } from '../types';
+import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchTabsElement = HTMLElement & {
+    /** Value */
     value: string;
+    nthOptionRect(index: number): TRect | null;
+    /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Value */
     setAttribute(name: 'value', value: string): void;
 };
 export declare type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
+    /** Value */
     value: string;
+    /** Label that is used for a11y */
     'aria-label': string;
-    /** @deprecated */
+    /** @deprecated Change value handler */
     onChange?: (event: SyntheticEvent<TSinchTabsElement, CustomEvent<string>>) => void;
+    /** Change value event */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/tabs-icon-option/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTabsIconOptionElement, TSinchTabsIconOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs-icon-option': TSinchTabsIconOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tabs-icon-option': TSinchTabsIconOptionElement;
+    }
+}

package/tabs-icon-option/index.js

@@ -0,0 +1,75 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);height:40px;--sinch-color-icon:var(--sinch-color-stormy-300);--sinch-size-icon:16px}#button:hover{background-color:var(--sinch-color-tropical-100)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-color-border-focus);border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);pointer-events:none}:host([data-checked]) #button{--sinch-color-icon:var(--sinch-color-tropical-500)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-color-tropical-500)}#button:disabled{cursor:unset;pointer-events:none;--sinch-color-icon:var(--sinch-color-border-default)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip" inverted><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tabs-icon-option', class extends NectaryElement {
+  #$button;
+  #$tooltip;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$tooltip = shadowRoot.querySelector('#tooltip');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'tab');
+    this.#$button.addEventListener('click', this.#onClick);
+  }
+  disconnectedCallback() {
+    this.#$button.removeEventListener('click', this.#onClick);
+  }
+  static get observedAttributes() {
+    return ['data-checked', 'disabled', 'aria-label'];
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+      case 'disabled':
+        {
+          this.#$button.disabled = isAttrTrue(newVal);
+          break;
+        }
+      case 'aria-label':
+        {
+          updateAttribute(this.#$tooltip, 'text', newVal);
+          break;
+        }
+    }
+  }
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$button.focus();
+  }
+  blur() {
+    this.#$button.blur();
+  }
+  #onClick = e => {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('option-change', {
+      bubbles: true,
+      detail: this.value
+    }));
+  };
+});

package/tabs-icon-option/types.d.ts

@@ -0,0 +1,19 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTabsIconOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchTabsIconOptionReact = TSinchElementReact<TSinchTabsIconOptionElement> & {
+    /** Value */
+    value: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+};

package/tabs-icon-option/types.js

@@ -0,0 +1 @@
+export {};

package/tabs-option/index.d.ts

@@ -1,3 +1,4 @@
+import '../text';
 import type { TSinchTabsOptionElement, TSinchTabsOptionReact } from './types';
 declare global {
     namespace JSX {

package/tabs-option/index.js

@@ -1,16 +1,17 @@
+import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;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);background-color:var(--sinch-color-snow-100);--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]:not([checked=false])) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}#button:disabled{cursor:unset}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content"></label><button id="button" type="radio"/></div>';
+const templateHTML = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);height:40px;color:var(--sinch-color-stormy-300);--sinch-color-icon:var(--sinch-color-stormy-300);--sinch-size-icon:16px}#button:hover{background-color:var(--sinch-color-tropical-100)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-color-border-focus);border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);pointer-events:none}:host([data-checked]) #button{color:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-color-tropical-500)}#button:disabled{cursor:unset;pointer-events:none;color:var(--sinch-color-border-default);--sinch-color-icon:var(--sinch-color-border-default)}#text{flex-shrink:1;flex-basis:auto;min-width:0}::slotted(*){display:block}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-option', class extends NectaryElement {
   #$button;
-  #$label;
+  #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
-    this.#$label = shadowRoot.querySelector('#content');
+    this.#$text = shadowRoot.querySelector('#text');
   }
   connectedCallback() {
     this.setAttribute('role', 'tab');
@@ -20,13 +21,7 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
     this.#$button.removeEventListener('click', this.#onClick);
   }
   static get observedAttributes() {
-    return ['checked', 'disabled', 'text', 'value'];
-  }
-  set checked(isChecked) {
-    updateBooleanAttribute(this, 'checked', isChecked);
-  }
-  get checked() {
-    return getBooleanAttribute(this, 'checked');
+    return ['data-checked', 'disabled', 'text'];
   }
   set value(value) {
     updateAttribute(this, 'value', value);
@@ -50,19 +45,17 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
     switch (name) {
       case 'text':
         {
-          this.#$label.textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
-      case 'checked':
+      case 'data-checked':
         {
           updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
       case 'disabled':
         {
-          const isDisabled = isAttrTrue(newVal);
-          this.#$button.disabled = isDisabled;
-          updateBooleanAttribute(this, 'disabled', isDisabled);
+          this.#$button.disabled = isAttrTrue(newVal);
           break;
         }
     }

package/tabs-option/types.d.ts

@@ -1,17 +1,25 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchTabsOptionElement = HTMLElement & {
+    /** Value */
     value: string;
-    disabled: boolean;
-    checked: boolean;
+    /** Text */
     text: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Value */
     setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'disabled', value: ''): void;
-    setAttribute(name: 'checked', value: ''): void;
+    /** Text */
     setAttribute(name: 'text', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
+    /** Value */
     value: string;
-    disabled?: boolean;
+    /** Text */
     text: string;
+    /** Label that is used for a11y */
     'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
 };

package/theme/emoji.css

@@ -0,0 +1,6 @@
+:root,
+:host {
+  --sinch-emoji-src-url: "https://twemoji.maxcdn.com/v/latest/svg/%s.svg";
+
+  /* --sinch-emoji-src-url: "https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/%s.svg"; */
+}

package/theme/fonts.css

@@ -74,3 +74,12 @@
     url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff2") format("woff2"),
     url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff") format("woff");
 }
+
+@font-face {
+  font-family: "Material Icons Outlined";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url("https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2") format("woff2"),
+    url("https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOelbd5zrDAt.woff") format("woff");
+}

package/theme/fonts.json

@@ -75,5 +75,14 @@
       "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff2",
       "woff": "https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff"
     }
+  },
+  {
+    "family": "Material Icons Outlined",
+    "weight": 400,
+    "style": "normal",
+    "src": {
+      "woff2": "https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2",
+      "woff": "https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOelbd5zrDAt.woff"
+    }
   }
 ]

package/theme/icon.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  --sinch-icon-font-family: "Material Icons Outlined";
+  --sinch-icon-font-variation-settings: "FILL" 1;
+  --sinch-icon-font-feature-settings: "liga";
+  --sinch-icon-font-weight: 400;
+}

package/theme.css

@@ -10,6 +10,8 @@
 @import "theme/chip.css";
 @import "theme/color-swatch.css";
 @import "theme/tag.css";
+@import "theme/emoji.css";
+@import "theme/icon.css";
 
 :root,
 :host {