@nectary/components 1.4.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,10 +119,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         }
       case 'orientation':
         {
-          if ('production' !== 'production') {
-            assertOrientation(newVal);
-          }
-          if (this.#isOpen()) {
+          if (this.#$dialog.open) {
             this.#updateOrientation();
           }
           break;
@@ -131,11 +128,11 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   }
   #getTargetRect() {
     let item = getFirstSlotElement(this.#$targetSlot, true);
-    if (item === null && this.#isOpen()) {
+    if (item === null && this.#$dialog.open) {
       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,23 +142,25 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #getFirstTargetElement(slot) {
     const item = getFirstSlotElement(slot, true);
     if (item === null) {
-      return this.#$target;
+      return this.#$targetWrapper;
     }
     return item;
   }
   #onExpand() {
-    if (!this.isConnected || this.#isOpen()) {
+    if (!this.isConnected || this.#$dialog.open) {
       return;
     }
-    this.#$targetSlot.addEventListener('blur', this.#captureActiveElement, true);
+    this.#$targetSlot.addEventListener('blur', this.#stopEventPropagation, true);
     this.#$focus.setAttribute('tabindex', '-1');
     this.#$focus.style.display = 'block';
+    this.#$focus.addEventListener('focus', this.#captureRelatedActiveElement);
     this.#$focus.focus();
-    this.#$targetSlot.removeEventListener('blur', this.#captureActiveElement, true);
+    this.#$focus.removeEventListener('focus', this.#captureRelatedActiveElement);
+    this.#$targetSlot.removeEventListener('blur', this.#stopEventPropagation, true);
     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();
@@ -173,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');
@@ -193,7 +192,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
         if (!isElementFocused(this.#targetActiveElement)) {
           requestAnimationFrame(() => {
-            if (this.isConnected && this.#isOpen()) {
+            if (this.isConnected && this.#$dialog.open) {
               this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
               this.#targetActiveElement.focus();
               this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
@@ -205,40 +204,41 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     disableScroll();
     window.addEventListener('resize', this.#onResize);
     requestAnimationFrame(() => {
-      if (this.isConnected && this.#isOpen()) {
+      if (this.isConnected && this.#$dialog.open) {
         this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
       }
     });
     this.#dispatchContentVisibility(true);
   }
   #onCollapse() {
-    if (!this.#isOpen()) {
+    if (!this.#$dialog.open) {
       return;
     }
     const isNonModal = !this.modal;
     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);
@@ -247,7 +247,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         if (!isElementFocused(this.#targetActiveElement)) {
           const $targetEl = this.#targetActiveElement;
           requestAnimationFrame(() => {
-            if (this.isConnected && !this.#isOpen()) {
+            if (this.isConnected && !this.#$dialog.open) {
               this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
               $targetEl.focus();
               this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
@@ -262,9 +262,6 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     window.removeEventListener('resize', this.#onResize);
     this.#$contentSlot.removeEventListener('slotchange', this.#onContentSlotChange);
   }
-  #isOpen() {
-    return getBooleanAttribute(this.#$dialog, 'open');
-  }
   #onResize = () => {
     this.#resizeThrottle.fn();
   };
@@ -336,6 +333,10 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #dispatchCloseEvent() {
     this.dispatchEvent(new CustomEvent('-close'));
   }
+  #captureRelatedActiveElement = e => {
+    e.stopPropagation();
+    this.#targetActiveElement = e.relatedTarget;
+  };
   #captureActiveElement = e => {
     e.stopPropagation();
     this.#targetActiveElement = e.target;
@@ -361,7 +362,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   };
   #onContentSlotChange = e => {
     e.stopPropagation();
-    if (this.#isOpen()) {
+    if (this.#$dialog.open) {
       this.#updateOrientation();
     }
   };

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}#content{font:var(--sinch-font-text-m);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-m);box-shadow:var(--sinch-elevation-level-2);overflow:hidden}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-color-snow-100);stroke:var(--sinch-color-snow-500);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}:host([tip]) #content{box-shadow:none}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-elevation-level-2))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}</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';
+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 { getPopOrientation, orientationValues } from './utils';
 const TIP_SIZE = 16;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -35,19 +35,40 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
   disconnectedCallback() {
     this.#controller.abort();
   }
-  #onPopClose = () => {
-    this.#dispatchCloseEvent();
-  };
-  #onCloseReactHandler = e => {
-    getReactEventHandler(this, 'onClose')?.();
-    getReactEventHandler(this, 'on-close')?.(e);
-  };
-  #dispatchCloseEvent() {
-    this.dispatchEvent(new CustomEvent('-close'));
-  }
   static get observedAttributes() {
     return ['orientation', 'open', 'modal', 'tip'];
   }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'orientation':
+        {
+          updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
+          if (this.#$pop.open) {
+            this.#updateTipOrientation();
+          }
+          break;
+        }
+      case 'tip':
+        {
+          const hasTip = isAttrTrue(newVal);
+          if (hasTip && this.#$pop.open) {
+            this.#updateTipOrientation();
+          }
+          updateBooleanAttribute(this, name, hasTip);
+          break;
+        }
+      case 'modal':
+      case 'open':
+        {
+          updateAttribute(this.#$pop, name, newVal);
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
   set modal(isModal) {
     updateBooleanAttribute(this, 'modal', isModal);
   }
@@ -78,42 +99,15 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
   get popoverRect() {
     return this.#$pop.popoverRect;
   }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
-    switch (name) {
-      case 'orientation':
-        {
-          if ('production' !== 'production') {
-            assertOrientation(newVal);
-          }
-          updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
-          if (this.#isOpen()) {
-            this.#updateTipOrientation();
-          }
-          break;
-        }
-      case 'tip':
-        {
-          updateBooleanAttribute(this, 'tip', isAttrTrue(newVal));
-          if (newVal === '' && this.#isOpen()) {
-            this.#updateTipOrientation();
-          }
-          break;
-        }
-      case 'open':
-        {
-          const isOpen = isAttrTrue(newVal);
-          updateBooleanAttribute(this.#$pop, name, isOpen);
-          updateBooleanAttribute(this, name, isOpen);
-          break;
-        }
-      default:
-        {
-          updateAttribute(this.#$pop, name, newVal);
-        }
-    }
+  #onPopClose = () => {
+    this.#dispatchCloseEvent();
+  };
+  #onCloseReactHandler = e => {
+    getReactEventHandler(this, 'onClose')?.();
+    getReactEventHandler(this, 'on-close')?.(e);
+  };
+  #dispatchCloseEvent() {
+    this.dispatchEvent(new CustomEvent('-close'));
   }
   #onContextVisibility = e => {
     if (e.detail) {
@@ -142,7 +136,4 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     this.#$tip.style.left = `${xPos}px`;
     setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
   };
-  #isOpen() {
-    return this.#$pop.open;
-  }
 });

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/progress/index.js

@@ -1,6 +1,6 @@
 import '../text';
-import { defineCustomElement, updateAttribute, NectaryElement, updateBooleanAttribute, getIntegerAttribute, getBooleanAttribute, attrValueToInteger } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;align-items:center;height:24px}#bar,#progress{height:8px;border-radius:4px}#progress{background-color:var(--sinch-color-tropical-100);flex:1;min-width:0}#bar{background-color:var(--sinch-color-tropical-500);width:0}#text{display:none;width:46px}:host([detailed]:not([detailed=false])) #text{display:block}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><div id="progress"><div id="bar"></div></div></div>';
+import { defineCustomElement, updateAttribute, NectaryElement, updateBooleanAttribute, getIntegerAttribute, getBooleanAttribute, attrValueToInteger, isAttrTrue } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;align-items:center;height:24px}#bar,#progress{height:8px;border-radius:4px}#progress{background-color:var(--sinch-comp-progress-color-default-background-initial);flex:1;min-width:0}#bar{background-color:var(--sinch-comp-progress-color-default-bar-initial);width:0}#text{display:none;width:46px;--sinch-global-color-text:var(--sinch-comp-progress-color-default-text-initial)}:host([detailed]) #text{display:block}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><div id="progress"><div id="bar"></div></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-progress', class extends NectaryElement {
@@ -16,20 +16,8 @@ defineCustomElement('sinch-progress', class extends NectaryElement {
   connectedCallback() {
     this.setAttribute('role', 'progressbar');
   }
-  get value() {
-    return getIntegerAttribute(this, 'value', 0);
-  }
-  set value(value) {
-    updateAttribute(this, 'value', value);
-  }
-  get detailed() {
-    return getBooleanAttribute(this, 'detailed');
-  }
-  set detailed(isDetailed) {
-    updateBooleanAttribute(this, 'detailed', isDetailed);
-  }
   static get observedAttributes() {
-    return ['value'];
+    return ['value', 'detailed'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
@@ -48,6 +36,23 @@ defineCustomElement('sinch-progress', class extends NectaryElement {
           this.setAttribute('valuenow', int !== null ? String(int) : '0');
           break;
         }
+      case 'detailed':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
     }
   }
+  get value() {
+    return getIntegerAttribute(this, 'value', 0);
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get detailed() {
+    return getBooleanAttribute(this, 'detailed');
+  }
+  set detailed(isDetailed) {
+    updateBooleanAttribute(this, 'detailed', isDetailed);
+  }
 });

package/radio/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -24,10 +24,7 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
     this.removeEventListener('-change', this.#onChangeReactHandler);
   }
   static get observedAttributes() {
-    return ['value'];
-  }
-  get nodeName() {
-    return 'select';
+    return ['value', 'invalid'];
   }
   set value(value) {
     updateAttribute(this, 'value', value);
@@ -35,6 +32,12 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
   get value() {
     return getAttribute(this, 'value', '');
   }
+  set invalid(isInvalid) {
+    updateBooleanAttribute(this, 'invalid', isInvalid);
+  }
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
+  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
@@ -45,6 +48,11 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
           this.#onValueChange(newVal ?? '');
           break;
         }
+      case 'invalid':
+        {
+          this.#updateInvalid(isAttrTrue(newVal));
+          break;
+        }
     }
   }
   #onOptionKeyDown = e => {
@@ -82,7 +90,7 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
   };
   #onValueChange(value) {
     for (const $option of this.#$slot.assignedElements()) {
-      const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+      const isChecked = value === getAttribute($option, 'value', '');
       updateBooleanAttribute($option, 'checked', isChecked);
     }
   }
@@ -135,6 +143,11 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
   #findSelectedOption(elements) {
     return elements.find(el => el.checked) ?? null;
   }
+  #updateInvalid(isInvalid) {
+    for (const opt of this.#$slot.assignedElements()) {
+      updateBooleanAttribute(opt, 'data-invalid', isInvalid);
+    }
+  }
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/radio/types.d.ts

@@ -1,15 +1,15 @@
 import type { TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchRadioElement = HTMLElement & {
     value: string;
+    invalid: boolean;
     addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
     addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
     setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'invalid', value: ''): void;
 };
 export type TSinchRadioReact = TSinchElementReact<TSinchRadioElement> & {
     value: string;
+    invalid?: boolean;
     'aria-label': string;
-    /** @deprecated */
-    onChange?: (event: SyntheticEvent<TSinchRadioElement, CustomEvent<boolean>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/radio-option/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{--sinch-color-radio-outer-circle:var(--sinch-color-transparent);--sinch-color-radio-background:var(--sinch-color-snow-100);--sinch-color-radio-border:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-checked:var(--sinch-color-transparent);--sinch-color-radio-border-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-hover:var(--sinch-color-snow-500);--sinch-color-radio-border-hover:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-radio-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-focus:var(--sinch-color-snow-700);--sinch-color-radio-border-focus:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-radio-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-active:var(--sinch-color-stormy-100);--sinch-color-radio-border-active:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-radio-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-disabled:var(--sinch-color-transparent);--sinch-color-radio-border-disabled:var(--sinch-color-stormy-100);--sinch-color-radio-outer-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-radio-border-disabled-checked:var(--sinch-color-stormy-100);display:block;outline:0}#wrapper{display:flex;height:32px;box-sizing:border-box;width:100%}#input{all:initial;display:block;width:32px;height:32px;cursor:pointer}#input:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#input::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-outer-circle);transition:background-color .1s linear}#input::after{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-background);border:2px solid var(--sinch-color-radio-border);transition:background-color .1s linear;box-sizing:border-box}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-color-radio-border);pointer-events:none}@media (prefers-reduced-motion){#icon-knob,#input::after,#input::before{transition:none}}#label{align-self:center;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default)}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}#input:checked::before{background-color:var(--sinch-color-radio-outer-circle-checked)}#input:checked::after{border-color:var(--sinch-color-radio-border-checked)}#input:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-checked)}#input:focus::before{background-color:var(--sinch-color-radio-outer-circle-focus)}#input:focus::after{border-color:var(--sinch-color-radio-border-focus)}#input:focus~#icon-knob{background-color:var(--sinch-color-radio-border-focus)}#input:hover::before{background-color:var(--sinch-color-radio-outer-circle-hover)}#input:hover::after{border-color:var(--sinch-color-radio-border-hover)}#input:hover~#icon-knob{background-color:var(--sinch-color-radio-border-hover)}#input:active::before{background-color:var(--sinch-color-radio-outer-circle-active)}#input:active::after{border-color:var(--sinch-color-radio-border-active)}#input:active~#icon-knob{background-color:var(--sinch-color-radio-border-active)}#input:disabled::before{background-color:var(--sinch-color-radio-outer-circle-disabled)}#input:disabled::after{border-color:var(--sinch-color-radio-border-disabled)}#input:disabled~#icon-knob{background-color:var(--sinch-color-radio-border-disabled)}#input:focus:checked::before{background-color:var(--sinch-color-radio-outer-circle-focus-checked)}#input:focus:checked::after{border-color:var(--sinch-color-radio-border-focus-checked)}#input:focus:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-focus-checked)}#input:hover:checked::before{background-color:var(--sinch-color-radio-outer-circle-hover-checked)}#input:hover:checked::after{border-color:var(--sinch-color-radio-border-hover-checked)}#input:hover:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-hover-checked)}#input:active:checked::before{background-color:var(--sinch-color-radio-outer-circle-active-checked)}#input:active:checked::after{border-color:var(--sinch-color-radio-border-active-checked)}#input:active:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-active-checked)}#input:disabled:checked::before{background-color:var(--sinch-color-radio-outer-circle-disabled-checked)}#input:disabled:checked::after{border-color:var(--sinch-color-radio-border-disabled-checked)}#input:disabled:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="input" type="radio"/><div id="icon-knob"></div></div><label for="input" id="label"></label></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;--sinch-local-size:24px;--sinch-local-color-background:var(--sinch-comp-radio-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-radio-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-radio-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-radio-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-default-border-active);--sinch-local-color-knob:var(--sinch-comp-radio-color-checked-knob-initial);--sinch-local-color-knob-hover:var(--sinch-comp-radio-color-checked-knob-hover);--sinch-local-color-knob-active:var(--sinch-comp-radio-color-checked-knob-active);--sinch-local-color-text:var(--sinch-comp-radio-color-default-label-initial)}:host([data-invalid])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-radio-color-invalid-label-initial)}:host([checked])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-radio-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-radio-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-radio-color-disabled-label-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-checked-disabled-border-initial);--sinch-local-color-knob:var(--sinch-comp-radio-color-checked-disabled-knob-initial);--sinch-local-color-text:var(--sinch-comp-radio-color-checked-disabled-label-initial)}#input{all:initial;display:block;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer}#input:disabled{cursor:initial}#input::before{content:"";position:absolute;top:0;left:0;width:var(--sinch-local-size);height:var(--sinch-local-size);border:2px solid var(--sinch-comp-radio-color-default-outline-focus);border-radius:50%;transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}#input:focus-visible::before{opacity:1}#input::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:50%;box-sizing:border-box;pointer-events:none}#input:enabled:hover::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}#input:enabled:active::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#input-wrapper{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);align-self:flex-start}#knob{position:absolute;width:10px;height:10px;inset:0;margin:auto;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-local-color-knob);pointer-events:none}#input:checked+#knob{opacity:1}#input:enabled:hover+#knob{background-color:var(--sinch-local-color-knob-hover)}#input:enabled:active+#knob{background-color:var(--sinch-local-color-knob-active)}@media (prefers-reduced-motion){#input::after,#input::before,#knob{transition:none}}#label{flex:1;align-self:center;padding-left:8px;font:var(--sinch-comp-radio-font-label);color:var(--sinch-local-color-text);cursor:pointer}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="input-wrapper"><input id="input" type="radio"/><div id="knob"></div></div><label for="input" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-radio-option', class extends NectaryElement {
@@ -20,33 +20,12 @@ defineCustomElement('sinch-radio-option', class extends NectaryElement {
     this.#$input.removeEventListener('input', this.#onInput);
   }
   static get observedAttributes() {
-    return ['checked', 'disabled', 'text', 'value'];
+    return ['checked', 'disabled', 'text', 'value', 'data-invalid'];
   }
-  set checked(isChecked) {
-    updateBooleanAttribute(this, 'checked', isChecked);
-  }
-  get checked() {
-    return getBooleanAttribute(this, 'checked');
-  }
-  set value(value) {
-    updateAttribute(this, 'value', value);
-  }
-  get value() {
-    return getAttribute(this, 'value', '');
-  }
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
-  }
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'text':
         {
@@ -66,6 +45,11 @@ defineCustomElement('sinch-radio-option', class extends NectaryElement {
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
+      case 'data-invalid':
+        {
+          updateBooleanAttribute(this, 'data-invalid', isAttrTrue(newVal));
+          break;
+        }
       case 'value':
         {
           this.#$input.value = newVal ?? '';
@@ -73,6 +57,30 @@ defineCustomElement('sinch-radio-option', class extends NectaryElement {
         }
     }
   }
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
   get focusable() {
     return true;
   }

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;font:var(--sinch-font-text-m)}:host([size="s"]){font:var(--sinch-font-text-s)}:host([size=xs]){font:var(--sinch-font-text-xs)}:host([size=xxs]){font:var(--sinch-font-text-xxs)}.em1{font-style:italic}.em2{font-weight:700}.em3{font-style:italic;font-weight:700}.strikethrough{text-decoration:line-through}.link{color:var(--sinch-color-tropical-500)}.code{border:1px solid var(--sinch-color-border-light);background-color:var(--sinch-color-bg-primary-contrast);padding:0 .25em;border-radius:var(--sinch-shape-radius-xs)}.paragraph{margin:0}.paragraph+.paragraph{margin-top:12px}</style><div id="wrapper"></div>';
-import { assertSize, sizeValues } 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 { 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 {};