@nectary/components 0.26.0 → 0.28.0

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

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

package/select/index.d.ts

@@ -1,4 +1,3 @@
-import '../select-option';
 import '../dropdown';
 import type { TRect, TSinchElementReact } from '../types';
 import type { FocusEvent, SyntheticEvent } from 'react';

package/select/index.js

@@ -11,11 +11,9 @@ 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 { isDropdownOptionElement } from '../dropdown-option';
-import '../select-option';
 import '../dropdown';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:4px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}#listbox{position:absolute;left:0;top:0;padding-top:74px;width:100%;display:none;list-style:none;outline:0;z-index:1}#listbox-body{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-stormy-500);border-top-width:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;width:100%;box-sizing:border-box;box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto}#button[aria-expanded=true]~#listbox{display:block}</style><div id="wrapper"><div id="top"><label id="label" for="dropdown"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown"><button slot="target" id="button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative;--sinch-popover-expand-width:1}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:4px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}#listbox{position:absolute;left:0;top:0;padding-top:74px;width:100%;display:none;list-style:none;outline:0;z-index:1}#listbox-body{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-stormy-500);border-top-width:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;width:100%;box-sizing:border-box;box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto}#button[aria-expanded=true]~#listbox{display:block}</style><div id="wrapper"><div id="top"><label id="label" for="dropdown"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown"><button slot="target" id="button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _$sh = new WeakMap(), _createElement = new WeakSet(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onLabelClick = new WeakMap(), _onDropdownClick = new WeakMap(), _onDropdownClose = new WeakMap(), class extends NectaryElement {
@@ -317,7 +315,7 @@ function _updateButtonContent2() {
   } else {
     _classPrivateFieldGet(this, _$button).removeAttribute('data-unselected');
 
-    _classPrivateFieldGet(this, _$buttonContent).textContent = $option.text;
+    _classPrivateFieldGet(this, _$buttonContent).textContent = getAttribute($option, 'text', null);
     const $icon = $option.icon;
 
     if ($icon != null) {
@@ -328,7 +326,7 @@ function _updateButtonContent2() {
 
 function _getOptionWithValue2(value) {
   for (const $option of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
-    if (isDropdownOptionElement($option) && $option.disabled !== true && $option.value === value) {
+    if ($option.disabled !== true && $option.value === value) {
       return $option;
     }
   }

package/select-option/index.d.ts

@@ -1,6 +1,4 @@
-import type { TSinchDropdownOptionElement, TSinchDropdownOptionReact } from '../dropdown-option';
-export declare type TSinchSelectOptionElement = TSinchDropdownOptionElement;
-export declare type TSinchSelectOptionReact = TSinchDropdownOptionReact;
+import type { TSinchSelectOptionElement, TSinchSelectOptionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/select-option/index.js

@@ -1,6 +1,6 @@
-import { DropdownOption } from '../dropdown-option';
+import { DropdownTextOption } from '../dropdown-text-option';
 import { defineCustomElement } from '../utils';
-defineCustomElement('sinch-select-option', class extends DropdownOption {
+defineCustomElement('sinch-select-option', class extends DropdownTextOption {
   constructor() {
     super();
   }

package/select-option/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchDropdownTextOptionElement, TSinchDropdownTextOptionReact } from '../dropdown-text-option/types';
+export declare type TSinchSelectOptionElement = TSinchDropdownTextOptionElement;
+export declare type TSinchSelectOptionReact = TSinchDropdownTextOptionReact;

package/select-option/types.js

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

package/table/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:table;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}</style><slot></slot>';
+const templateHTML = '<style>:host{display:table;font:var(--sinch-font-body);color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-text-default)}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-table', class extends NectaryElement {

package/table-cell/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-color-snow-600)}#wrapper{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:8px 4px}:host(:first-child) #wrapper{padding-left:8px}:host(:last-child) #wrapper{padding-right:8px}:host([align=end]) #wrapper{text-align:end;align-items:flex-end}:host([align=center]) #wrapper{text-align:center;align-items:center}</style><div id="wrapper"><slot></slot></div>';
+const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-color-snow-600)}#wrapper{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:8px}:host([align=end]) #wrapper{text-align:end;align-items:flex-end}:host([align=center]) #wrapper{text-align:center;align-items:center}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const alignValues = ['start', 'center', 'end'];

package/table-head-cell/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, getLiteralAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);--sinch-icon-button-color:var(--sinch-color-stormy-100)}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}</style><slot name="checkbox"></slot><div id="wrapper"><slot name="left"></slot><span id="text"></span><slot name="tooltip"></slot><slot name="right"></slot></div>';
+const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);vertical-align:middle;--sinch-color-icon:var(--sinch-color-stormy-200)}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);--sinch-icon-button-color:var(--sinch-color-stormy-100)}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200)}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host(:is([text=""],:not([text]))) #text{display:none}:host([fit]:not([fit=false])){width:1px}</style><div id="wrapper"><slot name="checkbox"></slot><slot name="left"></slot><span id="text"></span><slot name="tooltip"></slot><slot name="right"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const alignValues = ['start', 'center', 'end'];

