@nectary/components 0.38.0 → 0.39.0

package/accordion/types.d.ts

@@ -10,6 +10,7 @@ export declare type TSinchAccordionElement = HTMLElement & {
 export declare type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
     multiple?: boolean;
     value: string;
+    /** @deprecated */
     onChange?: (e: SyntheticEvent<TSinchAccordionElement, CustomEvent<string>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/card/index.d.ts

@@ -1,3 +1,5 @@
+import '../title';
+import '../text';
 import type { TSinchCardElement, TSinchCardReact } from './types';
 declare global {
     namespace JSX {

package/card/index.js

@@ -1,17 +1,19 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$text, _$label, _$caption, _$illustrationSlot, _$actionSlot, _$illustrationSlotWrapper, _onIllustrationSlotChange, _updateDisabledAttributeInChildren;
+var _$text, _$label, _$caption, _$illustrationSlot, _$illustrationSlotWrapper, _onIllustrationSlotChange;
 
 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 '../title';
+import '../text';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, setClass, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-0);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-elevation-level-1)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{margin:0;font:var(--sinch-font-title-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-stormy-500);flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{margin:0;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}::slotted(sinch-card-button),::slotted(sinch-card-link){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><p id="label"></p><div id="header"><slot name="icon"></slot><span id="caption"></span></div><p id="description"></p><slot name="action"></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-0);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-elevation-level-1)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{color:var(--sinch-color-stormy-300)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#caption{color:var(--sinch-color-stormy-500);flex:1;min-width:0}#description{color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><sinch-text id="label" type="s" emphasized ellipsis></sinch-text><div id="header"><slot name="icon"></slot><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title></div><sinch-text id="description" type="m"></sinch-text><slot name="action"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap(), _$caption = new WeakMap(), _$illustrationSlot = new WeakMap(), _$actionSlot = new WeakMap(), _$illustrationSlotWrapper = new WeakMap(), _onIllustrationSlotChange = new WeakMap(), _updateDisabledAttributeInChildren = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap(), _$caption = new WeakMap(), _$illustrationSlot = new WeakMap(), _$illustrationSlotWrapper = new WeakMap(), _onIllustrationSlotChange = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -35,11 +37,6 @@ defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$actionSlot, {
-      writable: true,
-      value: void 0
-    });
-
     _classPrivateFieldInitSpec(this, _$illustrationSlotWrapper, {
       writable: true,
       value: void 0
@@ -52,15 +49,6 @@ defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap
       }
     });
 
-    _classPrivateFieldInitSpec(this, _updateDisabledAttributeInChildren, {
-      writable: true,
-      value: () => {
-        for (const $el of _classPrivateFieldGet(this, _$actionSlot).assignedElements()) {
-          updateAttribute($el, 'disabled', this.getAttribute('disabled'));
-        }
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -72,21 +60,15 @@ defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap
 
     _classPrivateFieldSet(this, _$illustrationSlot, shadowRoot.querySelector('slot[name="illustration"]'));
 
-    _classPrivateFieldSet(this, _$actionSlot, shadowRoot.querySelector('slot[name="action"]'));
-
     _classPrivateFieldSet(this, _$illustrationSlotWrapper, shadowRoot.querySelector('#illustration-wrapper'));
   }
 
   connectedCallback() {
     _classPrivateFieldGet(this, _$illustrationSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onIllustrationSlotChange));
-
-    _classPrivateFieldGet(this, _$actionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _updateDisabledAttributeInChildren));
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$illustrationSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onIllustrationSlotChange));
-
-    _classPrivateFieldGet(this, _$actionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _updateDisabledAttributeInChildren));
   }
 
   static get observedAttributes() {
@@ -109,14 +91,7 @@ defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap
 
       case 'caption':
         {
-          _classPrivateFieldGet(this, _$caption).textContent = newVal;
-          break;
-        }
-
-      case 'disabled':
-        {
-          _classPrivateFieldGet(this, _updateDisabledAttributeInChildren).call(this);
-
+          updateAttribute(_classPrivateFieldGet(this, _$caption), 'text', newVal);
           break;
         }
     }

package/date-picker/index.js

