@nectary/components 0.31.0 → 0.32.0

package/accordion-item/types.d.ts

@@ -6,8 +6,6 @@ export declare type TSinchAccordionItemElement = HTMLElement & {
     optionalText: string | null;
     disabled: boolean;
     status: TSinchAccordionStatusType | null;
-    focus(): void;
-    blur(): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'label', value: string): void;
     setAttribute(name: 'optionaltext', value: string): void;

package/action-menu-option/types.d.ts

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

package/alert-button/types.d.ts

@@ -1,8 +1,6 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchAlertButtonElement = HTMLElement & {
     text: string;
-    focus(): void;
-    blur(): void;
     setAttribute(name: 'text', value: string): void;
 };
 export declare type TSinchAlertButtonReact = TSinchElementReact<TSinchAlertButtonElement> & {

package/alert-close/types.d.ts

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

package/button/types.d.ts

@@ -9,8 +9,6 @@ export declare type TSinchButtonElement = HTMLElement & {
     disabled: boolean;
     /** Small */
     small: boolean;
-    focus(): void;
-    blur(): void;
     /** Type */
     setAttribute(attr: 'type', value: TSinchButtonType): void;
     /** Text content */

package/card-button/types.d.ts

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

package/card-link/types.d.ts

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

package/checkbox/types.d.ts

@@ -6,8 +6,6 @@ export declare type TSinchCheckboxElement = HTMLElement & {
     disabled: boolean;
     invalid: boolean;
     text: string | null;
-    focus(): void;
-    blur(): void;
     addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
     setAttribute(name: 'checked', value: ''): void;
     setAttribute(name: 'indeterminate', value: ''): void;

package/date-picker/index.js

@@ -20,7 +20,7 @@ import '../icons/delete-outline';
 import '../icons/today';
 import '../text';
 import { defineCustomElement, getAttribute, getRect, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-m);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-stormy-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}@supports not selector(:focus-visible){.day:focus{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}}.day.selected{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}.day:hover:not(:disabled):not(.selected){background-color:var(--sinch-color-snow-600)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content" slot="content"><div id="content-header"><sinch-icon-button small id="prev-year"><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button small id="prev-month"><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text type="m" emphasized id="date"></sinch-text><sinch-icon-button small id="next-month"><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button small id="next-year"><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-m);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-stormy-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}@supports not selector(:focus-visible){.day:focus{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}}.day.selected{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}.day:hover:not(:disabled):not(.selected){background-color:var(--sinch-color-snow-600)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button small id="prev-year"><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button small id="prev-month"><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text type="m" emphasized id="date"></sinch-text><sinch-icon-button small id="next-month"><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button small id="next-year"><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div></div></div>';
 import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, today } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/date-picker/types.d.ts

@@ -1,26 +1,41 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchDatePickerElement = HTMLElement & {
+    /** Date value in ISO 8601 format */
     value: string;
+    /** Date min limit in ISO 8601 format */
     min: string;
+    /** Date max limit in ISO 8601 format */
     max: string;
+    /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
     locale: string;
     readonly prevYearButtonRect: TRect;
     readonly nextYearButtonRect: TRect;
     readonly prevMonthButtonRect: TRect;
     readonly nextMonthButtonRect: TRect;
     nthButtonRect(index: number): TRect | null;
+    /** Change value handler, return date in ISO 8601 format */
     addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    /** Date value in ISO 8601 format */
     setAttribute(name: 'value', value: string): void;
+    /** Date min limit in ISO 8601 format */
     setAttribute(name: 'min', value: string): void;
+    /** Date max limit in ISO 8601 format */
     setAttribute(name: 'max', value: string): void;
+    /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
     setAttribute(name: 'locale', value: string): void;
 };
 export declare type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement> & {
-    locale: string;
+    /** Date value in ISO 8601 format */
     value: string;
+    /** Date min limit in ISO 8601 format */
     min: string;
+    /** Date max limit in ISO 8601 format */
     max: string;
+    /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
+    locale: string;
+    /** Label that is used for a11y */
     'aria-label': string;
+    /** Change value handler, return date in ISO 8601 format */
     onChange: (e: SyntheticEvent<TSinchDatePickerElement, CustomEvent<string>>) => void;
 };

package/dialog/index.js

@@ -144,7 +144,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 
     this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
-    _classPrivateFieldGet(this, _$dialog).addEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
+    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
 
     _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
@@ -160,7 +160,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 
     this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
 
     _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 

package/dropdown/types.d.ts

@@ -8,8 +8,6 @@ export declare type TSinchDropdownElement = HTMLElement & {
     value: string;
     maxVisibleItems: number | null;
     readonly dropdownRect: TRect;
-    focus(): void;
-    blur(): void;
     addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
     addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'open', value: ''): void;

package/icon-button/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, getBooleanAttribute, isAttrTrue, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;border-radius:var(--sinch-shape-radius-s);border:1px solid transparent;background-color:transparent;cursor:pointer;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500))}button:focus{border-color:var(--sinch-color-stormy-500)}button:hover{background-color:var(--sinch-color-snow-500)}button:active{background-color:var(--sinch-color-snow-600)}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false]))>button{width:32px;height:32px}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;border-radius:var(--sinch-shape-radius-s);border:1px solid transparent;background-color:transparent;cursor:pointer;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500))}button:focus-visible::before{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:1px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-shape-radius-s) + 2px)}@supports not selector(:focus-visible){button:focus::before{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:1px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-shape-radius-s) + 2px)}}button:hover{background-color:var(--sinch-color-snow-500)}button:active{background-color:var(--sinch-color-snow-600)}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false]))>button{width:32px;height:32px}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extends NectaryElement {

package/icon-button/types.d.ts

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

package/input/types.d.ts

@@ -21,8 +21,6 @@ export declare type TSinchInputElement = HTMLElement & {
     selectionStart: number | null;
     selectionEnd: number | null;
     selectionDirection: 'forward' | 'backward' | 'none' | null;
-    focus(): void;
-    blur(): void;
     /** Change value event */
     addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
     /** Text field type, `text` by default */

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.31.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}#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-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;
+    }
+}

