@nectary/components 4.12.0 → 4.12.1

package/progress-stepper/index.js

@@ -1,35 +1,35 @@
-import { isProgressStepperItemActive, setProgressStepperItemChecked, setProgressStepperItemActiveDescendant, setProgressStepperItemStatus, isProgressStepperItemChecked } from "../progress-stepper-item/utils.js";
-import { updateAttribute, getAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getRect } from "../utils/rect.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { getTargetByAttribute } from "../utils/event-target.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  width: 100%;\n}\n\n::slotted(sinch-progress-stepper-item) {\n  flex: 1;\n  min-width: 0;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
-const template = document.createElement("template");
+import { isProgressStepperItemActive, isProgressStepperItemChecked, setProgressStepperItemActiveDescendant, setProgressStepperItemChecked, setProgressStepperItemStatus } from '../progress-stepper-item/utils';
+import { defineCustomElement, getAttribute, getReactEventHandler, getRect, getTargetByAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%}::slotted(sinch-progress-stepper-item){flex:1;min-width:0}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class ProgressStepper extends NectaryElement {
+export class ProgressStepper extends NectaryElement {
   #$slot;
   #controller = null;
   #$items = [];
-  #currentActiveDescendantIndex = -1;
+  #currentActiveDescendantIndex = (() => -1)();
   #isGoingToFocusItem = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$slot = shadowRoot.querySelector("slot");
+    this.#$slot = shadowRoot.querySelector('slot');
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const { signal } = this.#controller;
-    const options = { signal };
-    this.setAttribute("role", "tablist");
-    this.#$slot.addEventListener("click", this.#onOptionClick, options);
-    this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
-    this.#$slot.addEventListener("focusout", this.#onOptionBlur, options);
-    this.addEventListener("-change", this.#onChangeReactHandler, options);
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.setAttribute('role', 'tablist');
+    this.#$slot.addEventListener('click', this.#onOptionClick, options);
+    this.#$slot.addEventListener('keydown', this.#onOptionKeydown, options);
+    this.#$slot.addEventListener('focusout', this.#onOptionBlur, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
     queueMicrotask(() => {
-      this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
+      this.#$slot.addEventListener('slotchange', this.#onSlotChange, options);
       this.#onSlotChange();
     });
   }
@@ -38,31 +38,33 @@ class ProgressStepper extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["value", "progressvalue"];
+    return ['value', 'progressvalue'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case "value": {
-        this.#onValueChange(newVal);
-        break;
-      }
-      case "progressvalue": {
-        this.#updateProgressValue();
-        break;
-      }
+      case 'value':
+        {
+          this.#onValueChange(newVal);
+          break;
+        }
+      case 'progressvalue':
+        {
+          this.#updateProgressValue();
+          break;
+        }
     }
   }
   set value(value) {
-    updateAttribute(this, "value", value);
+    updateAttribute(this, 'value', value);
   }
   get value() {
-    return getAttribute(this, "value", "");
+    return getAttribute(this, 'value', '');
   }
   set progressValue(value) {
-    updateAttribute(this, "progressvalue", value);
+    updateAttribute(this, 'progressvalue', value);
   }
   get progressValue() {
-    return getAttribute(this, "progressvalue", "");
+    return getAttribute(this, 'progressvalue', '');
   }
   nthOptionRect(index) {
     const $el = this.#$slot.assignedElements()[index];
@@ -76,17 +78,17 @@ class ProgressStepper extends NectaryElement {
     this.#onValueChange(this.value);
     this.#updateProgressValue();
   };
-  #onOptionClick = (e) => {
-    const target = getTargetByAttribute(e, "value");
+  #onOptionClick = e => {
+    const target = getTargetByAttribute(e, 'value');
     if (target !== null && isProgressStepperItemActive(target)) {
-      this.dispatchEvent(new CustomEvent("-change", {
-        detail: getAttribute(target, "value")
+      this.dispatchEvent(new CustomEvent('-change', {
+        detail: getAttribute(target, 'value')
       }));
     }
   };
   #onValueChange(value) {
     for (const $item of this.#$items) {
-      const isChecked = value === getAttribute($item, "value");
+      const isChecked = value === getAttribute($item, 'value');
       setProgressStepperItemChecked($item, isChecked);
     }
     this.#resetActiveDescendant();
@@ -126,14 +128,14 @@ class ProgressStepper extends NectaryElement {
   #updateProgressValue() {
     const progressValue = this.progressValue;
     const $items = this.#$slot.assignedElements();
-    const $progressValueIndex = $items.findIndex((it) => getAttribute(it, "value") === progressValue);
+    const $progressValueIndex = $items.findIndex(it => getAttribute(it, 'value') === progressValue);
     for (let i = 0; i < $items.length; i++) {
       if ($progressValueIndex < 0 || $progressValueIndex < i) {
-        setProgressStepperItemStatus($items[i], "inactive");
+        setProgressStepperItemStatus($items[i], 'inactive');
       } else if ($progressValueIndex > i) {
-        setProgressStepperItemStatus($items[i], "complete");
+        setProgressStepperItemStatus($items[i], 'complete');
       } else {
-        setProgressStepperItemStatus($items[i], "incomplete");
+        setProgressStepperItemStatus($items[i], 'incomplete');
       }
     }
     this.#resetActiveDescendant();
@@ -168,24 +170,27 @@ class ProgressStepper extends NectaryElement {
       setProgressStepperItemActiveDescendant(this.#$items[this.#currentActiveDescendantIndex], true);
     }
   }
-  #onOptionKeydown = (e) => {
+  #onOptionKeydown = e => {
     switch (e.code) {
-      case "Enter":
-      case "Space": {
-        e.preventDefault();
-        getTargetByAttribute(e, "value")?.click();
-        break;
-      }
-      case "ArrowRight": {
-        e.preventDefault();
-        this.#focusNextItem();
-        break;
-      }
-      case "ArrowLeft": {
-        e.preventDefault();
-        this.#focusPrevItem();
-        break;
-      }
+      case 'Enter':
+      case 'Space':
+        {
+          e.preventDefault();
+          getTargetByAttribute(e, 'value')?.click();
+          break;
+        }
+      case 'ArrowRight':
+        {
+          e.preventDefault();
+          this.#focusNextItem();
+          break;
+        }
+      case 'ArrowLeft':
+        {
+          e.preventDefault();
+          this.#focusPrevItem();
+          break;
+        }
     }
   };
   #onOptionBlur = () => {
@@ -195,11 +200,8 @@ class ProgressStepper extends NectaryElement {
     }
     this.#resetActiveDescendant();
   };
-  #onChangeReactHandler = (e) => {
-    getReactEventHandler(this, "on-change")?.(e);
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
   };
 }
-defineCustomElement("sinch-progress-stepper", ProgressStepper);
-export {
-  ProgressStepper
-};
+defineCustomElement('sinch-progress-stepper', ProgressStepper);

package/progress-stepper/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchProgressStepperProps = {
     /** Current selected item value */
     value: string;
@@ -15,23 +15,3 @@ export type TSinchProgressStepper = {
 };
 export type TSinchProgressStepperElement = NectaryComponentVanillaByType<TSinchProgressStepper>;
 export type TSinchProgressStepperReact = NectaryComponentReactByType<TSinchProgressStepper>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-progress-stepper': TSinchProgressStepper;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-progress-stepper': NectaryComponentVanilla<'sinch-progress-stepper'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-progress-stepper': NectaryComponentReact<'sinch-progress-stepper'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-progress-stepper': NectaryComponentReact<'sinch-progress-stepper'>;
-        }
-    }
-}

