@nectary/components 0.24.0 → 0.26.0

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, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _findSelectedOption;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -11,31 +11,20 @@ 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 { isSinchSearchOptionElement } from '../search-option';
+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';
 const ITEM_HEIGHT = 40;
-
-const findSelectedOption = elements => {
-  for (const el of elements) {
-    if (el.selected) {
-      return el;
-    }
-  }
-
-  return null;
-};
-
 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(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _findSelectedOption = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
-    _classPrivateMethodInitSpec(this, _getOptionElements);
+    _classPrivateMethodInitSpec(this, _findSelectedOption);
 
     _classPrivateMethodInitSpec(this, _selectOption);
 
@@ -93,6 +82,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: () => {
@@ -147,7 +141,7 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
         e.stopPropagation();
         const $elem = e.target;
 
-        if (isSearchOptionElement($elem)) {
+        if (isSinchSearchOptionElement($elem)) {
           _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, $elem.text);
         }
 
@@ -155,17 +149,18 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onListboxKeyPress, {
+    _classPrivateFieldInitSpec(this, _onListboxKeyUp, {
       writable: true,
       value: e => {
         switch (e.code) {
           case 'Enter':
             {
               e.preventDefault();
-              const $elem = findSelectedOption(_classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this));
 
-              if ($elem != null) {
-                _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, $elem.text);
+              const $opt = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this);
+
+              if ($opt != null) {
+                _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, $opt.text);
               }
 
               _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
@@ -183,6 +178,7 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
           case 'ArrowUp':
             {
               e.preventDefault();
+              e.stopPropagation();
 
               _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this));
 
@@ -192,6 +188,7 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
           case 'ArrowDown':
             {
               e.preventDefault();
+              e.stopPropagation();
 
               _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this));
 
@@ -213,6 +210,12 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
     _classPrivateFieldInitSpec(this, _onOptionSlotChange, {
       writable: true,
       value: () => {
+        const $opts = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
+
+        if ($opts.length === 0) {
+          return _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+        }
+
         _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
       }
     });
@@ -220,6 +223,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 +251,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 +273,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,17 +449,17 @@ function _onValueChange2(nextValue) {
 }
 
 function _onExpand2() {
-  const elems = _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this);
+  const isOpen = getBooleanAttribute(this, 'aria-expanded');
 
-  if (elems.length === 0 || this.getRootNode().activeElement !== this) {
-    _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+  const $opts = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
 
-    return;
-  }
+  if (!isOpen && $opts.length > 0 && _classPrivateFieldGet(this, _sh).activeElement === _classPrivateFieldGet(this, _$input)) {
+    const opt = _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
 
-  this.setAttribute('aria-expanded', 'true');
+    _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, opt);
 
-  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, elems[0]);
+    this.setAttribute('aria-expanded', 'true');
+  }
 }
 
 function _onCollapse2() {
@@ -462,17 +467,18 @@ function _onCollapse2() {
 }
 
 function _getFirstOption2() {
-  return _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)[0] ?? null;
+  return _classPrivateFieldGet(this, _$optionSlot).assignedElements().filter(isSinchSearchOptionElement)[0] ?? null;
 }
 
 function _getLastOption2() {
-  return _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this).reverse()[0] ?? null;
+  return _classPrivateFieldGet(this, _$optionSlot).assignedElements().filter(isSinchSearchOptionElement).reverse()[0] ?? null;
 }
 
 function _getNextOption2() {
-  const $options = _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this);
+  const $options = _classPrivateFieldGet(this, _$optionSlot).assignedElements().filter(isSinchSearchOptionElement);
+
+  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this);
 
-  const $selectedOption = findSelectedOption($options);
   const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
 
   if (currentIndex < 0) {
@@ -483,9 +489,10 @@ function _getNextOption2() {
 }
 
 function _getPrevOption2() {
-  const $options = _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this);
+  const $options = _classPrivateFieldGet(this, _$optionSlot).assignedElements().filter(isSinchSearchOptionElement);
+
+  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this);
 
