@nectary/components 0.44.1 → 0.45.0

package/icon-button/index.js

@@ -1,20 +1,27 @@
 import '../tooltip';
-import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;contain:size;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500));--sinch-icon-button-shape-radius:var(--sinch-shape-radius-l)}button::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--sinch-icon-button-shape-radius);pointer-events:none;box-sizing:border-box;border:1px solid transparent;background-color:transparent;mix-blend-mode:multiply}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}}button:enabled:hover::before{background-color:#f1f2f4}button:enabled:active::before{background-color:#e3e6e8}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false])) #button{width:32px;height:32px;--sinch-icon-button-shape-radius:var(--sinch-shape-radius-m)}button>*{pointer-events:none}</style><sinch-tooltip id="tooltip" inverted><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute, Context, getAttribute } from '../utils';
+import { assertSizeEx, DEFAULT_SIZE, sizeExValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-icon-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:var(--sinch-size);height:var(--sinch-size);cursor:pointer;contain:size;--sinch-color-icon:var(--sinch-icon-button-color-icon)}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-icon-button-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-icon-button-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-icon-button-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}:host([data-size=xs]){--sinch-size:var(--sinch-size-xs);--sinch-size-icon:var(--sinch-icon-button-icon-size-xs);--sinch-shape-radius:var(--sinch-shape-radius-xs)}:host([type=primary]){--sinch-icon-button-color-background:var(--sinch-icon-button-primary-color-background);--sinch-icon-button-color-background-hover:var(--sinch-icon-button-primary-color-background-hover);--sinch-icon-button-color-background-active:var(--sinch-icon-button-primary-color-background-active);--sinch-icon-button-color-background-disabled:var(--sinch-icon-button-primary-color-background-disabled);--sinch-icon-button-color-border:var(--sinch-icon-button-primary-color-border);--sinch-icon-button-color-border-hover:var(--sinch-icon-button-primary-color-border-hover);--sinch-icon-button-color-border-active:var(--sinch-icon-button-primary-color-border-active);--sinch-icon-button-color-border-disabled:var(--sinch-icon-button-primary-color-border-disabled);--sinch-icon-button-color-icon:var(--sinch-icon-button-primary-color-icon);--sinch-icon-button-color-icon-hover:var(--sinch-icon-button-primary-color-icon-hover);--sinch-icon-button-color-icon-active:var(--sinch-icon-button-primary-color-icon-active);--sinch-icon-button-color-icon-disabled:var(--sinch-icon-button-primary-color-icon-disabled);--sinch-icon-button-mix-blend-mode:var(--sinch-icon-button-primary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=secondary]){--sinch-icon-button-color-background:var(--sinch-icon-button-secondary-color-background);--sinch-icon-button-color-background-hover:var(--sinch-icon-button-secondary-color-background-hover);--sinch-icon-button-color-background-active:var(--sinch-icon-button-secondary-color-background-active);--sinch-icon-button-color-background-disabled:var(--sinch-icon-button-secondary-color-background-disabled);--sinch-icon-button-color-border:var(--sinch-icon-button-secondary-color-border);--sinch-icon-button-color-border-hover:var(--sinch-icon-button-secondary-color-border-hover);--sinch-icon-button-color-border-active:var(--sinch-icon-button-secondary-color-border-active);--sinch-icon-button-color-border-disabled:var(--sinch-icon-button-secondary-color-border-disabled);--sinch-icon-button-color-icon:var(--sinch-icon-button-secondary-color-icon);--sinch-icon-button-color-icon-hover:var(--sinch-icon-button-secondary-color-icon-hover);--sinch-icon-button-color-icon-active:var(--sinch-icon-button-secondary-color-icon-active);--sinch-icon-button-color-icon-disabled:var(--sinch-icon-button-secondary-color-icon-disabled);--sinch-icon-button-mix-blend-mode:var(--sinch-icon-button-secondary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=tertiary]){--sinch-icon-button-color-background:var(--sinch-icon-button-tertiary-color-background);--sinch-icon-button-color-background-hover:var(--sinch-icon-button-tertiary-color-background-hover);--sinch-icon-button-color-background-active:var(--sinch-icon-button-tertiary-color-background-active);--sinch-icon-button-color-background-disabled:var(--sinch-icon-button-tertiary-color-background-disabled);--sinch-icon-button-color-border:var(--sinch-icon-button-tertiary-color-border);--sinch-icon-button-color-border-hover:var(--sinch-icon-button-tertiary-color-border-hover);--sinch-icon-button-color-border-active:var(--sinch-icon-button-tertiary-color-border-active);--sinch-icon-button-color-border-disabled:var(--sinch-icon-button-tertiary-color-border-disabled);--sinch-icon-button-color-icon:var(--sinch-icon-button-tertiary-color-icon);--sinch-icon-button-color-icon-hover:var(--sinch-icon-button-tertiary-color-icon-hover);--sinch-icon-button-color-icon-active:var(--sinch-icon-button-tertiary-color-icon-active);--sinch-icon-button-color-icon-disabled:var(--sinch-icon-button-tertiary-color-icon-disabled);--sinch-icon-button-mix-blend-mode:var(--sinch-icon-button-tertiary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-0)}#button::before{content:"";position:absolute;inset:0;border-radius:var(--sinch-shape-radius);border:1px solid var(--sinch-icon-button-color-border);background-color:var(--sinch-icon-button-color-background);box-shadow:var(--sinch-elevation-level);pointer-events:none;mix-blend-mode:var(--sinch-icon-button-mix-blend-mode)}#button:focus-visible::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-shape-radius) + 3px);pointer-events:none}#button:disabled{cursor:initial;--sinch-color-icon:var(--sinch-icon-button-color-icon-disabled)}#button:disabled::before{background-color:var(--sinch-icon-button-color-background-disabled);border-color:var(--sinch-icon-button-color-border-disabled);box-shadow:var(--sinch-elevation-level-0)}#button:enabled:hover{--sinch-color-icon:var(--sinch-icon-button-color-icon-hover)}#button:enabled:hover::before{background-color:var(--sinch-icon-button-color-background-hover);border-color:var(--sinch-icon-button-color-border-hover)}#button:enabled:active{--sinch-color-icon:var(--sinch-icon-button-color-icon-active)}#button:enabled:active::before{background-color:var(--sinch-icon-button-color-background-active);border-color:var(--sinch-icon-button-color-border-active);box-shadow:var(--sinch-elevation-level-0)}#content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}#button *{pointer-events:none}</style><sinch-tooltip id="tooltip" inverted><button id="button"><div id="content"><slot name="icon"></slot></div></button></sinch-tooltip>';
+import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon-button', class extends NectaryElement {
   #$button;
   #$tooltip;
   #controller = null;