package/tabs/index.js

@@ -11,8 +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 { isTabsOptionElement } from '../tabs-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;height:44px;width:100%;box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 
 const findSelectedOption = elements => {
@@ -144,9 +143,8 @@ defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = ne
 
 function _onValueChange2(value) {
   for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-    if (isTabsOptionElement($option)) {
-      $option.checked = $option.disabled !== true && $option.value === value;
-    }
+    const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+    updateBooleanAttribute($option, 'checked', isChecked);
   }
 }
 
@@ -159,7 +157,7 @@ function _dispatchChangeEvent2(value) {
 
 function _getFirstOption2() {
   for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-    if (isTabsOptionElement($option) && $option.disabled !== true) {
+    if ($option.disabled !== true) {
       return $option;
     }
   }
@@ -169,7 +167,7 @@ function _getFirstOption2() {
 
 function _getLastOption2() {
   for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements().reverse()) {
-    if (isTabsOptionElement($option) && $option.disabled !== true) {
+    if ($option.disabled !== true) {
       return $option;
     }
   }
@@ -204,5 +202,5 @@ function _getPrevOption2() {
 }
 
 function _getEnabledRadioElements2() {
-  return _classPrivateFieldGet(this, _$slot).assignedElements().filter(opt => isTabsOptionElement(opt) && opt.disabled !== true);
+  return _classPrivateFieldGet(this, _$slot).assignedElements().filter(opt => opt.disabled !== true);
 }

package/tabs-option/index.d.ts

@@ -1,22 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent } from 'react';
-export declare const isTabsOptionElement: (element: EventTarget | Element | null) => element is TSinchTabsOptionElement;
-export declare type TSinchTabsOptionElement = HTMLElement & {
-    value: string;
-    disabled: boolean;
-    checked: boolean;
-    text: string;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
-    value: string;
-    disabled?: boolean;
-    text: string;
-    'aria-label': string;
-    onFocus?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
-};
+import type { TSinchTabsOptionElement, TSinchTabsOptionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/tabs-option/index.js

@@ -8,9 +8,6 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}:host()>*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]:not([checked=false])) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}#button:disabled{cursor:unset}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content"></label> <button id="button" type="radio"/></div>';
-export const isTabsOptionElement = element => {
-  return element instanceof Element && element.tagName === 'SINCH-TABS-OPTION';
-};
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-option', (_onClick = new WeakMap(), class extends NectaryElement {

package/tabs-option/types.d.ts

@@ -0,0 +1,18 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent } from 'react';
+export declare type TSinchTabsOptionElement = HTMLElement & {
+    value: string;
+    disabled: boolean;
+    checked: boolean;
+    text: string;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
+    value: string;
+    disabled?: boolean;
+    text: string;
+    'aria-label': string;
+    onFocus?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
+};

