@nectary/components 1.4.0 → 2.1.0

package/input/index.js

@@ -1,16 +1,11 @@
-import '../icon-button';
-import '../icon';
-import '../stop-events';
-import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getCssVar, 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)}#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 id="icon-clear" slot="icon"></sinch-icon></sinch-icon-button></sinch-stop-events></div><div id="right"><slot name="right"></slot></div></div>';
-import { assertType, inputTypes } from './utils';
+import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>:host{all:initial;display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-local-shape-radius);width:100%;height:var(--sinch-local-size);background-color:var(--sinch-comp-input-color-default-background-initial);--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-l);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-s);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-s)}#input{all:initial;flex:1;flex-basis:0;min-width:0;height:100%;padding:0 12px;font:var(--sinch-comp-input-font-input);color:var(--sinch-comp-input-color-default-text-initial)}#input::placeholder{font:var(--sinch-comp-input-font-placeholder);color:var(--sinch-comp-input-color-default-text-placeholder);opacity:1}#border{position:absolute;border:1px solid var(--sinch-comp-input-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}#input:disabled{color:var(--sinch-comp-input-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-input-color-disabled-text-initial)}#input:disabled+#border{border-color:var(--sinch-comp-input-color-disabled-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-input-color-default-border-focus);border-width:2px}:host([invalid]:not(:focus-within)) #input:enabled+#border{border-color:var(--sinch-comp-input-color-invalid-border-initial)}#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:12px;top:0;bottom:0;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-input-color-default-icon-initial)}:host([disabled]) #icon{--sinch-global-color-icon:var(--sinch-comp-input-color-disabled-icon-initial)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input{padding-left:12px}#icon-wrapper:not(.empty)~#input{padding-left:calc(var(--sinch-global-size-icon) + 20px)}#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"><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;
-  #$iconClear;
   #$iconSlot;
   #$iconWrapper;
   #$rightSlot;
@@ -24,9 +19,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   #sizeContext;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$input = shadowRoot.querySelector('#input');
     this.#$iconSlot = shadowRoot.querySelector('slot[name="icon"]');
@@ -35,8 +28,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#$rightWrapper = shadowRoot.querySelector('#right');
     this.#$leftSlot = shadowRoot.querySelector('slot[name="left"]');
     this.#$leftWrapper = shadowRoot.querySelector('#left');
-    this.#$clear = shadowRoot.querySelector('#clear');
-    this.#$iconClear = shadowRoot.querySelector('#icon-clear');
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
     this.#sizeContext = new Context(this.#$wrapper, 'size');
   }
@@ -53,17 +44,12 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     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.#onClearButtonClick, options);
-    this.#$clear.addEventListener('blur', this.#onClearButtonBlur, options);
-    this.#$clear.addEventListener('-tooltip-show', this.#onClearButtonTooltipShow, options);
-    this.#$clear.addEventListener('-tooltip-hide', this.#onClearButtonTooltipHide, 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);
-    updateAttribute(this.#$iconClear, 'name', getCssVar(this, '--sinch-input-icon-clear'));
     this.#sizeContext.listen(this.#controller.signal);
     subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
     this.#onIconSlotChange();
@@ -76,15 +62,15 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['type', 'value', 'placeholder', 'invalid', 'disabled', 'size', 'autocomplete', 'data-size'];
+    return ['type', 'value', 'placeholder', 'invalid', 'disabled', 'size', 'autocomplete', 'data-size', 'aria-label'];
   }
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'type':
         {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
           updateLiteralAttribute(this.#$input, inputTypes, 'type', newVal);
           updateAttribute(this.#$input, 'spellcheck', newVal === 'password' ? 'false' : null);
           break;
@@ -112,14 +98,16 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         }
       case 'invalid':
         {
-          updateExplicitBooleanAttribute(this, 'aria-invalid', isAttrTrue(newVal));
+          const isInvalid = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          updateBooleanAttribute(this, name, isInvalid);
           break;
         }
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
           this.#$input.disabled = isDisabled;
-          updateBooleanAttribute(this, 'disabled', isDisabled);
+          updateBooleanAttribute(this, name, isDisabled);
           break;
         }
       case 'size':
@@ -129,21 +117,21 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         }
       case 'data-size':
         {
-          if ('production' !== 'production') {
-            assertSize(newVal, 'sinch-input');
-          }
           this.#onSizeUpdate();
           break;
         }
       case 'autocomplete':
         {
-          updateAttribute(this.#$input, 'autocomplete', newVal);
+          updateAttribute(this.#$input, name, newVal);
+          break;
+        }
+      case 'aria-label':
+        {
+          this.#$input.ariaLabel = newVal;
+          break;
         }
     }
   }
