@nectary/components 1.4.0 → 2.0.0

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.0.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -13,18 +13,19 @@
     "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/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:^0.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "typescript": "^4.9.5"
+    "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;
 };

package/pop/index.js

@@ -122,7 +122,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
           if ('production' !== 'production') {
             assertOrientation(newVal);
           }
-          if (this.#isOpen()) {
+          if (this.#$dialog.open) {
             this.#updateOrientation();
           }
           break;
@@ -131,7 +131,7 @@ 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) {
@@ -150,14 +150,16 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     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();
@@ -193,7 +195,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,14 +207,14 @@ 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;
@@ -247,7 +249,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 +264,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 +335,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 +364,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   };
   #onContentSlotChange = e => {
     e.stopPropagation();
-    if (this.#isOpen()) {
+    if (this.#$dialog.open) {
       this.#updateOrientation();
     }
   };

package/popover/index.js

@@ -1,6 +1,6 @@
 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>';
+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';
 const TIP_SIZE = 16;
 const template = document.createElement('template');
@@ -35,19 +35,43 @@ 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':
+        {
+          if ('production' !== 'production') {
+            assertOrientation(newVal);
+          }
+          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 +102,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 +139,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/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;
 };