@nectary/components 0.26.0 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "files": [
     "theme.css",
     "**/*/*.js",

package/popover/index.js

@@ -12,11 +12,12 @@ 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 dialogPolyfill from 'dialog-polyfill';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 6px rgba(0,0,0,.15);border:none;border-radius:4px;overflow-y:auto;contain:content;padding:0;box-sizing:border-box}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, getCssVar } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;left:0;right:0;margin:auto;outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 6px rgba(0,0,0,.15);border:1px solid var(--sinch-color-snow-500);border-radius:4px;contain:content;padding:0;box-sizing:border-box}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#target{display:flex;flex-direction:column}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
 const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
+const POPOVER_VERTICAL_OFFSET = 4;
 defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _updateOrientation = new WeakSet(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
@@ -165,21 +166,28 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 }));
 
 function _onExpand2() {
+  if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+    return;
+  }
+
   _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
 
-  if (!_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-    _classPrivateFieldGet(this, _$dialog).showModal();
-  }
+  _classPrivateFieldGet(this, _$dialog).showModal();
 
   _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
+
+  document.body.style.overflow = 'hidden';
 }
 
 function _onCollapse2() {
+  if (!_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+    return;
+  }
+
   _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
 
-  if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-    _classPrivateFieldGet(this, _$dialog).close?.();
-  }
+  _classPrivateFieldGet(this, _$dialog).close?.();
+  document.body.style.overflow = '';
 }
 
 function _isOpen2() {
@@ -187,37 +195,39 @@ function _isOpen2() {
 }
 
 function _updateOrientation2() {
-  _classPrivateFieldGet(this, _$dialog).style.transform = `initial`;
-  _classPrivateFieldGet(this, _$dialog).style.width = `max-content`;
+  _classPrivateFieldGet(this, _$dialog).style.transform = 'initial';
+  _classPrivateFieldGet(this, _$dialog).style.width = 'fit-content';
 
-  const buttonRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
+  const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
 
   const modalRect = _classPrivateFieldGet(this, _$dialog).getBoundingClientRect();
 
-  const width = Math.max(modalRect.width, buttonRect.width);
-  const widthDiff = Math.max(buttonRect.width - modalRect.width, 0);
   let leftOffset = 0;
   let topOffset = 0;
   const orient = this.orientation;
+  const shouldExpandWidthToTarget = getCssVar(this, '--sinch-popover-expand-width') !== null;
+  const largestWidth = Math.max(modalRect.width, targetRect.width);
+  const widthDiff = shouldExpandWidthToTarget ? Math.max(largestWidth - modalRect.width, 0) * 0.5 : 0;
+  const resultWidth = shouldExpandWidthToTarget ? largestWidth : modalRect.width;
 
   if (orient === 'bottom-right' || orient === 'top-right') {
-    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, buttonRect.x - modalRect.x + widthDiff * 0.5));
+    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, targetRect.x - modalRect.x) + widthDiff);
   }
 
   if (orient === 'bottom-left' || orient === 'top-left') {
-    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, buttonRect.x + buttonRect.width - modalRect.x - modalRect.width - widthDiff * 0.5));
+    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, targetRect.x + targetRect.width - modalRect.x - modalRect.width) - widthDiff);
   }
 
   if (orient === 'bottom-left' || orient === 'bottom-right') {
-    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, buttonRect.y + buttonRect.height - modalRect.y + 8));
+    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, targetRect.y + targetRect.height - modalRect.y + POPOVER_VERTICAL_OFFSET));
   }
 
   if (orient === 'top-left' || orient === 'top-right') {
-    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, buttonRect.y - modalRect.y - modalRect.height - 8));
+    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, targetRect.y - modalRect.y - modalRect.height - POPOVER_VERTICAL_OFFSET));
   }
 