package/tabs-option/types.js

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

package/tooltip/index.d.ts

@@ -1,19 +1,4 @@
-import type { TRect, TSinchElementReact } from '../types';
-declare const orientationValues: readonly ["top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right"];
-export declare type TSinchTooltipOrientation = typeof orientationValues[number];
-export declare type TSinchTooltipElement = HTMLElement & {
-    text: string;
-    width: number | null;
-    inverted: boolean;
-    orientation: TSinchTooltipOrientation;
-    readonly tooltipRect: TRect;
-};
-export declare type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
-    text: string;
-    width?: number;
-    inverted?: boolean;
-    orientation?: TSinchTooltipOrientation;
-};
+import type { TSinchTooltipElement, TSinchTooltipReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -24,4 +9,3 @@ declare global {
         'sinch-tooltip': TSinchTooltipElement;
     }
 }
-export {};

package/tooltip/index.js

@@ -1,6 +1,6 @@
 import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, getRect, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:block}#tooltip{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .2s linear .2s}@media (prefers-reduced-motion){#tooltip{transition:none}}:host(:hover) #tooltip{opacity:1}#text{position:absolute;padding:2px 6px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:max-content;border-radius:2px;top:-8px;left:50%;transform:translateX(-50%) translateY(-100%)}#arrow{position:absolute;top:-8px;left:50%;transform:translateX(-50%);fill:var(--sinch-color-snow-600)}:host([orientation=top-left]) #text{transform:translateX(-80%) translateY(-100%)}:host([orientation=top-right]) #text{transform:translateX(-20%) translateY(-100%)}:host([orientation=bottom-right]) #text{top:calc(100% + 8px);transform:translateX(-20%)}:host([orientation=bottom-left]) #text{top:calc(100% + 8px);transform:translateX(-80%)}:host([orientation=bottom]) #text{top:calc(100% + 8px);transform:translateX(-50%)}:host([orientation^=bottom]) #arrow{top:calc(100% + 4px);transform:translateX(-50%) rotate(180deg)}:host([orientation=left]) #text{left:unset;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=left]) #arrow{left:-11px;top:50%;transform:translateY(-50%) rotate(270deg)}:host([orientation=right]) #text{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=right]) #arrow{top:50%;left:calc(100% + 2px);transform:translateY(-50%) rotate(90deg)}:host([inverted]:not([inverted=false])) #text{color:var(--sinch-color-text-inverted);background-color:var(--sinch-color-stormy-500)}:host([inverted]:not([inverted=false])) #arrow{fill:var(--sinch-color-stormy-500)}::slotted(*){display:block}</style><div id="wrapper"><slot></slot><div id="tooltip"><div id="text"></div><svg id="arrow" width="9" height="4" aria-hidden="true"><path d="m4.5 4 4-4h-8l4 4Z"/></svg></div></div>';
-const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
+import { orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tooltip', class extends NectaryElement {

package/tooltip/types.d.ts

@@ -0,0 +1,16 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { orientationValues } from './utils';
+export declare type TSinchTooltipOrientation = typeof orientationValues[number];
+export declare type TSinchTooltipElement = HTMLElement & {
+    text: string;
+    width: number | null;
+    inverted: boolean;
+    orientation: TSinchTooltipOrientation;
+    readonly tooltipRect: TRect;
+};
+export declare type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
+    text: string;
+    width?: number;
+    inverted?: boolean;
+    orientation?: TSinchTooltipOrientation;
+};

package/tooltip/types.js

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

package/tooltip/utils.d.ts

@@ -0,0 +1 @@
+export declare const orientationValues: readonly ["top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right"];

package/tooltip/utils.js

@@ -0,0 +1 @@
+export const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];

package/utils.d.ts

@@ -35,9 +35,10 @@ export declare const updateIntegerAttribute: ($element: Element, attrName: strin
 export declare function getIntegerAttribute($element: Element, attrName: string): number | undefined;
 export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: null): number | null;
 export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: number): number;