-  get nodeName() {
-    return 'input';
-  }
   set type(value) {
     updateAttribute(this, 'type', value);
   }
@@ -204,9 +192,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   set selectionDirection(value) {
     this.#$input.selectionDirection = value;
   }
-  get clearButtonRect() {
-    return getRect(this.#$clear);
-  }
   get focusable() {
     return true;
   }
@@ -279,14 +264,10 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     setClass(this.#$rightWrapper, 'empty', isEmpty);
   };
   #onInputFocus = () => {
-    this.#$clear.setAttribute('data-focus', '');
     this.dispatchEvent(new CustomEvent('-focus'));
   };
-  #onInputBlur = e => {
+  #onInputBlur = () => {
     this.dispatchEvent(new CustomEvent('-blur'));
-    if (e.relatedTarget !== this.#$clear) {
-      this.#$clear.removeAttribute('data-focus');
-    }
   };
   #onSizeUpdate() {
     if (!this.isConnected) {
@@ -295,23 +276,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
     this.#sizeContext.dispatch(size);
   }
-  #onClearButtonClick = () => {
-    this.#$input.value = '';
-    this.#$input.focus();
-    this.#handleInput();
-  };
-  #onClearButtonBlur = e => {
-    if (e.relatedTarget !== this.#$input) {
-      this.#$clear.removeAttribute('data-focus');
-    }
-  };
-  #onClearButtonTooltipShow = () => {
-    this.#$clear.setAttribute('data-tooltip', '');
-  };
-  #onClearButtonTooltipHide = () => {
-    this.#$input.focus();
-    this.#$clear.removeAttribute('data-tooltip');
-  };
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/input/types.d.ts

