@nectary/components 0.31.0 → 0.33.0

package/segment/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$caption, _$previewSlot, _$previewWrapper, _$infoSlot, _$infoWrapper, _$collapseSlot, _$collapseWrapper, _onPreviewSlotChange, _onInfoSlotChange, _onCollapseSlotChange;
+var _$caption, _$previewSlot, _$previewWrapper, _$infoSlot, _$infoWrapper, _$collapseSlot, _$collapseWrapper, _$actionSlot, _$actionWrapper, _onPreviewSlotChange, _onInfoSlotChange, _onCollapseSlotChange, _onActionSlotChange;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
@@ -10,11 +10,11 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 import '../title';
 import { getTitleLevelFromType } from '../title/utils';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:16px;width:100%;height:100%;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);box-shadow:var(--sinch-elevation-level-2);padding:8px 24px 16px}#header{display:flex;flex-direction:row;align-items:center;height:48px;gap:8px;--sinch-size-icon:32px}#caption{font:var(--sinch-font-title-l);color:var(--sinch-color-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:1em}#info{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto;align-self:stretch}#info.empty{display:none}#preview{flex:1;flex-basis:auto;height:48px;min-width:0;overflow:hidden;margin-left:24px}#preview.empty{display:none}#info.empty+#collapse{margin-left:auto}#collapse.empty{display:none}#preview:not(.empty)+#info.empty+#collapse:not(.empty),#preview:not(.empty)+#info:not(.empty){margin-left:24px}#content-wrapper{flex:1;min-height:0;overflow-y:auto}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #wrapper{padding-bottom:8px}::slotted([slot=icon]){margin-right:8px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><sinch-title id="caption" level="3" type="m"></sinch-title><div id="preview"><slot name="preview"></slot></div><div id="info"><slot name="info"></slot></div><div id="collapse"><slot name="collapse"></slot></div></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:16px;width:100%;height:100%;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);box-shadow:var(--sinch-elevation-level-2);padding:8px 24px 16px}#header{display:flex;flex-direction:row;align-items:center;height:48px;gap:8px;--sinch-size-icon:32px}#caption{font:var(--sinch-font-title-l);color:var(--sinch-color-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:1em}#info{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto;align-self:stretch}#info.empty{display:none}#preview{flex:1;flex-basis:auto;height:48px;min-width:0;overflow:hidden;margin-left:24px}#preview.empty{display:none}#info.empty+#collapse{margin-left:auto}#collapse.empty{display:none}#preview:not(.empty)+#info.empty+#collapse:not(.empty),#preview:not(.empty)+#info:not(.empty){margin-left:24px}#content-wrapper{flex:1;min-height:0;overflow-y:auto}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px}#action.empty{display:none}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #wrapper{padding-bottom:8px}::slotted([slot=icon]){margin-right:8px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><sinch-title id="caption" level="3" type="m"></sinch-title><div id="preview"><slot name="preview"></slot></div><div id="info"><slot name="info"></slot></div><div id="collapse"><slot name="collapse"></slot></div></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
 import { assertSize, sizeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segment', (_$caption = new WeakMap(), _$previewSlot = new WeakMap(), _$previewWrapper = new WeakMap(), _$infoSlot = new WeakMap(), _$infoWrapper = new WeakMap(), _$collapseSlot = new WeakMap(), _$collapseWrapper = new WeakMap(), _onPreviewSlotChange = new WeakMap(), _onInfoSlotChange = new WeakMap(), _onCollapseSlotChange = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-segment', (_$caption = new WeakMap(), _$previewSlot = new WeakMap(), _$previewWrapper = new WeakMap(), _$infoSlot = new WeakMap(), _$infoWrapper = new WeakMap(), _$collapseSlot = new WeakMap(), _$collapseWrapper = new WeakMap(), _$actionSlot = new WeakMap(), _$actionWrapper = new WeakMap(), _onPreviewSlotChange = new WeakMap(), _onInfoSlotChange = new WeakMap(), _onCollapseSlotChange = new WeakMap(), _onActionSlotChange = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -53,6 +53,16 @@ defineCustomElement('sinch-segment', (_$caption = new WeakMap(), _$previewSlot =
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _$actionSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$actionWrapper, {
+      writable: true,
+      value: void 0
+    });
+
     _classPrivateFieldInitSpec(this, _onPreviewSlotChange, {
       writable: true,
       value: () => {
@@ -74,6 +84,13 @@ defineCustomElement('sinch-segment', (_$caption = new WeakMap(), _$previewSlot =
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onActionSlotChange, {
+      writable: true,
+      value: () => {
+        setClass(_classPrivateFieldGet(this, _$actionWrapper), 'empty', _classPrivateFieldGet(this, _$actionSlot).assignedElements().length === 0);
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -85,11 +102,15 @@ defineCustomElement('sinch-segment', (_$caption = new WeakMap(), _$previewSlot =
 
     _classPrivateFieldSet(this, _$collapseSlot, shadowRoot.querySelector('slot[name="collapse"]'));
 
+    _classPrivateFieldSet(this, _$actionSlot, shadowRoot.querySelector('slot[name="action"]'));
+
     _classPrivateFieldSet(this, _$previewWrapper, shadowRoot.querySelector('#preview'));
 
     _classPrivateFieldSet(this, _$infoWrapper, shadowRoot.querySelector('#info'));
 
     _classPrivateFieldSet(this, _$collapseWrapper, shadowRoot.querySelector('#collapse'));
+
+    _classPrivateFieldSet(this, _$actionWrapper, shadowRoot.querySelector('#action'));
   }
 
   connectedCallback() {
@@ -99,11 +120,15 @@ defineCustomElement('sinch-segment', (_$caption = new WeakMap(), _$previewSlot =
 
     _classPrivateFieldGet(this, _$collapseSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onCollapseSlotChange));
 
+    _classPrivateFieldGet(this, _$actionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onActionSlotChange));
+
     _classPrivateFieldGet(this, _onPreviewSlotChange).call(this);
 
     _classPrivateFieldGet(this, _onInfoSlotChange).call(this);
 
     _classPrivateFieldGet(this, _onCollapseSlotChange).call(this);
+
+    _classPrivateFieldGet(this, _onActionSlotChange).call(this);
   }
 
   disconnectedCallback() {
@@ -112,6 +137,8 @@ defineCustomElement('sinch-segment', (_$caption = new WeakMap(), _$previewSlot =
     _classPrivateFieldGet(this, _$infoSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onInfoSlotChange));
 
     _classPrivateFieldGet(this, _$collapseSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onCollapseSlotChange));
+
+    _classPrivateFieldGet(this, _$actionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onActionSlotChange));
   }
 
   static get observedAttributes() {

package/segment-collapse/types.d.ts

@@ -2,8 +2,6 @@ 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;
 };

package/segmented-control-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, 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 templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;position:relative;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 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: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', (_$button = new WeakMap(), _$label = new WeakMap(), _onClick = new WeakMap(), class extends NectaryElement {

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

@@ -3,8 +3,6 @@ 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;

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

@@ -2,8 +2,6 @@ import type { TSinchElementReact } from '../types';
 export declare type TSinchSegmentedIconControlOptionElement = HTMLElement & {
     value: string;
     disabled: boolean;
-    focus(): void;
-    blur(): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'disabled', value: ''): void;
 };

package/select/index.js

@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import '../dropdown';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, 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-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:var(--sinch-shape-radius-s);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)}</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-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);box-sizing:border-box;width:100%;height:48px;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;margin-bottom:2px}#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);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::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)}</style><div id="wrapper"><div id="top"><label id="label" for="button"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown" modal orientation="bottom"><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 {

package/select/types.d.ts

@@ -10,8 +10,6 @@ export declare type TSinchSelectElement = HTMLElement & {
     maxVisibleItems: number | null;
     disabled: boolean;
     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;

package/tabs-option/types.d.ts

@@ -4,8 +4,6 @@ export declare type TSinchTabsOptionElement = HTMLElement & {
     disabled: boolean;
     checked: boolean;
     text: string;
-    focus(): void;
-    blur(): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'disabled', value: ''): void;
     setAttribute(name: 'checked', value: ''): void;

package/tag-close/types.d.ts

@@ -1,6 +1,3 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchTagCloseElement = HTMLElement & {
-    focus(): void;
-    blur(): void;
-};
+export declare type TSinchTagCloseElement = HTMLElement;
 export declare type TSinchTagCloseReact = TSinchElementReact<TSinchTagCloseElement>;

package/text/index.js

@@ -7,9 +7,7 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-text', class extends NectaryElement {
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: false
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
 

package/textarea/index.js

@@ -1,17 +1,17 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _isPendingDk, _onCompositionStart, _onInput;
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput;
 
 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, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;margin:2px 0;padding:8px 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);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#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)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></textarea><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{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 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);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#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);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::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)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -40,12 +40,7 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _selectionStart, {
-      writable: true,
-      value: null
-    });
-
-    _classPrivateFieldInitSpec(this, _selectionEnd, {
+    _classPrivateFieldInitSpec(this, _cursorPos, {
       writable: true,
       value: null
     });
@@ -62,6 +57,13 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onSelectionChange, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldSet(this, _cursorPos, _classPrivateFieldGet(this, _$input).selectionEnd);
+      }
+    });
+
     _classPrivateFieldInitSpec(this, _onInput, {
       writable: true,
       value: e => {
@@ -72,29 +74,23 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
         const prevValue = this.value;
 
         if (prevValue !== nextValue) {
-          const nextSelectionStart = _classPrivateFieldGet(this, _$input).selectionStart;
-
-          const nextSelectionEnd = _classPrivateFieldGet(this, _$input).selectionEnd;
-
-          const prevSelectionStart = _classPrivateFieldGet(this, _selectionStart);
-
-          const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
-
-          const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
+          const nextCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
 
           if (!_classPrivateFieldGet(this, _isPendingDk)) {
             _classPrivateFieldGet(this, _$input).value = prevValue;
-          }
 
-          _classPrivateFieldSet(this, _isPendingDk, false);
+            const prevCursorPos = _classPrivateFieldGet(this, _cursorPos);
 
-          if (!isPrevCursorEnd) {
-            _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
+            const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
+
+            if (!isPrevCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(prevCursorPos, prevCursorPos);
+            }
           }
 
-          _classPrivateFieldSet(this, _selectionStart, nextSelectionStart);
+          _classPrivateFieldSet(this, _isPendingDk, false);
 
-          _classPrivateFieldSet(this, _selectionEnd, nextSelectionEnd);
+          _classPrivateFieldSet(this, _cursorPos, nextCursorPos);
 
           this.dispatchEvent(new CustomEvent('change', {
             detail: nextValue,
@@ -125,12 +121,20 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
 
     _classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
 
     _classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
   }
 
   static get observedAttributes() {
@@ -143,12 +147,16 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
         {
           const nextVal = newVal ?? '';
 
-          if (nextVal !== _classPrivateFieldGet(this, _$input).value) {
+          const prevVal = _classPrivateFieldGet(this, _$input).value;
+
+          if (nextVal !== prevVal) {
+            const prevCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
+
+            const isPrevCursorEnd = prevCursorPos === prevVal.length;
             _classPrivateFieldGet(this, _$input).value = nextVal;
-            const isNextCursorEnd = _classPrivateFieldGet(this, _selectionStart) === _classPrivateFieldGet(this, _selectionEnd) && (_classPrivateFieldGet(this, _selectionStart) === null || _classPrivateFieldGet(this, _selectionStart) === nextVal.length);
 
-            if (!isNextCursorEnd) {
-              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _selectionStart), _classPrivateFieldGet(this, _selectionEnd));
+            if (!isPrevCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _cursorPos), _classPrivateFieldGet(this, _cursorPos));
             }
           }
 

package/textarea/types.d.ts

@@ -13,8 +13,6 @@ export declare type TSinchTextareaElement = HTMLElement & {
     selectionDirection: HTMLTextAreaElement['selectionDirection'];
     rows: HTMLTextAreaElement['rows'];
     resizable: boolean;
-    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;

package/time-picker/index.d.ts

@@ -0,0 +1,17 @@
+import '../icon-button';
+import '../icons/done';
+import '../icons/arrow-drop-up';
+import '../icons/arrow-drop-down';
+import '../segmented-control';
+import '../segmented-control-option';
+import type { TSinchTimePickerElement, TSinchTimePickerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-time-picker': TSinchTimePickerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-time-picker': TSinchTimePickerElement;
+    }
+}