package/progress-stepper/types.js

@@ -1 +1 @@
-
+export {};

package/progress-stepper-item/index.d.ts

@@ -1,7 +1,8 @@
 import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchProgressStepperItem } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class ProgressStepperItem extends NectaryElement {
     #private;
     constructor();
@@ -17,3 +18,23 @@ export declare class ProgressStepperItem extends NectaryElement {
     get invalid(): boolean;
     get focusable(): boolean;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-progress-stepper-item': TSinchProgressStepperItem;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress-stepper-item': NectaryComponentVanilla<'sinch-progress-stepper-item'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress-stepper-item': NectaryComponentReact<'sinch-progress-stepper-item'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-progress-stepper-item': NectaryComponentReact<'sinch-progress-stepper-item'>;
+        }
+    }
+}

package/progress-stepper-item/index.js

@@ -1,83 +1,78 @@
-import "../icon/index.js";
-import "../text/index.js";
-import { isAttrEqual, updateExplicitBooleanAttribute, updateBooleanAttribute, isAttrTrue, updateAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { ATTR_PROGRESS_STEPPER_ITEM_STATUS, ATTR_PROGRESS_STEPPER_ITEM_CHECKED, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT, isProgressStepperItemActiveDescendant, isProgressStepperItemActive } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n    outline: none;\n  }\n\n  #button {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    width: 100%;\n    height: 100%;\n    padding: 8px 4px 4px;\n    box-sizing: border-box;\n    cursor: pointer;\n    border-radius: var(--sinch-comp-progress-stepper-step-shape-radius);\n  }\n\n  :host([data-status="inactive"]) > #button {\n    cursor: not-allowed;\n  }\n\n  :host([data-status="incomplete"]:hover) > #button {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-background-hover\n      );\n  }\n\n  :host([data-status="complete"]:hover) > #button {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-background-hover\n      );\n  }\n\n  :host([data-status="invalid"]:hover) > #button {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-background-hover\n      );\n  }\n\n  #outline {\n    position: absolute;\n    inset: -2px;\n    border:\n      2px solid\n      var(--sinch-comp-progress-stepper-step-color-outline-focus);\n    border-radius:\n      calc(\n        var(--sinch-comp-progress-stepper-step-shape-radius) + 2px\n      );\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  :host(:focus-visible) #outline {\n    opacity: 1;\n  }\n\n  #text {\n    flex-shrink: 1;\n    flex-basis: auto;\n    min-width: 0;\n    transform: translate(0, 0);\n    will-change: transform;\n    transition: transform 0.25s ease-out;\n    padding-right: 24px;\n  }\n\n  :host([data-status="incomplete"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-incomplete-label\n      );\n  }\n\n  :host([data-status="complete"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-complete-label\n      );\n  }\n\n  :host([data-status="inactive"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-inactive-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-inactive-label\n      );\n  }\n\n  :host([invalid]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-invalid-label\n      );\n\n    transform: translate(24px, 0);\n  }\n\n  :host([data-status="incomplete"][data-checked]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-current-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-incomplete-current-label\n      );\n  }\n\n  :host([data-status="complete"][data-checked]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-current-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-complete-current-label\n      );\n  }\n\n  :host([invalid][data-checked]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-invalid-current-label\n      );\n  }\n\n  #icon-error {\n    position: absolute;\n    left: 0;\n    top: 4px;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.25s ease-in-out;\n\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-icon-default\n      );\n    --sinch-global-size-icon: 16px;\n  }\n\n  :host([invalid]) #icon-error {\n    opacity: 1;\n  }\n\n  #progress {\n    height: 8px;\n    border-radius: 4px;\n    transition: background-color 0.25s ease-in-out;\n  }\n\n  :host([data-status="incomplete"]) #progress {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-progress-background\n      );\n  }\n\n  :host([data-status="complete"]) #progress {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-progress-background\n      );\n  }\n\n  :host([data-status="inactive"]) #progress {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-inactive-progress-background\n      );\n  }\n\n  :host([invalid]) #progress {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-progress-background\n      );\n  }\n\n  #bar {\n    width: 8px;\n    height: 8px;\n    border-radius: 4px;\n    opacity: 0;\n    transition: width 0.25s ease-in-out, opacity 0.25s ease-in-out;\n  }\n\n  :host([data-status="incomplete"]) #bar {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-progress-bar\n      );\n  }\n\n  :host([data-status="complete"]) #bar {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-progress-bar\n      );\n    width: 100%;\n  }\n\n  :host([data-status="incomplete"]:not([invalid])) #bar,\n  :host([data-status="complete"]:not([invalid])) #bar {\n    opacity: 1;\n  }\n\n  #label-bar {\n    position: relative;\n  }\n</style>\n\n<div id="button">\n  <div id="progress">\n    <div id="bar"></div>\n  </div>\n  <div id="label-bar">\n    <sinch-icon icons-version="2" name="triangle-exclamation"\n      id="icon-error"\n      aria-hidden="true"\n    ></sinch-icon>\n    <sinch-text id="text" type="m"></sinch-text>\n  </div>\n  <div id="outline"></div>\n</div>\n';
-const template = document.createElement("template");
+import '../icon';
+import '../text';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#button{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;height:100%;padding:8px 4px 4px;box-sizing:border-box;cursor:pointer;border-radius:var(--sinch-comp-progress-stepper-step-shape-radius)}:host([data-status=inactive])>#button{cursor:not-allowed}:host([data-status=incomplete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-background-hover)}:host([data-status=complete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-complete-background-hover)}:host([data-status=invalid]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-invalid-background-hover)}#outline{position:absolute;inset:-2px;border:2px solid var(--sinch-comp-progress-stepper-step-color-outline-focus);border-radius:calc(var(--sinch-comp-progress-stepper-step-shape-radius) + 2px);pointer-events:none;opacity:0}:host(:focus-visible) #outline{opacity:1}#text{flex-shrink:1;flex-basis:auto;min-width:0;transform:translate(0,0);will-change:transform;transition:transform .25s ease-out;padding-right:24px}:host([data-status=incomplete]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-incomplete-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-incomplete-label)}:host([data-status=complete]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-complete-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-complete-label)}:host([data-status=inactive]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-inactive-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-inactive-label)}:host([invalid]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-invalid-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-invalid-label);transform:translate(24px,0)}:host([data-status=incomplete][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-incomplete-current-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-incomplete-current-label)}:host([data-status=complete][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-complete-current-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-complete-current-label)}:host([invalid][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-invalid-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-invalid-current-label)}#icon-error{position:absolute;left:0;top:4px;pointer-events:none;opacity:0;transition:opacity .25s ease-in-out;--sinch-global-color-icon:var(--sinch-comp-progress-stepper-step-color-invalid-icon-default);--sinch-global-size-icon:16px}:host([invalid]) #icon-error{opacity:1}#progress{height:8px;border-radius:4px;transition:background-color .25s ease-in-out}:host([data-status=incomplete]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-progress-background)}:host([data-status=complete]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-complete-progress-background)}:host([data-status=inactive]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-inactive-progress-background)}:host([invalid]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-invalid-progress-background)}#bar{width:8px;height:8px;border-radius:4px;opacity:0;transition:width .25s ease-in-out,opacity .25s ease-in-out}:host([data-status=incomplete]) #bar{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-progress-bar)}:host([data-status=complete]) #bar{background-color:var(--sinch-comp-progress-stepper-step-color-complete-progress-bar);width:100%}:host([data-status=complete]:not([invalid])) #bar,:host([data-status=incomplete]:not([invalid])) #bar{opacity:1}#label-bar{position:relative}</style><div id="button"><div id="progress"><div id="bar"></div></div><div id="label-bar"><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-error" aria-hidden="true"></sinch-icon><sinch-text id="text" type="m"></sinch-text></div><div id="outline"></div></div>';
+import { ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT, ATTR_PROGRESS_STEPPER_ITEM_CHECKED, ATTR_PROGRESS_STEPPER_ITEM_STATUS, isProgressStepperItemActive, isProgressStepperItemActiveDescendant } from './utils';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class ProgressStepperItem extends NectaryElement {
+export class ProgressStepperItem extends NectaryElement {
   #$text;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({ delegatesFocus: false });
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: false
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector("#text");
+    this.#$text = shadowRoot.querySelector('#text');
   }
   connectedCallback() {
-    this.setAttribute("role", "tab");
-  }
-  disconnectedCallback() {
+    this.setAttribute('role', 'tab');
   }
+  disconnectedCallback() {}
   static get observedAttributes() {
-    return [
-      "text",
-      "invalid",
-      ATTR_PROGRESS_STEPPER_ITEM_STATUS,
-      ATTR_PROGRESS_STEPPER_ITEM_CHECKED,
-      ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT
-    ];
+    return ['text', 'invalid', ATTR_PROGRESS_STEPPER_ITEM_STATUS, ATTR_PROGRESS_STEPPER_ITEM_CHECKED, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "text": {
-        this.#$text.textContent = newVal;
-        break;
-      }
-      case ATTR_PROGRESS_STEPPER_ITEM_CHECKED: {
-        updateExplicitBooleanAttribute(
-          this,
-          "aria-selected",
-          isAttrTrue(newVal)
-        );
-        break;
-      }
-      case ATTR_PROGRESS_STEPPER_ITEM_STATUS: {
-        this.#updateTabIndex();
-        break;
-      }
-      case ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT: {
-        this.#updateTabIndex();
-        break;
-      }
-      case "invalid": {
-        if (isAttrEqual(oldVal, newVal)) {
-          return;
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case ATTR_PROGRESS_STEPPER_ITEM_CHECKED:
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+      case ATTR_PROGRESS_STEPPER_ITEM_STATUS:
+        {
+          this.#updateTabIndex();
+          break;
+        }
+      case ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT:
+        {
+          this.#updateTabIndex();
+          break;
+        }
+      case 'invalid':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            return;
+          }
+          const isInvalid = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          updateBooleanAttribute(this, 'invalid', isInvalid);
+          break;
         }
-        const isInvalid = isAttrTrue(newVal);
-        updateExplicitBooleanAttribute(this, "aria-invalid", isInvalid);
-        updateBooleanAttribute(this, "invalid", isInvalid);
-        break;
-      }
     }
   }
   set value(value) {
-    updateAttribute(this, "value", value);
+    updateAttribute(this, 'value', value);
   }
   get value() {
-    return getAttribute(this, "value", "");
+    return getAttribute(this, 'value', '');
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set invalid(isInvalid) {
-    updateBooleanAttribute(this, "invalid", isInvalid);
+    updateBooleanAttribute(this, 'invalid', isInvalid);
   }
   get invalid() {
-    return getBooleanAttribute(this, "invalid");
+    return getBooleanAttribute(this, 'invalid');
   }
   get focusable() {
     return true;
@@ -86,7 +81,4 @@ class ProgressStepperItem extends NectaryElement {
     this.tabIndex = isProgressStepperItemActiveDescendant(this) && isProgressStepperItemActive(this) ? 0 : -1;
   }
 }
-defineCustomElement("sinch-progress-stepper-item", ProgressStepperItem);
-export {
-  ProgressStepperItem
-};
+defineCustomElement('sinch-progress-stepper-item', ProgressStepperItem);

package/progress-stepper-item/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchProgressStepperItemProps = {
     /** Value */
     value: string;
@@ -40,23 +40,3 @@ export type TSinchProgressStepperItem = {
 };
 export type TSinchProgressStepperItemElement = NectaryComponentVanillaByType<TSinchProgressStepperItem>;
 export type TSinchProgressStepperItemReact = NectaryComponentReactByType<TSinchProgressStepperItem>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-progress-stepper-item': TSinchProgressStepperItem;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-progress-stepper-item': NectaryComponentVanilla<'sinch-progress-stepper-item'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-progress-stepper-item': NectaryComponentReact<'sinch-progress-stepper-item'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-progress-stepper-item': NectaryComponentReact<'sinch-progress-stepper-item'>;
-        }
-    }
-}

