@nectary/components 4.11.1 → 4.12.0

package/progress-stepper/index.js

@@ -1,35 +1,35 @@
-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');
+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");
 template.innerHTML = templateHTML;
-export class ProgressStepper extends NectaryElement {
+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,33 +38,31 @@ export 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];
@@ -78,17 +76,17 @@ export 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();
@@ -128,14 +126,14 @@ export 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();
@@ -170,27 +168,24 @@ export 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 = () => {
@@ -200,8 +195,11 @@ export 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);
+defineCustomElement("sinch-progress-stepper", ProgressStepper);
+export {
+  ProgressStepper
+};

package/progress-stepper/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchProgressStepperProps = {
     /** Current selected item value */
     value: string;
@@ -15,3 +15,23 @@ 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/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/progress-stepper-item/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-progress-stepper-item");

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

@@ -1,8 +1,7 @@
 import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchProgressStepperItem } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class ProgressStepperItem extends NectaryElement {
     #private;
     constructor();
@@ -18,23 +17,3 @@ 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,78 +1,83 @@
-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');
+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");
 template.innerHTML = templateHTML;
-export class ProgressStepperItem extends NectaryElement {
+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');
+    this.setAttribute("role", "tab");
+  }
+  disconnectedCallback() {
   }
-  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;
-          }
-          const isInvalid = isAttrTrue(newVal);
-          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
-          updateBooleanAttribute(this, 'invalid', isInvalid);
-          break;
+      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;
+      }
     }
   }
   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;
@@ -81,4 +86,7 @@ export class ProgressStepperItem extends NectaryElement {
     this.tabIndex = isProgressStepperItemActiveDescendant(this) && isProgressStepperItemActive(this) ? 0 : -1;
   }
 }
-defineCustomElement('sinch-progress-stepper-item', ProgressStepperItem);
+defineCustomElement("sinch-progress-stepper-item", ProgressStepperItem);
+export {
+  ProgressStepperItem
+};

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

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchProgressStepperItemProps = {
     /** Value */
     value: string;
@@ -40,3 +40,23 @@ 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,13 +1,24 @@
-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 => {
+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) => {
   const attrValue = getAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_STATUS);
-  return attrValue !== null && attrValue !== 'inactive';
+  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
 };
-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/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/radio/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-radio");

package/radio/index.d.ts

@@ -1,6 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchRadio } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class Radio extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -19,23 +18,3 @@ 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'>;
-        }
-    }
-}