+  #sizeContext;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
     this.#$tooltip = shadowRoot.querySelector('#tooltip');
+    this.#sizeContext = new Context(this.#$button, 'size');
   }
   connectedCallback() {
+    super.connectedCallback();
     this.#controller = new AbortController();
     const options = {
       signal: this.#controller.signal
@@ -26,14 +33,21 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     this.addEventListener('-click', this.#onClickReactHandler, options);
     this.addEventListener('-focus', this.#onFocusReactHandler, options);
     this.addEventListener('-blur', this.#onBlurReactHandler, options);
+    subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
+    this.#sizeContext.listen(this.#controller.signal);
+    this.#onSizeUpdate();
   }
   disconnectedCallback() {
+    super.disconnectedCallback();
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['disabled', 'aria-label'];
+    return ['type', 'size', 'disabled', 'aria-label', 'data-size'];
   }
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'disabled':
         {
@@ -47,19 +61,45 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
           updateAttribute(this.#$tooltip, 'text', newVal);
           break;
         }
+      case 'type':
+        {
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
+          break;
+        }
+      case 'size':
+        {
+          updateAttribute(this, 'data-size', newVal);
+          break;
+        }
+      case 'data-size':
+        {
+          if ('production' !== 'production') {
+            assertSizeEx(newVal, 'sinch-icon-button');
+          }
+          this.#onSizeUpdate();
+          break;
+        }
     }
   }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type', 'tertiary');
+  }
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-  set small(isSmall) {
-    updateBooleanAttribute(this, 'small', isSmall);
+  set size(size) {
+    updateLiteralAttribute(this, sizeExValues, 'size', size);
   }
-  get small() {
-    return getBooleanAttribute(this, 'small');
+  get size() {
+    return getLiteralAttribute(this, sizeExValues, 'size', DEFAULT_SIZE);
   }
   get tooltipRect() {
     return this.#$tooltip.tooltipRect;
@@ -73,6 +113,34 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   blur() {
     this.#$button.blur();
   }
+  #onSizeUpdate() {
+    if (!this.isConnected) {
+      return;
+    }
+    const size = getAttribute(this, 'data-size', DEFAULT_SIZE);
+    this.#sizeContext.dispatch(size);
+  }
+  #onContextSize = e => {
+    if (this.hasAttribute('size')) {
+      return;
+    }
+    switch (e.detail) {
+      case 'l':
+        {
+          this.setAttribute('data-size', 'm');
+          break;
+        }
+      case 'm':
+        {
+          this.setAttribute('data-size', 's');
+          break;
+        }
+      default:
+        {
+          this.setAttribute('data-size', 'xs');
+        }
+    }
+  };
   #onButtonClick = () => {
     this.dispatchEvent(new CustomEvent('-click'));
   };

package/icon-button/types.d.ts

@@ -1,9 +1,13 @@
 import type { TRect, TSinchElementReact } from '../types';
+import type { TSinchSizeEx } from '../utils/size';
+export declare type TSinchIconButtonType = 'primary' | 'secondary' | 'tertiary';
 export declare type TSinchIconButtonElement = HTMLElement & {
+    /** Type, `tertiary` by default */
+    type: TSinchIconButtonType;
+    /** Size, `m` by default */
+    size: TSinchSizeEx;
     /** Disabled */
     disabled: boolean;
-    /** Small */
-    small: boolean;
     readonly tooltipRect: TRect;
     /** Click event */
     addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
@@ -11,16 +15,20 @@ export declare type TSinchIconButtonElement = HTMLElement & {
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
     /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Type, `tertiary` by default */
+    setAttribute(name: 'type', value: string): void;
+    /** Size, `m` by default */
+    setAttribute(name: 'size', value: string): void;
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
-    /** Small */
-    setAttribute(name: 'small', value: ''): void;
 };
 export declare type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonElement> & {
+    /** Type, `tertiary` by default */
+    type?: TSinchIconButtonType;
+    /** Size, `m` by default */
+    size?: TSinchSizeEx;
     /** Disabled */
     disabled?: boolean;
-    /** Small */
-    small?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
     /** Click event handler */

package/icon-button/utils.d.ts

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

package/icon-button/utils.js

@@ -0,0 +1,9 @@
+export const typeValues = ['primary', 'secondary', 'tertiary'];
+export const assertType = value => {
+  if (value === null || value.length === 0) {
+    return;
+  }
+  if (!typeValues.includes(value)) {
+    throw new Error(`sinch-icon-button: invalid type attribute: ${value}`);
+  }
+};

package/icons/create-icon-class.js

@@ -1,5 +1,5 @@
 import { NectaryElement, updateAttribute } from '../utils';
-const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;fill:var(--sinch-color-icon,--sinch-color-text-default);height:var(--sinch-size-icon,24px)}</style>';
+const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;fill:var(--sinch-color-icon,var(--sinch-color-stormy-500));height:var(--sinch-size-icon,24px)}</style>';
 export const createIconClass = templateHTML => {
   const template = document.createElement('template');
   template.innerHTML = iconStylesHtml + templateHTML;

package/inline-alert/index.js

@@ -64,7 +64,9 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
     switch (name) {
       case 'type':
         {
-          assertType(newVal);
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
           break;
         }
       case 'text':

package/input/index.d.ts

@@ -1,3 +1,6 @@
+import '../icon-button';
+import '../icons/close';
+import '../stop-events';
 import type { TSinchInputElement, TSinchInputReact } from './types';
 declare global {
     namespace JSX {

package/input/index.js

@@ -1,57 +1,132 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 12px 0 44px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#border{position:absolute;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);left:0;right:0;top:0;bottom: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-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#input:focus+#border{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon{display:flex;position:absolute;left:12px;top:12px;pointer-events:none;--sinch-size-icon:24px}#icon.empty{display:none}#icon.empty~#input{padding-left:12px}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:8px}#right.empty{display:none}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="input-wrapper"><div id="icon"><slot name="icon"></slot></div><input id="input" type="text"/><div id="border"></div><div id="right"><slot name="right"></slot></div></div>';
+import '../icon-button';
+import '../icons/close';
+import '../stop-events';
+import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, 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{display:none;--sinch-icon-button-color-icon:var(--sinch-color-text-muted)}#clear.active{display:block}:host([disabled]:not([disabled=false])) #clear{display:none}#wrapper:focus-within #clear{--sinch-icon-button-color-icon:var(--sinch-color-stormy-500)}#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="right"><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><slot name="right"></slot></div></div>';
 import { inputTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-input', class extends NectaryElement {
   #$input;
+  #$clear;
   #$iconSlot;
   #$iconWrapper;
   #$rightSlot;
   #$rightWrapper;
+  #$leftSlot;
+  #$leftWrapper;
+  #$wrapper;
   #cursorPos = null;
   #isPendingDk = false;
+  #controller = null;
+  #sizeContext;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$input = shadowRoot.querySelector('#input');
     this.#$iconSlot = shadowRoot.querySelector('slot[name="icon"]');
-    this.#$iconWrapper = shadowRoot.querySelector('#icon');
+    this.#$iconWrapper = shadowRoot.querySelector('#icon-wrapper');
     this.#$rightSlot = shadowRoot.querySelector('slot[name="right"]');
     this.#$rightWrapper = shadowRoot.querySelector('#right');
+    this.#$leftSlot = shadowRoot.querySelector('slot[name="left"]');
+    this.#$leftWrapper = shadowRoot.querySelector('#left');
+    this.#$clear = shadowRoot.querySelector('#clear');
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
+    this.#sizeContext = new Context(this.#$wrapper, 'size');
   }
   connectedCallback() {
+    super.connectedCallback();
     this.setAttribute('role', 'textbox');
-    this.#$input.addEventListener('input', this.#onInput);
-    this.#$input.addEventListener('compositionstart', this.#onCompositionStart);
-    this.#$input.addEventListener('mousedown', this.#onSelectionChange);
-    this.#$input.addEventListener('keydown', this.#onSelectionChange);
-    this.#$input.addEventListener('focus', this.#onInputFocus);
-    this.#$input.addEventListener('blur', this.#onInputBlur);
-    this.#$iconSlot.addEventListener('slotchange', this.#onIconSlotChange);
-    this.#$rightSlot.addEventListener('slotchange', this.#onRightSlotChange);
-    this.addEventListener('-change', this.#onChangeReactHandler);
-    this.addEventListener('-focus', this.#onFocusReactHandler);
-    this.addEventListener('-blur', this.#onBlurReactHandler);
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$input.addEventListener('input', this.#onInput, options);
+    this.#$input.addEventListener('compositionstart', this.#onCompositionStart, options);
+    this.#$input.addEventListener('mousedown', this.#onSelectionChange, options);
+    this.#$input.addEventListener('keydown', this.#onSelectionChange, options);
+    this.#$input.addEventListener('focus', this.#onInputFocus, options);
+    this.#$input.addEventListener('blur', this.#onInputBlur, options);
+    this.#$clear.addEventListener('click', this.#onClear, options);
+    this.#$iconSlot.addEventListener('slotchange', this.#onIconSlotChange, options);
+    this.#$leftSlot.addEventListener('slotchange', this.#onLeftSlotChange, options);
+    this.#$rightSlot.addEventListener('slotchange', this.#onRightSlotChange, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-focus', this.#onFocusReactHandler, options);
+    this.addEventListener('-blur', this.#onBlurReactHandler, options);
+    this.#sizeContext.listen(this.#controller.signal);
+    subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
     this.#onIconSlotChange();
+    this.#onLeftSlotChange();
     this.#onRightSlotChange();
+    this.#onSizeUpdate();
   }
   disconnectedCallback() {
-    this.#$input.removeEventListener('input', this.#onInput);
-    this.#$input.removeEventListener('compositionstart', this.#onCompositionStart);
-    this.#$input.removeEventListener('mousedown', this.#onSelectionChange);
-    this.#$input.removeEventListener('keydown', this.#onSelectionChange);
-    this.#$input.removeEventListener('focus', this.#onInputFocus);
-    this.#$input.removeEventListener('blur', this.#onInputBlur);
-    this.#$iconSlot.removeEventListener('slotchange', this.#onIconSlotChange);
-    this.#$rightSlot.removeEventListener('slotchange', this.#onRightSlotChange);
-    this.removeEventListener('-change', this.#onChangeReactHandler);
-    this.removeEventListener('-focus', this.#onFocusReactHandler);
-    this.removeEventListener('-blur', this.#onBlurReactHandler);
+    super.disconnectedCallback();
+    this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['type', 'value', 'placeholder', 'invalid', 'disabled'];
+    return ['type', 'value', 'placeholder', 'invalid', 'disabled', 'size', 'data-size'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'type':
+        {
+          updateLiteralAttribute(this.#$input, inputTypes, 'type', newVal);
+          break;
+        }
+      case 'value':
+        {
+          const nextVal = newVal ?? '';
+          const prevVal = this.#$input.value;
+          if (nextVal !== prevVal) {
+            const prevCursorPos = this.#$input.selectionEnd;
+            const isPrevCursorEnd = prevCursorPos === prevVal.length;
+            this.#$input.value = nextVal;
+            if (!isPrevCursorEnd) {
+              this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
+            }
+          }
+          setClass(this.#$clear, 'active', nextVal.length > 0);
+          this.#onRightSlotChange();
+          break;
+        }
+      case 'placeholder':
+        {
+          this.#$input.placeholder = newVal ?? '';
+          updateAttribute(this, 'aria-placeholder', newVal);
+          break;
+        }
+      case 'invalid':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isAttrTrue(newVal));
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          this.#$input.disabled = isDisabled;
+          updateBooleanAttribute(this, 'disabled', isDisabled);
+          break;
+        }
+      case 'size':
+        {
+          updateAttribute(this, 'data-size', newVal);
+          break;
+        }
+      case 'data-size':
+        {
+          if ('production' !== 'production') {
+            assertSize(newVal, 'sinch-input');
+          }
+          this.#onSizeUpdate();
+          break;
+        }
+    }
   }
   get nodeName() {
     return 'input';
@@ -86,6 +161,12 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
+  set size(size) {
+    updateLiteralAttribute(this, sizeValues, 'size', size);
+  }
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
+  }
   get selectionStart() {
     return this.#$input.selectionStart;
   }
@@ -104,47 +185,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   set selectionDirection(value) {
     this.#$input.selectionDirection = value;
   }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'type':
-        {
-          updateLiteralAttribute(this.#$input, inputTypes, 'type', newVal);
-          break;
-        }
-      case 'value':
-        {
-          const nextVal = newVal ?? '';
-          const prevVal = this.#$input.value;
-          if (nextVal !== prevVal) {
-            const prevCursorPos = this.#$input.selectionEnd;
-            const isPrevCursorEnd = prevCursorPos === prevVal.length;
-            this.#$input.value = nextVal;
-            if (!isPrevCursorEnd) {
-              this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
-            }
-          }
-          break;
-        }
-      case 'placeholder':
-        {
-          this.#$input.placeholder = newVal ?? '';
-          updateAttribute(this, 'aria-placeholder', newVal);
-          break;
-        }
-      case 'invalid':
-        {
-          updateExplicitBooleanAttribute(this, 'aria-invalid', isAttrTrue(newVal));
-          break;
-        }
-      case 'disabled':
-        {
-          const isDisabled = isAttrTrue(newVal);
-          this.#$input.disabled = isDisabled;
-          updateBooleanAttribute(this, 'disabled', isDisabled);
-          break;
-        }
-    }
-  }
   get focusable() {
     return true;
   }
@@ -162,6 +202,25 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   };
   #onInput = e => {
     e.stopPropagation();
+    this.#handleInput();
+  };
+  #onContextSize = e => {
+    if (this.hasAttribute('size')) {
+      return;
+    }
+    switch (e.detail) {
+      case 'l':
+        {
+          this.setAttribute('data-size', 'm');
+          break;
+        }
+      default:
+        {
+          this.setAttribute('data-size', 's');
+        }
+    }
+  };
+  #handleInput() {
     const nextValue = this.#$input.value;
     const prevValue = this.value;
     if (prevValue !== nextValue) {
@@ -184,12 +243,18 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         detail: nextValue
       }));
     }
-  };
+  }
   #onIconSlotChange = () => {
-    setClass(this.#$iconWrapper, 'empty', this.#$iconSlot.assignedElements().length === 0);
+    const isEmpty = this.#$iconSlot.assignedElements().length === 0;
+    setClass(this.#$iconWrapper, 'empty', isEmpty);
+  };
+  #onLeftSlotChange = () => {
+    const isEmpty = this.#$leftSlot.assignedElements().length === 0;
+    setClass(this.#$leftWrapper, 'empty', isEmpty);
   };
   #onRightSlotChange = () => {
-    setClass(this.#$rightWrapper, 'empty', this.#$rightSlot.assignedElements().length === 0);
+    const isEmpty = this.#$rightSlot.assignedElements().length === 0 && this.value.length === 0;
+    setClass(this.#$rightWrapper, 'empty', isEmpty);
   };
   #onInputFocus = () => {
     this.dispatchEvent(new CustomEvent('-focus'));
@@ -197,6 +262,18 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   #onInputBlur = () => {
     this.dispatchEvent(new CustomEvent('-blur'));
   };
+  #onClear = () => {
+    this.#$input.value = '';
+    this.#$input.focus();
+    this.#handleInput();
+  };
+  #onSizeUpdate() {
+    if (!this.isConnected) {
+      return;
+    }
+    const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
+    this.#sizeContext.dispatch(size);
+  }
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/input/types.d.ts

@@ -1,4 +1,5 @@
 import type { 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 & {
@@ -12,6 +13,8 @@ export declare type TSinchInputElement = HTMLElement & {
     invalid: boolean;
     /** Disabled */
     disabled: boolean;
+    /** Size, `m` by default */
+    size: TSinchSize;
     selectionStart: number | null;
     selectionEnd: number | null;
     selectionDirection: 'forward' | 'backward' | 'none' | null;
@@ -31,6 +34,8 @@ export declare type TSinchInputElement = HTMLElement & {
     setAttribute(name: 'invalid', value: ''): void;
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Size, `m` by default */
+    setAttribute(name: 'size', value: TSinchSize): void;
 };
 export declare type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
     /** Controlled value, doesn't change on its own and requres an onChange-value state loop */
@@ -45,6 +50,8 @@ export declare type TSinchInputReact = TSinchElementReact<TSinchInputElement> &
     invalid?: boolean;
     /** Disabled */
     disabled?: boolean;
+    /** Size, `m` by default */
+    size?: TSinchSize;
     /** @deprecated Change value handler */
     onChange?: (e: SyntheticEvent<TSinchInputElement, CustomEvent<string>>) => void;
     /** Change value handler */

package/link/index.js

@@ -1,7 +1,7 @@
 import '../icons/open-in-new';
 import '../icons/arrow-forward';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-font-text-m);font-size:inherit;line-height:inherit;color:var(--sinch-color-tropical-500);border-radius:.5em;--sinch-size-icon:1em;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);--sinch-color-icon:var(--sinch-color-tropical-600)}a:focus-visible{outline:2px solid var(--sinch-color-border-focus);outline-offset:2px}@supports not selector(:focus-visible){a:focus{outline:2px solid var(--sinch-color-border-focus);outline-offset:2px}}#external-icon{display:none;margin-right:.2em;vertical-align:-.2em}#standalone-icon{display:none}:host([external]:not([external=false])) #external-icon{display:inline-block}:host([standalone]:not([standalone=false])){display:block}:host([standalone]:not([standalone=false])) a{display:block;font:var(--sinch-font-text-m);font-weight:var(--sinch-font-weight-emphasized);text-decoration:none;border-radius:var(--sinch-shape-radius-m);width:fit-content;--sinch-size-icon:24px}:host([standalone]:not([standalone=false])) #external-icon{margin-right:8px;vertical-align:-7px}:host([standalone]:not([standalone=false]):is([external=false],:not([external]))) #standalone-icon{display:inline-block;vertical-align:-7px;margin-left:8px}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-200)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon-open-in-new id="external-icon"></sinch-icon-open-in-new><span id="content"></span><sinch-icon-arrow-forward id="standalone-icon"></sinch-icon-arrow-forward></a>';
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-font-text-m);font-size:inherit;line-height:inherit;color:var(--sinch-color-tropical-500);border-radius:.5em;--sinch-size-icon:1em;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);--sinch-color-icon:var(--sinch-color-tropical-600)}a:focus-visible{outline:2px solid var(--sinch-color-border-focus);outline-offset:2px}#external-icon{display:none;margin-right:.2em;vertical-align:-.2em}#standalone-icon{display:none}:host([external]:not([external=false])) #external-icon{display:inline-block}:host([standalone]:not([standalone=false])){display:block}:host([standalone]:not([standalone=false])) a{display:block;font:var(--sinch-font-text-m);font-weight:var(--sinch-font-weight-emphasized);text-decoration:none;border-radius:var(--sinch-shape-radius-m);width:fit-content;--sinch-size-icon:24px}:host([standalone]:not([standalone=false])) #external-icon{margin-right:8px;vertical-align:-7px}:host([standalone]:not([standalone=false]):is([external=false],:not([external]))) #standalone-icon{display:inline-block;vertical-align:-7px;margin-left:8px}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-200)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon-open-in-new id="external-icon"></sinch-icon-open-in-new><span id="content"></span><sinch-icon-arrow-forward id="standalone-icon"></sinch-icon-arrow-forward></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-link', class extends NectaryElement {

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@nectary/components",
-  "version": "0.44.1",
+  "version": "0.45.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
     "**/*/*.js",
     "**/*/*.d.ts",
-    "theme.css",
     "types.d.ts",
     "colors.json"
   ],