package/progress-stepper-item/types.js

@@ -1 +1 @@
-
+export {};

package/progress-stepper-item/utils.js

@@ -1,24 +1,13 @@
-import { getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute } from "../utils/dom.js";
-const ATTR_PROGRESS_STEPPER_ITEM_CHECKED = "data-checked";
-const ATTR_PROGRESS_STEPPER_ITEM_STATUS = "data-status";
-const ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT = "data-active-descendant";
-const isProgressStepperItemChecked = ($el) => getBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_CHECKED);
-const setProgressStepperItemChecked = ($el, isChecked) => updateBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_CHECKED, isChecked);
-const isProgressStepperItemActive = ($el) => {
+import { getAttribute, getBooleanAttribute, updateAttribute, updateBooleanAttribute } from '../utils';
+export const ATTR_PROGRESS_STEPPER_ITEM_CHECKED = 'data-checked';
+export const ATTR_PROGRESS_STEPPER_ITEM_STATUS = 'data-status';
+export const ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT = 'data-active-descendant';
+export const isProgressStepperItemChecked = $el => getBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_CHECKED);
+export const setProgressStepperItemChecked = ($el, isChecked) => updateBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_CHECKED, isChecked);
+export const isProgressStepperItemActive = $el => {
   const attrValue = getAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_STATUS);