-  _classPrivateFieldGet(this, _$dialog).style.transform = `translateX(${leftOffset}px) translateY(${topOffset}px)`;
-  _classPrivateFieldGet(this, _$dialog).style.width = `${width}px`;
+  _classPrivateFieldGet(this, _$dialog).style.transform = `translate(${leftOffset}px, ${topOffset}px)`;
+  _classPrivateFieldGet(this, _$dialog).style.width = `${resultWidth}px`;
 }
 
 function _dispatchCloseEvent2() {

package/radio/index.js

@@ -1,7 +1,7 @@
 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;
+var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange, _onValueChange, _dispatchChangeEvent, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _getEnabledRadioElements, _findSelectedOption;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -11,20 +11,16 @@ 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 { isRadioOptionElement } from '../radio-option';
-import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;width:100%}</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-radio', (_$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 {
+defineCustomElement('sinch-radio', (_$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(), _findSelectedOption = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
+    _classPrivateMethodInitSpec(this, _findSelectedOption);
+
     _classPrivateMethodInitSpec(this, _getEnabledRadioElements);
 
     _classPrivateMethodInitSpec(this, _getPrevOption);
@@ -144,9 +140,8 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
 
 function _onValueChange2(value) {
   for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-    if (isRadioOptionElement($option)) {
-      $option.checked = $option.disabled !== true && $option.value === value;
-    }
+    const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+    updateBooleanAttribute($option, 'checked', isChecked);
   }
 }
 
@@ -159,7 +154,7 @@ function _dispatchChangeEvent2(value) {
 
 function _getFirstOption2() {
   for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-    if (isRadioOptionElement($option) && $option.disabled !== true) {
+    if ($option.disabled !== true) {
       return $option;
     }
   }
@@ -169,7 +164,7 @@ function _getFirstOption2() {
 
 function _getLastOption2() {
   for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements().reverse()) {
-    if (isRadioOptionElement($option) && $option.disabled !== true) {
+    if ($option.disabled !== true) {
       return $option;
     }
   }
@@ -180,7 +175,8 @@ function _getLastOption2() {
 function _getNextOption2() {
   const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
 
-  const $selectedOption = findSelectedOption($options);
+  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, $options);
+
   const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
 
   if (currentIndex < 0) {
@@ -193,7 +189,8 @@ function _getNextOption2() {
 function _getPrevOption2() {
   const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
 
-  const $selectedOption = findSelectedOption($options);
+  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, $options);
+
   const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
 
   if (currentIndex < 0) {
@@ -204,5 +201,9 @@ function _getPrevOption2() {
 }
 
 function _getEnabledRadioElements2() {
-  return _classPrivateFieldGet(this, _$slot).assignedElements().filter(opt => isRadioOptionElement(opt) && opt.disabled !== true);
+  return _classPrivateFieldGet(this, _$slot).assignedElements().filter(el => el.disabled !== true);
+}
+
+function _findSelectedOption2(elements) {
+  return elements.find(el => el.checked) ?? null;
 }

package/search/index.js

@@ -11,7 +11,6 @@ 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 { 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';
@@ -141,9 +140,7 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
         e.stopPropagation();
         const $elem = e.target;
 
-        if (isSinchSearchOptionElement($elem)) {
-          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, $elem.text);
-        }
+        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, $elem.text);
 
         _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
       }
@@ -467,15 +464,15 @@ function _onCollapse2() {
 }
 
 function _getFirstOption2() {
-  return _classPrivateFieldGet(this, _$optionSlot).assignedElements().filter(isSinchSearchOptionElement)[0] ?? null;
+  return _classPrivateFieldGet(this, _$optionSlot).assignedElements()[0] ?? null;
 }
 
 function _getLastOption2() {
-  return _classPrivateFieldGet(this, _$optionSlot).assignedElements().filter(isSinchSearchOptionElement).reverse()[0] ?? null;
+  return _classPrivateFieldGet(this, _$optionSlot).assignedElements().reverse()[0] ?? null;
 }
 
 function _getNextOption2() {
-  const $options = _classPrivateFieldGet(this, _$optionSlot).assignedElements().filter(isSinchSearchOptionElement);
+  const $options = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
 
   const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this);
 
@@ -489,7 +486,7 @@ function _getNextOption2() {
 }
 
 function _getPrevOption2() {
-  const $options = _classPrivateFieldGet(this, _$optionSlot).assignedElements().filter(isSinchSearchOptionElement);
+  const $options = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
 
   const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this);
 
@@ -516,9 +513,9 @@ function _selectOption2($option) {
 }
 
 function _findSelectedOption2() {
-  for (const el of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
-    if (isSinchSearchOptionElement(el) && el.selected) {
-      return el;
+  for (const $option of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
+    if ($option.selected) {
+      return $option;
     }
   }
 

package/segmented-control/index.js

@@ -1,7 +1,7 @@
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange, _onValueChange, _dispatchChangeEvent, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _getEnabledRadioElements;
+var _$slot, _$sh, _onSlotChange, _onOptionChange, _onValueChange, _dispatchChangeEvent;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -11,30 +11,14 @@ 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 { isSegmentedControlOptionElement } from '../segmented-control-option';
-import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute } 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 {
+defineCustomElement('sinch-segmented-control', (_$slot = new WeakMap(), _$sh = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = 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);
@@ -44,43 +28,9 @@ defineCustomElement('sinch-segmented-control', (_$slot = new WeakMap(), _onOptio
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _onOptionKeyDown, {
+    _classPrivateFieldInitSpec(this, _$sh, {
       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;
-            }
-        }
-      }
+      value: void 0
     });
 
     _classPrivateFieldInitSpec(this, _onSlotChange, {
@@ -101,16 +51,24 @@ defineCustomElement('sinch-segmented-control', (_$slot = new WeakMap(), _onOptio
 
     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'));
+    _classPrivateFieldSet(this, _$sh, shadowRoot);
 
-    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tablist');
+
+    _classPrivateFieldGet(this, _$sh).addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$sh).removeEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
+
+    _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
   }
 
   static get observedAttributes() {
@@ -144,9 +102,8 @@ defineCustomElement('sinch-segmented-control', (_$slot = new WeakMap(), _onOptio
 
 function _onValueChange2(value) {
   for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-    if (isSegmentedControlOptionElement($option)) {
-      $option.checked = $option.disabled !== true && $option.value === value;
-    }
+    const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+    updateBooleanAttribute($option, 'checked', isChecked);
   }
 }
 
@@ -155,54 +112,4 @@ function _dispatchChangeEvent2(value) {
     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

@@ -1,6 +1,5 @@
 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;

package/segmented-control-option/index.js

@@ -7,10 +7,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 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 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:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-3px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-aqua-400);border-width:0}#button:focus-visible::before{border-width:2px}: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}@supports not selector(:focus-visible){#button:focus::before{border-width:2px}}: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>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segmented-control-option', (_onClick = new WeakMap(), class extends NectaryElement {

package/segmented-icon-control/index.js

@@ -1,7 +1,7 @@
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$slot, _onSlotChange, _onOptionChange, _onValueChange;
+var _$slot, _$sh, _onSlotChange, _onOptionChange, _onValueChange;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -11,12 +11,11 @@ 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 { isSegmentedIconControlOptionElement } from '../segmented-icon-control-option';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCSVSet, getFirstCSValue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCSV } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, 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 {
+defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _$sh = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -27,6 +26,11 @@ defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _on
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _$sh, {
+      writable: true,
+      value: void 0
+    });
+
     _classPrivateFieldInitSpec(this, _onSlotChange, {
       writable: true,
       value: () => {
@@ -38,16 +42,9 @@ defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _on
       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;
+        const $elem = e.target;
+        const value = e.detail;
+        const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'checked')) : value;
         this.dispatchEvent(new CustomEvent('change', {
           detail: result,
           bubbles: true
@@ -57,15 +54,24 @@ defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _on
 
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    shadowRoot.addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
 
-    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
+    _classPrivateFieldSet(this, _$sh, shadowRoot);
 
-    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tablist');
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+
+    _classPrivateFieldGet(this, _$sh).addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+
+    _classPrivateFieldGet(this, _$sh).removeEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
   }
 
   static get observedAttributes() {
@@ -107,20 +113,18 @@ defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _on
 
 function _onValueChange2(csv) {
   if (this.multiple) {
-    const values = getCSVSet(csv);
+    const values = getCsvSet(csv);
 
     for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-      if (isSegmentedIconControlOptionElement($option)) {
-        $option.checked = $option.disabled !== true && values.has($option.value);
-      }
+      const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+      updateBooleanAttribute($option, 'checked', isChecked);
     }
   } else {
-    const value = getFirstCSValue(csv);
+    const value = getFirstCsvValue(csv);
 
     for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-      if (isSegmentedIconControlOptionElement($option)) {
-        $option.checked = $option.disabled !== true && $option.value === value;
-      }
+      const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+      updateBooleanAttribute($option, 'checked', isChecked);
     }
   }
 }

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

@@ -1,6 +1,5 @@
 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;