@nectary/components 0.48.1 → 0.49.0

package/emoji-picker/types.d.ts

@@ -1,16 +1,16 @@
 import type { TRect, TSinchElementReact } from '../types';
-export declare type TEmoji = {
+export type TEmoji = {
     emoji: string;
     code: string;
     label: string;
     skins?: TEmoji[];
     tone: number | number[];
 };
-export declare type TEmojiGroup = {
+export type TEmojiGroup = {
     name: string;
     emojis: TEmoji[];
 };
-export declare type TSinchEmojiPickerElement = HTMLElement & {
+export type TSinchEmojiPickerElement = HTMLElement & {
     readonly skinToneButtonRect: TRect;
     readonly searchInputRect: TRect;
     readonly searchClearButtonRect: TRect;
@@ -20,7 +20,7 @@ export declare type TSinchEmojiPickerElement = HTMLElement & {
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
 };
-export declare type TSinchEmojiPickerReact = TSinchElementReact<TSinchEmojiPickerElement> & {
+export type TSinchEmojiPickerReact = TSinchElementReact<TSinchEmojiPickerElement> & {
     /** Change value handler */
     'on-change': (e: CustomEvent<string>) => void;
 };

package/field/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchFieldElement = HTMLElement & {
+export type TSinchFieldElement = HTMLElement & {
     /** Label */
     label: string;
     /** Optional text */
@@ -21,7 +21,7 @@ export declare type TSinchFieldElement = HTMLElement & {
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchFieldReact = TSinchElementReact<TSinchFieldElement> & {
+export type TSinchFieldReact = TSinchElementReact<TSinchFieldElement> & {
     /** Label that shows in UI */
     label: string;
     /** Optional text */

package/file-drop/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchFileDropInvalidType = 'accept' | 'multiple' | 'size';
-export declare type TSinchFileDropElement = HTMLElement & {
+export type TSinchFileDropInvalidType = 'accept' | 'multiple' | 'size';
+export type TSinchFileDropElement = HTMLElement & {
     /** Allows to choose multiple files */
     multiple: boolean;
     /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
@@ -30,7 +30,7 @@ export declare type TSinchFileDropElement = HTMLElement & {
     /** Disabled state */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchFileDropReact = TSinchElementReact<TSinchFileDropElement> & {
+export type TSinchFileDropReact = TSinchElementReact<TSinchFileDropElement> & {
     /** Allows to choose multiple files */
     multiple?: boolean;
     /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */

package/file-picker/index.js

@@ -81,7 +81,6 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
       return;
     }
     const files = Array.from(this.#$input.files);
-
     this.#$input.value = '';
     if (!doFilesSatisfySize(files, this.size)) {
       this.dispatchEvent(new CustomEvent('-invalid', {

package/file-picker/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchFilePickerInvalidType = 'size';
-export declare type TSinchFilePickerElement = HTMLElement & {
+export type TSinchFilePickerInvalidType = 'size';
+export type TSinchFilePickerElement = HTMLElement & {
     /** Allows to choose multiple files */
     multiple: boolean;
     /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
@@ -18,7 +18,7 @@ export declare type TSinchFilePickerElement = HTMLElement & {
     /** Max file size in bytes */
     setAttribute(name: 'size', value: string): void;
 };
-export declare type TSinchFilePickerReact = TSinchElementReact<TSinchFilePickerElement> & {
+export type TSinchFilePickerReact = TSinchElementReact<TSinchFilePickerElement> & {
     /** Allows to choose multiple files */
     multiple?: boolean;
     /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */

package/file-status/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchFileStatusType = 'pending' | 'loading' | 'progress' | 'success' | 'error';
-export declare type TSinchFileStatusElement = HTMLElement & {
+export type TSinchFileStatusType = 'pending' | 'loading' | 'progress' | 'success' | 'error';
+export type TSinchFileStatusElement = HTMLElement & {
     /** File status type */
     type: TSinchFileStatusType;
     /** File name */
@@ -10,7 +10,7 @@ export declare type TSinchFileStatusElement = HTMLElement & {
     /** File name */
     setAttribute(name: 'filename', value: string): void;
 };
-export declare type TSinchFileStatusReact = TSinchElementReact<TSinchFileStatusElement> & {
+export type TSinchFileStatusReact = TSinchElementReact<TSinchFileStatusElement> & {
     /** File status type */
     type: TSinchFileStatusType;
     /** File name */

package/file-status/utils.d.ts

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

package/flag/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchFlagElement = HTMLElement & {
+export type TSinchFlagElement = HTMLElement & {
     /** Flag country code */
     code: string;
     /** Flag country code */
     setAttribute(code: 'name', value: string): void;
 };
-export declare type TSinchFlagReact = TSinchElementReact<TSinchFlagElement> & {
+export type TSinchFlagReact = TSinchElementReact<TSinchFlagElement> & {
     /** Flag country code */
     code: string;
 };

package/flag/utils.js

@@ -1,11 +1,9 @@
 import { getCssVar } from '../utils';
-
 let flagUrl = null;
 export const getFlagUrl = (root, code) => {
   if (code === null || code.length === 0) {
     return '';
   }
-
   if (flagUrl === null) {
     flagUrl = getCssVar(root, '--sinch-flag-src-url');
     if (flagUrl !== null) {

package/grid/types.d.ts

@@ -1,3 +1,3 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchGridElement = HTMLElement;
-export declare type TSinchGridReact = TSinchElementReact<TSinchGridElement>;
+export type TSinchGridElement = HTMLElement;
+export type TSinchGridReact = TSinchElementReact<TSinchGridElement>;

package/grid-item/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchGridItemElement = HTMLElement & {
+export type TSinchGridItemElement = HTMLElement & {
     xl: number | null;
     l: number | null;
     m: number | null;
@@ -9,7 +9,7 @@ export declare type TSinchGridItemElement = HTMLElement & {
     setAttribute(name: 'm', value: string): void;
     setAttribute(name: 's', value: string): void;
 };
-export declare type TSinchGridItemReact = TSinchElementReact<TSinchGridItemElement> & {
+export type TSinchGridItemReact = TSinchElementReact<TSinchGridItemElement> & {
     xl?: number;
     l?: number;
     m?: number;

package/help-tooltip/types.d.ts

@@ -1,3 +1,3 @@
 import type { TSinchTooltipElement, TSinchTooltipReact } from '../tooltip/types';
-export declare type TSinchHelpTooltipElement = TSinchTooltipElement;
-export declare type TSinchHelpTooltipReact = TSinchTooltipReact;
+export type TSinchHelpTooltipElement = TSinchTooltipElement;
+export type TSinchHelpTooltipReact = TSinchTooltipReact;

package/horizontal-stepper/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchHorizontalStepperElement = HTMLElement & {
+export type TSinchHorizontalStepperElement = HTMLElement & {
     /** Current item index, starting from 1 */
     index: string;
     /** Current item index, starting from 1 */
     setAttribute(name: 'index', value: string): void;
 };
-export declare type TSinchHorizontalStepperReact = TSinchElementReact<TSinchHorizontalStepperElement> & {
+export type TSinchHorizontalStepperReact = TSinchElementReact<TSinchHorizontalStepperElement> & {
     /** Current item index, starting from 1 */
     index: string;
     /** Label that is used for a11y */

package/horizontal-stepper-item/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchHorizontalStepperStatusType = 'error' | 'skip';
-export declare type TSinchHorizontalStepperItemElement = HTMLElement & {
+export type TSinchHorizontalStepperStatusType = 'error' | 'skip';
+export type TSinchHorizontalStepperItemElement = HTMLElement & {
     /** Label */
     label: string;
     /** Description */
@@ -14,7 +14,7 @@ export declare type TSinchHorizontalStepperItemElement = HTMLElement & {
     /** Status */
     setAttribute(name: 'status', value: TSinchHorizontalStepperStatusType): void;
 };
-export declare type TSinchHorizontalStepperItemReact = TSinchElementReact<TSinchHorizontalStepperItemElement> & {
+export type TSinchHorizontalStepperItemReact = TSinchElementReact<TSinchHorizontalStepperItemElement> & {
     /** Label */
     label: string;
     /** Description */

package/icon/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchIconElement = HTMLElement & {
+export type TSinchIconElement = HTMLElement & {
     /** Icon name */
     name: string;
     /** Icon name */
     setAttribute(name: 'name', value: string): void;
 };
-export declare type TSinchIconReact = TSinchElementReact<TSinchIconElement> & {
+export type TSinchIconReact = TSinchElementReact<TSinchIconElement> & {
     /** Icon name */
     name: string;
 };

package/icon-button/types.d.ts

@@ -1,7 +1,7 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { TSinchSizeEx } from '../utils/size';
-export declare type TSinchIconButtonType = 'primary' | 'secondary' | 'tertiary';
-export declare type TSinchIconButtonElement = HTMLElement & {
+export type TSinchIconButtonType = 'primary' | 'secondary' | 'tertiary';
+export type TSinchIconButtonElement = HTMLElement & {
     /** Type, `tertiary` by default */
     type: TSinchIconButtonType;
     /** Size, `m` by default */
@@ -22,7 +22,7 @@ export declare type TSinchIconButtonElement = HTMLElement & {
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonElement> & {
+export type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonElement> & {
     /** Type, `tertiary` by default */
     type?: TSinchIconButtonType;
     /** Size, `m` by default */

package/icon-button/utils.d.ts

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

package/icons/types.d.ts

@@ -1,8 +1,8 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchIconElement = HTMLElement & {
+export type TSinchIconElement = HTMLElement & {
     size: number;
     setAttribute(name: 'size', value: string): void;
 };
-export declare type TSinchIconReact = TSinchElementReact<TSinchIconElement> & {
+export type TSinchIconReact = TSinchElementReact<TSinchIconElement> & {
     size?: number;
 };

package/icons-branded/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchIconBrandedElement = HTMLElement & {
+export type TSinchIconBrandedElement = HTMLElement & {
     /** @deprecated */
     size: number;
     inverted: boolean;
@@ -7,7 +7,7 @@ export declare type TSinchIconBrandedElement = HTMLElement & {
     setAttribute(name: 'size', value: string): void;
     setAttribute(name: 'inverted', value: ''): void;
 };
-export declare type TSinchIconBrandedReact = TSinchElementReact<TSinchIconBrandedElement> & {
+export type TSinchIconBrandedReact = TSinchElementReact<TSinchIconBrandedElement> & {
     /** @deprecated */
     size?: number;
     inverted?: boolean;

package/icons-channel/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchIconChannelElement = HTMLElement & {
+export type TSinchIconChannelElement = HTMLElement & {
     /** @deprecated */
     size: number;
     /** @deprecated */
     setAttribute(name: 'size', value: string): void;
 };
-export declare type TSinchIconChannelReact = TSinchElementReact<TSinchIconChannelElement> & {
+export type TSinchIconChannelReact = TSinchElementReact<TSinchIconChannelElement> & {
     /** @deprecated */
     size?: number;
 };

package/illustrations/types.d.ts

@@ -1,7 +1,7 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchIllustrationBackground = 'grey' | 'green' | 'blue' | 'yellow' | 'white';
-export declare type TSinchIllustrationVAlign = 'top' | 'center' | 'bottom';
-export declare type TSinchIllustrationElement = HTMLElement & {
+export type TSinchIllustrationBackground = 'grey' | 'green' | 'blue' | 'yellow' | 'white';
+export type TSinchIllustrationVAlign = 'top' | 'center' | 'bottom';
+export type TSinchIllustrationElement = HTMLElement & {
     size: number;
     background: TSinchIllustrationBackground | null;
     valign: TSinchIllustrationVAlign | null;
@@ -9,7 +9,7 @@ export declare type TSinchIllustrationElement = HTMLElement & {
     setAttribute(name: 'background', value: TSinchIllustrationBackground): void;
     setAttribute(name: 'valign', value: TSinchIllustrationVAlign): void;
 };
-export declare type TSinchIllustrationReact = TSinchElementReact<TSinchIllustrationElement> & {
+export type TSinchIllustrationReact = TSinchElementReact<TSinchIllustrationElement> & {
     size?: number;
     background?: TSinchIllustrationBackground;
     valign?: TSinchIllustrationVAlign;

package/inline-alert/index.d.ts

@@ -1,9 +1,10 @@
-import '../icons/report-problem';
-import '../icons/report';
 import '../icons/check-circle';
 import '../icons/info';
-import '../title';
+import '../icons/report-problem';
+import '../icons/report';
+import '../rich-text';
 import '../text';
+import '../title';
 import type { TSinchInlineAlertElement, TSinchInlineAlertReact } from './types';
 declare global {
     namespace JSX {

package/inline-alert/index.js

@@ -1,11 +1,12 @@
-import '../icons/report-problem';
-import '../icons/report';
 import '../icons/check-circle';
 import '../icons/info';
-import '../title';
+import '../icons/report-problem';
+import '../icons/report';
+import '../rich-text';
 import '../text';
+import '../title';
 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);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-feedback-success-bg)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-feedback-warning-bg)}:host([type=error]) #wrapper{background-color:var(--sinch-color-feedback-invalid-bg)}:host([type=info]) #wrapper{background-color:var(--sinch-color-feedback-info-bg)}:host([type=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-feedback-success-icon)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-feedback-warning-icon)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-feedback-info-icon)}#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{display:flex;flex-direction:column;gap:8px;color:var(--sinch-color-stormy-500);margin-top:4px;align-self:stretch}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-feedback-success-bg)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-feedback-warning-bg)}:host([type=error]) #wrapper{background-color:var(--sinch-color-feedback-invalid-bg)}:host([type=info]) #wrapper{background-color:var(--sinch-color-feedback-info-bg)}:host([type=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-feedback-success-icon)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-feedback-warning-icon)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-feedback-info-icon)}#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-rich-text id="text"></sinch-rich-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;
@@ -71,7 +72,7 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
         }
       case 'text':
         {
-          this.#$text.textContent = newVal;
+          updateAttribute(this.#$text, 'text', newVal);
           break;
         }
       case 'caption':

package/inline-alert/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchInlineAlertType = 'info' | 'success' | 'warn' | 'error';
-export declare type TSinchInlineAlertElement = HTMLElement & {
+export type TSinchInlineAlertType = 'info' | 'success' | 'warn' | 'error';
+export type TSinchInlineAlertElement = HTMLElement & {
     type: TSinchInlineAlertType;
     text: string | null;
     caption: string;
@@ -8,7 +8,7 @@ export declare type TSinchInlineAlertElement = HTMLElement & {
     setAttribute(name: 'text', value: string): void;
     setAttribute(name: 'caption', value: string): void;
 };
-export declare type TSinchInlineAlertReact = TSinchElementReact<TSinchInlineAlertElement> & {
+export type TSinchInlineAlertReact = TSinchElementReact<TSinchInlineAlertElement> & {
     type: TSinchInlineAlertType;
     text?: string;
     caption: string;

package/inline-alert/utils.d.ts

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

package/input/index.js

@@ -3,8 +3,8 @@ import '../icons/close';
 import '../stop-events';
 import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
 import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-input-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-input-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-input-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius);width:100%;height:var(--sinch-size);background-color:var(--sinch-color-bg-primary-light)}#input{all:initial;flex:1;min-width:0;height:100%;padding:0 12px 0 40px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default)}:host([data-size="s"]) #input{padding-left:32px}#input::placeholder{font:var(--sinch-font-text-m);color:var(--sinch-color-text-muted);opacity:1}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}:host([invalid]:not([invalid=false]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled{color:var(--sinch-color-text-disabled)}#input:disabled::placeholder{color:var(--sinch-color-text-disabled)}#input:disabled+#border{border-color:var(--sinch-color-border-disabled)}#input:focus+#border{border-color:var(--sinch-color-border-focus);border-width:2px}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:10px;top:0;bottom:0;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([disabled]:not([disabled=false])) #icon{--sinch-color-icon:var(--sinch-color-border-disabled)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input{padding-left:12px}#clear-wrapper{margin-left:-10px;margin-right:4px}#clear{display:none;--sinch-icon-button-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear[data-focus],:host([value]:not([value=""])) #clear[data-tooltip]{display:block}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><input id="input" type="text"/><div id="border"></div><div id="clear-wrapper"><sinch-stop-events events="keydown"><sinch-icon-button id="clear" aria-label="Clear input value"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></sinch-stop-events></div><div id="right"><slot name="right"></slot></div></div>';
-import { inputTypes } from './utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-input-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-input-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-input-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius);width:100%;height:var(--sinch-size);background-color:var(--sinch-color-bg-primary-light)}#input{all:initial;flex:1;min-width:0;height:100%;padding:0 12px 0 40px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default)}#input::placeholder{font:var(--sinch-font-text-m);color:var(--sinch-color-text-muted);opacity:1}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}#input:disabled{color:var(--sinch-color-text-disabled);-webkit-text-fill-color:var(--sinch-color-text-disabled)}:host([data-size="s"]) #input{padding-left:32px}:host([invalid]:not([invalid=false]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled::placeholder{color:var(--sinch-color-text-disabled)}#input:disabled+#border{border-color:var(--sinch-color-border-disabled)}#input:focus+#border{border-color:var(--sinch-color-border-focus);border-width:2px}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:10px;top:0;bottom:0;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([disabled]:not([disabled=false])) #icon{--sinch-color-icon:var(--sinch-color-text-disabled)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input{padding-left:12px}#clear-wrapper{margin-left:-10px;margin-right:4px}#clear{display:none;--sinch-icon-button-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear[data-focus],:host([value]:not([value=""])) #clear[data-tooltip]{display:block}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><input id="input" type="text"/><div id="border"></div><div id="clear-wrapper"><sinch-stop-events events="keydown"><sinch-icon-button id="clear" aria-label="Clear input value"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></sinch-stop-events></div><div id="right"><slot name="right"></slot></div></div>';
+import { assertType, inputTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-input', class extends NectaryElement {
@@ -73,13 +73,17 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['type', 'value', 'placeholder', 'invalid', 'disabled', 'size', 'data-size'];
+    return ['type', 'value', 'placeholder', 'invalid', 'disabled', 'size', 'autocomplete', 'data-size'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'type':
         {
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
           updateLiteralAttribute(this.#$input, inputTypes, 'type', newVal);
+          updateAttribute(this.#$input, 'spellcheck', newVal === 'password' ? 'false' : null);
           break;
         }
       case 'value':
@@ -128,6 +132,10 @@ defineCustomElement('sinch-input', class extends NectaryElement {
           this.#onSizeUpdate();
           break;
         }
+      case 'autocomplete':
+        {
+          updateAttribute(this.#$input, 'autocomplete', newVal);
+        }
     }
   }
   get nodeName() {
@@ -169,6 +177,12 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   get size() {
     return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
   }
+  set autocomplete(value) {
+    updateAttribute(this, 'autocomplete', value);
+  }
+  get autocomplete() {
+    return getAttribute(this, 'autocomplete', '');
+  }
   get selectionStart() {
     return this.#$input.selectionStart;
   }

package/input/types.d.ts

@@ -1,14 +1,16 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchInputType = 'text' | 'password';
-export declare type TSinchInputElement = HTMLElement & {
+export type TSinchInputType = 'text' | 'password';
+export type TSinchInputElement = HTMLElement & {
     /** Text field type, `text` by default */
     type: TSinchInputType;
     /** Value */
     value: string;
     /** Text that appears in the text field when it has no value set */
     placeholder: string | null;
+    /** The HTML autocomplete attribute */
+    autocomplete: string;
     /** Invalid state */
     invalid: boolean;
     /** Disabled */
@@ -31,6 +33,8 @@ export declare type TSinchInputElement = HTMLElement & {
     setAttribute(name: 'value', value: string): void;
     /** Text that appears in the text field when it has no value set */
     setAttribute(name: 'placeholder', value: string): void;
+    /** The HTML autocomplete attribute */
+    setAttribute(name: 'autocomplete', value: string): void;
     /** Invalid state */
     setAttribute(name: 'invalid', value: ''): void;
     /** Disabled */
@@ -38,13 +42,15 @@ export declare type TSinchInputElement = HTMLElement & {
     /** Size, `m` by default */
     setAttribute(name: 'size', value: TSinchSize): void;
 };
-export declare type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
+export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
     /** Controlled value, doesn't change on its own and requres an onChange-value state loop */
     value: string;
     /** Label that is used for a11y – might be different from `label` */
     'aria-label': string;
     /** Text field type, `text` by default */
     type?: TSinchInputType;
+    /** The HTML autocomplete attribute */
+    autocomplete?: string;
     /** Text that appears in the text field when it has no value set */
     placeholder?: string;
     /** Invalid state */

package/input/utils.d.ts

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

package/input/utils.js

@@ -1 +1,6 @@
-export const inputTypes = ['text', 'password'];
+export const inputTypes = ['text', 'password'];
+export const assertType = value => {
+  if (value !== null && !inputTypes.includes(value)) {
+    throw new Error(`sinch-input: invalid type attribute: ${value}`);
+  }
+};

package/link/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchLinkElement = HTMLElement & {
+export type TSinchLinkElement = HTMLElement & {
     /** Text content of hyperlink */
     text: string;
     /** URL that hyperlink point to */
@@ -31,7 +31,7 @@ export declare type TSinchLinkElement = HTMLElement & {
     /** Prevents default behaviour on hyperlink click */
     setAttribute(name: 'preventdefault', value: ''): void;
 };
-export declare type TSinchLinkReact = TSinchElementReact<TSinchLinkElement> & {
+export type TSinchLinkReact = TSinchElementReact<TSinchLinkElement> & {
     /** Text content of hyperlink */
     text: string;
     /** URL that hyperlink point to */

package/list/types.d.ts

@@ -1,3 +1,3 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchListElement = HTMLElement;
-export declare type TSinchListReact = TSinchElementReact<TSinchListElement>;
+export type TSinchListElement = HTMLElement;
+export type TSinchListReact = TSinchElementReact<TSinchListElement>;

package/list-item/types.d.ts

@@ -1,3 +1,3 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchListItemElement = HTMLElement;
-export declare type TSinchListItemReact = TSinchElementReact<TSinchListItemElement>;
+export type TSinchListItemElement = HTMLElement;
+export type TSinchListItemReact = TSinchElementReact<TSinchListItemElement>;

package/logo/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchLogoElement = HTMLElement & {
+export type TSinchLogoElement = HTMLElement & {
     size: number;
     inverted: boolean;
     setAttribute(name: 'size', value: string): void;
     setAttribute(name: 'inverted', value: ''): void;
 };
-export declare type TSinchLogoReact = TSinchElementReact<TSinchLogoElement> & {
+export type TSinchLogoReact = TSinchElementReact<TSinchLogoElement> & {
     size?: number;
     inverted?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.48.1",
+  "version": "0.49.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -13,18 +13,19 @@
     "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
   },
   "dependencies": {
-    "@babel/runtime": "^7.19.0"
+    "@babel/runtime": "^7.20.13",
+    "xss": "^1.0.14"
   },
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.19.3",
-    "@babel/plugin-transform-runtime": "^7.19.1",
-    "@babel/preset-env": "^7.19.3",
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@types/node": "^17.0.45",
-    "@types/react": "^17.0.50",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.27",
     "babel-plugin-html-inline-minifier": "workspace:^0.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.4"
   }
 }