@@ -14,8 +13,7 @@
     "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
   },
   "dependencies": {
-    "@babel/runtime": "^7.19.0",
-    "dialog-polyfill": "^0.5.6"
+    "@babel/runtime": "^7.19.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",

package/pagination/index.js

@@ -1,7 +1,7 @@
 import '../icons/keyboard-arrow-left';
 import '../icons/keyboard-arrow-right';
 import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;box-sizing:border-box}button{all:initial;width:28px;height:28px;box-sizing:border-box;cursor:pointer;text-align:center;contain:strict;--sinch-color-icon:var(--sinch-color-stormy-500)}button:disabled{--sinch-color-icon:var(--sinch-color-stormy-100);cursor:initial}button>*{pointer-events:none}.page{border-radius:50%;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-font-emphasized-body);background-color:var(--sinch-color-snow-600);pointer-events:none;cursor:initial}.page.hidden{display:none}</style><div id="wrapper"><button id="left"><sinch-icon-keyboard-arrow-left></sinch-icon-keyboard-arrow-left></button><button class="page"><span>1</span></button><button class="page active"><span>2</span></button><button class="page"><span>3</span></button><button class="page"><span>4</span></button><button class="page"><span>5</span></button><button class="page dots"><span>6</span></button><button class="page"><span>20</span></button><button id="right"><sinch-icon-keyboard-arrow-right></sinch-icon-keyboard-arrow-right></button></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;box-sizing:border-box}button{all:initial;width:28px;height:28px;box-sizing:border-box;cursor:pointer;text-align:center;contain:strict;--sinch-color-icon:var(--sinch-color-stormy-500)}button:disabled{--sinch-color-icon:var(--sinch-color-stormy-100);cursor:initial}button>*{pointer-events:none}.page{border-radius:50%;font:var(--sinch-font-text-m);color:var(--sinch-color-stormy-500)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font-weight:var(--sinch-font-weight-emphasized);background-color:var(--sinch-color-snow-600);pointer-events:none;cursor:initial}.page.hidden{display:none}#left,#right{display:flex;padding:2px;--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon-keyboard-arrow-left></sinch-icon-keyboard-arrow-left></button><button class="page"><span>1</span></button><button class="page active"><span>2</span></button><button class="page"><span>3</span></button><button class="page"><span>4</span></button><button class="page"><span>5</span></button><button class="page dots"><span>6</span></button><button class="page"><span>20</span></button><button id="right"><sinch-icon-keyboard-arrow-right></sinch-icon-keyboard-arrow-right></button></div>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
 const FIRST_BTN_INDEX = 0;