@nectary/components 0.37.0 → 0.39.0

package/progress/types.d.ts

@@ -0,0 +1,12 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchProgressElement = HTMLElement & {
+    value: number;
+    detailed: boolean;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'detailed', value: ''): void;
+};
+export declare type TSinchProgressReact = TSinchElementReact<TSinchProgressElement> & {
+    value: number;
+    detailed?: boolean;
+    'aria-label': string;
+};

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/spinner/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}div{animation:1.5s linear infinite spinner;animation-play-state:running;border:solid 3px var(--sinch-color-spinner-bg,#d4dadd);border-bottom-color:var(--sinch-color-spinner-fg,#0a273d);border-radius:50%;height:20px;width:20px;box-sizing:border-box;will-change:transform}:host([type=large]) div{height:46px;width:46px;border-width:4px}:host([type=small]) div{height:14px;width:14px;border-width:2px}:host([static]:not([static=false])) div{animation-play-state:paused}</style><div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}div{animation:1.5s linear infinite spinner;animation-play-state:running;border:solid 3px var(--sinch-color-spinner-bg,#d4dadd);border-bottom-color:var(--sinch-color-spinner-fg,#0a273d);border-radius:50%;height:20px;width:20px;box-sizing:border-box;will-change:transform;margin:2px}:host([type=large]) div{height:48px;width:48px;border-width:4px}:host([type=small]) div{height:14px;width:14px;border-width:2px;margin:1px}:host([static]:not([static=false])) div{animation-play-state:paused}</style><div></div>';
 import { spinnerTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

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/text/index.js

@@ -1,6 +1,6 @@
 import '../icons/cancel';
 import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue } from '../utils';
-const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m)}:host([inline]:not([inline=false])){display:inline}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}</style><slot></slot>';
+const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m)}:host([inline]:not([inline=false])){display:inline}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}:host([ellipsis]:not([ellipsis=false])){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}</style><slot></slot>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -31,6 +31,14 @@ defineCustomElement('sinch-text', class extends NectaryElement {
     return getBooleanAttribute(this, 'inline');
   }
 
+  set ellipsis(isEllipsis) {
+    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
+  }
+
+  get ellipsis() {
+    return getBooleanAttribute(this, 'ellipsis');
+  }
+
   set emphasized(isEmphasized) {
     updateBooleanAttribute(this, 'emphasized', isEmphasized);
   }

package/text/types.d.ts

@@ -4,12 +4,15 @@ export declare type TSinchTextElement = HTMLElement & {
     type: TSinchTextType;
     inline: boolean;
     emphasized: boolean;
+    ellipsis: boolean;
     setAttribute(name: 'type', value: TSinchTextType): void;
     setAttribute(name: 'inline', value: ''): void;
     setAttribute(name: 'emphasized', value: ''): void;
+    setAttribute(name: 'ellipsis', value: ''): void;
 };
 export declare type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
     type: TSinchTextType;
     inline?: boolean;
     emphasized?: boolean;
+    ellipsis?: boolean;
 };

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/title/index.js

@@ -8,8 +8,8 @@ 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 { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}:host([type=xl])>*{font:var(--sinch-font-title-xl)}:host([type="l"])>*{font:var(--sinch-font-title-l)}:host([type="m"])>*{font:var(--sinch-font-title-m)}:host([type="s"])>*{font:var(--sinch-font-title-s)}:host([type=xs])>*{font:var(--sinch-font-title-xs)}</style><span id="text"></span>';
+import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement, updateBooleanAttribute, getBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}:host([type=xl]) #text{font:var(--sinch-font-title-xl)}:host([type="l"]) #text{font:var(--sinch-font-title-l)}:host([type="m"]) #text{font:var(--sinch-font-title-m)}:host([type="s"]) #text{font:var(--sinch-font-title-s)}:host([type=xs]) #text{font:var(--sinch-font-title-xs)}:host([ellipsis]:not([ellipsis=false])) #text{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
 import { assertLevel, assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -48,6 +48,14 @@ defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends Nectar
     return getLiteralAttribute(this, typeValues, 'type');
   }
 
+  set ellipsis(isEllipsis) {
+    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
+  }
+
+  get ellipsis() {
+    return getBooleanAttribute(this, 'ellipsis');
+  }
+
   static get observedAttributes() {
     return ['text', 'type', 'level'];
   }

package/title/types.d.ts

@@ -5,12 +5,15 @@ export declare type TSinchTitleElement = HTMLElement & {
     text: string;
     type: TSinchTitleType;
     level: TSinchTitleLevel;
+    ellipsis: boolean;
     setAttribute(name: 'text', value: string): void;
     setAttribute(name: 'type', value: TSinchTitleType): void;
     setAttribute(name: 'level', value: TSinchTitleLevel): void;
+    setAttribute(name: 'ellipsis', value: ''): void;
 };
 export declare type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
     text: string;
     type: TSinchTitleType;
     level: TSinchTitleLevel;
+    ellipsis?: boolean;
 };

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

package/toast/index.js

@@ -0,0 +1,153 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text, _tid, _updateTimeout, _onTimeout, _clearTimeout, _onTimeoutReactHandler;
+
+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 '../icons/report-problem';
+import '../icons/report';
+import '../icons/check-circle';
+import '../icons/info';
+import '../title';
+import '../text';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler, getBooleanAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;padding:8px 16px;box-sizing:border-box;border-radius:var(--sinch-shape-radius-l);box-shadow:var(--sinch-elevation-level-3)}#text{color:var(--sinch-color-stormy-500);padding:4px 0 4px 4px;flex:1;min-width:0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none;align-self:flex-start;margin:4px 0}: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)}</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><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
+import { assertType, typeValues } from './utils';
+const TIMEOUT = 5000;
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-toast', (_$text = new WeakMap(), _tid = new WeakMap(), _updateTimeout = new WeakSet(), _onTimeout = new WeakMap(), _clearTimeout = new WeakSet(), _onTimeoutReactHandler = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _clearTimeout);
+
+    _classPrivateMethodInitSpec(this, _updateTimeout);
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _tid, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _onTimeout, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-timeout'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onTimeoutReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-timeout')?.(e);
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('aria-atomic', 'true');
+    this.setAttribute('aria-live', 'polite');
+    this.addEventListener('-timeout', _classPrivateFieldGet(this, _onTimeoutReactHandler));
+
+    _classPrivateMethodGet(this, _updateTimeout, _updateTimeout2).call(this);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('-timeout', _classPrivateFieldGet(this, _onTimeoutReactHandler));
+
+    _classPrivateMethodGet(this, _clearTimeout, _clearTimeout2).call(this);
+  }
+
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type');
+  }
+
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get persistent() {
+    return getBooleanAttribute(this, 'persistent');
+  }
+
+  set persistent(isPersistent) {
+    updateBooleanAttribute(this, 'persistent', isPersistent);
+  }
+
+  static get observedAttributes() {
+    return ['text', 'type', 'persistent'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'type':
+        {
+          assertType(newVal);
+          break;
+        }
+
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+
+      case 'persistent':
+        {
+          _classPrivateMethodGet(this, _updateTimeout, _updateTimeout2).call(this);
+
+          break;
+        }
+    }
+  }
+
+}));
+
+function _updateTimeout2() {
+  if (this.persistent) {
+    _classPrivateMethodGet(this, _clearTimeout, _clearTimeout2).call(this);
+
+    return;
+  }
+
+  if (_classPrivateFieldGet(this, _tid) === null) {
+    _classPrivateFieldSet(this, _tid, window.setTimeout(_classPrivateFieldGet(this, _onTimeout), TIMEOUT));
+  }
+}
+
+function _clearTimeout2() {
+  if (_classPrivateFieldGet(this, _tid) !== null) {
+    window.clearTimeout(_classPrivateFieldGet(this, _tid));
+
+    _classPrivateFieldSet(this, _tid, null);
+  }
+}

package/toast/types.d.ts

@@ -0,0 +1,28 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchToastType = 'info' | 'warn' | 'error' | 'success';
+export declare type TSinchToastElement = HTMLElement & {
+    /** Type */
+    type: TSinchToastType;
+    /** Text */
+    text: string;
+    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    persistent: boolean;
+    /** Timeout event */
+    addEventListener(type: '-timeout', listener: (e: CustomEvent<void>) => void): void;
+    /** Type */
+    setAttribute(name: 'type', value: TSinchToastType): void;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    setAttribute(name: 'persistent', value: ''): void;
+};
+export declare type TSinchToastReact = TSinchElementReact<TSinchToastElement> & {
+    /** Type */
+    type: TSinchToastType;
+    /** Text */
+    text: string;
+    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    persistent?: boolean;
+    /** Timeout handler */
+    'on-timeout'?: (e: CustomEvent<void>) => void;
+};

package/toast/types.js

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

package/toast/utils.d.ts

@@ -0,0 +1,5 @@
+import type { TSinchToastType } from './types';
+export declare const typeValues: readonly TSinchToastType[];
+declare type TAssertType = (value: string | null) => asserts value is TSinchToastType;
+export declare const assertType: TAssertType;
+export {};

package/toast/utils.js

@@ -0,0 +1,6 @@
+export const typeValues = ['info', 'success', 'warn', 'error'];
+export const assertType = value => {
+  if (value === null || !typeValues.includes(value)) {
+    throw new Error(`sinch-toast: invalid type attribute: ${value}`);
+  }
+};

package/toast-manager/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 { TSinchToastManagerElement, TSinchToastManagerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast-manager': TSinchToastManagerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toast-manager': TSinchToastManagerElement;
+    }
+}