-  const $selectedOption = findSelectedOption($options);
   const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
 
   if (currentIndex < 0) {
@@ -496,7 +503,7 @@ function _getPrevOption2() {
 }
 
 function _selectOption2($option) {
-  for (const $op of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
+  for (const $op of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
     const isSelected = $op === $option;
     $op.selected = isSelected;
 
@@ -508,6 +515,12 @@ function _selectOption2($option) {
   }
 }
 
-function _getOptionElements2() {
-  return _classPrivateFieldGet(this, _$optionSlot).assignedElements().filter(isSearchOptionElement);
+function _findSelectedOption2() {
+  for (const el of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
+    if (isSinchSearchOptionElement(el) && el.selected) {
+      return el;
+    }
+  }
+
+  return null;
 }

package/search-option/index.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare const isSearchOptionElement: (element: EventTarget | Element | null) => element is TSinchSearchOptionElement;
+export declare const isSinchSearchOptionElement: (element: EventTarget | Element | null) => element is TSinchSearchOptionElement;
 export declare type TSinchSearchOptionElement = HTMLElement & {
     text: string;
     selected: boolean;

package/search-option/index.js

@@ -12,7 +12,7 @@ template.innerHTML = templateHTML;
 
 var _$content = new WeakMap();
 
-class SearchOption extends NectaryElement {
+class SinchSearchOption extends NectaryElement {
   constructor() {
     super();
 
@@ -68,7 +68,7 @@ class SearchOption extends NectaryElement {
 
 }
 
-defineCustomElement('sinch-search-option', SearchOption);
-export const isSearchOptionElement = element => {
-  return element instanceof SearchOption;
+defineCustomElement('sinch-search-option', SinchSearchOption);
+export const isSinchSearchOptionElement = element => {
+  return element instanceof SinchSearchOption;
 };

package/segment/index.d.ts

@@ -1,7 +1,8 @@
-import type { TSinchElementReact } from '../types';
+import type { TRect, TSinchElementReact } from '../types';
 declare type TSinchSegmentElement = HTMLElement & {
     caption: string;
     collapsed: boolean;
+    readonly collapseButtonRect: TRect | null;
 };
 declare type TSinchSegmentReact = TSinchElementReact<TSinchSegmentElement> & {
     caption: string;

package/segment/index.js

@@ -1,17 +1,17 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$caption;
+var _$caption, _$collapseSlot;
 
 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, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgba(0,0,0,.1)}#header{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;height:32px;padding:24px 32px 16px;--sinch-size-icon:32px}#caption{font:var(--sinch-font-title-l);color:var(--sinch-color-text-default);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#content-wrapper{padding:0 32px;flex:1;min-height:0;overflow:auto}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:16px 32px 24px}#info{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;z-index:1}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #header{padding-bottom:24px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><span id="caption"></span><div id="info"><slot name="info"></slot></div><slot name="collapse"></slot></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segment', (_$caption = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-segment', (_$caption = new WeakMap(), _$collapseSlot = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -20,10 +20,17 @@ defineCustomElement('sinch-segment', (_$caption = new WeakMap(), class extends N
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _$collapseSlot, {
+      writable: true,
+      value: void 0
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$caption, shadowRoot.querySelector('#caption'));
+
+    _classPrivateFieldSet(this, _$collapseSlot, shadowRoot.querySelector('slot[name="collapse"]'));
   }
 
   static get observedAttributes() {
@@ -56,4 +63,10 @@ defineCustomElement('sinch-segment', (_$caption = new WeakMap(), class extends N
     return getBooleanAttribute(this, 'collapsed');
   }
 
+  get collapseButtonRect() {
+    const $collapseButton = _classPrivateFieldGet(this, _$collapseSlot).assignedElements()[0];
+
+    return $collapseButton != null ? getRect($collapseButton) : null;
+  }
+
 }));

package/segment-collapse/index.d.ts

@@ -1,5 +1,6 @@
 import '../icons/expand-less';
 import '../icons/expand-more';
+import '../icon-button';
 import type { TSinchElementReact } from '../types';
 import type { FocusEvent, SyntheticEvent } from 'react';
 export declare type TSinchSegmentExpandElement = HTMLElement & {

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,24 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icons/expand-less';
 import '../icons/expand-more';
+import '../icon-button';
 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>';
+const templateHTML = '<style>:host{display:block;--sinch-size-icon:32px}#up{display:block}#down{display:none}:host([value]:not([value=false])) #up{display:none}:host([value]:not([value=false])) #down{display:block}</style><sinch-icon-button id="button" small><sinch-icon-expand-less id="up" slot="icon"></sinch-icon-expand-less><sinch-icon-expand-more id="down" slot="icon"></sinch-icon-expand-more></sinch-icon-button>';
 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,41 +35,42 @@ 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');
+    this.setAttribute('aria-checked', String(getBooleanAttribute(this, 'value')));
 
-    _classPrivateFieldGet(this, _$input).addEventListener('input', this.onCheckboxInput);
+    _classPrivateFieldGet(this, _$button).addEventListener('click', this.onClick);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$input).removeEventListener('input', this.onCheckboxInput);
-  }
-
-  get type() {
-    return 'text';
-  }
-
-  get nodeName() {
-    return 'input';
+    _classPrivateFieldGet(this, _$button).removeEventListener('click', this.onClick);
   }
 
   static get observedAttributes() {
     return ['value'];
   }
 
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case 'value':
         {
-          _classPrivateFieldGet(this, _$input).checked = isAttrTrue(newVal);
+          this.setAttribute('aria-checked', String(isAttrTrue(newVal)));
           break;
         }
     }
   }
 
+  get type() {
+    return 'text';
+  }
+
+  get nodeName() {
+    return 'input';
+  }
+
   set value(isChecked) {
     updateBooleanAttribute(this, 'value', isChecked);
   }
@@ -82,11 +80,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 TSinchSegmentedControlElement = HTMLElement & {
+    value: string;
+};
+export declare type TSinchSegmentedControlReact = TSinchElementReact<TSinchSegmentedControlElement> & {
+    value: string;
+    'aria-label': string;
+    onChange: (event: SyntheticEvent<TSinchSegmentedControlElement, CustomEvent<string>>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segmented-control': TSinchSegmentedControlReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-segmented-control': TSinchSegmentedControlElement;
+    }
+}