@@ -1,6 +1,5 @@
-import type { TRect, TSinchElementReact } from '../types';
+import type { TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
-import type { SyntheticEvent } from 'react';
 export type TSinchInputType = 'text' | 'password';
 export type TSinchInputElement = HTMLElement & {
     /** Text field type, `text` by default */
@@ -20,7 +19,6 @@ export type TSinchInputElement = HTMLElement & {
     selectionStart: number | null;
     selectionEnd: number | null;
     selectionDirection: 'forward' | 'backward' | 'none' | null;
-    readonly clearButtonRect: TRect;
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     /** Focus event */
@@ -59,8 +57,6 @@ export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
     disabled?: boolean;
     /** Size, `m` by default */
     size?: TSinchSize;
-    /** @deprecated Change value handler */
-    onChange?: (e: SyntheticEvent<TSinchInputElement, CustomEvent<string>>) => void;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
     /** Focus handler */

package/input/utils.d.ts

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

package/link/index.js

@@ -1,21 +1,17 @@
 import '../icon';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler, getCssVars } 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;white-space:nowrap;--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,#standalone-icon-prefix{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])) #standalone-icon-prefix{display:inline}:host([standalone]:not([standalone=false]):is([external=false],:not([external]))) #standalone-icon{display:inline-block;vertical-align:-7px}: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)}#content{white-space:var(--sinch-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon id="external-icon"></sinch-icon><span id="content"></span><span id="standalone-icon-prefix">&nbsp;</span><sinch-icon id="standalone-icon"></sinch-icon></a>';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler } from '../utils';
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#standalone-icon-prefix{display:none}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-right:.2em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;margin-right:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #standalone-icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon id="external-icon" name="open_in_new"></sinch-icon><span id="content"></span><span id="standalone-icon-prefix">&nbsp;</span><sinch-icon id="standalone-icon" name="arrow_forward"></sinch-icon></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-link', class extends NectaryElement {
   #$anchor;
   #$text;
-  #$iconStandalone;
-  #$iconExternal;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$anchor = shadowRoot.querySelector('a');
     this.#$text = shadowRoot.querySelector('#content');
-    this.#$iconExternal = shadowRoot.querySelector('#external-icon');
-    this.#$iconStandalone = shadowRoot.querySelector('#standalone-icon');
   }
   connectedCallback() {
     this.setAttribute('role', 'link');
@@ -25,7 +21,6 @@ defineCustomElement('sinch-link', class extends NectaryElement {
     this.addEventListener('-click', this.#onClickReactHandler);
     this.addEventListener('-focus', this.#onFocusReactHandler);
     this.addEventListener('-blur', this.#onBlurReactHandler);
-    this.#updateIcons();
   }
   disconnectedCallback() {
     this.#$anchor.removeEventListener('click', this.#onAnchorClick);
@@ -35,6 +30,39 @@ defineCustomElement('sinch-link', class extends NectaryElement {
     this.removeEventListener('-focus', this.#onFocusReactHandler);
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
+  static get observedAttributes() {
+    return ['text', 'href', 'external', 'standalone', 'disabled'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'href':
+        {
+          updateAttribute(this.#$anchor, 'href', newVal);
+          break;
+        }
+      case 'standalone':
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+      case 'external':
+        {
+          const isExternal = isAttrTrue(newVal);
+          updateAttribute(this.#$anchor, 'target', isExternal ? '_blank' : null);
+          updateBooleanAttribute(this, name, isExternal);
+          break;
+        }
+    }
+  }
   get text() {
     return getAttribute(this, 'text', '');
   }
@@ -71,31 +99,6 @@ defineCustomElement('sinch-link', class extends NectaryElement {
   get preventDefault() {
     return getBooleanAttribute(this, 'preventdefault');
   }
-  static get observedAttributes() {
-    return ['text', 'href', 'external'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
-    switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'href':
-        {
-          updateAttribute(this.#$anchor, 'href', newVal);
-          break;
-        }
-      case 'external':
-        {
-          updateAttribute(this.#$anchor, 'target', isAttrTrue(newVal) ? '_blank' : null);
-          break;
-        }
-    }
-  }
   get focusable() {
     return true;
   }
@@ -105,11 +108,6 @@ defineCustomElement('sinch-link', class extends NectaryElement {
   blur() {
     this.#$anchor.blur();
   }
-  #updateIcons() {
-    const [externalName, standaloneName] = getCssVars(this, ['--sinch-link-icon-external', '--sinch-link-icon-standalone']);
-    updateAttribute(this.#$iconExternal, 'name', externalName);
-    updateAttribute(this.#$iconStandalone, 'name', standaloneName);
-  }
   #onAnchorClick = e => {
     if (this.preventDefault) {
       e.preventDefault();

package/list-item/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;border-bottom:1px solid var(--sinch-color-snow-500)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-color-snow-400)}</style><div id="wrapper"><slot name="content"></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;background-color:var(--sinch-comp-list-color-default-background-initial);border-bottom:1px solid var(--sinch-comp-list-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-comp-list-color-default-background-hover)}</style><div id="wrapper"><slot name="content"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-list-item', class extends NectaryElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "1.4.0",
+  "version": "2.1.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -13,18 +13,18 @@
     "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
+    "@babel/runtime": "^7.21.0",
     "xss": "^1.0.14"
   },
   "devDependencies": {
-    "@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/react": "^18.0.27",
-    "babel-plugin-html-inline-minifier": "workspace:^0.0.0",
-    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "typescript": "^4.9.5"
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.4",
+    "@babel/plugin-transform-runtime": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-typescript": "^7.21.4",
+    "@types/node": "^18.16.0",
+    "@types/react": "^18.0.38",
+    "babel-plugin-html-inline-minifier": "workspace:*",
+    "typescript": "^5.0.4"
   }
 }

package/pagination/index.js

@@ -1,6 +1,6 @@
 import '../icon';
-import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler, getCssVars, isTargetEqual, getTargetIndexInParent } 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-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 id="icon-left"></sinch-icon></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 id="icon-right"></sinch-icon></button></div>';
+import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler, isTargetEqual, getTargetIndexInParent } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-4px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 4px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon id="icon-left" name="keyboard_arrow_left"></sinch-icon></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 id="icon-right" name="keyboard_arrow_right"></sinch-icon></button></div>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
 const FIRST_BTN_INDEX = 0;
@@ -11,9 +11,7 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-pagination', class extends NectaryElement {
   #$left;
-  #$iconLeft;
   #$right;
-  #$iconRight;
   #$buttons;
   #$wrapper;
   constructor() {
@@ -21,9 +19,7 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$left = shadowRoot.querySelector('#left');
-    this.#$iconLeft = shadowRoot.querySelector('#icon-left');
     this.#$right = shadowRoot.querySelector('#right');
-    this.#$iconRight = shadowRoot.querySelector('#icon-right');
     this.#$buttons = shadowRoot.querySelectorAll('.page');
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
   }
@@ -31,7 +27,6 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     this.#onValueChange();
     this.#$wrapper.addEventListener('click', this.#onButtonClick);
     this.addEventListener('-change', this.#onChangeReactHandler);
-    this.#updateIcons();
   }
   disconnectedCallback() {
     this.#$wrapper.removeEventListener('click', this.#onButtonClick);
@@ -54,9 +49,6 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
         }
     }
   }
-  get nodeName() {
-    return 'select';
-  }
   set value(val) {
     updateAttribute(this, 'value', val);
   }
@@ -97,21 +89,21 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
   }
   #onButtonClick = e => {
     e.stopPropagation();
-    const value = getIntegerAttribute(this, 'value', 0) - 1;
+    const value = Math.max(getIntegerAttribute(this, 'value', 0) - 1);
     const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
     if (isTargetEqual(e, this.#$left)) {
-      return this.#dispatchChangeEvent(value - 1);
+      return this.#dispatchChangeEvent(Math.max(value - 1, 0));
     }
     if (isTargetEqual(e, this.#$right)) {
-      return this.#dispatchChangeEvent(value + 1);
+      return this.#dispatchChangeEvent(Math.min(value + 1, max));
     }
     const btnIndex = getTargetIndexInParent(e, this.#$wrapper) - 1;
-    if (btnIndex >= 0 && btnIndex < this.#$buttons.length) {
+    if (btnIndex >= FIRST_BTN_INDEX && btnIndex <= LAST_BTN_INDEX) {
       if (btnIndex === FIRST_BTN_INDEX) {
         return this.#dispatchChangeEvent(0);
       }
-      if (btnIndex === this.#$buttons.length - 1) {
-        return this.#dispatchChangeEvent(max - 1);
+      if (btnIndex === LAST_BTN_INDEX) {
+        return this.#dispatchChangeEvent(max);
       }
       if (btnIndex === DOTS_LEFT_INDEX && max > NUM_BUTTONS && value > MIDDLE_BTN_INDEX) {
         return this.#dispatchChangeEvent(Math.floor(value / 2));
@@ -126,11 +118,6 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     const max = getIntegerAttribute(this, 'max', 0);
     return Math.max(0, Math.min(max - 1, value)) + 1;
   }
-  #updateIcons() {
-    const [leftName, rightName] = getCssVars(this, ['--sinch-pagination-icon-prev', '--sinch-pagination-icon-next']);
-    updateAttribute(this.#$iconLeft, 'name', leftName);
-    updateAttribute(this.#$iconRight, 'name', rightName);
-  }
   #dispatchChangeEvent(value) {
     const detail = this.#clamp(value);
     this.dispatchEvent(new CustomEvent('change', {

package/pagination/types.d.ts

@@ -1,5 +1,4 @@
 import type { TRect, TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchPaginationElement = HTMLElement & {
     value: number;
     max: number;
@@ -14,7 +13,5 @@ export type TSinchPaginationElement = HTMLElement & {
 export type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement> & {
     value: number;
     max: number;
-    /** @deprecated */
-    onChange?: (event: SyntheticEvent<TSinchPaginationElement, CustomEvent<number>>) => void;
     'on-change': (e: CustomEvent<number>) => void;
 };