package/time-picker/index.js

@@ -0,0 +1,525 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$pickerHours, _$pickerMinutes, _$pickerTouch, _$needleHour, _$needleMinute, _$headerHours, _$headerHoursText, _$headerMinutes, _$headerMinutesText, _$ampm, _$submitButton, _hour, _minute, _getClickDegree, _onPickerClick, _render, _selectHour, _selectMinute, _onAmPmChange, _onSubmitButtonClick, _onHoursKeydown, _onMinutesKeydown;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+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"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import '../icon-button';
+import '../icons/done';
+import '../icons/arrow-drop-up';
+import '../icons/arrow-drop-down';
+import '../segmented-control';
+import '../segmented-control-option';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-font-title-xl);line-height:48px}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-color-stormy-500)}#digit-minutes,#picker-hours{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;font:var(--sinch-font-text-s);line-height:28px;text-align:center;color:var(--sinch-color-text-default);top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-24{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-minute{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-hour-12:hover,.digit-hour-24:hover,.digit-minute:hover{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected,.digit-hour-24.selected,.digit-minute.selected{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected{font-size:16px}.digit-hour-24.selected{font-size:16px}.digit-minute.selected{font-size:16px}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-color-stormy-500)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-color-tropical-500)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0;--sinch-icon-size:24px}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-hours::before,#header-minutes::before{content:"";display:none;position:absolute;border-radius:12px;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);padding:1px;border:1px solid var(--sinch-color-aqua-400)}#header-hours-down,#header-hours-up,#header-minutes-down,#header-minutes-up{display:none;position:absolute;left:50%;transform:translateX(-50%)}#header-hours-up,#header-minutes-up{top:-18px}#header-hours-down,#header-minutes-down{bottom:-18px}#header-hours:focus #header-hours-down,#header-hours:focus #header-hours-up,#header-hours:focus::before{display:block}#header-minutes:focus #header-minutes-down,#header-minutes:focus #header-minutes-up,#header-minutes:focus::before{display:block}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-hours-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-hours-down"></sinch-icon-arrow-drop-down></div><div id="header-colon">&colon;</div><div id="header-minutes" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-minutes-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-minutes-down"></sinch-icon-arrow-drop-down></div><sinch-icon-button id="submit" small aria-label="Submit"><sinch-icon-done slot="icon"></sinch-icon-done></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour"></div><div id="needle-minute"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
+import { getNeedleRotationDeg, getShortestCssDeg, hourToIndex, parseTime, stringifyHour, stringifyHourFace, stringifyMinute, stringifyTime } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+const PICKER_RADIUS = 216 / 2;
+const MINUTE_DIGIT_SIZE = 30;
+const HOUR_12_DIGIT_SIZE = 26;
+const HOUR_24_DIGIT_SIZE = 26;
+const MINUTE_RADIUS = PICKER_RADIUS - MINUTE_DIGIT_SIZE;
+const HOUR_12_RADIUS = MINUTE_RADIUS - HOUR_12_DIGIT_SIZE;
+const HOUR_24_RADIUS = HOUR_12_RADIUS - HOUR_24_DIGIT_SIZE;
+const NEEDLE_HOUR_12_LENGTH = HOUR_12_RADIUS;
+const NEEDLE_HOUR_24_LENGTH = HOUR_24_RADIUS;
+const NEEDLE_MINUTE_LENGTH = MINUTE_RADIUS;
+defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$pickerMinutes = new WeakMap(), _$pickerTouch = new WeakMap(), _$needleHour = new WeakMap(), _$needleMinute = new WeakMap(), _$headerHours = new WeakMap(), _$headerHoursText = new WeakMap(), _$headerMinutes = new WeakMap(), _$headerMinutesText = new WeakMap(), _$ampm = new WeakMap(), _$submitButton = new WeakMap(), _hour = new WeakMap(), _minute = new WeakMap(), _getClickDegree = new WeakSet(), _onPickerClick = new WeakMap(), _render = new WeakSet(), _selectHour = new WeakSet(), _selectMinute = new WeakSet(), _onAmPmChange = new WeakMap(), _onSubmitButtonClick = new WeakMap(), _onHoursKeydown = new WeakMap(), _onMinutesKeydown = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _selectMinute);
+
+    _classPrivateMethodInitSpec(this, _selectHour);
+
+    _classPrivateMethodInitSpec(this, _render);
+
+    _classPrivateMethodInitSpec(this, _getClickDegree);
+
+    _classPrivateFieldInitSpec(this, _$pickerHours, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$pickerMinutes, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$pickerTouch, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$needleHour, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$needleMinute, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$headerHours, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$headerHoursText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$headerMinutes, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$headerMinutesText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$ampm, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$submitButton, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _hour, {
+      writable: true,
+      value: 0
+    });
+
+    _classPrivateFieldInitSpec(this, _minute, {
+      writable: true,
+      value: 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onPickerClick, {
+      writable: true,
+      value: e => {
+        const [cssDeg, rowIndex] = _classPrivateMethodGet(this, _getClickDegree, _getClickDegree2).call(this, e.x, e.y);
+
+        const isHourRowClick = rowIndex > 0;
+        const isHour24RowClick = rowIndex > 1;
+
+        if (isHourRowClick) {
+          const digitIndex = Math.round(cssDeg / 30) % 12;
+          const is24 = getBooleanAttribute(this, 'ampm') === false;
+
+          if (is24) {
+            if (isHour24RowClick) {
+              _classPrivateFieldSet(this, _hour, digitIndex === 0 ? 0 : digitIndex + 12);
+            } else {
+              _classPrivateFieldSet(this, _hour, digitIndex === 0 ? 12 : digitIndex);
+            }
+          } else {
+            _classPrivateFieldSet(this, _hour, digitIndex + (_classPrivateFieldGet(this, _$ampm).value === 'pm' ? 12 : 0));
+          }
+
+          _classPrivateFieldGet(this, _$headerHours).focus();
+        } else {
+          _classPrivateFieldSet(this, _minute, Math.round(cssDeg / 6) % 60);
+
+          _classPrivateFieldGet(this, _$headerMinutes).focus();
+        }
+
+        _classPrivateMethodGet(this, _render, _render2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onAmPmChange, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        const value = e.detail;
+
+        switch (value) {
+          case 'am':
+            {
+              if (_classPrivateFieldGet(this, _hour) >= 12) {
+                _classPrivateFieldSet(this, _hour, _classPrivateFieldGet(this, _hour) - 12);
+
+                _classPrivateMethodGet(this, _render, _render2).call(this);
+              }
+
+              break;
+            }
+
+          case 'pm':
+            {
+              if (_classPrivateFieldGet(this, _hour) < 12) {
+                _classPrivateFieldSet(this, _hour, _classPrivateFieldGet(this, _hour) + 12);
+
+                _classPrivateMethodGet(this, _render, _render2).call(this);
+              }
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onSubmitButtonClick, {
+      writable: true,
+      value: () => {
+        const value = stringifyTime(_classPrivateFieldGet(this, _hour), _classPrivateFieldGet(this, _minute));
+        this.dispatchEvent(new CustomEvent('change', {
+          bubbles: true,
+          detail: value
+        }));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onHoursKeydown, {
+      writable: true,
+      value: e => {
+        switch (e.key) {
+          case 'ArrowUp':
+            {
+              _classPrivateFieldSet(this, _hour, (_classPrivateFieldGet(this, _hour) + 1) % 24);
+
+              _classPrivateMethodGet(this, _render, _render2).call(this);
+
+              break;
+            }
+
+          case 'ArrowDown':
+            {
+              _classPrivateFieldSet(this, _hour, (_classPrivateFieldGet(this, _hour) + 23) % 24);
+
+              _classPrivateMethodGet(this, _render, _render2).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onMinutesKeydown, {
+      writable: true,
+      value: e => {
+        switch (e.key) {
+          case 'ArrowUp':
+            {
+              _classPrivateFieldSet(this, _minute, (_classPrivateFieldGet(this, _minute) + 1) % 60);
+
+              _classPrivateMethodGet(this, _render, _render2).call(this);
+
+              break;
+            }
+
+          case 'ArrowDown':
+            {
+              _classPrivateFieldSet(this, _minute, (_classPrivateFieldGet(this, _minute) + 59) % 60);
+
+              _classPrivateMethodGet(this, _render, _render2).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$pickerHours, shadowRoot.querySelector('#picker-hours'));
+
+    _classPrivateFieldSet(this, _$pickerMinutes, shadowRoot.querySelector('#picker-minutes'));
+
+    _classPrivateFieldSet(this, _$pickerTouch, shadowRoot.querySelector('#picker'));
+
+    _classPrivateFieldSet(this, _$needleHour, shadowRoot.querySelector('#needle-hour'));
+
+    _classPrivateFieldSet(this, _$needleMinute, shadowRoot.querySelector('#needle-minute'));
+
+    _classPrivateFieldSet(this, _$headerHours, shadowRoot.querySelector('#header-hours'));
+
+    _classPrivateFieldSet(this, _$headerMinutes, shadowRoot.querySelector('#header-minutes'));
+
+    _classPrivateFieldSet(this, _$headerHoursText, shadowRoot.querySelector('#header-hours > span'));
+
+    _classPrivateFieldSet(this, _$headerMinutesText, shadowRoot.querySelector('#header-minutes > span'));
+
+    _classPrivateFieldSet(this, _$ampm, shadowRoot.querySelector('#ampm'));
+
+    _classPrivateFieldSet(this, _$submitButton, shadowRoot.querySelector('#submit'));
+
+    _classPrivateFieldGet(this, _$needleMinute).style.height = `${NEEDLE_MINUTE_LENGTH}px`;
+    _classPrivateFieldGet(this, _$needleHour).style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
+    const MINUTE_DIGIT_RADIUS = MINUTE_RADIUS + MINUTE_DIGIT_SIZE / 2;
+    const HOUR_12_DIGIT_RADIUS = HOUR_12_RADIUS + HOUR_12_DIGIT_SIZE / 2;
+    const HOUR_24_DIGIT_RADIUS = HOUR_24_RADIUS + HOUR_24_DIGIT_SIZE / 2;
+    const hours12Frag = document.createDocumentFragment();
+
+    for (let i = 0; i < 12; i++) {
+      const rad = Math.PI / 6 * (i - 3);
+      const el = document.createElement('div');
+      const x = Math.cos(rad) * HOUR_12_DIGIT_RADIUS;
+      const y = Math.sin(rad) * HOUR_12_DIGIT_RADIUS;
+      const hourDisplayValue = stringifyHourFace(i);
+      el.className = 'digit-hour-12';
+      el.style.transform = `translate(${x}px, ${y}px)`;
+      el.textContent = hourDisplayValue;
+      hours12Frag.appendChild(el);
+    }
+
+    _classPrivateFieldGet(this, _$pickerHours).appendChild(hours12Frag);
+
+    const hours24Frag = document.createDocumentFragment();
+
+    for (let i = 12; i < 24; i++) {
+      const rad = Math.PI / 6 * (i - 3);
+      const el = document.createElement('div');
+      const x = Math.cos(rad) * HOUR_24_DIGIT_RADIUS;
+      const y = Math.sin(rad) * HOUR_24_DIGIT_RADIUS;
+      const hourDisplayValue = stringifyHourFace(i);
+      el.className = 'digit-hour-24';
+      el.style.transform = `translate(${x}px, ${y}px)`;
+      el.textContent = hourDisplayValue;
+      hours24Frag.appendChild(el);
+    }
+
+    _classPrivateFieldGet(this, _$pickerHours).appendChild(hours24Frag);
+
+    const minutesFrag = document.createDocumentFragment();
+
+    for (let i = 0; i < 60; i += 5) {
+      const rad = Math.PI / 30 * (i - 15);
+      const el = document.createElement('div');
+      const x = Math.cos(rad) * MINUTE_DIGIT_RADIUS;
+      const y = Math.sin(rad) * MINUTE_DIGIT_RADIUS;
+      el.className = 'digit-minute';
+      el.style.transform = `translate(${x}px, ${y}px)`;
+      el.textContent = stringifyMinute(i);
+      minutesFrag.appendChild(el);
+    }
+
+    _classPrivateFieldGet(this, _$pickerMinutes).appendChild(minutesFrag);
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$pickerTouch).addEventListener('click', _classPrivateFieldGet(this, _onPickerClick));
+
+    _classPrivateFieldGet(this, _$ampm).addEventListener('change', _classPrivateFieldGet(this, _onAmPmChange));
+
+    _classPrivateFieldGet(this, _$submitButton).addEventListener('click', _classPrivateFieldGet(this, _onSubmitButtonClick));
+
+    _classPrivateFieldGet(this, _$headerHours).addEventListener('keydown', _classPrivateFieldGet(this, _onHoursKeydown));
+
+    _classPrivateFieldGet(this, _$headerMinutes).addEventListener('keydown', _classPrivateFieldGet(this, _onMinutesKeydown));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$pickerTouch).removeEventListener('click', _classPrivateFieldGet(this, _onPickerClick));
+
+    _classPrivateFieldGet(this, _$ampm).removeEventListener('change', _classPrivateFieldGet(this, _onAmPmChange));
+
+    _classPrivateFieldGet(this, _$submitButton).removeEventListener('click', _classPrivateFieldGet(this, _onSubmitButtonClick));
+
+    _classPrivateFieldGet(this, _$headerHours).removeEventListener('keydown', _classPrivateFieldGet(this, _onHoursKeydown));
+
+    _classPrivateFieldGet(this, _$headerMinutes).removeEventListener('keydown', _classPrivateFieldGet(this, _onMinutesKeydown));
+  }
+
+  static get observedAttributes() {
+    return ['value', 'ampm', 'submit-aria-label'];
+  }
+
+  attributeChangedCallback(name, prevValue, newVal) {
+    if (newVal === prevValue) {
+      return;
+    }
+
+    switch (name) {
+      case 'value':
+        {
+          if (newVal === null) {
+            throw new Error('Missing "value" attribute');
+          }
+
+          const {
+            hours,
+            minutes
+          } = parseTime(newVal);
+
+          _classPrivateFieldSet(this, _hour, hours);
+
+          _classPrivateFieldSet(this, _minute, minutes);
+
+          _classPrivateMethodGet(this, _render, _render2).call(this);
+
+          break;
+        }
+
+      case 'ampm':
+        {
+          const isAmpm = isAttrTrue(newVal);
+          updateBooleanAttribute(this, 'ampm', isAmpm);
+
+          _classPrivateMethodGet(this, _render, _render2).call(this);
+
+          break;
+        }
+
+      case 'submit-aria-label':
+        {
+          _classPrivateFieldGet(this, _$submitButton).ariaLabel = newVal;
+          break;
+        }
+    }
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set ampm(value) {
+    updateBooleanAttribute(this, 'ampm', value);
+  }
+
+  get ampm() {
+    return getBooleanAttribute(this, 'ampm');
+  }
+
+  get submitButtonRect() {
+    return getRect(_classPrivateFieldGet(this, _$submitButton));
+  }
+
+  get amButtonRect() {
+    if (!this.ampm) {
+      return null;
+    }
+
+    const $am = _classPrivateFieldGet(this, _$ampm).querySelector('[value="am"]');
+
+    return $am != null ? getRect($am) : null;
+  }
+
+  get pmButtonRect() {
+    if (!this.ampm) {
+      return null;
+    }
+
+    const $pm = _classPrivateFieldGet(this, _$ampm).querySelector('[value="pm"]');
+
+    return $pm != null ? getRect($pm) : null;
+  }
+
+  hourDigitRect(hour) {
+    const $digit = _classPrivateFieldGet(this, _$pickerHours).children[hourToIndex(hour, !this.ampm)];
+
+    return $digit != null ? getRect($digit) : null;
+  }
+
+  minuteDigitRect(minute) {
+    const $digit = _classPrivateFieldGet(this, _$pickerMinutes).children[Math.round(minute / 5)];
+
+    return $digit != null ? getRect($digit) : null;
+  }
+
+}));
+
+function _getClickDegree2(x, y) {
+  const touchRect = _classPrivateFieldGet(this, _$pickerTouch).getBoundingClientRect();
+
+  const cx = touchRect.width / 2;
+  const cy = touchRect.height / 2;
+  const px = x - touchRect.x;
+  const py = touchRect.height - y + touchRect.y;
+  const dx = px - cx;
+  const dy = py - cy;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  const cosRad = dx / len;
+  const rad = Math.acos(cosRad * (dy < 0 ? -1 : 1));
+  const deg = rad * (180 / Math.PI);
+  let cssDeg = (deg - 90 - 360) % 360 * -1;
+
+  if (dy < 0) {
+    cssDeg += 180;
+  }
+
+  const rowIndex = len > MINUTE_RADIUS ? 0 : len > HOUR_12_RADIUS ? 1 : 2;
+  return [cssDeg, rowIndex];
+}
+
+function _render2() {
+  const is24 = getBooleanAttribute(this, 'ampm') === false;
+
+  _classPrivateMethodGet(this, _selectHour, _selectHour2).call(this, is24);
+
+  _classPrivateMethodGet(this, _selectMinute, _selectMinute2).call(this);
+
+  _classPrivateFieldGet(this, _$headerHoursText).textContent = stringifyHour(_classPrivateFieldGet(this, _hour), is24);
+  _classPrivateFieldGet(this, _$headerMinutesText).textContent = stringifyMinute(_classPrivateFieldGet(this, _minute));
+  updateAttribute(_classPrivateFieldGet(this, _$headerHours), 'aria-valuenow', _classPrivateFieldGet(this, _hour));
+  updateAttribute(_classPrivateFieldGet(this, _$headerHours), 'aria-valuetext', _classPrivateFieldGet(this, _hour));
+  updateAttribute(_classPrivateFieldGet(this, _$headerMinutes), 'aria-valuenow', _classPrivateFieldGet(this, _minute));
+  updateAttribute(_classPrivateFieldGet(this, _$headerMinutes), 'aria-valuetext', _classPrivateFieldGet(this, _minute));
+}
+
+function _selectHour2(is24) {
+  const $hours = _classPrivateFieldGet(this, _$pickerHours).children;
+
+  const hourDigitIndex = _classPrivateFieldGet(this, _hour) % 12;
+  const selectedIndex = hourToIndex(_classPrivateFieldGet(this, _hour), is24);
+  const currentCssDeg = getNeedleRotationDeg(_classPrivateFieldGet(this, _$needleHour));
+  const hourCssDeg = getShortestCssDeg(currentCssDeg, hourDigitIndex * 30);
+
+  for (let i = 0; i < $hours.length; i++) {
+    setClass($hours[i], 'selected', i === selectedIndex);
+  }
+
+  _classPrivateFieldGet(this, _$needleHour).style.transform = `rotate(${hourCssDeg}deg)`;
+
+  if (is24) {
+    if (_classPrivateFieldGet(this, _hour) > 0 && _classPrivateFieldGet(this, _hour) <= 12) {
+      _classPrivateFieldGet(this, _$needleHour).style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
+    } else {
+      _classPrivateFieldGet(this, _$needleHour).style.height = `${NEEDLE_HOUR_24_LENGTH}px`;
+    }
+  } else {
+    _classPrivateFieldGet(this, _$needleHour).style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
+  }
+
+  _classPrivateFieldGet(this, _$ampm).setAttribute('value', _classPrivateFieldGet(this, _hour) >= 0 && _classPrivateFieldGet(this, _hour) < 12 ? 'am' : 'pm');
+}
+
+function _selectMinute2() {
+  const $minutes = _classPrivateFieldGet(this, _$pickerMinutes).children;
+
+  const isNeedleSelected = _classPrivateFieldGet(this, _minute) % 5 === 0;
+  const selectedIndex = _classPrivateFieldGet(this, _minute) / 5;
+  const currentCssDeg = getNeedleRotationDeg(_classPrivateFieldGet(this, _$needleMinute));
+  const minuteCssDeg = getShortestCssDeg(currentCssDeg, _classPrivateFieldGet(this, _minute) * 6);
+
+  for (let i = 0; i < $minutes.length; i++) {
+    setClass($minutes[i], 'selected', selectedIndex === i);
+  }
+
+  setClass(_classPrivateFieldGet(this, _$needleMinute), 'selected', isNeedleSelected);
+  _classPrivateFieldGet(this, _$needleMinute).style.transform = `rotate(${minuteCssDeg}deg)`;
+}

package/time-picker/types.d.ts

@@ -0,0 +1,31 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchTimePickerElement = HTMLElement & {
+    /** Time value in ISO 8601 format */
+    value: string;
+    /** AM/PM 12-hour clock system, `false` by default */
+    ampm: boolean;
+    readonly submitButtonRect: TRect;
+    readonly amButtonRect: TRect | null;
+    readonly pmButtonRect: TRect | null;
+    hourDigitRect(hour: number): TRect | null;
+    minuteDigitRect(minute: number): TRect | null;
+    /** Change value handler, return time in ISO 8601 format */
+    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    /** Time value in ISO 8601 format */
+    setAttribute(name: 'value', value: string): void;
+    /** AM/PM 12-hour clock system, `false` by default */
+    setAttribute(name: 'ampm', value: boolean): void;
+};
+export declare type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerElement> & {
+    /** Time value in ISO 8601 format */
+    value: string;
+    /** AM/PM 12-hour clock system, `false` by default */
+    ampm?: boolean;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Submit button label that is used for a11y */
+    'submit-aria-label': string;
+    /** Change value handler, return time in ISO 8601 format */
+    onChange: (e: SyntheticEvent<TSinchTimePickerElement, CustomEvent<string>>) => void;
+};

package/time-picker/types.js

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

package/time-picker/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const parseTime: (value: string) => {
+    hours: number;
+    minutes: number;
+};
+export declare const stringifyTime: (hour: number, minute: number) => string;
+export declare const stringifyHour: (hour: number, is24: boolean) => string;
+export declare const stringifyHourFace: (hour: number) => string;
+export declare const stringifyMinute: (minute: number) => string;
+export declare const hourToIndex: (hour: number, is24: boolean) => number;
+export declare const getNeedleRotationDeg: (elem: HTMLElement) => number;
+export declare const getShortestCssDeg: (currentDeg: number, nextDeg: number) => number;

package/time-picker/utils.js

@@ -0,0 +1,94 @@
+export const parseTime = value => {
+  if (value === '') {
+    return {
+      hours: 0,
+      minutes: 0
+    };
+  }
+
+  const timeParts = value.split(':');
+
+  if (timeParts.length < 3) {
+    throw new Error(`Incorrect time format: ${value}. Should be "hh:mm:ss"`);
+  }
+
+  const hours = parseInt(timeParts[0]);
+  const minutes = parseInt(timeParts[1]);
+  const seconds = parseInt(timeParts[2]);
+
+  if (isNaN(hours) || hours > 23 || hours < 0) {
+    throw new Error(`Invalid hours value: ${value}`);
+  }
+
+  if (isNaN(minutes) || minutes > 59 || minutes < 0) {
+    throw new Error(`Invalid minutes value: ${value}`);
+  }
+
+  if (isNaN(seconds) || seconds > 59 || seconds < 0) {
+    throw new Error(`Invalid seconds value: ${value}`);
+  }
+
+  return {
+    hours,
+    minutes
+  };
+};
+
+const pad = value => {
+  return value.toString().padStart(2, '0');
+};
+
+export const stringifyTime = (hour, minute) => {
+  return `${pad(hour)}:${pad(minute)}:00`;
+};
+export const stringifyHour = (hour, is24) => {
+  if (is24) {
+    return pad(hour);
+  }
+
+  if (hour === 0 || hour === 12) {
+    return '12';
+  }
+
+  return pad(hour % 12);
+};
+export const stringifyHourFace = hour => {
+  return hour === 0 ? '12' : hour === 12 ? '24' : String(hour);
+};
+export const stringifyMinute = minute => {
+  return pad(minute);
+};
+export const hourToIndex = (hour, is24) => {
+  if (is24) {
+    if (hour === 0) {
+      return 12;
+    }
+
+    if (hour === 12) {
+      return 0;
+    }
+
+    return hour;
+  }
+
+  return hour % 12;
+};
+export const getNeedleRotationDeg = elem => {
+  const match = elem.style.transform.match(/^rotate\((-?\d+)deg\)$/);
+
+  if (match === null) {
+    return 0;
+  }
+
+  return Number(match[1]);
+};
+export const getShortestCssDeg = (currentDeg, nextDeg) => {
+  const angle = currentDeg % 360;
+  const diff = (360 - (angle - nextDeg)) % 360;
+
+  if (diff > 180) {
+    return currentDeg - 360 + diff;
+  }
+
+  return currentDeg + diff;
+};

package/toggle/types.d.ts

@@ -6,8 +6,6 @@ export declare type TSinchToggleElement = HTMLElement & {
     labeled: boolean;
     disabled: boolean;
     text: string | null;
-    focus(): void;
-    blur(): void;
     addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
     setAttribute(name: 'checked', value: ''): void;
     setAttribute(name: 'small', value: ''): void;

package/utils.js

@@ -30,7 +30,7 @@ export class NectaryElement extends HTMLElement {
   attachShadow(options) {
     return super.attachShadow({
       mode: 'closed',
-      delegatesFocus: true,
+      delegatesFocus: false,
       customElements: nectaryRegistry,
       ...options
     });