-export declare const updateCSV: (acc: string, value: string, setActive: boolean) => string;
-export declare const getCSVSet: (acc: string) => Set<string>;
-export declare const getFirstCSValue: (acc: string) => string;
+export declare const getCsvSet: (acc: string) => Set<string>;
+export declare const updateCsv: (acc: string, value: string, setActive: boolean) => string;
+export declare const getFirstCsvValue: (acc: string) => string | null;
 export declare const getRect: (el: Element) => TRect;
 export declare const setClass: (elem: Element, name: string, isSet: boolean) => void;
+export declare const getCssVar: (element: Element, variableName: string) => string | null;
 export {};

package/utils.js

@@ -151,27 +151,31 @@ export const updateIntegerAttribute = function ($element, attrName, attrValue) {
 export function getIntegerAttribute($element, attrName, defaultValue) {
   return attrValueToInteger($element.getAttribute(attrName)) ?? defaultValue;
 }
-export const updateCSV = (acc, value, setActive) => {
-  const values = acc === '' ? [] : acc.split(',');
-  const i = values.indexOf(value);
 
-  if (setActive) {
-    i === -1 && values.push(value);
-  } else {
-    i >= 0 && values.splice(i, 1);
-  }
+const unpackCsv = csv => {
+  return csv === '' ? [] : csv.split(',');
+};
+
+const packCsv = values => {
+  return Array.from(values).join(',');
+};
 
-  return values.join(',');
+export const getCsvSet = acc => {
+  return new Set(unpackCsv(acc));
 };
-export const getCSVSet = acc => {
-  if (acc === '') {
-    return new Set();
+export const updateCsv = (acc, value, setActive) => {
+  const values = getCsvSet(acc);
+
+  if (setActive) {
+    values.add(value);
+  } else {
+    values.delete(value);
   }
 
-  return new Set(acc.split(','));
+  return packCsv(values);
 };
-export const getFirstCSValue = acc => {
-  return acc.split(',')[0];
+export const getFirstCsvValue = acc => {
+  return acc === '' ? null : unpackCsv(acc)[0];
 };
 export const getRect = el => {
   const {
@@ -189,4 +193,8 @@ export const getRect = el => {
 };
 export const setClass = (elem, name, isSet) => {
   isSet ? elem.classList.add(name) : elem.classList.remove(name);
+};
+export const getCssVar = (element, variableName) => {
+  const result = getComputedStyle(element).getPropertyValue(variableName);
+  return result === '' ? null : result;
 };

package/dropdown-option/index.d.ts

@@ -1,45 +0,0 @@
-import { NectaryElement } from '../utils';
-import type { TSinchElementReact } from '../types';
-export declare class DropdownOption extends NectaryElement {
-    #private;
-    constructor();
-    connectedCallback(): void;
-    static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
-    set value(value: string);
-    get value(): string;
-    set text(value: string);
-    get text(): string;
-    set disabled(isDisabled: boolean);
-    get disabled(): boolean;
-    set checked(isChecked: boolean);
-    get checked(): boolean;
-    set selected(isSelected: boolean);
-    get selected(): boolean;
-    get icon(): Element | null;
-}
-export declare const isDropdownOptionElement: (element: EventTarget | Element | null) => element is TSinchDropdownOptionElement;
-export declare type TSinchDropdownOptionElement = HTMLElement & {
-    value: string;
-    text: string;
-    checked: boolean;
-    selected: boolean;
-    disabled: boolean;
-    readonly icon: Element | null;
-};
-export declare type TSinchDropdownOptionReact = TSinchElementReact<TSinchDropdownOptionElement> & {
-    value: string;
-    text: string;
-    disabled?: boolean;
-    'aria-label': string;
-};
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-dropdown-option': TSinchDropdownOptionReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-dropdown-option': TSinchDropdownOptionElement;
-    }
-}