@nectary/components 0.30.0 → 0.32.0

package/input/types.d.ts

@@ -2,38 +2,63 @@ import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchInputType = 'text' | 'password';
 export declare type TSinchInputElement = HTMLElement & {
+    /** Text field type, `text` by default */
     type: TSinchInputType;
+    /** Value */
     value: string;
+    /** Label */
     label: string;
+    /** Text that appears in the text field when it has no value set */
     placeholder: string | null;
+    /** Optional text */
     optionalText: string | null;
-    invalidText: string | null;
+    /** Additional text */
     additionalText: string | null;
+    /** Invalid text, controls the overall invalid state of the text field */
+    invalidText: string | null;
+    /** Disabled */
     disabled: boolean;
-    selectionStart: HTMLInputElement['selectionStart'];
-    selectionEnd: HTMLInputElement['selectionEnd'];
-    selectionDirection: HTMLInputElement['selectionDirection'];
-    focus(): void;
-    blur(): void;
+    selectionStart: number | null;
+    selectionEnd: number | null;
+    selectionDirection: 'forward' | 'backward' | 'none' | null;
+    /** Change value event */
     addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    /** Text field type, `text` by default */
     setAttribute(name: 'type', value: TSinchInputType): void;
+    /** Value */
     setAttribute(name: 'value', value: string): void;
+    /** Label */
     setAttribute(name: 'label', value: string): void;
+    /** Text that appears in the text field when it has no value set */
     setAttribute(name: 'placeholder', value: string): void;
+    /** Optional text */
     setAttribute(name: 'optionaltext', value: string): void;
-    setAttribute(name: 'invalidtext', value: string): void;
+    /** Additional text */
     setAttribute(name: 'additionaltext', value: string): void;
+    /** Invalid text, controls the overall invalid state of the text field */
+    setAttribute(name: 'invalidtext', value: string): void;
+    /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
-    type?: TSinchInputType;
+    /** Controlled value, doesn't change on its own and requres an onChange-value state loop */
     value: string;
+    /** Label that shows in UI */
     label: string;
+    /** Label that is used for a11y – might be different from `label` */
+    'aria-label': string;
+    /** Text field type, `text` by default */
+    type?: TSinchInputType;
+    /** Text that appears in the text field when it has no value set */
     placeholder?: string;
+    /** Optional text */
     optionalText?: string;
-    invalidText?: string;
+    /** Additional text */
     additionalText?: string;
+    /** Invalid text, controls the overall invalid state of the text field */
+    invalidText?: string;
+    /** Disabled */
     disabled?: boolean;
-    'aria-label': string;
+    /** Change value handler */
     onChange: (e: SyntheticEvent<TSinchInputElement, CustomEvent<string>>) => void;
 };

package/link/index.d.ts

@@ -1,4 +1,4 @@
-import '../icons/cancel';
+import '../icons/open-in-new';
 import type { TSinchLinkElement, TSinchLinkReact } from './types';
 declare global {
     namespace JSX {

package/link/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 '../icons/cancel';
+import '../icons/open-in-new';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue } from '../utils';
 const templateHTML = '<style>:host{display:inline;outline:0}a{font:var(--sinch-font-body);font-size:inherit;line-height:inherit;color:var(--sinch-color-text-link);fill:var(--sinch-color-text-link);--sinch-size-icon:1em}#icon{display:none;margin-left:.2em;vertical-align:-.25em}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;fill:var(--sinch-color-tropical-200)}:host([external]:not([external=false])) #icon{display:inline-block}</style><a><span id="content"></span><sinch-icon-open-in-new id="icon"></sinch-icon-open-in-new></a>';
 const template = document.createElement('template');

package/package.json

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

package/pagination/types.d.ts

@@ -3,8 +3,6 @@ import type { SyntheticEvent } from 'react';
 export declare type TSinchPaginationElement = HTMLElement & {
     value: number;
     max: number;
-    focus(): void;
-    blur(): void;
     readonly prevButtonRect: TRect;
     readonly nextButtonRect: TRect;
     nthButtonRect(index: number): TRect | null;

package/popover/index.js

@@ -153,7 +153,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    _classPrivateFieldGet(this, _$dialog).addEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
+    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
 
     this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
@@ -169,7 +169,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
 
     this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
 

package/radio-option/types.d.ts

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

package/search/types.d.ts

@@ -9,8 +9,6 @@ export declare type TSinchSearchElement = HTMLElement & {
     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;

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;overflow:hidden}#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}#preview:not(.empty)+#info.empty+#collapse:not(.empty),#preview:not(.empty)+#info:not(.empty){margin-left:24px}#collapse.empty{display:none}#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-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="button"></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 {

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/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;
+    }
+}