-  return attrValue !== null && attrValue !== "inactive";
-};
-const setProgressStepperItemStatus = ($el, status) => updateAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_STATUS, status);
-const isProgressStepperItemActiveDescendant = ($el) => getBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT);
-const setProgressStepperItemActiveDescendant = ($el, isActiveDescendant) => updateBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT, isActiveDescendant);
-export {
-  ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT,
-  ATTR_PROGRESS_STEPPER_ITEM_CHECKED,
-  ATTR_PROGRESS_STEPPER_ITEM_STATUS,
-  isProgressStepperItemActive,
-  isProgressStepperItemActiveDescendant,
-  isProgressStepperItemChecked,
-  setProgressStepperItemActiveDescendant,
-  setProgressStepperItemChecked,
-  setProgressStepperItemStatus
+  return attrValue !== null && attrValue !== 'inactive';
 };
+export const setProgressStepperItemStatus = ($el, status) => updateAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_STATUS, status);
+export const isProgressStepperItemActiveDescendant = $el => getBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT);
+export const setProgressStepperItemActiveDescendant = ($el, isActiveDescendant) => updateBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT, isActiveDescendant);

package/radio/index.d.ts

@@ -1,5 +1,6 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchRadio } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Radio extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -18,3 +19,23 @@ export declare class Radio extends NectaryElement {
     get invalid(): boolean;
     attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-radio': TSinchRadio;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-radio': NectaryComponentVanilla<'sinch-radio'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-radio': NectaryComponentReact<'sinch-radio'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-radio': NectaryComponentReact<'sinch-radio'>;
+        }
+    }
+}