@nectary/components 0.24.0 → 0.25.0

package/colors.json

@@ -13,6 +13,7 @@
   "colorTropical300": "#66AAAA",
   "colorTropical200": "#99C6C6",
   "colorTropical100": "#CCE3E3",
+  "colorTropical50": "#E5F1F1",
   "colorStormy600": "#061927",
   "colorStormy500": "#0A273D",
   "colorStormy400": "#3B5264",
@@ -31,6 +32,7 @@
   "colorRaspberry300": "#EE778B",
   "colorRaspberry200": "#F4A4B1",
   "colorRaspberry100": "#F9D2D8",
+  "colorRaspberry50": "#FCE8EB",
   "colorTextDefault": "#0A273D",
   "colorTextInverted": "#FFFFFF",
   "colorTextMuted": "#677784",

package/index.d.ts

@@ -193,3 +193,4 @@ import './chat-block';
 import './chat';
 import './title';
 import './popover';
+import './segmented-control';

package/index.js

@@ -192,4 +192,5 @@ import './chat-bubble';
 import './chat-block';
 import './chat';
 import './title';
-import './popover';
+import './popover';
+import './segmented-control';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "files": [
     "theme.css",
     "**/*/*.js",
@@ -13,9 +13,7 @@
     "colors.json"
   ],
   "scripts": {
-    "prebuild": "rimraf utils.{js,d.ts} index.{js,d.ts} */*.{js,d.ts} */**/*.{js,d.ts}",
-    "build": "NODE_ENV=production babel . --extensions '.ts' --ignore '*.d.ts' --out-dir .",
-    "postbuild": "tsc"
+    "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.0",
@@ -29,8 +27,8 @@
     "@babel/preset-typescript": "^7.16.0",
     "@types/node": "^17.0.14",
     "@types/react": "^17.0.0",
+    "babel-plugin-html-inline-minifier": "workspace:babel-plugin-html-inline-minifier@*",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
-    "rimraf": "^3.0.2",
     "typescript": "^4.4.2"
   }
 }

package/search/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$label, _$input, _selectionStart, _selectionEnd, _$optionSlot, _$listbox, _$clear, _isPendingDk, _onCompositionStart, _onInput, _onValueChange, _onClearMouseDown, _onClear, _onInputFocus, _onInputBlur, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _onExpand, _onCollapse, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements;
+var _$label, _$input, _selectionStart, _selectionEnd, _$optionSlot, _$listbox, _$clear, _isPendingDk, _sh, _onCompositionStart, _onInput, _onValueChange, _onClearMouseDown, _onClear, _onInputFocus, _onInputBlur, _onListboxClick, _onListboxKeyUp, _onListboxKeyDown, _onOptionSlotChange, _onExpand, _onCollapse, _setOpen, _isOpen, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -12,8 +12,8 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
 import { isSearchOptionElement } from '../search-option';
-import { attrValueToPixels, defineCustomElement, getAttribute, getIntegerAttribute, getRect, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto;contain:content}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getRect, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
 import '../icons/search';
 import '../icons/close';
 import '../icon-button';
@@ -31,7 +31,7 @@ const findSelectedOption = elements => {
 
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$clear = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), _onValueChange = new WeakSet(), _onClearMouseDown = new WeakMap(), _onClear = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$clear = new WeakMap(), _isPendingDk = new WeakMap(), _sh = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), _onValueChange = new WeakSet(), _onClearMouseDown = new WeakMap(), _onClear = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyUp = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _setOpen = new WeakSet(), _isOpen = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -47,6 +47,10 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
 
     _classPrivateMethodInitSpec(this, _getFirstOption);
 
+    _classPrivateMethodInitSpec(this, _isOpen);
+
+    _classPrivateMethodInitSpec(this, _setOpen);
+
     _classPrivateMethodInitSpec(this, _onCollapse);
 
     _classPrivateMethodInitSpec(this, _onExpand);
@@ -93,6 +97,11 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
       value: false
     });
 
