@nectary/components 0.24.0 → 0.26.0

package/segmented-control/index.js

@@ -0,0 +1,208 @@
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+
+var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange, _onValueChange, _dispatchChangeEvent, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _getEnabledRadioElements;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import { isSegmentedControlOptionElement } from '../segmented-control-option';
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
+
+const findSelectedOption = elements => {
+  return elements.find(el => el.checked) ?? null;
+};
+
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-segmented-control', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _getEnabledRadioElements = new WeakSet(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _getEnabledRadioElements);
+
+    _classPrivateMethodInitSpec(this, _getPrevOption);
+
+    _classPrivateMethodInitSpec(this, _getNextOption);
+
+    _classPrivateMethodInitSpec(this, _getLastOption);
+
+    _classPrivateMethodInitSpec(this, _getFirstOption);
+
+    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
+
+    _classPrivateMethodInitSpec(this, _onValueChange);
+
+    _classPrivateFieldInitSpec(this, _$slot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onOptionKeyDown, {
+      writable: true,
+      value: e => {
+        switch (e.code) {
+          case 'ArrowUp':
+          case 'ArrowLeft':
+            {
+              e.preventDefault();
+
+              const $option = _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this);
+
+              if ($option !== null) {
+                $option.focus();
+
+                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option.value);
+              }
+
+              break;
+            }
+
+          case 'ArrowDown':
+          case 'ArrowRight':
+            {
+              e.preventDefault();
+
+              const $option = _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this);
+
+              if ($option !== null) {
+                $option.focus();
+
+                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option.value);
+              }
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onSlotChange, {
+      writable: true,
+      value: () => {
+        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onOptionChange, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, e.detail);
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    shadowRoot.addEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
+    shadowRoot.addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
+
+    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'tablist');
+  }
+
+  static get observedAttributes() {
+    return ['value'];
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal);
+
+          break;
+        }
+    }
+  }
+
+}));
+
+function _onValueChange2(value) {
+  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+    if (isSegmentedControlOptionElement($option)) {
+      $option.checked = $option.disabled !== true && $option.value === value;
+    }
+  }
+}
+
+function _dispatchChangeEvent2(value) {
+  this.dispatchEvent(new CustomEvent('change', {
+    detail: value,
+    bubbles: true
+  }));
+}
+
+function _getFirstOption2() {
+  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+    if (isSegmentedControlOptionElement($option) && $option.disabled !== true) {
+      return $option;
+    }
+  }
+
+  return null;
+}
+
+function _getLastOption2() {
+  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements().reverse()) {
+    if (isSegmentedControlOptionElement($option) && $option.disabled !== true) {
+      return $option;
+    }
+  }
+
+  return null;
+}
+
+function _getNextOption2() {
+  const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
+
+  const $selectedOption = findSelectedOption($options);
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
+  }
+
+  return $options[(currentIndex + 1) % $options.length];
+}
+
+function _getPrevOption2() {
+  const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
+
+  const $selectedOption = findSelectedOption($options);
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return _classPrivateMethodGet(this, _getLastOption, _getLastOption2).call(this);
+  }
+
+  return $options[(currentIndex - 1 + $options.length) % $options.length];
+}
+
+function _getEnabledRadioElements2() {
+  return _classPrivateFieldGet(this, _$slot).assignedElements().filter(opt => isSegmentedControlOptionElement(opt) && opt.disabled !== true);
+}

package/segmented-control-option/index.d.ts

@@ -0,0 +1,29 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent } from 'react';
+export declare const isSegmentedControlOptionElement: (element: EventTarget | Element | null) => element is TSinchSegmentedControlOptionElement;
+export declare type TSinchSegmentedControlOptionElement = HTMLElement & {
+    value: string;
+    disabled: boolean;
+    checked: boolean;
+    text: string;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchSegmentedControlOptionReact = TSinchElementReact<TSinchSegmentedControlOptionElement> & {
+    value: string;
+    disabled?: boolean;
+    text: string;
+    'aria-label': string;
+    onFocus?: (e: FocusEvent<TSinchSegmentedControlOptionElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchSegmentedControlOptionElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segmented-control-option': TSinchSegmentedControlOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-segmented-control-option': TSinchSegmentedControlOptionElement;
+    }
+}

package/segmented-control-option/index.js

@@ -0,0 +1,112 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+
+var _onClick;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;position:relative;flex-direction:row;align-items:center;gap:12px;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;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}#wrapper:hover{background-color:var(--sinch-color-snow-500)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]:not([checked=false])) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([checked]:not([checked=false]):not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:0;top:-1px;bottom:-1px}:host([checked]:not([checked=false]):not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:focus::before{content:"";position:absolute;left:-3px;right:-3px;top:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400)}#button:disabled{cursor:unset}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="button" id="content"></label> <button id="button"></button></div>';
+export const isSegmentedControlOptionElement = element => {
+  return element instanceof Element && element.tagName === 'SINCH-SEGMENTED-CONTROL-OPTION';
+};
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-segmented-control-option', (_onClick = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _onClick, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('change', {
+          bubbles: true,
+          detail: this.value
+        }));
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$button = shadowRoot.querySelector('#button');
+    this.$label = shadowRoot.querySelector('#content');
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'tab');
+    this.$button.addEventListener('click', _classPrivateFieldGet(this, _onClick));
+  }
+
+  disconnectedCallback() {
+    this.$button.removeEventListener('click', _classPrivateFieldGet(this, _onClick));
+  }
+
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'text', 'value'];
+  }
+
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+
+  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');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.$label.textContent = newVal;
+          break;
+        }
+
+      case 'checked':
+        {
+          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'disabled':
+        {
+          this.$button.disabled = isAttrTrue(newVal);
+          break;
+        }
+    }
+  }
+
+  focus() {
+    this.$button.focus();
+  }
+
+  blur() {
+    this.$button.blur();
+  }
+
+}));

