@nectary/components 2.0.0 → 2.1.0

package/pop/index.js

@@ -1,10 +1,10 @@
 import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext, isTargetEqual } from '../utils';
 const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
-import { assertOrientation, disableScroll, enableScroll, orientationValues } from './utils';
+import { disableScroll, enableScroll, orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-pop', class extends NectaryElement {
-  #$target;
+  #$targetWrapper;
   #$focus;
   #$dialog;
   #resizeThrottle;
@@ -21,7 +21,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$target = shadowRoot.querySelector('#target');
+    this.#$targetWrapper = shadowRoot.querySelector('#target');
     this.#$focus = shadowRoot.querySelector('#focus');
     this.#$dialog = shadowRoot.querySelector('#dialog');
     this.#$targetSlot = shadowRoot.querySelector('slot[name="target"]');
@@ -119,9 +119,6 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         }
       case 'orientation':
         {
-          if ('production' !== 'production') {
-            assertOrientation(newVal);
-          }
           if (this.#$dialog.open) {
             this.#updateOrientation();
           }
@@ -135,7 +132,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
       item = getFirstSlotElement(this.#$targetOpenSlot, true);
     }
     if (item === null) {
-      return getRect(this.#$target);
+      return getRect(this.#$targetWrapper);
     }
     if (Reflect.has(item, 'footprintRect')) {
       return item.footprintRect;
@@ -145,7 +142,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #getFirstTargetElement(slot) {
     const item = getFirstSlotElement(slot, true);
     if (item === null) {
-      return this.#$target;
+      return this.#$targetWrapper;
     }
     return item;
   }
@@ -163,7 +160,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     this.#$focus.removeAttribute('tabindex');
     this.#$focus.removeAttribute('style');
     this.#$dialog.showModal();
-    this.#$target.setAttribute('aria-expanded', 'true');
+    this.#$targetWrapper.setAttribute('aria-expanded', 'true');
     this.#updateOrientation();
     if (this.modal) {
       getFirstFocusableElement(this.#$contentSlot)?.focus();
@@ -175,9 +172,9 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
       const marginTop = parseInt(targetElComputedStyle.marginTop);
       const marginBottom = parseInt(targetElComputedStyle.marginBottom);
       const targetRect = this.#getTargetRect();
-      this.#$target.style.setProperty('display', 'block');
-      this.#$target.style.setProperty('width', `${targetRect.width + marginLeft + marginRight}px`);
-      this.#$target.style.setProperty('height', `${targetRect.height + marginTop + marginBottom}px`);
+      this.#$targetWrapper.style.setProperty('display', 'block');
+      this.#$targetWrapper.style.setProperty('width', `${targetRect.width + marginLeft + marginRight}px`);
+      this.#$targetWrapper.style.setProperty('height', `${targetRect.height + marginTop + marginBottom}px`);
       this.#$targetOpenWrapper.style.setProperty('width', `${targetRect.width}px`);
       this.#$targetOpenWrapper.style.setProperty('height', `${targetRect.height}px`);
       this.#targetStyleValue = $targetEl.getAttribute('style');
@@ -221,26 +218,27 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     this.#dispatchContentVisibility(false);
     this.#$targetOpenSlot.removeEventListener('keydown', this.#onTargetKeydown);
     if (isNonModal) {
-      this.#targetActiveElement = null;
       this.#$targetOpenSlot.addEventListener('blur', this.#captureActiveElement, true);
     }
     this.#$dialog.close();
-    this.#$target.setAttribute('aria-expanded', 'false');
+    this.#$targetWrapper.setAttribute('aria-expanded', 'false');
     if (isNonModal) {
       this.#$targetOpenSlot.removeEventListener('blur', this.#captureActiveElement, true);
     }
-    const targetEl = this.#getFirstTargetElement(this.#$targetOpenSlot);
-    targetEl.style.removeProperty('margin');
-    targetEl.style.removeProperty('position');
-    targetEl.style.removeProperty('transform');
-    if (this.#targetStyleValue !== null) {
-      targetEl.setAttribute('style', this.#targetStyleValue);
-      this.#targetStyleValue = null;
+    if (isNonModal) {
+      const targetEl = this.#getFirstTargetElement(this.#$targetOpenSlot);
+      targetEl.style.removeProperty('margin');
+      targetEl.style.removeProperty('position');
+      targetEl.style.removeProperty('transform');
+      if (this.#targetStyleValue !== null) {
+        targetEl.setAttribute('style', this.#targetStyleValue);
+        this.#targetStyleValue = null;
+      }
+      getFirstSlotElement(this.#$targetOpenSlot)?.setAttribute('slot', 'target');
+      this.#$targetWrapper.style.removeProperty('display');
+      this.#$targetWrapper.style.removeProperty('width');
+      this.#$targetWrapper.style.removeProperty('height');
     }
-    getFirstSlotElement(this.#$targetOpenSlot)?.setAttribute('slot', 'target');
-    this.#$target.style.removeProperty('display');
-    this.#$target.style.removeProperty('width');
-    this.#$target.style.removeProperty('height');
     if (this.#targetActiveElement !== null) {
       if (!isElementFocused(this.#targetActiveElement)) {
         this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);

package/pop/utils.d.ts

@@ -1,7 +1,4 @@
 import type { TSinchPopOrientation } from './types';
 export declare const orientationValues: readonly TSinchPopOrientation[];
-type TAssertOrientation = (value: string | null) => asserts value is TSinchPopOrientation;
-export declare const assertOrientation: TAssertOrientation;
 export declare const disableScroll: () => void;
 export declare const enableScroll: () => void;
-export {};

package/pop/utils.js

@@ -1,9 +1,4 @@
 export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom-stretch', 'bottom-center', 'top-stretch', 'top-center', 'center-left', 'center-right'];
-export const assertOrientation = value => {
-  if (value === null || !orientationValues.includes(value)) {
-    throw new Error(`sinch-pop: invalid orientation attribute: ${value}`);
-  }
-};
 const bodyEl = document.body;
 export const disableScroll = () => {
   bodyEl.style.overflow = 'hidden';

package/popover/index.js

@@ -1,7 +1,7 @@
 import '../pop';
 import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap, subscribeContext } from '../utils';
 const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
-import { assertOrientation, getPopOrientation, orientationValues } from './utils';
+import { getPopOrientation, orientationValues } from './utils';
 const TIP_SIZE = 16;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -45,9 +45,6 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     switch (name) {
       case 'orientation':
         {
-          if ('production' !== 'production') {
-            assertOrientation(newVal);
-          }
           updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
           if (this.#$pop.open) {
             this.#updateTipOrientation();

package/popover/utils.d.ts

@@ -2,6 +2,3 @@ import type { TSinchPopoverOrientation } from './types';
 import type { TSinchPopOrientation } from '../pop/types';
 export declare const orientationValues: readonly TSinchPopoverOrientation[];
 export declare const getPopOrientation: (orientation: TSinchPopoverOrientation) => TSinchPopOrientation;
-type TAssertOrientation = (value: string | null) => asserts value is TSinchPopoverOrientation;
-export declare const assertOrientation: TAssertOrientation;
-export {};

package/popover/utils.js

@@ -7,9 +7,4 @@ export const getPopOrientation = orientation => {
     return 'bottom-stretch';
   }
   return orientation;
-};
-export const assertOrientation = value => {
-  if (value === null || !orientationValues.includes(value)) {
-    throw new Error(`sinch-popover: invalid orientation attribute: ${value}`);
-  }
 };

package/rich-text/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, NectaryElement, getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute, parseMarkdown } from '../utils';
 const templateHTML = '<style>:host{display:block;--sinch-comp-rich-text-font:var(--sinch-sys-font-body-m)}:host([size="s"]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-s)}:host([size=xs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xs)}:host([size=xxs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xxs)}#wrapper{font:var(--sinch-comp-rich-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default))}.em1{font-style:italic}.em2{font-weight:var(--sinch-ref-typography-font-weight-700)}.em3{font-style:italic;font-weight:var(--sinch-ref-typography-font-weight-700)}.strikethrough{text-decoration:line-through}.link{font:var(--sinch-comp-link-default-font-initial);color:var(--sinch-comp-link-color-default-text-initial);text-decoration:underline}.link:hover{color:var(--sinch-comp-link-color-default-text-hover);text-decoration:none}.code{font:var(--sinch-comp-code-tag-font-text);line-height:inherit;font-size:inherit;border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius)}.paragraph{margin:0}.paragraph+.paragraph{margin-top:12px}</style><div id="wrapper"></div>';
-import { assertSize, sizeValues } from './utils';
+import { sizeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-rich-text', class extends NectaryElement {
@@ -27,17 +27,10 @@ defineCustomElement('sinch-rich-text', class extends NectaryElement {
     updateAttribute(this, 'text', value);
   }
   static get observedAttributes() {
-    return ['size', 'text'];
+    return ['text'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case 'size':
-        {
-          if ('production' !== 'production') {
-            assertSize(newVal);
-          }
-          break;
-        }
       case 'text':
         {
           this.#updateText(newVal);

package/rich-text/utils.d.ts

@@ -1,5 +1,2 @@
 import type { TSinchTextType } from '../text/types';
 export declare const sizeValues: readonly TSinchTextType[];
-type TAssertSize = (value: string | null) => asserts value is TSinchTextType;
-export declare const assertSize: TAssertSize;
-export {};

package/rich-text/utils.js

@@ -1,6 +1 @@
-export const sizeValues = ['m', 's', 'xs', 'xxs'];
-export const assertSize = value => {
-  if (value === null || !sizeValues.includes(value)) {
-    throw new Error(`sinch-rich-text: invalid "size" attribute: "${value}"`);
-  }
-};
+export const sizeValues = ['m', 's', 'xs', 'xxs'];

package/segment/index.js

@@ -1,7 +1,7 @@
 import '../title';
 import { getTitleLevelFromType } from '../title/utils';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:12px;width:100%;height:100%;border:1px solid var(--sinch-comp-segment-color-default-border-initial);border-radius:var(--sinch-comp-segment-shape-radius);box-sizing:border-box;background-color:var(--sinch-comp-segment-color-default-background-initial);padding:8px 0 16px}#header{display:flex;flex-direction:row;align-items:center;height:48px;gap:8px;padding:0 24px}#icon{--sinch-global-size-icon:32px}#caption{min-width:1em;--sinch-comp-title-font:var(--sinch-comp-segment-font-size-m-title)}:host([size="l"]) #caption{--sinch-comp-title-font:var(--sinch-comp-segment-font-size-l-title)}:host([size="s"]) #caption{--sinch-comp-title-font:var(--sinch-comp-segment-font-size-s-title)}#info{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto;align-self:stretch}#info.empty{display:none}#preview{flex:1;flex-basis:auto;height:48px;min-width:0;overflow:hidden;margin-left:24px}#preview.empty{display:none}#info.empty+#collapse{margin-left:auto}#collapse.empty{display:none}#preview:not(.empty)+#info.empty+#collapse:not(.empty),#preview:not(.empty)+#info:not(.empty){margin-left:24px}#content-wrapper{flex:1;min-height:0;overflow-y:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:0 24px}#action.empty{display:none}:host([collapsed]) :is(#content-wrapper,#action){display:none}:host([collapsed]) #wrapper{padding-bottom:8px}::slotted([slot=icon]){margin-right:8px}</style><div id="wrapper"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" level="3" type="m" ellipsis></sinch-title><div id="preview"><slot name="preview"></slot></div><div id="info"><slot name="info"></slot></div><div id="collapse"><slot name="collapse"></slot></div></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
 import { getTitleTypeFromSize } from './utils';
 const template = document.createElement('template');
@@ -63,9 +63,6 @@ defineCustomElement('sinch-segment', class extends NectaryElement {
         }
       case 'size':
         {
-          if ('production' !== 'production') {
-            assertSize(newVal, 'sinch-segment');
-          }
           const titleType = getTitleTypeFromSize(this.size);
           updateAttribute(this.#$caption, 'level', getTitleLevelFromType(titleType));
           break;

package/select-button/index.js

@@ -1,12 +1,11 @@
 import '../text';
 import '../icon';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute, Context } from '../utils';
-import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial)}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}#button{all:initial;cursor:pointer;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}#button:disabled{cursor:initial}#button:disabled+#border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}#button:disabled~#text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}#button:disabled~#placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}:host([invalid]) #button:enabled+#border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}#wrapper>#button:focus-visible+#border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper"><button id="button"></button><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon id="dropdown-icon" name="keyboard_arrow_down"></sinch-icon></div>';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);cursor:pointer;--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial);cursor:initial}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon id="dropdown-icon" name="keyboard_arrow_down"></sinch-icon></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select-button', class extends NectaryElement {
-  #$button;
   #$text;
   #$placeholder;
   #$leftSlot;
@@ -17,10 +16,9 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
-      delegatesFocus: true
+      delegatesFocus: false
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$button = shadowRoot.querySelector('#button');
     this.#$text = shadowRoot.querySelector('#text');
     this.#$placeholder = shadowRoot.querySelector('#placeholder');
     this.#$leftSlot = shadowRoot.querySelector('slot[name="left"]');
@@ -34,14 +32,18 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
     const {
       signal
     } = this.#controller;
-    this.setAttribute('role', 'button');
-    this.#$button.addEventListener('click', this.#onButtonClick, {
+    this.role = 'button';
+    this.tabIndex = 0;
+    this.addEventListener('click', this.#onButtonClick, {
       signal
     });
-    this.#$button.addEventListener('focus', this.#onButtonFocus, {
+    this.addEventListener('focus', this.#onButtonFocus, {
       signal
     });
-    this.#$button.addEventListener('blur', this.#onButtonBlur, {
+    this.addEventListener('blur', this.#onButtonBlur, {
+      signal
+    });
+    this.addEventListener('keydown', this.#onButtonKeydown, {
       signal
     });
     this.addEventListener('-click', this.#onClickReactHandler, {
@@ -93,7 +95,6 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          this.#$button.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
@@ -104,9 +105,6 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
         }
       case 'data-size':
         {
-          if ('production' !== 'production') {
-            assertSize(newVal, 'sinch-select-button');
-          }
           this.#onSizeUpdate();
           break;
         }
@@ -145,12 +143,6 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
   get focusable() {
     return true;
   }
-  focus() {
-    this.#$button.focus();
-  }
-  blur() {
-    this.#$button.blur();
-  }
   #onContextSize = e => {
     if (this.hasAttribute('size')) {
       return;
@@ -183,8 +175,19 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
   #onButtonBlur = () => {
     this.dispatchEvent(new CustomEvent('-blur'));
   };
+  #onButtonKeydown = e => {
+    switch (e.code) {
+      case 'Space':
+      case 'Enter':
+        {
+          this.click();
+        }
+    }
+  };
   #onButtonClick = () => {
-    this.dispatchEvent(new CustomEvent('-click'));
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('-click'));
+    }
   };
   #onClickReactHandler = e => {
     getReactEventHandler(this, 'on-click')?.(e);

package/select-menu/index.js

@@ -18,7 +18,9 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #searchDebounce;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: false
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$optionSlot = shadowRoot.querySelector('slot');
     this.#$listbox = shadowRoot.querySelector('#listbox');
@@ -32,8 +34,8 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute('role', 'listbox');
-    this.setAttribute('tabindex', '0');
+    this.role = 'listbox';
+    this.tabIndex = 0;
     this.addEventListener('keydown', this.#onListboxKeyDown, options);
     this.addEventListener('focus', this.#onFocus, options);
     this.addEventListener('blur', this.#onListboxBlur, options);
@@ -118,6 +120,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   };
   #onListboxClick = e => {
     const $elem = e.target;
+    this.focus();
     if (!getBooleanAttribute($elem, 'disabled')) {
       this.#selectOption($elem);
     }

package/spinner/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, subscribeContext, updateAttribute, updateLiteralAttribute } from '../utils';
-import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
 const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block}#spinner-size-l,#spinner-size-m,#spinner-size-s{display:none;will-change:transform}:host([data-size="l"])>#spinner-size-l{display:block;animation:1s linear infinite spinner}:host([data-size="m"])>#spinner-size-m{display:block;animation:1s linear infinite spinner}:host([data-size="s"])>#spinner-size-s{display:block;animation:1s linear infinite spinner}.bg{opacity:.3;stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}.fg{stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}</style><svg id="spinner-size-l" width="50" height="50" fill="none"><circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/><path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/></svg><svg id="spinner-size-m" width="24" height="24" fill="none"><circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/><path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/></svg><svg id="spinner-size-s" width="16" height="16" fill="none"><circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/><path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/></svg>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -20,7 +20,7 @@ defineCustomElement('sinch-spinner', class extends NectaryElement {
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['size', 'data-size'];
+    return ['size'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
@@ -32,13 +32,6 @@ defineCustomElement('sinch-spinner', class extends NectaryElement {
           updateAttribute(this, 'data-size', newVal);
           break;
         }
-      case 'data-size':
-        {
-          if ('production' !== 'production') {
-            assertSize(newVal, 'sinch-spinner');
-          }
-          break;
-        }
     }
   }
   set size(size) {

package/tag/index.js

@@ -1,7 +1,7 @@
 import '../text';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div>';
-import { assertTagColor, getTagColorBg, getTagColorFg } from './utils';
+import { getTagColorBg, getTagColorFg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tag', class extends NectaryElement {
@@ -67,9 +67,6 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
     }
     const colorName = this.color;
     if (colorName !== null && colorName.length > 0) {
-      if ('production' !== 'production') {
-        assertTagColor(this, colorName);
-      }
       const bg = getTagColorBg(colorName);
       const fg = getTagColorFg(colorName);
       this.#$wrapper.style.setProperty('background-color', bg);

package/tag/utils.d.ts

@@ -1,3 +1,2 @@
 export declare const getTagColorBg: (id: string) => string;
 export declare const getTagColorFg: (id: string) => string;
-export declare const assertTagColor: (root: Element, id: string | null) => void;

package/tag/utils.js

@@ -3,9 +3,4 @@ export const getTagColorBg = id => {
 };
 export const getTagColorFg = id => {
   return `var(--sinch-comp-tag-color-${id}-foreground)`;
-};
-export const assertTagColor = (root, id) => {
-  if (id === null || window.getComputedStyle(root).getPropertyValue(`--sinch-comp-tag-color-${id}-background`).length === 0) {
-    throw new Error(`Invalid sinch-tag color name: ${id}`);
-  }
 };

package/text/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue } from '../utils';
 const templateHTML = '<style>:host{display:block;font:var(--sinch-comp-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));--sinch-comp-text-font:var(--sinch-sys-font-body-m)}:host([inline]){display:inline}:host([type="s"]){--sinch-comp-text-font:var(--sinch-sys-font-body-s)}:host([type=xs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xs)}:host([type=xxs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xxs)}:host([type="m"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize)}:host([type="s"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-s)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
-import { assertType, typeValues } from './utils';
+import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-text', class extends NectaryElement {
@@ -13,17 +13,10 @@ defineCustomElement('sinch-text', class extends NectaryElement {
     this.#updateRole();
   }
   static get observedAttributes() {
-    return ['type', 'inline', 'ellipsis', 'emphasized'];
+    return ['inline', 'ellipsis', 'emphasized'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          break;
-        }
       case 'inline':
         {
           this.#updateRole();

package/text/utils.d.ts

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

package/text/utils.js

@@ -1,6 +1 @@
-export const typeValues = ['m', 's', 'xs', 'xxs'];
-export const assertType = value => {
-  if (value === null || !typeValues.includes(value)) {
-    throw new Error(`sinch-text: invalid "type" attribute: "${value}"`);
-  }
-};
+export const typeValues = ['m', 's', 'xs', 'xxs'];

package/time-picker/index.js

@@ -116,9 +116,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     switch (name) {
       case 'value':
         {
-          if (newVal === null) {
-            throw new Error('Missing "value" attribute');
-          }
           const {
             hours,
             minutes

package/time-picker/utils.d.ts

@@ -1,4 +1,4 @@
-export declare const parseTime: (value: string) => {
+export declare const parseTime: (value: string | null) => {
     hours: number;
     minutes: number;
 };

package/time-picker/utils.js

@@ -1,5 +1,5 @@
 export const parseTime = value => {
-  if (value === '') {
+  if (value === '' || value === null) {
     return {
       hours: 0,
       minutes: 0
@@ -7,19 +7,31 @@ export const parseTime = value => {
   }
   const timeParts = value.split(':');
   if (timeParts.length < 3) {
-    throw new Error(`Incorrect time format: ${value}. Should be "hh:mm:ss"`);
+    return {
+      hours: 0,
+      minutes: 0
+    };
   }
   const hours = parseInt(timeParts[0]);
   const minutes = parseInt(timeParts[1]);
   const seconds = parseInt(timeParts[2]);
   if (isNaN(hours) || hours > 23 || hours < 0) {
-    throw new Error(`Invalid hours value: ${value}`);
+    return {
+      hours: 0,
+      minutes: 0
+    };
   }
   if (isNaN(minutes) || minutes > 59 || minutes < 0) {
-    throw new Error(`Invalid minutes value: ${value}`);
+    return {
+      hours: 0,
+      minutes: 0
+    };
   }
   if (isNaN(seconds) || seconds > 59 || seconds < 0) {
-    throw new Error(`Invalid seconds value: ${value}`);
+    return {
+      hours: 0,
+      minutes: 0
+    };
   }
   return {
     hours,

package/title/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement, updateBooleanAttribute, getBooleanAttribute, isAttrTrue } from '../utils';
 const templateHTML = '<style>:host{display:block;--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type=xl]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xl)}:host([type="l"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-l)}:host([type="m"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type="s"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-s)}:host([type=xs]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xs)}#text{letter-spacing:-2%;color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));font:var(--sinch-comp-title-font)}:host([ellipsis]) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
-import { assertLevel, assertType, typeValues } from './utils';
+import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-title', class extends NectaryElement {
@@ -15,7 +15,7 @@ defineCustomElement('sinch-title', class extends NectaryElement {
     this.setAttribute('role', 'heading');
   }
   static get observedAttributes() {
-    return ['text', 'type', 'level', 'ellipsis'];
+    return ['text', 'level', 'ellipsis'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
@@ -29,19 +29,9 @@ defineCustomElement('sinch-title', class extends NectaryElement {
         }
       case 'level':
         {
-          if ('production' !== 'production') {
-            assertLevel(newVal);
-          }
           updateAttribute(this, 'aria-level', newVal);
           break;
         }
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          break;
-        }
       case 'ellipsis':
         {
           updateBooleanAttribute(this, 'ellipsis', isAttrTrue(newVal));

package/title/utils.d.ts

@@ -1,10 +1,3 @@
 import type { TSinchTitleLevel, TSinchTitleType } from './types';
 export declare const typeValues: readonly TSinchTitleType[];
-export declare const levelValues: readonly TSinchTitleLevel[];
-type TAssertLevel = (value: string | null) => asserts value is TSinchTitleLevel;
-export declare const assertLevel: TAssertLevel;
-type TAssertType = (value: string | null) => asserts value is TSinchTitleType;
-export declare const assertType: TAssertType;
 export declare const getTitleLevelFromType: (type: TSinchTitleType) => TSinchTitleLevel;
-export declare const getTitleTypeFromLevel: (level: TSinchTitleLevel) => TSinchTitleType;
-export {};