@nectary/components 0.34.0 → 0.35.0

package/textarea/index.js

@@ -1,17 +1,17 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput;
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onInputFocus, _onInputBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span><span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -96,10 +96,48 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
             detail: nextValue,
             bubbles: true
           }));
+          this.dispatchEvent(new CustomEvent('-change', {
+            detail: nextValue
+          }));
         }
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onInputFocus, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-focus'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onInputBlur, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-blur'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'on-focus')?.();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'on-blur')?.();
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -125,6 +163,14 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
     _classPrivateFieldGet(this, _$input).addEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
 
     _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
   }
 
   disconnectedCallback() {
@@ -135,6 +181,14 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
     _classPrivateFieldGet(this, _$input).removeEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
 
     _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
   }
 
   static get observedAttributes() {

package/textarea/types.d.ts

@@ -13,7 +13,9 @@ export declare type TSinchTextareaElement = HTMLElement & {
     selectionDirection: HTMLTextAreaElement['selectionDirection'];
     rows: HTMLTextAreaElement['rows'];
     resizable: boolean;
-    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'label', value: string): void;
     setAttribute(name: 'placeholder', value: string): void;
@@ -35,5 +37,8 @@ export declare type TSinchTextareaReact = TSinchElementReact<TSinchTextareaEleme
     'aria-label': string;
     rows?: number;
     resizable?: boolean;
-    onChange: (e: SyntheticEvent<TSinchTextareaElement, CustomEvent<string>>) => void;
+    onChange?: (e: SyntheticEvent<TSinchTextareaElement, CustomEvent<string>>) => void;
+    'on-change'?: (e: CustomEvent<string>) => void;
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/tile-control/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTileControlElement, TSinchTileControlReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tile-control': TSinchTileControlReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tile-control': TSinchTileControlElement;
+    }
+}

package/tile-control/index.js

@@ -0,0 +1,181 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$slot, _onSlotChange, _onOptionChange, _onValueChange, _onSmallChange, _onChangeReactHandler;
+
+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 { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]:not([small=false])) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tile-control', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _onSmallChange = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _onSmallChange);
+
+    _classPrivateMethodInitSpec(this, _onValueChange);
+
+    _classPrivateFieldInitSpec(this, _$slot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onSlotChange, {
+      writable: true,
+      value: () => {
+        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
+
+        _classPrivateMethodGet(this, _onSmallChange, _onSmallChange2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onOptionChange, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        const $elem = e.target;
+        const value = e.detail;
+        const detail = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : value;
+        this.dispatchEvent(new CustomEvent('change', {
+          detail,
+          bubbles: true
+        }));
+        this.dispatchEvent(new CustomEvent('-change', {
+          detail
+        }));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'tablist');
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$slot).removeEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
+
+    _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+  }
+
+  static get observedAttributes() {
+    return ['value', 'small', 'multiple'];
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set small(isSmall) {
+    updateBooleanAttribute(this, 'small', isSmall);
+  }
+
+  get small() {
+    return getBooleanAttribute(this, 'small');
+  }
+
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+
+  set cols(value) {
+    updateIntegerAttribute(this, 'cols', value);
+  }
+
+  get cols() {
+    return getIntegerAttribute(this, 'cols', 1);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'value':
+        {
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
+
+          break;
+        }
+
+      case 'small':
+        {
+          _classPrivateMethodGet(this, _onSmallChange, _onSmallChange2).call(this);
+
+          break;
+        }
+
+      case 'multiple':
+        {
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
+        }
+    }
+  }
+
+}));
+
+function _onValueChange2(csv) {
+  if (this.multiple) {
+    const values = getCsvSet(csv);
+
+    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+      const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+      updateBooleanAttribute($option, 'data-checked', isChecked);
+    }
+  } else {
+    const value = getFirstCsvValue(csv);
+
+    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+      const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+      updateBooleanAttribute($option, 'data-checked', isChecked);
+    }
+  }
+}
+
+function _onSmallChange2() {
+  const isSmall = this.small;
+
+  for (const $opt of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+    updateBooleanAttribute($opt, 'data-small', isSmall);
+  }
+}

package/tile-control/types.d.ts

@@ -0,0 +1,38 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchTileControlElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Small */
+    small: boolean;
+    /** Multiple */
+    multiple: boolean;
+    /** Number of columns from 1 to 8 */
+    cols: number;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Small */
+    setAttribute(name: 'small', value: ''): void;
+    /** Multiple */
+    setAttribute(name: 'multiple', value: ''): void;
+    /** Number of columns from 1 to 8 */
+    setAttribute(name: 'cols', value: string): void;
+};
+export declare type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement> & {
+    /** Value */
+    value: string;
+    /** Multiple */
+    multiple?: boolean;
+    /** Small */
+    small?: boolean;
+    /** Number of columns from 1 to 8 */
+    cols: number;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** @deprecated Change value handler */
+    onChange?: (event: SyntheticEvent<TSinchTileControlElement, CustomEvent<string>>) => void;
+    /** Change value handler */
+    'on-change'?: (e: CustomEvent<string>) => void;
+};

