@nectary/components 0.28.0 → 0.29.1

package/radio-option/index.js

@@ -8,7 +8,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{--sinch-color-radio-outer-circle:var(--sinch-color-transparent);--sinch-color-radio-background:var(--sinch-color-snow-100);--sinch-color-radio-border:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-checked:var(--sinch-color-transparent);--sinch-color-radio-border-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-hover:var(--sinch-color-snow-500);--sinch-color-radio-border-hover:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-radio-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-focus:var(--sinch-color-snow-800);--sinch-color-radio-border-focus:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-radio-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-active:var(--sinch-color-stormy-100);--sinch-color-radio-border-active:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-radio-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-disabled:var(--sinch-color-transparent);--sinch-color-radio-border-disabled:var(--sinch-color-stormy-100);--sinch-color-radio-outer-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-radio-border-disabled-checked:var(--sinch-color-stormy-100);display:block;outline:0}#wrapper{display:flex;height:32px;box-sizing:border-box;width:100%}#input{all:initial;display:block;width:32px;height:32px;cursor:pointer}#input:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#input::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-outer-circle);transition:background-color .1s linear}#input::after{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-background);box-shadow:0 0 0 2px var(--sinch-color-radio-border) inset;transition:background-color .1s linear}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-color-radio-border);pointer-events:none}@media (prefers-reduced-motion){#icon-knob,#input::after,#input::before{transition:none}}#label{align-self:center;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}#input:checked::before{background-color:var(--sinch-color-radio-outer-circle-checked)}#input:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-checked) inset}#input:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-checked)}#input:focus::before{background-color:var(--sinch-color-radio-outer-circle-focus)}#input:focus::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-focus) inset}#input:focus~#icon-knob{background-color:var(--sinch-color-radio-border-focus)}#input:hover::before{background-color:var(--sinch-color-radio-outer-circle-hover)}#input:hover::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-hover) inset}#input:hover~#icon-knob{background-color:var(--sinch-color-radio-border-hover)}#input:active::before{background-color:var(--sinch-color-radio-outer-circle-active)}#input:active::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-active) inset}#input:active~#icon-knob{background-color:var(--sinch-color-radio-border-active)}#input:disabled::before{background-color:var(--sinch-color-radio-outer-circle-disabled)}#input:disabled::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-disabled) inset}#input:disabled~#icon-knob{background-color:var(--sinch-color-radio-border-disabled)}#input:focus:checked::before{background-color:var(--sinch-color-radio-outer-circle-focus-checked)}#input:focus:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-focus-checked) inset}#input:focus:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-focus-checked)}#input:hover:checked::before{background-color:var(--sinch-color-radio-outer-circle-hover-checked)}#input:hover:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-hover-checked) inset}#input:hover:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-hover-checked)}#input:active:checked::before{background-color:var(--sinch-color-radio-outer-circle-active-checked)}#input:active:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-active-checked) inset}#input:active:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-active-checked)}#input:disabled:checked::before{background-color:var(--sinch-color-radio-outer-circle-disabled-checked)}#input:disabled:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-disabled-checked) inset}#input:disabled:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="input" type="radio"/><div id="icon-knob"></div></div><label for="input" id="label"></label></div>';
+const templateHTML = '<style>:host{--sinch-color-radio-outer-circle:var(--sinch-color-transparent);--sinch-color-radio-background:var(--sinch-color-snow-100);--sinch-color-radio-border:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-checked:var(--sinch-color-transparent);--sinch-color-radio-border-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-hover:var(--sinch-color-snow-500);--sinch-color-radio-border-hover:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-radio-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-focus:var(--sinch-color-snow-800);--sinch-color-radio-border-focus:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-radio-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-active:var(--sinch-color-stormy-100);--sinch-color-radio-border-active:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-radio-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-disabled:var(--sinch-color-transparent);--sinch-color-radio-border-disabled:var(--sinch-color-stormy-100);--sinch-color-radio-outer-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-radio-border-disabled-checked:var(--sinch-color-stormy-100);display:block;outline:0}#wrapper{display:flex;height:32px;box-sizing:border-box;width:100%}#input{all:initial;display:block;width:32px;height:32px;cursor:pointer}#input:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#input::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-outer-circle);transition:background-color .1s linear}#input::after{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-background);border:2px solid var(--sinch-color-radio-border);transition:background-color .1s linear;box-sizing:border-box}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-color-radio-border);pointer-events:none}@media (prefers-reduced-motion){#icon-knob,#input::after,#input::before{transition:none}}#label{align-self:center;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}#input:checked::before{background-color:var(--sinch-color-radio-outer-circle-checked)}#input:checked::after{border-color:var(--sinch-color-radio-border-checked)}#input:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-checked)}#input:focus::before{background-color:var(--sinch-color-radio-outer-circle-focus)}#input:focus::after{border-color:var(--sinch-color-radio-border-focus)}#input:focus~#icon-knob{background-color:var(--sinch-color-radio-border-focus)}#input:hover::before{background-color:var(--sinch-color-radio-outer-circle-hover)}#input:hover::after{border-color:var(--sinch-color-radio-border-hover)}#input:hover~#icon-knob{background-color:var(--sinch-color-radio-border-hover)}#input:active::before{background-color:var(--sinch-color-radio-outer-circle-active)}#input:active::after{border-color:var(--sinch-color-radio-border-active)}#input:active~#icon-knob{background-color:var(--sinch-color-radio-border-active)}#input:disabled::before{background-color:var(--sinch-color-radio-outer-circle-disabled)}#input:disabled::after{border-color:var(--sinch-color-radio-border-disabled)}#input:disabled~#icon-knob{background-color:var(--sinch-color-radio-border-disabled)}#input:focus:checked::before{background-color:var(--sinch-color-radio-outer-circle-focus-checked)}#input:focus:checked::after{border-color:var(--sinch-color-radio-border-focus-checked)}#input:focus:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-focus-checked)}#input:hover:checked::before{background-color:var(--sinch-color-radio-outer-circle-hover-checked)}#input:hover:checked::after{border-color:var(--sinch-color-radio-border-hover-checked)}#input:hover:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-hover-checked)}#input:active:checked::before{background-color:var(--sinch-color-radio-outer-circle-active-checked)}#input:active:checked::after{border-color:var(--sinch-color-radio-border-active-checked)}#input:active:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-active-checked)}#input:disabled:checked::before{background-color:var(--sinch-color-radio-outer-circle-disabled-checked)}#input:disabled:checked::after{border-color:var(--sinch-color-radio-border-disabled-checked)}#input:disabled:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="input" type="radio"/><div id="icon-knob"></div></div><label for="input" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
@@ -108,7 +108,9 @@ defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = ne
 
       case 'disabled':
         {
-          _classPrivateFieldGet(this, _$input).disabled = isAttrTrue(newVal);
+          const isDisabled = isAttrTrue(newVal);
+          _classPrivateFieldGet(this, _$input).disabled = isDisabled;
+          updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
 

package/radio-option/types.d.ts

@@ -1,5 +1,4 @@
 import type { TSinchElementReact } from '../types';
-import type { FocusEvent } from 'react';
 export declare type TSinchRadioOptionElement = HTMLElement & {
     value: string;
     checked: boolean;
@@ -7,12 +6,14 @@ export declare type TSinchRadioOptionElement = HTMLElement & {
     text: string;
     focus(): void;
     blur(): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'checked', value: ''): void;
+    setAttribute(name: 'disabled', value: ''): void;
+    setAttribute(name: 'text', value: string): void;
 };
 export declare type TSinchRadioOptionReact = TSinchElementReact<TSinchRadioOptionElement> & {
     value: string;
     disabled?: boolean;
     text: string;
     'aria-label': string;
-    onFocus?: (e: FocusEvent<TSinchRadioOptionElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchRadioOptionElement>) => void;
 };

package/search/index.d.ts

@@ -1,31 +1,7 @@
 import '../icons/search';
 import '../icons/close';
 import '../icon-button';
-import type { TRect, TSinchElementReact } from '../types';
-import type { FocusEvent, SyntheticEvent } from 'react';
-export declare type TSinchSearchElement = HTMLElement & {
-    value: string;
-    label: string | null;
-    placeholder: string | null;
-    maxVisibleItems: number | null;
-    selectionStart: HTMLInputElement['selectionStart'];
-    selectionEnd: HTMLInputElement['selectionEnd'];
-    selectionDirection: HTMLInputElement['selectionDirection'];
-    readonly dropdownRect: TRect;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchSearchReact = TSinchElementReact<TSinchSearchElement> & {
-    value: string;
-    label?: string;
-    placeholder?: string;
-    maxVisibleItems?: number;
-    'aria-label': string;
-    'clear-aria-label': string;
-    onChange: (e: SyntheticEvent<TSinchSearchElement, CustomEvent<string>>) => void;
-    onFocus?: (e: FocusEvent<TSinchSearchElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchSearchElement>) => void;
-};
+import type { TSinchSearchElement, TSinchSearchReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/search/index.js

@@ -11,7 +11,7 @@ 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 { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getRect, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, 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';
@@ -502,7 +502,7 @@ function _getPrevOption2() {
 function _selectOption2($option) {
   for (const $op of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
     const isSelected = $op === $option;
-    $op.selected = isSelected;
+    updateBooleanAttribute($op, 'data-selected', isSelected);
 
     if (isSelected) {
       $op.scrollIntoView?.({
@@ -514,7 +514,7 @@ function _selectOption2($option) {
 
 function _findSelectedOption2() {
   for (const $option of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
-    if ($option.selected) {
+    if (getBooleanAttribute($option, 'data-selected')) {
       return $option;
     }
   }

package/search/types.d.ts

@@ -0,0 +1,28 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchSearchElement = HTMLElement & {
+    value: string;
+    label: string | null;
+    placeholder: string | null;
+    maxVisibleItems: number | null;
+    selectionStart: HTMLInputElement['selectionStart'];
+    selectionEnd: HTMLInputElement['selectionEnd'];
+    selectionDirection: HTMLInputElement['selectionDirection'];
+    readonly dropdownRect: TRect;
+    focus(): void;
+    blur(): void;
+    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'label', value: string): void;
+    setAttribute(name: 'placeholder', value: string): void;
+    setAttribute(name: 'maxvisibleitems', value: string): void;
+};
+export declare type TSinchSearchReact = TSinchElementReact<TSinchSearchElement> & {
+    value: string;
+    label?: string;
+    placeholder?: string;
+    maxVisibleItems?: number;
+    'aria-label': string;
+    'clear-aria-label': string;
+    onChange: (e: SyntheticEvent<TSinchSearchElement, CustomEvent<string>>) => void;
+};

package/search/types.js

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

package/search-option/index.js

@@ -7,7 +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, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:block;box-sizing:border-box;line-height:40px;padding:0 12px;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}</style><div id="wrapper"></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -35,10 +35,6 @@ defineCustomElement('sinch-search-option', (_$content = new WeakMap(), class ext
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
-
     switch (name) {
       case 'text':
         {
@@ -56,13 +52,4 @@ defineCustomElement('sinch-search-option', (_$content = new WeakMap(), class ext
     return getAttribute(this, 'text', '');
   }
 
-  set selected(isSelected) {
-    updateBooleanAttribute(this, 'data-selected', isSelected);
-    updateExplicitBooleanAttribute(this, 'aria-selected', isSelected);
-  }
-
-  get selected() {
-    return getBooleanAttribute(this, 'data-selected');
-  }
-
 }));

package/search-option/types.d.ts

@@ -1,7 +1,7 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchSearchOptionElement = HTMLElement & {
     text: string;
-    selected: boolean;
+    setAttribute(name: 'text', value: string): void;
 };
 export declare type TSinchSearchOptionReact = TSinchElementReact<TSinchSearchOptionElement> & {
     text: string;

package/segment/index.d.ts

@@ -1,13 +1,4 @@
-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;
-    collapsed?: boolean;
-};
+import type { TSinchSegmentElement, TSinchSegmentReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -18,4 +9,3 @@ declare global {
         'sinch-segment': TSinchSegmentElement;
     }
 }
-export {};

package/segment/types.d.ts

@@ -0,0 +1,12 @@
+import type { TRect, TSinchElementReact } from '../types';
+export declare type TSinchSegmentElement = HTMLElement & {
+    caption: string;
+    collapsed: boolean;
+    readonly collapseButtonRect: TRect | null;
+    setAttribute(name: 'caption', value: string): void;
+    setAttribute(name: 'collapsed', value: ''): void;
+};
+export declare type TSinchSegmentReact = TSinchElementReact<TSinchSegmentElement> & {
+    caption: string;
+    collapsed?: boolean;
+};

package/segment/types.js

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

package/segment-collapse/index.d.ts

@@ -1,20 +1,7 @@
 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 & {
-    value: boolean;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchSegmentExpandReact = TSinchElementReact<TSinchSegmentExpandElement> & {
-    value: boolean;
-    'aria-label': string;
-    onChange: (e: SyntheticEvent<TSinchSegmentExpandElement, CustomEvent<boolean>>) => void;
-    onFocus?: (e: FocusEvent<TSinchSegmentExpandElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchSegmentExpandElement>) => void;
-};
+import type { TSinchSegmentExpandElement, TSinchSegmentExpandReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/segment-collapse/index.js

@@ -11,7 +11,7 @@ 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';
+import { defineCustomElement, getBooleanAttribute, isAttrTrue, NectaryElement, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 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;
@@ -40,7 +40,6 @@ defineCustomElement('sinch-segment-collapse', (_$button = new WeakMap(), class e
 
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
-    this.setAttribute('aria-checked', String(getBooleanAttribute(this, 'value')));
 
     _classPrivateFieldGet(this, _$button).addEventListener('click', this.onClick);
   }
@@ -57,7 +56,7 @@ defineCustomElement('sinch-segment-collapse', (_$button = new WeakMap(), class e
     switch (name) {
       case 'value':
         {
-          this.setAttribute('aria-checked', String(isAttrTrue(newVal)));
+          updateExplicitBooleanAttribute(this, 'aria-checked', isAttrTrue(newVal));
           break;
         }
     }

package/segment-collapse/types.d.ts

@@ -0,0 +1,14 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchSegmentExpandElement = HTMLElement & {
+    value: boolean;
+    focus(): void;
+    blur(): void;
+    addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
+    setAttribute(name: 'value', value: string): void;
+};
+export declare type TSinchSegmentExpandReact = TSinchElementReact<TSinchSegmentExpandElement> & {
+    value: boolean;
+    'aria-label': string;
+    onChange: (e: SyntheticEvent<TSinchSegmentExpandElement, CustomEvent<boolean>>) => void;
+};

package/segment-collapse/types.js

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

package/segmented-control/index.d.ts

@@ -1,13 +1,4 @@
-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;
-};
+import type { TSinchSegmentedControlElement, TSinchSegmentedControlReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/segmented-control/types.d.ts

@@ -0,0 +1,12 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchSegmentedControlElement = HTMLElement & {
+    value: string;
+    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    setAttribute(name: 'value', value: string): void;
+};
+export declare type TSinchSegmentedControlReact = TSinchElementReact<TSinchSegmentedControlElement> & {
+    value: string;
+    'aria-label': string;
+    onChange: (event: SyntheticEvent<TSinchSegmentedControlElement, CustomEvent<string>>) => void;
+};

package/segmented-control/types.js

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

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

@@ -1,21 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent } from 'react';
-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;
-};
+import type { TSinchSegmentedControlOptionElement, TSinchSegmentedControlOptionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/segmented-control-option/index.js

@@ -1,19 +1,30 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _onClick;
+var _$button, _$label, _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';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } 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: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 {
+defineCustomElement('sinch-segmented-control-option', (_$button = new WeakMap(), _$label = new WeakMap(), _onClick = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
+    _classPrivateFieldInitSpec(this, _$button, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$label, {
+      writable: true,
+      value: void 0
+    });
+
     _classPrivateFieldInitSpec(this, _onClick, {
       writable: true,
       value: e => {
@@ -27,31 +38,26 @@ defineCustomElement('sinch-segmented-control-option', (_onClick = new WeakMap(),
 
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.$button = shadowRoot.querySelector('#button');
-    this.$label = shadowRoot.querySelector('#content');
+
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
+
+    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#content'));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tab');
-    this.$button.addEventListener('click', _classPrivateFieldGet(this, _onClick));
+
+    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onClick));
   }
 
   disconnectedCallback() {
-    this.$button.removeEventListener('click', _classPrivateFieldGet(this, _onClick));
+    _classPrivateFieldGet(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);
   }
@@ -80,30 +86,30 @@ defineCustomElement('sinch-segmented-control-option', (_onClick = new WeakMap(),
     switch (name) {
       case 'text':
         {
-          this.$label.textContent = newVal;
+          _classPrivateFieldGet(this, _$label).textContent = newVal;
           break;
         }
 
       case 'checked':
         {
-          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
 
       case 'disabled':
         {
-          this.$button.disabled = isAttrTrue(newVal);
+          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
           break;
         }
     }
   }
 
   focus() {
-    this.$button.focus();
+    _classPrivateFieldGet(this, _$button).focus();
   }
 
   blur() {
-    this.$button.blur();
+    _classPrivateFieldGet(this, _$button).blur();
   }
 
 }));

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

@@ -0,0 +1,17 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchSegmentedControlOptionElement = HTMLElement & {
+    value: string;
+    disabled: boolean;
+    text: string;
+    focus(): void;
+    blur(): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchSegmentedControlOptionReact = TSinchElementReact<TSinchSegmentedControlOptionElement> & {
+    value: string;
+    text: string;
+    disabled?: boolean;
+    'aria-label': string;
+};

package/segmented-control-option/types.js

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

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

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

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

@@ -0,0 +1,13 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchSegmentedIconControlElement = HTMLElement & {
+    value: string;
+    multiple: boolean;
+    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+};
+export declare type TSinchSegmentedIconControlReact = TSinchElementReact<TSinchSegmentedIconControlElement> & {
+    value: string;
+    multiple?: boolean;
+    'aria-label': string;
+    onChange: (event: SyntheticEvent<TSinchSegmentedIconControlElement, CustomEvent<string>>) => void;
+};

package/segmented-icon-control/types.js

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

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

@@ -1,19 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent } from 'react';
-export declare type TSinchSegmentedIconControlOptionElement = HTMLElement & {
-    value: string;
-    disabled: boolean;
-    checked: boolean;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchSegmentedIconControlOptionReact = TSinchElementReact<TSinchSegmentedIconControlOptionElement> & {
-    value: string;
-    disabled?: boolean;
-    'aria-label': string;
-    onFocus?: (e: FocusEvent<TSinchSegmentedIconControlOptionElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchSegmentedIconControlOptionElement>) => void;
-};
+import type { TSinchSegmentedIconControlOptionElement, TSinchSegmentedIconControlOptionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {