@nectary/components 0.36.0 → 0.37.0

package/select/types.d.ts

@@ -3,16 +3,10 @@ import type { SyntheticEvent } from 'react';
 export declare type TSinchSelectElement = HTMLElement & {
     /** Value that matches one of the options `value` */
     value: string;
-    /** Label */
-    label: string;
     /** Text that appears when it has no value set */
     placeholder: string | null;
-    /** Optional text */
-    optionalText: string | null;
-    /** Additional text */
-    additionalText: string | null;
-    /** Invalid text, controls the overall invalid state */
-    invalidText: string | null;
+    /** Invalid state */
+    invalid: boolean;
     /** Disabled */
     disabled: boolean;
     /** Number of visible at the same time options in the list */
@@ -20,20 +14,16 @@ export declare type TSinchSelectElement = HTMLElement & {
     readonly dropdownRect: TRect;
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Focus event */
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
     /** Value that matches one of the options `value` */
     setAttribute(name: 'value', value: string): void;
-    /** Label */
-    setAttribute(name: 'label', value: string): void;
     /** Text that appears when it has no value set */
     setAttribute(name: 'placeholder', value: string): void;
-    /** Optional text */
-    setAttribute(name: 'optionaltext', value: string): void;
-    /** Additional text */
-    setAttribute(name: 'additionaltext', value: string): void;
-    /** Invalid text, controls the overall invalid state */
-    setAttribute(name: 'invalidtext', value: string): void;
+    /** Invalid state */
+    setAttribute(name: 'invalid', value: ''): void;
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
     /** Number of visible at the same time options in the list */
@@ -42,18 +32,12 @@ export declare type TSinchSelectElement = HTMLElement & {
 export declare type TSinchSelectReact = TSinchElementReact<TSinchSelectElement> & {
     /** Value that matches one of the options `value` */
     value: string;
-    /** Label */
-    label: string;
     /** Label that is used for a11y – might be different from `label` */
     'aria-label': string;
     /** Text that appears when it has no value set */
     placeholder?: string;
-    /** Optional text */
-    optionalText?: string;
-    /** Additional text */
-    additionalText?: string;
-    /** Invalid text, controls the overall invalid state */
-    invalidText?: string;
+    /** Invalid state */
+    invalid?: boolean;
     /** Disabled */
     disabled?: boolean;
     /** Number of visible at the same time options in the list */
@@ -62,6 +46,8 @@ export declare type TSinchSelectReact = TSinchElementReact<TSinchSelectElement>
     onChange?: (e: SyntheticEvent<TSinchSelectElement, CustomEvent<string>>) => void;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
+    /** Focus handler */
     'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/select-option/types.d.ts

@@ -1,3 +1,26 @@
-import type { TSinchDropdownTextOptionElement, TSinchDropdownTextOptionReact } from '../dropdown-text-option/types';
-export declare type TSinchSelectOptionElement = TSinchDropdownTextOptionElement;
-export declare type TSinchSelectOptionReact = TSinchDropdownTextOptionReact;
+import type { TSinchElementReact } from '../types';
+export declare type TSinchSelectOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Text */
+    text: string;
+    /** Disabled */
+    disabled: boolean;
+    readonly icon: Element | null;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchSelectOptionReact = TSinchElementReact<TSinchSelectOptionElement> & {
+    /** Value */
+    value: string;
+    /** Text */
+    text: string;
+    /** Disabled */
+    disabled?: boolean;
+    /** Label that is used for a11y */
+    'aria-label': string;
+};

package/tag/index.js

@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icons/cancel';
 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:auto;flex:1}</style><div id="wrapper"><slot name="icon"></slot><span id="text"></span><slot name="close"></slot></div>';
+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 template = document.createElement('template');
 template.innerHTML = templateHTML;

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, _onInputFocus, _onInputBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
+var _$input, _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, 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 templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#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);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#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([invalid]:not([invalid=false])) #input:enabled{border-color:var(--sinch-color-text-invalid)}</style><textarea id="input"></textarea>';
 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(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-textarea', (_$input = 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();
 
@@ -20,26 +20,6 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$optionalText, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$additionalText, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$invalidText, {
-      writable: true,
-      value: void 0
-    });
-
     _classPrivateFieldInitSpec(this, _cursorPos, {
       writable: true,
       value: null
@@ -142,14 +122,6 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
-
-    _classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
-
-    _classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
-
-    _classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
   }
 
   connectedCallback() {
@@ -192,10 +164,14 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
   }
 
   static get observedAttributes() {
-    return ['value', 'placeholder', 'label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled', 'rows'];
+    return ['value', 'placeholder', 'invalid', 'disabled', 'rows'];
   }
 
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'value':
         {
@@ -217,12 +193,6 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
           break;
         }
 
-      case 'label':
-        {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
-          break;
-        }
-
       case 'placeholder':
         {
           _classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
@@ -230,23 +200,9 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
           break;
         }
 
-      case 'optionaltext':
-        {
-          _classPrivateFieldGet(this, _$optionalText).textContent = newVal;
-          break;
-        }
-
-      case 'additionaltext':
-        {
-          _classPrivateFieldGet(this, _$additionalText).textContent = newVal;
-          break;
-        }
-
-      case 'invalidtext':
+      case 'invalid':
         {
-          const isInvalid = newVal !== null && newVal !== '';
-          _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
-          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isAttrTrue(newVal));
           break;
         }
 
@@ -286,36 +242,12 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
     return getAttribute(this, 'placeholder', null);
   }
 
-  set label(value) {
-    updateAttribute(this, 'label', value);
-  }
-
-  get label() {
-    return getAttribute(this, 'label', '');
-  }
-
-  set optionalText(value) {
-    updateAttribute(this, 'optionaltext', value);
-  }
-
-  get optionalText() {
-    return getAttribute(this, 'optionaltext', null);
-  }
-
-  set additionalText(value) {
-    updateAttribute(this, 'additionaltext', value);
-  }
-
-  get additionalText() {
-    return getAttribute(this, 'additionaltext', null);
-  }
-
-  set invalidText(value) {
-    updateAttribute(this, 'invalidtext', value);
+  set invalid(value) {
+    updateBooleanAttribute(this, 'invalid', value);
   }
 
-  get invalidText() {
-    return getAttribute(this, 'invalidtext', null);
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
   }
 
   set disabled(isDisabled) {

package/textarea/types.d.ts

@@ -1,44 +1,60 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchTextareaElement = HTMLElement & {
+    /** Value */
     value: string;
-    label: string;
+    /** Text that appears in the text field when it has no value set */
     placeholder: string | null;
-    optionalText: string | null;
-    invalidText: string | null;
-    additionalText: string | null;
+    /** Disabled */
     disabled: boolean;
+    /** Invalid state */
+    invalid: boolean;
     selectionStart: HTMLTextAreaElement['selectionStart'];
     selectionEnd: HTMLTextAreaElement['selectionEnd'];
     selectionDirection: HTMLTextAreaElement['selectionDirection'];
+    /** Number of rows */
     rows: HTMLTextAreaElement['rows'];
+    /** Whether the text field is resizable */
     resizable: boolean;
+    /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** 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;
-    setAttribute(name: 'label', value: string): void;
+    /** Text that appears in the text field when it has no value set */
     setAttribute(name: 'placeholder', value: string): void;
-    setAttribute(name: 'optionaltext', value: string): void;
-    setAttribute(name: 'invalidtext', value: string): void;
-    setAttribute(name: 'additionaltext', value: string): void;
+    /** Invalid state */
+    setAttribute(name: 'invalid', value: ''): void;
+    /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Number of rows */
     setAttribute(name: 'rows', value: string): void;
+    /** Whether the text field is resizable */
     setAttribute(name: 'resizable', value: ''): void;
 };
 export declare type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
+    /** Value */
     value: string;
-    label: string;
+    /** Text that appears in the text field when it has no value set */
     placeholder?: string;
-    optionalText?: string;
-    invalidText?: string;
-    additionalText?: string;
+    /** Disabled */
     disabled?: boolean;
+    /** Invalid state */
+    invalid?: boolean;
     'aria-label': string;
+    /** Number of rows */
     rows?: number;
+    /** Whether the text field is resizable */
     resizable?: boolean;
+    /** @deprecated Change value handler */
     onChange?: (e: SyntheticEvent<TSinchTextareaElement, CustomEvent<string>>) => void;
+    /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
+    /** Focus handler */
     'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/time-picker/index.js

@@ -194,6 +194,8 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
         switch (e.key) {
           case 'ArrowUp':
             {
+              e.preventDefault();
+
               _classPrivateFieldSet(this, _hour, (_classPrivateFieldGet(this, _hour) + 1) % 24);
 
               _classPrivateMethodGet(this, _render, _render2).call(this);
@@ -203,6 +205,8 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
 
           case 'ArrowDown':
             {
+              e.preventDefault();
+
               _classPrivateFieldSet(this, _hour, (_classPrivateFieldGet(this, _hour) + 23) % 24);
 
               _classPrivateMethodGet(this, _render, _render2).call(this);
@@ -219,6 +223,8 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
         switch (e.key) {
           case 'ArrowUp':
             {
+              e.preventDefault();
+
               _classPrivateFieldSet(this, _minute, (_classPrivateFieldGet(this, _minute) + 1) % 60);
 
               _classPrivateMethodGet(this, _render, _render2).call(this);
@@ -228,6 +234,8 @@ defineCustomElement('sinch-time-picker', (_$pickerHours = new WeakMap(), _$picke
 
           case 'ArrowDown':
             {
+              e.preventDefault();
+
               _classPrivateFieldSet(this, _minute, (_classPrivateFieldGet(this, _minute) + 59) % 60);
 
               _classPrivateMethodGet(this, _render, _render2).call(this);

package/utils.d.ts

@@ -8,6 +8,7 @@ declare global {
 }
 export declare class NectaryElement extends HTMLElement {
     attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
+    __version: string;
 }
 export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;
 export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;

package/utils.js

@@ -1,3 +1,5 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import pkg from './package.json';
 const nectaryDefinitions = new Map();
 let nectaryRegistry = null;
 export const defineCustomElement = (name, constructor) => {
@@ -27,6 +29,12 @@ export const setNectaryRegistry = registry => {
   nectaryDefinitions.clear();
 };
 export class NectaryElement extends HTMLElement {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, '__version', pkg.version);
+  }
+
   attachShadow(options) {
     return super.attachShadow({
       mode: 'closed',

package/vertical-stepper-item/index.js

@@ -10,7 +10,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 import '../icons/check';
 import '../icons/exclamation';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:100%;min-height:68px;display:flex;flex-direction:column}#circle-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0}#circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-icon-size:20px}#label-wrapper{margin-top:4px;min-width:0;flex:1}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}#content{display:none;padding:16px 0 16px 40px}#progress{position:absolute;width:1px;left:16px;top:32px;bottom:0;background-color:var(--sinch-color-snow-700);transform:translateX(-50%)}#bar{position:absolute;width:1px;height:0;background-color:var(--sinch-color-stormy-400);left:0;top:0}:host(:last-of-type) #progress{display:none}:host([data-progress=active]) #content{display:block}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-error-200);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}:host([data-progress=done]) #bar{height:100%}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><div id="circle-wrapper"><div id="circle" aria-hidden="true"><sinch-icon-check id="icon-success"></sinch-icon-check><sinch-icon-exclamation id="icon-error"></sinch-icon-exclamation><span id="circle-text"></span></div><div id="label-wrapper"><div id="label"></div><div id="description"></div></div></div><div id="content"><slot></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;min-height:68px}#circle-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0}#circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-icon-size:20px}#label-wrapper{margin-top:4px;min-width:0;flex:1}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}#content{display:none;padding:16px 0 16px 40px}#progress{position:absolute;width:1px;left:16px;top:32px;bottom:0;background-color:var(--sinch-color-snow-700);transform:translateX(-50%)}#bar{position:absolute;width:1px;height:0;background-color:var(--sinch-color-stormy-400);left:0;top:0}:host(:last-of-type) #progress{display:none}:host([data-progress=active]) #content{display:block}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-error-200);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}:host([data-progress=done]) #bar{height:100%}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><div id="circle-wrapper"><div id="circle" aria-hidden="true"><sinch-icon-check id="icon-success"></sinch-icon-check><sinch-icon-exclamation id="icon-error"></sinch-icon-exclamation><span id="circle-text"></span></div><div id="label-wrapper"><div id="label"></div><div id="description"></div></div></div><div id="content"><slot></slot></div></div>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;