package/segmented-icon-control/index.d.ts

@@ -0,0 +1,22 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchSegmentedIconControlElement = HTMLElement & {
+    value: string;
+    multiple: boolean;
+};
+export declare type TSinchSegmentedIconControlReact = TSinchElementReact<TSinchSegmentedIconControlElement> & {
+    value: string;
+    multiple?: boolean;
+    'aria-label': string;
+    onChange: (event: SyntheticEvent<TSinchSegmentedIconControlElement, CustomEvent<string>>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segmented-icon-control': TSinchSegmentedIconControlReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-segmented-icon-control': TSinchSegmentedIconControlElement;
+    }
+}

package/segmented-icon-control/index.js

@@ -0,0 +1,126 @@
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+
+var _$slot, _onSlotChange, _onOptionChange, _onValueChange;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import { isSegmentedIconControlOptionElement } from '../segmented-icon-control-option';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCSVSet, getFirstCSValue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCSV } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _onValueChange);
+
+    _classPrivateFieldInitSpec(this, _$slot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onSlotChange, {
+      writable: true,
+      value: () => {
+        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onOptionChange, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        if (!isSegmentedIconControlOptionElement(e.target)) {
+          return;
+        }
+
+        const {
+          value,
+          isChecked
+        } = e.detail;
+        const result = this.multiple ? updateCSV(this.value, value, isChecked) : value;
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: result,
+          bubbles: true
+        }));
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    shadowRoot.addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
+
+    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'tablist');
+  }
+
+  static get observedAttributes() {
+    return ['value'];
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
+
+          break;
+        }
+    }
+  }
+
+}));
+
+function _onValueChange2(csv) {
+  if (this.multiple) {
+    const values = getCSVSet(csv);
+
+    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+      if (isSegmentedIconControlOptionElement($option)) {
+        $option.checked = $option.disabled !== true && values.has($option.value);
+      }
+    }
+  } else {
+    const value = getFirstCSValue(csv);
+
+    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+      if (isSegmentedIconControlOptionElement($option)) {
+        $option.checked = $option.disabled !== true && $option.value === value;
+      }
+    }
+  }
+}

package/segmented-icon-control-option/index.d.ts

@@ -0,0 +1,27 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent } from 'react';
+export declare const isSegmentedIconControlOptionElement: (element: EventTarget | Element | null) => element is TSinchSegmentedIconControlOptionElement;
+export declare type TSinchSegmentedIconControlOptionElement = HTMLElement & {
+    value: string;
+    disabled: boolean;
+    checked: boolean;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchSegmentedIconControlOptionReact = TSinchElementReact<TSinchSegmentedIconControlOptionElement> & {
+    value: string;
+    disabled?: boolean;
+    'aria-label': string;
+    onFocus?: (e: FocusEvent<TSinchSegmentedIconControlOptionElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchSegmentedIconControlOptionElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segmented-icon-control-option': TSinchSegmentedIconControlOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-segmented-icon-control-option': TSinchSegmentedIconControlOptionElement;
+    }
+}

package/segmented-icon-control-option/index.js

@@ -0,0 +1,103 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#wrapper:hover{background-color:var(--sinch-color-snow-500)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}:host([checked]:not([checked=false])) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([checked]:not([checked=false]):not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:-1px;top:-1px;bottom:-1px}:host([checked]:not([checked=false]):not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:focus::before{content:"";position:absolute;left:-4px;right:-3px;top:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400)}#button:disabled{cursor:unset}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){display:block}</style><div id="wrapper"><slot name="icon"></slot><button id="button"></button></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+
+var _onClick = new WeakMap();
+
+class SinchSegmentedIconControlOption extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _onClick, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('change', {
+          bubbles: true,
+          detail: {
+            value: this.value,
+            isChecked: !this.checked
+          }
+        }));
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$button = shadowRoot.querySelector('#button');
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'tab');
+    this.$button.addEventListener('click', _classPrivateFieldGet(this, _onClick));
+  }
+
+  disconnectedCallback() {
+    this.$button.removeEventListener('click', _classPrivateFieldGet(this, _onClick));
+  }
+
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'value'];
+  }
+
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+
+  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, _, newVal) {
+    switch (name) {
+      case 'checked':
+        {
+          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'disabled':
+        {
+          this.$button.disabled = isAttrTrue(newVal);
+          break;
+        }
+    }
+  }
+
+  focus() {
+    this.$button.focus();
+  }
+
+  blur() {
+    this.$button.blur();
+  }
+
+}
+
+defineCustomElement('sinch-segmented-icon-control-option', SinchSegmentedIconControlOption);
+export const isSegmentedIconControlOptionElement = element => {
+  return element instanceof SinchSegmentedIconControlOption;
+};

package/tabs/index.js

@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import { isTabsOptionElement } from '../tabs-option';
 import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;height:60px;width:100%;box-sizing:border-box;overflow-x:auto}</style><div id="wrapper"><slot></slot></div>';
+const 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;