+    _classPrivateFieldInitSpec(this, _sh, {
+      writable: true,
+      value: void 0
+    });
+
     _classPrivateFieldInitSpec(this, _onCompositionStart, {
       writable: true,
       value: () => {
@@ -155,7 +164,7 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onListboxKeyPress, {
+    _classPrivateFieldInitSpec(this, _onListboxKeyUp, {
       writable: true,
       value: e => {
         switch (e.code) {
@@ -182,8 +191,6 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
         switch (e.code) {
           case 'ArrowUp':
             {
-              e.preventDefault();
-
               _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this));
 
               break;
@@ -191,8 +198,6 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
 
           case 'ArrowDown':
             {
-              e.preventDefault();
-
               _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this));
 
               break;
@@ -213,6 +218,12 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
     _classPrivateFieldInitSpec(this, _onOptionSlotChange, {
       writable: true,
       value: () => {
+        const elems = _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this);
+
+        if (elems.length === 0) {
+          return _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+        }
+
         _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
       }
     });
@@ -220,6 +231,8 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
+    _classPrivateFieldSet(this, _sh, shadowRoot);
+
     _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
 
     _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
@@ -246,9 +259,9 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
 
     _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
 
-    _classPrivateFieldGet(this, _$input).addEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
+    _classPrivateFieldGet(this, _$input).addEventListener('keyup', _classPrivateFieldGet(this, _onListboxKeyUp));
 
-    _classPrivateFieldGet(this, _$listbox).addEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
+    _classPrivateFieldGet(this, _$listbox).addEventListener('mousedown', _classPrivateFieldGet(this, _onListboxClick));
 
     _classPrivateFieldGet(this, _$optionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
 
@@ -268,9 +281,9 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
 
     _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
 
-    _classPrivateFieldGet(this, _$input).removeEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
+    _classPrivateFieldGet(this, _$input).removeEventListener('keyup', _classPrivateFieldGet(this, _onListboxKeyUp));
 
-    _classPrivateFieldGet(this, _$listbox).removeEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
+    _classPrivateFieldGet(this, _$listbox).removeEventListener('mousedown', _classPrivateFieldGet(this, _onListboxClick));
 
     _classPrivateFieldGet(this, _$optionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
 
@@ -444,21 +457,23 @@ function _onValueChange2(nextValue) {
 }
 
 function _onExpand2() {
-  const elems = _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this);
-
-  if (elems.length === 0 || this.getRootNode().activeElement !== this) {
-    _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+  if (!_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this) && _classPrivateFieldGet(this, _sh).activeElement === _classPrivateFieldGet(this, _$input)) {
+    _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
 
-    return;
+    _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, true);
   }
+}
 
-  this.setAttribute('aria-expanded', 'true');
+function _onCollapse2() {
+  _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, false);
+}
 
-  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, elems[0]);
+function _setOpen2(isOpen) {
+  this.setAttribute('aria-expanded', String(isOpen));
 }
 
-function _onCollapse2() {
-  this.setAttribute('aria-expanded', 'false');
+function _isOpen2() {
+  return getBooleanAttribute(this, 'aria-expanded');
 }
 
 function _getFirstOption2() {

package/segment-collapse/index.js

@@ -2,7 +2,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input;
+var _$button;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
@@ -10,27 +10,23 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icons/expand-less';
 import '../icons/expand-more';
-import { defineCustomElement, getBooleanAttribute, isAttrTrue, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:contents;--sinch-size-icon:32px}input{all:initial;position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;cursor:pointer}input:focus~sinch-icon-expand-less,input:focus~sinch-icon-expand-more{border-radius:4px;box-shadow:0 0 0 1px var(--sinch-color-stormy-500) inset}#up{display:block}#down{display:none}:host([value]:not([value=false])) #up{display:none}:host([value]:not([value=false])) #down{display:block}</style><input type="checkbox"/><sinch-icon-expand-less id="up"></sinch-icon-expand-less><sinch-icon-expand-more id="down"></sinch-icon-expand-more>';
+import { defineCustomElement, getBooleanAttribute, NectaryElement, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:contents;--sinch-size-icon:32px}button{all:initial;position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;cursor:pointer}button:focus~sinch-icon-expand-less,button:focus~sinch-icon-expand-more{border-radius:4px;box-shadow:0 0 0 1px var(--sinch-color-stormy-500) inset}#up{display:block}#down{display:none}:host([value]:not([value=false])) #up{display:none}:host([value]:not([value=false])) #down{display:block}</style><button></button><sinch-icon-expand-less id="up"></sinch-icon-expand-less><sinch-icon-expand-more id="down"></sinch-icon-expand-more>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segment-collapse', (_$input = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-segment-collapse', (_$button = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
-    _classPrivateFieldInitSpec(this, _$input, {
+    _classPrivateFieldInitSpec(this, _$button, {
       writable: true,
       value: void 0
     });
 
-    _defineProperty(this, 'onCheckboxInput', e => {
+    _defineProperty(this, 'onClick', e => {
       e.stopPropagation();
-
-      const isChecked = _classPrivateFieldGet(this, _$input).checked;
-
-      _classPrivateFieldGet(this, _$input).checked = this.value;
       this.dispatchEvent(new CustomEvent('change', {
-        detail: isChecked,
+        detail: !this.value,
         bubbles: true
       }));
     });
@@ -38,17 +34,17 @@ defineCustomElement('sinch-segment-collapse', (_$input = new WeakMap(), class ex
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
-    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('button'));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
 
-    _classPrivateFieldGet(this, _$input).addEventListener('input', this.onCheckboxInput);
+    _classPrivateFieldGet(this, _$button).addEventListener('click', this.onClick);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$input).removeEventListener('input', this.onCheckboxInput);
+    _classPrivateFieldGet(this, _$button).removeEventListener('click', this.onClick);
   }
 
   get type() {
@@ -59,20 +55,6 @@ defineCustomElement('sinch-segment-collapse', (_$input = new WeakMap(), class ex
     return 'input';
   }
 
-  static get observedAttributes() {
-    return ['value'];
-  }
-
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'value':
-        {
-          _classPrivateFieldGet(this, _$input).checked = isAttrTrue(newVal);
-          break;
-        }
-    }
-  }
-
   set value(isChecked) {
     updateBooleanAttribute(this, 'value', isChecked);
   }
@@ -82,11 +64,11 @@ defineCustomElement('sinch-segment-collapse', (_$input = new WeakMap(), class ex
   }
 
   focus() {
-    _classPrivateFieldGet(this, _$input).focus();
+    _classPrivateFieldGet(this, _$button).focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$input).blur();
+    _classPrivateFieldGet(this, _$button).blur();
   }
 
 }));

package/segmented-control/index.d.ts

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

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-stormy-100);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/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;

package/tabs-option/index.js

@@ -1,27 +1,26 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 
-var _onInput;
+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:inline-block;vertical-align:middle;outline:0}:host()>*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content" aria-hidden="true"></label> <input id="input" type="radio" aria-hidden="true"/></div>';
+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>';
 export const isTabsOptionElement = element => {
   return element instanceof Element && element.tagName === 'SINCH-TABS-OPTION';
 };
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-tabs-option', (_onClick = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
-    _classPrivateFieldInitSpec(this, _onInput, {
+    _classPrivateFieldInitSpec(this, _onClick, {
       writable: true,
       value: e => {
         e.stopPropagation();
-        this.$input.checked = false;
         this.dispatchEvent(new CustomEvent('change', {
           bubbles: true,
           detail: this.value
@@ -31,17 +30,17 @@ defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extend
 
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.$input = shadowRoot.querySelector('input');
+    this.$button = shadowRoot.querySelector('#button');
     this.$label = shadowRoot.querySelector('#content');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tab');
-    this.$input.addEventListener('input', _classPrivateFieldGet(this, _onInput));
+    this.$button.addEventListener('click', _classPrivateFieldGet(this, _onClick));
   }
 
   disconnectedCallback() {
-    this.$input.removeEventListener('input', _classPrivateFieldGet(this, _onInput));
+    this.$button.removeEventListener('click', _classPrivateFieldGet(this, _onClick));
   }
 
   static get observedAttributes() {
@@ -90,39 +89,24 @@ defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extend
 
       case 'checked':
         {
-          const isChecked = isAttrTrue(newVal);
-          this.$input.checked = isChecked;
-
-          if (isChecked) {
-            this.scrollIntoView?.({
-              block: 'nearest'
-            });
-          }
-
           updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
 
       case 'disabled':
         {
-          this.$input.disabled = isAttrTrue(newVal);
-          break;
-        }
-
-      case 'value':
-        {
-          this.$input.value = newVal ?? '';
+          this.$button.disabled = isAttrTrue(newVal);
           break;
         }
     }
   }
 
   focus() {
-    this.$input.focus();
+    this.$button.focus();
   }
 
   blur() {
-    this.$input.blur();
+    this.$button.blur();
   }
 
 }));