package/tile-control/types.js

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

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

@@ -0,0 +1,11 @@
+import type { TSinchTileControlOptionElement, TSinchTileControlOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tile-control-option': TSinchTileControlOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tile-control-option': TSinchTileControlOptionElement;
+    }
+}

package/tile-control-option/index.js

@@ -0,0 +1,161 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$button, _$text, _onButtonClick, _onButtonFocus, _onButtonBlur, _onFocusReactHandler, _onBlurReactHandler;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:88px;height:88px;padding:16px 8px 8px;border-radius:var(--sinch-shape-radius-l);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-leve-1);cursor:pointer}:host([data-small])>button{width:64px;height:64px;border-radius:var(--sinch-shape-radius-m);padding:12px 4px 4px}button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);pointer-events:none}:host([data-small])>button::before{border-radius:var(--sinch-shape-radius-m)}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-shape-radius-l) + 4px);pointer-events:none}:host([data-small])>button:focus-visible::after{border-radius:calc(var(--sinch-shape-radius-m) + 4px)}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-shape-radius-l) + 4px)}:host([data-small])>button:focus::after{border-radius:calc(var(--sinch-shape-radius-m) + 4px)}}button:enabled:hover{background-color:var(--sinch-color-tropical-100)}button:enabled:hover::before{border-color:var(--sinch-color-tropical-100)}:host([data-checked])>button:enabled,button:enabled:active{box-shadow:var(--sinch-elevation-level-0)}:host([data-checked])>button:enabled::before,button:enabled:active::before{border-width:2px;border-color:var(--sinch-color-stormy-500)}button:disabled{cursor:initial}button:disabled>#icon,button:disabled>#text{opacity:.5}#text{display:inline-block;min-height:20px;text-align:center;font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon{width:32px;height:32px;align-self:center;--sinch-size-icon:32px;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([data-small]) #icon{width:24px;height:24px;--sinch-size-icon:24px}button>*{pointer-events:none}</style><button><div id="icon"><slot name="icon"></slot></div><span id="text"></span></button>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tile-control-option', (_$button = new WeakMap(), _$text = new WeakMap(), _onButtonClick = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$button, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onButtonClick, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('option-change', {
+          detail: this.value,
+          bubbles: true
+        }));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onButtonFocus, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-focus'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onButtonBlur, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-blur'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'on-focus')?.();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'on-blur')?.();
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('button'));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'tab');
+
+    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+
+    _classPrivateFieldGet(this, _$button).addEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
+
+    _classPrivateFieldGet(this, _$button).addEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
+
+    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+
+    _classPrivateFieldGet(this, _$button).removeEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
+
+    _classPrivateFieldGet(this, _$button).removeEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
+
+    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+  }
+
+  static get observedAttributes() {
+    return ['data-checked', 'text', 'disabled'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'disabled':
+        {
+          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
+          break;
+        }
+    }
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$button).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$button).blur();
+  }
+
+}));

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

@@ -0,0 +1,37 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTileControlOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Text content */
+    text: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Small */
+    small: boolean;
+    /** Focus event */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Text content */
+    setAttribute(attr: 'text', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+    /** Small */
+    setAttribute(name: 'small', value: ''): void;
+};
+export declare type TSinchTileControlOptionReact = TSinchElementReact<TSinchTileControlOptionElement> & {
+    /** Value */
+    value: string;
+    /** Text content */
+    text: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+    /** Focus handler */
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
+    'on-blur'?: (e: CustomEvent<void>) => void;
+};

package/tile-control-option/types.js

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

package/time-picker/index.js

@@ -1,7 +1,7 @@
 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;
+var _$pickerHours, _$pickerMinutes, _$pickerTouch, _$needleHour, _$needleMinute, _$headerHours, _$headerHoursText, _$headerMinutes, _$headerMinutesText, _$ampm, _$submitButton, _hour, _minute, _getClickDegree, _onPickerClick, _render, _selectHour, _selectMinute, _onAmPmChange, _onSubmitButtonClick, _onHoursKeydown, _onMinutesKeydown, _onChangeReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -17,7 +17,7 @@ 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';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, 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');
@@ -32,7 +32,7 @@ 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 {
+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(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -182,6 +182,9 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
           bubbles: true,
           detail: value
         }));
+        this.dispatchEvent(new CustomEvent('-change', {
+          detail: value
+        }));
       }
     });
 
@@ -235,6 +238,13 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -323,6 +333,8 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
     _classPrivateFieldGet(this, _$headerHours).addEventListener('keydown', _classPrivateFieldGet(this, _onHoursKeydown));
 
     _classPrivateFieldGet(this, _$headerMinutes).addEventListener('keydown', _classPrivateFieldGet(this, _onMinutesKeydown));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   disconnectedCallback() {
@@ -335,6 +347,8 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
     _classPrivateFieldGet(this, _$headerHours).removeEventListener('keydown', _classPrivateFieldGet(this, _onHoursKeydown));
 
     _classPrivateFieldGet(this, _$headerMinutes).removeEventListener('keydown', _classPrivateFieldGet(this, _onMinutesKeydown));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   static get observedAttributes() {