@@ -20,7 +20,7 @@ import '../icons/delete-outline';
 import '../icons/today';
 import '../text';
 import { defineCustomElement, getAttribute, getReactEventHandler, 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"><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 id="prev-year" small><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button id="prev-month" small><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" small><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button id="next-year" small><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;
@@ -220,7 +220,7 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
   }
 
   static get observedAttributes() {
-    return ['value', 'min', 'max', 'locale'];
+    return ['value', 'min', 'max', 'locale', 'prev-year-aria-label', 'next-year-aria-label', 'prev-month-aria-label', 'next-month-aria-label'];
   }
 
   attributeChangedCallback(name, prevValue, newVal) {
@@ -301,6 +301,30 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
 
           break;
         }
+
+      case 'prev-year-aria-label':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$prevYear), 'aria-label', newVal);
+          break;
+        }
+
+      case 'next-year-aria-label':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$nextYear), 'aria-label', newVal);
+          break;
+        }
+
+      case 'prev-month-aria-label':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$prevMonth), 'aria-label', newVal);
+          break;
+        }
+
+      case 'next-month-aria-label':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$nextMonth), 'aria-label', newVal);
+          break;
+        }
     }
   }
 
@@ -340,6 +364,22 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
     return getAttribute(this, 'max', '');
   }
 
+  set prevMonthAriaLabel(value) {
+    updateAttribute(this, 'prev-month-aria-label', value);
+  }
+
+  get prevMonthAriaLabel() {
+    return getAttribute(this, 'prev-month-aria-label', '');
+  }
+
+  set nextMonthAriaLabel(value) {
+    updateAttribute(this, 'next-month-aria-label', value);
+  }
+
+  get nextMonthAriaLabel() {
+    return getAttribute(this, 'next-month-aria-label', '');
+  }
+
   get prevYearButtonRect() {
     return getRect(_classPrivateFieldGet(this, _$prevYear));
   }

package/date-picker/types.d.ts

@@ -9,6 +9,14 @@ export declare type TSinchDatePickerElement = HTMLElement & {
     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 */
+    prevYearAriaLabel: string;
+    /** Label that is used for a11y */
+    nextYearAriaLabel: string;
+    /** Label that is used for a11y */
+    prevMonthAriaLabel: string;
+    /** Label that is used for a11y */
+    nextMonthAriaLabel: string;
     readonly prevYearButtonRect: TRect;
     readonly nextYearButtonRect: TRect;
     readonly prevMonthButtonRect: TRect;
@@ -24,6 +32,14 @@ export declare type TSinchDatePickerElement = HTMLElement & {
     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;
+    /** Label that is used for a11y */
+    setAttribute(name: 'prev-year-aria-label', value: string): void;
+    /** Label that is used for a11y */
+    setAttribute(name: 'next-year-aria-label', value: string): void;
+    /** Label that is used for a11y */
+    setAttribute(name: 'prev-month-aria-label', value: string): void;
+    /** Label that is used for a11y */
+    setAttribute(name: 'next-month-aria-label', value: string): void;
 };
 export declare type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement> & {
     /** Date value in ISO 8601 format */
@@ -36,7 +52,15 @@ export declare type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerE
     locale: string;
     /** Label that is used for a11y */
     'aria-label': string;
-    /** Change value handler, return date in ISO 8601 format */
+    /** Label that is used for a11y */
+    'prev-year-aria-label': string;
+    /** Label that is used for a11y */
+    'next-year-aria-label': string;
+    /** Label that is used for a11y */
+    'prev-month-aria-label': string;
+    /** Label that is used for a11y */
+    'next-month-aria-label': string;
+    /** @deprecated Change value handler, return date in ISO 8601 format */
     onChange?: (e: SyntheticEvent<TSinchDatePickerElement, CustomEvent<string>>) => void;
     /** Change value handler, return date in ISO 8601 format */
     'on-change'?: (e: CustomEvent<string>) => void;

package/dialog/index.d.ts

@@ -1,6 +1,7 @@
 import '../icon-button';
 import '../icons/close';
 import '../stop-events';
+import '../title';
 import type { TSinchDialogElement, TSinchDialogReact } from './types';
 declare global {
     namespace JSX {

package/dialog/index.js

@@ -15,8 +15,9 @@ import dialogPolyfill from 'dialog-polyfill';
 import '../icon-button';
 import '../icons/close';
 import '../stop-events';
+import '../title';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><span id="caption"></span><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:16px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = new WeakMap(), _$caption = new WeakMap(), _isConnected = new WeakMap(), _prevOverflowValue = new WeakMap(), _onCancel = new WeakMap(), _onCloseClick = new WeakMap(), _onBackdropClick = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _setOpen = new WeakSet(), class extends NectaryElement {
@@ -142,7 +143,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     switch (name) {
       case 'caption':
         {
-          _classPrivateFieldGet(this, _$caption).textContent = newVal;
+          updateAttribute(_classPrivateFieldGet(this, _$caption), 'text', newVal);
           break;
         }
 

package/dropdown/types.d.ts

@@ -23,8 +23,10 @@ export declare type TSinchDropdownReact = TSinchElementReact<TSinchDropdownEleme
     value: string;
     maxVisibleItems?: number;
     'aria-label': string;
+    /** @deprecated */
     onClose?: () => void;
     'on-close'?: (e: CustomEvent<void>) => void;
+    /** @deprecated */
     onChange?: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/inline-alert/index.js

@@ -14,7 +14,7 @@ import '../icons/info';
 import '../title';
 import '../text';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-shape-radius-l);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{color:var(--sinch-color-stormy-500);align-self:stretch}#text{color:var(--sinch-color-stormy-500);margin-top:4px;align-self:stretch}#text:empty{display:none}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-success-200)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-warning-200)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}:host([type=info]) #wrapper{background-color:var(--sinch-color-informative-200)}:host([type=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-success-500)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-warning-500)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-informative-500)}#action{display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><div id="body-wrapper"><sinch-title id="caption" level="3" type="s" ellipsis></sinch-title><sinch-text id="text" type="m"></sinch-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;width:100%}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{color:var(--sinch-color-stormy-500);align-self:stretch}#text{color:var(--sinch-color-stormy-500);margin-top:4px;align-self:stretch}#text:empty{display:none}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-success-200)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-warning-200)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}:host([type=info]) #wrapper{background-color:var(--sinch-color-informative-200)}:host([type=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-success-500)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-warning-500)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-informative-500)}#action{display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><div id="body-wrapper"><sinch-title id="caption" level="3" type="s" ellipsis></sinch-title><sinch-text id="text" type="m"></sinch-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/package.json

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

package/pagination/types.d.ts

@@ -14,6 +14,7 @@ export declare type TSinchPaginationElement = HTMLElement & {
 export declare type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement> & {
     value: number;
     max: number;
+    /** @deprecated */
     onChange?: (event: SyntheticEvent<TSinchPaginationElement, CustomEvent<number>>) => void;
     'on-change': (e: CustomEvent<number>) => void;
 };

package/radio/types.d.ts

@@ -9,6 +9,7 @@ export declare type TSinchRadioElement = HTMLElement & {
 export declare type TSinchRadioReact = TSinchElementReact<TSinchRadioElement> & {
     value: string;
     'aria-label': string;
+    /** @deprecated */
     onChange?: (event: SyntheticEvent<TSinchRadioElement, CustomEvent<boolean>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/segment/index.js

@@ -10,7 +10,7 @@ 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}#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>';
+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{color:var(--sinch-color-text-default);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" ellipsis></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;

package/segment-collapse/types.d.ts

@@ -9,6 +9,7 @@ export declare type TSinchSegmentExpandElement = HTMLElement & {
 export declare type TSinchSegmentExpandReact = TSinchElementReact<TSinchSegmentExpandElement> & {
     value: boolean;
     'aria-label': string;
+    /** @deprecated */
     onChange?: (e: SyntheticEvent<TSinchSegmentExpandElement, CustomEvent<boolean>>) => void;
     'on-change'?: (e: CustomEvent<boolean>) => void;
 };

package/segmented-control/types.d.ts

@@ -8,6 +8,7 @@ export declare type TSinchSegmentedControlElement = HTMLElement & {
 export declare type TSinchSegmentedControlReact = TSinchElementReact<TSinchSegmentedControlElement> & {
     value: string;
     'aria-label': string;
+    /** @deprecated */
     onChange?: (event: SyntheticEvent<TSinchSegmentedControlElement, CustomEvent<string>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

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

@@ -11,6 +11,7 @@ export declare type TSinchSegmentedIconControlReact = TSinchElementReact<TSinchS
     value: string;
     multiple?: boolean;
     'aria-label': string;
+    /** @deprecated */
     onChange?: (event: SyntheticEvent<TSinchSegmentedIconControlElement, CustomEvent<string>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/select/types.d.ts

@@ -42,7 +42,7 @@ export declare type TSinchSelectReact = TSinchElementReact<TSinchSelectElement>
     disabled?: boolean;
     /** Number of visible at the same time options in the list */
     maxVisibleItems?: number;
-    /** Change value handler */
+    /** @deprecated Change value handler */
     onChange?: (e: SyntheticEvent<TSinchSelectElement, CustomEvent<string>>) => void;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;

package/tabs/types.d.ts

@@ -8,6 +8,7 @@ export declare type TSinchTabsElement = HTMLElement & {
 export declare type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
     value: string;
     'aria-label': string;
+    /** @deprecated */
     onChange?: (event: SyntheticEvent<TSinchTabsElement, CustomEvent<string>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/tag/index.d.ts

@@ -1,4 +1,5 @@
 import '../icons/cancel';
+import '../text';
 import type { TSinchTagElement, TSinchTagReact } from './types';
 declare global {
     namespace JSX {

package/tag/index.js

@@ -8,9 +8,10 @@ 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 '../text';
 import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:2px 8px;border-radius:12px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);box-sizing:border-box;--sinch-color-icon:var(--sinch-color-stormy-400);--sinch-size-icon:16px}:host([category=candy])>#wrapper{background-color:var(--sinch-color-candy-200)}:host([category=bolt])>#wrapper{background-color:var(--sinch-color-bolt-200)}:host([category=aqua])>#wrapper{background-color:var(--sinch-color-aqua-200)}:host([category=grass])>#wrapper{background-color:var(--sinch-color-grass-200)}:host([category=berry])>#wrapper{background-color:var(--sinch-color-berry-200)}:host([category=orange])>#wrapper{background-color:var(--sinch-color-orange-200)}:host([category=night])>#wrapper{background-color:var(--sinch-color-night-200)}:host([category=mud])>#wrapper{background-color:var(--sinch-color-mud-200)}:host([category=dirt])>#wrapper{background-color:var(--sinch-color-dirt-200)}:host([inverted]:not([inverted=false]))>#wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-snow-100)}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px;--sinch-size-icon:14px}#text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;flex:1}</style><div id="wrapper"><slot name="icon"></slot><span id="text"></span><slot name="close"></slot></div>';
-import { categoryValues } from './utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:2px 8px;border-radius:12px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);box-sizing:border-box;--sinch-color-icon:var(--sinch-color-stormy-400);--sinch-size-icon:16px}:host([category=candy])>#wrapper{background-color:var(--sinch-color-candy-200)}:host([category=bolt])>#wrapper{background-color:var(--sinch-color-bolt-200)}:host([category=aqua])>#wrapper{background-color:var(--sinch-color-aqua-200)}:host([category=grass])>#wrapper{background-color:var(--sinch-color-grass-200)}:host([category=berry])>#wrapper{background-color:var(--sinch-color-berry-200)}:host([category=orange])>#wrapper{background-color:var(--sinch-color-orange-200)}:host([category=night])>#wrapper{background-color:var(--sinch-color-night-200)}:host([category=mud])>#wrapper{background-color:var(--sinch-color-mud-200)}:host([category=dirt])>#wrapper{background-color:var(--sinch-color-dirt-200)}:host([inverted]:not([inverted=false]))>#wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-snow-100)}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px;--sinch-size-icon:14px}#text{flex:1}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><slot name="close"></slot></div>';
+import { assertCategoryValue, categoryValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tag', (_$text = new WeakMap(), class extends NectaryElement {
@@ -61,11 +62,17 @@ defineCustomElement('sinch-tag', (_$text = new WeakMap(), class extends NectaryE
   }
 
   static get observedAttributes() {
-    return ['text'];
+    return ['text', 'category'];
   }
 
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
+      case 'category':
+        {
+          assertCategoryValue(newVal);
+          break;
+        }
+
       case 'text':
         {
           _classPrivateFieldGet(this, _$text).textContent = newVal;

package/tag/utils.d.ts

@@ -1,2 +1,5 @@
 import type { TSinchTagCategory } from './types';
 export declare const categoryValues: readonly TSinchTagCategory[];
+declare type TAssertCategory = (value: string | null) => asserts value is TSinchTagCategory;
+export declare const assertCategoryValue: TAssertCategory;
+export {};

package/tag/utils.js

@@ -1 +1,6 @@
-export const categoryValues = ['candy', 'bolt', 'aqua', 'grass', 'berry', 'orange', 'night', 'mud', 'dirt'];
+export const categoryValues = ['candy', 'bolt', 'aqua', 'grass', 'berry', 'orange', 'night', 'mud', 'dirt'];
+export const assertCategoryValue = value => {
+  if (value === null || !categoryValues.includes(value)) {
+    throw new Error(`sinch-tag: invalid category attribute: ${value}`);
+  }
+};

package/tag-close/index.js

@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icons/cancel';
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:14px;height:14px}button{all:initial;position:absolute;display:flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);cursor:pointer}button>*{pointer-events:none}</style><div id="wrapper"><button aria-label="dismiss tag"><sinch-icon-cancel></sinch-icon-cancel></button></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:14px;height:14px}button{all:initial;position:absolute;display:flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);cursor:pointer}button>*{pointer-events:none}</style><div id="wrapper"><button><sinch-icon-cancel></sinch-icon-cancel></button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tag-close', (_$button = new WeakMap(), class extends NectaryElement {
@@ -27,6 +27,10 @@ defineCustomElement('sinch-tag-close', (_$button = new WeakMap(), class extends
     _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('button'));
   }
 
+  connectedCallback() {
+    this.setAttribute('role', 'button');
+  }
+
   focus() {
     _classPrivateFieldGet(this, _$button).focus();
   }

package/tag-close/types.d.ts

@@ -1,3 +1,5 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchTagCloseElement = HTMLElement;
-export declare type TSinchTagCloseReact = TSinchElementReact<TSinchTagCloseElement>;
+export declare type TSinchTagCloseReact = TSinchElementReact<TSinchTagCloseElement> & {
+    'aria-label': string;
+};

package/time-picker/index.js

@@ -401,7 +401,7 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
 
       case 'submit-aria-label':
         {
-          _classPrivateFieldGet(this, _$submitButton).ariaLabel = newVal;
+          updateAttribute(_classPrivateFieldGet(this, _$submitButton), 'aria-label', newVal);
           break;
         }
     }
@@ -427,6 +427,14 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
     return getBooleanAttribute(this, 'ampm');
   }
 
+  set submitAriaLabel(value) {
+    updateAttribute(this, 'submit-aria-label', value);
+  }
+
+  get submitAriaLabel() {
+    return getAttribute(this, 'submit-aria-label', '');
+  }
+
   get submitButtonRect() {
     return getRect(_classPrivateFieldGet(this, _$submitButton));
   }

package/time-picker/types.d.ts

@@ -5,6 +5,8 @@ export declare type TSinchTimePickerElement = HTMLElement & {
     value: string;
     /** AM/PM 12-hour clock system, `false` by default */
     ampm: boolean;
+    /** Submit button label that is used for a11y */
+    submitAriaLabel: string;
     readonly submitButtonRect: TRect;
     readonly amButtonRect: TRect | null;
     readonly pmButtonRect: TRect | null;
@@ -16,6 +18,8 @@ export declare type TSinchTimePickerElement = HTMLElement & {
     setAttribute(name: 'value', value: string): void;
     /** AM/PM 12-hour clock system, `false` by default */
     setAttribute(name: 'ampm', value: boolean): void;
+    /** Submit button label that is used for a11y */
+    setAttribute(name: 'submit-aria-label', value: string): void;
 };
 export declare type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerElement> & {
     /** Time value in ISO 8601 format */
@@ -26,7 +30,7 @@ export declare type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerE
     'aria-label': string;
     /** Submit button label that is used for a11y */
     'submit-aria-label': string;
-    /** Change value handler, return time in ISO 8601 format */
+    /** @deprecated Change value handler, return time in ISO 8601 format */
     onChange?: (e: SyntheticEvent<TSinchTimePickerElement, CustomEvent<string>>) => void;
     /** Change value handler, return time in ISO 8601 format */
     'on-change'?: (e: CustomEvent<string>) => void;

package/toast/index.d.ts

@@ -0,0 +1,17 @@
+import '../icons/report-problem';
+import '../icons/report';
+import '../icons/check-circle';
+import '../icons/info';
+import '../title';
+import '../text';
+import type { TSinchToastElement, TSinchToastReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast': TSinchToastReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toast': TSinchToastElement;
+    }
+}