@nectary/components 4.12.1 → 5.0.1

package/pop/utils.js

@@ -1,16 +1,32 @@
-export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom-stretch', 'bottom-center', 'top-stretch', 'top-center', 'center-left', 'center-right'];
+const orientationValues = [
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right",
+  "bottom-stretch",
+  "bottom-center",
+  "top-stretch",
+  "top-center",
+  "center-left",
+  "center-right"
+];
 const bodyEl = document.body;
-export const disableOverscroll = () => {
+const disableOverscroll = () => {
   bodyEl.__pop_counter__ = (bodyEl.__pop_counter__ ?? 0) + 1;
   if (bodyEl.__pop_counter__ === 1) {
-    bodyEl.style.setProperty('overscroll-behavior', 'none');
-    document.documentElement.style.setProperty('overscroll-behavior', 'none');
+    bodyEl.style.setProperty("overscroll-behavior", "none");
+    document.documentElement.style.setProperty("overscroll-behavior", "none");
   }
 };
-export const enableOverscroll = () => {
+const enableOverscroll = () => {
   bodyEl.__pop_counter__ = Math.max(0, (bodyEl.__pop_counter__ ?? 0) - 1);
   if (bodyEl.__pop_counter__ === 0) {
-    bodyEl.style.removeProperty('overscroll-behavior');
-    document.documentElement.style.removeProperty('overscroll-behavior');
+    bodyEl.style.removeProperty("overscroll-behavior");
+    document.documentElement.style.removeProperty("overscroll-behavior");
   }
-};
+};
+export {
+  disableOverscroll,
+  enableOverscroll,
+  orientationValues
+};

package/popover/global/index.d.ts

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

package/popover/global/index.js

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

package/popover/index.d.ts

@@ -1,7 +1,7 @@
 import '../pop';
 import { NectaryElement } from '../utils';
-import type { TSinchPopoverOrientation, TSinchPopover } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchPopoverOrientation } from './types';
+export * from './types';
 export declare class Popover extends NectaryElement {
     #private;
     constructor();
@@ -20,23 +20,3 @@ export declare class Popover extends NectaryElement {
     get footprintRect(): import("../types").TRect;
     get popoverRect(): import("../types").TRect;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-popover': TSinchPopover;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-popover': NectaryComponentVanilla<'sinch-popover'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-popover': NectaryComponentReact<'sinch-popover'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-popover': NectaryComponentReact<'sinch-popover'>;
-        }
-    }
-}

package/popover/index.js

@@ -1,37 +1,51 @@
-import '../pop';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap, subscribeContext, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
-import { getPopOrientation, orientationValues } from './utils';
+import "../pop/index.js";
+import { subscribeContext } from "../utils/context.js";
+import { updateAttribute, isAttrEqual, updateBooleanAttribute, isAttrTrue, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, setClass } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { rectOverlap } from "../utils/rect.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { getPopOrientation, orientationValues } from "./utils.js";
+const templateHTML = '<style>\n:host {\n  display: contents;\n}\n\n#content-wrapper {\n  position: relative;\n  padding-top: 4px;\n  width: fit-content;\n  min-width: 100%;\n}\n\n:host([tip]) #content-wrapper {\n  padding-top: 12px;\n  filter: drop-shadow(var(--sinch-comp-popover-shadow));\n}\n\n:host([orientation^="top"]) #content-wrapper {\n  padding-top: 0;\n  padding-bottom: 4px;\n}\n\n:host([orientation^="top"][tip]) #content-wrapper {\n  padding-top: 0;\n  padding-bottom: 12px;\n}\n\n#content {\n  background-color: var(--sinch-comp-popover-color-default-background-initial);\n  border: 1px solid var(--sinch-comp-popover-color-default-border-initial);\n  border-radius: var(--sinch-comp-popover-shape-radius);\n  box-shadow: var(--sinch-comp-popover-shadow);\n  overflow: hidden;\n}\n\n:host([tip]) #content {\n  box-shadow: none;\n}\n\n#tip {\n  position: absolute;\n  left: 50%;\n  top: 13px;\n  transform: translateX(-50%) rotate(180deg);\n  transform-origin: top center;\n  fill: var(--sinch-comp-popover-color-default-background-initial);\n  stroke: var(--sinch-comp-popover-color-default-border-initial);\n  stroke-linecap: square;\n  pointer-events: none;\n  display: none;\n}\n\n:host([orientation^="top"]) #tip {\n  transform: translateX(-50%) rotate(0deg);\n  top: calc(100% - 13px);\n}\n\n:host([tip]) #tip:not(.hidden) {\n  display: block;\n}\n</style>\n\n<sinch-pop id="pop" inset="4">\n  <slot name="target" slot="target"></slot>\n  <div id="content-wrapper" slot="content">\n    <div id="content">\n      <slot name="content"></slot>\n    </div>\n    <svg id="tip" width="16" height="9" aria-hidden="true">\n      <path d="m0 0 8 8 8 -8"/>\n    </svg>\n  </div>\n</sinch-pop>\n';
 const TIP_SIZE = 16;
-const template = document.createElement('template');
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Popover extends NectaryElement {
+class Popover extends NectaryElement {
   #$pop;
   #$content;
   #$tip;
   #controller = null;
   #resizeObserver = null;
+  #$targetSlot;
+  #$contentSlot;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$pop = shadowRoot.querySelector('#pop');
-    this.#$content = shadowRoot.querySelector('#content');
-    this.#$tip = shadowRoot.querySelector('#tip');
+    this.#$pop = shadowRoot.querySelector("#pop");
+    this.#$content = shadowRoot.querySelector("#content");
+    this.#$tip = shadowRoot.querySelector("#tip");
+    this.#$targetSlot = shadowRoot.querySelector('slot[name="target"]');
+    this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    this.addEventListener('-close', this.#onCloseReactHandler, {
-      signal
-    });
-    this.#$pop.addEventListener('-close', this.#onPopClose, {
-      signal
-    });
-    subscribeContext(this.#$content, 'visibility', this.#onContextVisibility, signal);
-    updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
+    const { signal } = this.#controller;
+    this.addEventListener("-close", this.#onCloseReactHandler, { signal });
+    this.#$pop.addEventListener("-close", this.#onPopClose, { signal });
+    subscribeContext(this.#$content, "visibility", this.#onContextVisibility, signal);
+    updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
+    const slottedTarget = this.#getFirstAssignedElementInSlot(this.#$targetSlot);
+    const slottedContent = this.#getFirstAssignedElementInSlot(this.#$contentSlot);
+    const popoverIdReference = `popover-${(/* @__PURE__ */ new Date()).getMilliseconds()}-${Math.round(100 * Math.random())}`;
+    if (slottedContent != null && slottedTarget != null) {
+      updateAttribute(slottedContent, "aria-lablledby", popoverIdReference);
+    }
+    if (slottedTarget != null) {
+      updateAttribute(slottedTarget, "aria-controls", popoverIdReference);
+      updateAttribute(slottedTarget, "aria-haspopup", true);
+      const isOpen = this.getAttribute("open") ?? false;
+      updateAttribute(slottedTarget, "aria-expanded", isOpen);
+    }
     this.#resizeObserver = new ResizeObserver(() => {
       if (this.#$pop.open) {
         this.#updateContentMaxWidth();
@@ -46,68 +60,75 @@ export class Popover extends NectaryElement {
     this.#resizeObserver = null;
   }
   static get observedAttributes() {
-    return ['orientation', 'open', 'modal', 'tip', 'aria-label', 'aria-description'];
+    return [
+      "orientation",
+      "open",
+      "modal",
+      "tip",
+      "aria-label",
+      "aria-description"
+    ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case 'orientation':
-        {
-          updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
-          if (this.#$pop.open) {
-            this.#updateTipOrientation();
-          }
-          break;
-        }
-      case 'tip':
-        {
-          const hasTip = isAttrTrue(newVal);
-          if (hasTip && this.#$pop.open) {
-            this.#updateTipOrientation();
-          }
-          updateBooleanAttribute(this, name, hasTip);
-          break;
+      case "orientation": {
+        updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
+        if (this.#$pop.open) {
+          this.#updateTipOrientation();
         }
-      case 'modal':
-      case 'open':
-        {
-          updateAttribute(this.#$pop, name, newVal);
-          updateBooleanAttribute(this, name, isAttrTrue(newVal));
-          break;
+        break;
+      }
+      case "tip": {
+        const hasTip = isAttrTrue(newVal);
+        if (hasTip && this.#$pop.open) {
+          this.#updateTipOrientation();
         }
-      case 'aria-label':
-      case 'aria-description':
-        {
-          updateAttribute(this.#$pop, name, newVal);
-          break;
+        updateBooleanAttribute(this, name, hasTip);
+        break;
+      }
+      case "modal":
+      case "open": {
+        updateAttribute(this.#$pop, name, newVal);
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        const slottedContent = this.#getFirstAssignedElementInSlot(this.#$targetSlot);
+        if (slottedContent != null) {
+          updateAttribute(slottedContent, "aria-expanded", isAttrTrue(newVal));
         }
+        break;
+      }
+      case "aria-label":
+      case "aria-description": {
+        updateAttribute(this.#$pop, name, newVal);
+        break;
+      }
     }
   }
   set modal(isModal) {
-    updateBooleanAttribute(this, 'modal', isModal);
+    updateBooleanAttribute(this, "modal", isModal);
   }
   get modal() {
-    return getBooleanAttribute(this, 'modal');
+    return getBooleanAttribute(this, "modal");
   }
   set open(isOpen) {
-    updateBooleanAttribute(this, 'open', isOpen);
+    updateBooleanAttribute(this, "open", isOpen);
   }
   get open() {
-    return getBooleanAttribute(this, 'open');
+    return getBooleanAttribute(this, "open");
   }
   set tip(hasTip) {
-    updateBooleanAttribute(this, 'tip', hasTip);
+    updateBooleanAttribute(this, "tip", hasTip);
   }
   get tip() {
-    return getBooleanAttribute(this, 'tip');
+    return getBooleanAttribute(this, "tip");
   }
   get orientation() {
-    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-left');
+    return getLiteralAttribute(this, orientationValues, "orientation", "bottom-left");
   }
   set orientation(value) {
-    updateLiteralAttribute(this, orientationValues, 'orientation', value);
+    updateLiteralAttribute(this, orientationValues, "orientation", value);
   }
   get footprintRect() {
     return this.#$pop.footprintRect;
@@ -115,17 +136,29 @@ export class Popover extends NectaryElement {
   get popoverRect() {
     return this.#$pop.popoverRect;
   }
+  #getFirstAssignedElementInSlot(slot) {
+    if (slot === null) {
+      return null;
+    }
+    const elements = slot != null ? slot.assignedElements() : null;
+    if (elements === null) {
+      return null;
+    }
+    return elements[0];
+  }
   #onPopClose = () => {
     this.#dispatchCloseEvent();
   };
-  #onCloseReactHandler = e => {
-    getReactEventHandler(this, 'onClose')?.();
-    getReactEventHandler(this, 'on-close')?.(e);
+  #onCloseReactHandler = (e) => {
+    getReactEventHandler(this, "onClose")?.();
+    getReactEventHandler(this, "on-close")?.(e);
   };
   #dispatchCloseEvent() {
-    this.dispatchEvent(new CustomEvent('-close'));
+    this.dispatchEvent(
+      new CustomEvent("-close")
+    );
   }
-  #onContextVisibility = e => {
+  #onContextVisibility = (e) => {
     if (e.detail) {
       this.#updateTipOrientation();
       this.#updateContentMaxWidth();
@@ -134,8 +167,8 @@ export class Popover extends NectaryElement {
     }
   };
   #resetTipOrientation() {
-    this.#$tip.style.top = '';
-    this.#$tip.style.left = '';
+    this.#$tip.style.top = "";
+    this.#$tip.style.left = "";
   }
   #updateTipOrientation = () => {
     const orientation = this.orientation;
@@ -143,20 +176,24 @@ export class Popover extends NectaryElement {
     const contentRect = this.#$content.getBoundingClientRect();
     const diffX = targetRect.x - contentRect.x;
     let desiredX = diffX + targetRect.width / 2;
-    if (orientation === 'bottom-left' || orientation === 'top-left') {
+    if (orientation === "bottom-left" || orientation === "top-left") {
       desiredX = Math.max(desiredX, contentRect.width * 0.75);
     }
-    if (orientation === 'bottom-right' || orientation === 'top-right') {
+    if (orientation === "bottom-right" || orientation === "top-right") {
       desiredX = Math.min(desiredX, contentRect.width * 0.25);
     }
     const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
     this.#$tip.style.left = `${xPos}px`;
-    setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
+    setClass(this.#$tip, "hidden", rectOverlap(targetRect, contentRect));
   };
+  // Prevent content from overflowing the viewport
   #updateContentMaxWidth = () => {
     const contentRect = this.#$content.getBoundingClientRect();
     const availableSpace = window.innerWidth - contentRect.left - 16;
     this.#$content.style.maxWidth = `${availableSpace}px`;
   };
 }
-defineCustomElement('sinch-popover', Popover);
+defineCustomElement("sinch-popover", Popover);
+export {
+  Popover
+};

package/popover/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top';
 export type TSinchPopoverProps = {
     /** Open/close state */
@@ -31,3 +31,23 @@ export type TSinchPopover = {
 };
 export type TSinchPopoverElement = NectaryComponentVanillaByType<TSinchPopover>;
 export type TSinchPopoverReact = NectaryComponentReactByType<TSinchPopover>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-popover': TSinchPopover;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-popover': NectaryComponentVanilla<'sinch-popover'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-popover': NectaryComponentReact<'sinch-popover'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-popover': NectaryComponentReact<'sinch-popover'>;
+        }
+    }
+}

package/popover/types.js

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

package/popover/utils.js

@@ -1,10 +1,21 @@
-export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom', 'top'];
-export const getPopOrientation = orientation => {
-  if (orientation === 'top') {
-    return 'top-stretch';
+const orientationValues = [
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right",
+  "bottom",
+  "top"
+];
+const getPopOrientation = (orientation) => {
+  if (orientation === "top") {
+    return "top-stretch";
   }
-  if (orientation === 'bottom') {
-    return 'bottom-stretch';
+  if (orientation === "bottom") {
+    return "bottom-stretch";
   }
   return orientation;
-};
+};
+export {
+  getPopOrientation,
+  orientationValues
+};

package/progress/global/index.d.ts

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

package/progress/global/index.js

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

package/progress/index.d.ts

@@ -1,7 +1,6 @@
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchProgress } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class Progress extends NectaryElement {
     #private;
     constructor();
@@ -13,23 +12,3 @@ export declare class Progress extends NectaryElement {
     get detailed(): boolean;
     set detailed(isDetailed: boolean);
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-progress': TSinchProgress;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-progress': NectaryComponentVanilla<'sinch-progress'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-progress': NectaryComponentReact<'sinch-progress'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-progress': NectaryComponentReact<'sinch-progress'>;
-        }
-    }
-}

package/progress/index.js

@@ -1,60 +1,58 @@
-import '../text';
-import { defineCustomElement, updateAttribute, NectaryElement, updateBooleanAttribute, getIntegerAttribute, getBooleanAttribute, attrValueToInteger, isAttrTrue, isAttrEqual } 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');
+import "../text/index.js";
+import { isAttrEqual, updateBooleanAttribute, isAttrTrue, attrValueToInteger, getIntegerAttribute, updateAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  align-items: center;\n  height: 24px;\n}\n\n#progress,\n#bar {\n  height: 8px;\n  border-radius: 4px;\n}\n\n#progress {\n  background-color: var(--sinch-comp-progress-color-default-background-initial);\n  flex: 1;\n  min-width: 0;\n}\n\n#bar {\n  background-color: var(--sinch-comp-progress-color-default-bar-initial);\n  width: 0;\n}\n\n#text {\n  display: none;\n  width: 46px;\n\n  --sinch-global-color-text: var(--sinch-comp-progress-color-default-text-initial);\n}\n\n:host([detailed]) #text {\n  display: block;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="text" type="m"></sinch-text>\n  <div id="progress">\n    <div id="bar"></div>\n  </div>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Progress extends NectaryElement {
+class Progress extends NectaryElement {
   #$bar;
   #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$bar = shadowRoot.querySelector('#bar');
-    this.#$text = shadowRoot.querySelector('#text');
+    this.#$bar = shadowRoot.querySelector("#bar");
+    this.#$text = shadowRoot.querySelector("#text");
   }
   connectedCallback() {
-    this.setAttribute('role', 'progressbar');
+    this.setAttribute("role", "progressbar");
   }
   static get observedAttributes() {
-    return ['value', 'detailed'];
+    return ["value", "detailed"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case 'value':
-        {
-          const int = attrValueToInteger(newVal, {
-            min: 0,
-            max: 100
-          }) ?? 0;
-          this.#$bar.style.width = `${int}%`;
-          this.#$text.textContent = Intl.NumberFormat(navigator.language, {
-            style: 'percent'
-          }).format(int / 100);
-          this.setAttribute('valuenow', int !== null ? String(int) : '0');
-          break;
-        }
-      case 'detailed':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            break;
-          }
-          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+      case "value": {
+        const int = attrValueToInteger(newVal, { min: 0, max: 100 }) ?? 0;
+        this.#$bar.style.width = `${int}%`;
+        this.#$text.textContent = Intl.NumberFormat(navigator.language, { style: "percent" }).format(int / 100);
+        this.setAttribute("valuenow", int !== null ? String(int) : "0");
+        this.setAttribute("aria-valuenow", int !== null ? String(int) : "0");
+        break;
+      }
+      case "detailed": {
+        if (isAttrEqual(oldVal, newVal)) {
           break;
         }
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
     }
   }
   get value() {
-    return getIntegerAttribute(this, 'value', 0);
+    return getIntegerAttribute(this, "value", 0);
   }
   set value(value) {
-    updateAttribute(this, 'value', value);
+    updateAttribute(this, "value", value);
   }
   get detailed() {
-    return getBooleanAttribute(this, 'detailed');
+    return getBooleanAttribute(this, "detailed");
   }
   set detailed(isDetailed) {
-    updateBooleanAttribute(this, 'detailed', isDetailed);
+    updateBooleanAttribute(this, "detailed", isDetailed);
   }
 }
-defineCustomElement('sinch-progress', Progress);
+defineCustomElement("sinch-progress", Progress);
+export {
+  Progress
+};

package/progress/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchProgressProps = {
     value: number;
     detailed?: boolean;
@@ -15,3 +15,23 @@ export type TSinchProgress = {
 };
 export type TSinchProgressElement = NectaryComponentVanillaByType<TSinchProgress>;
 export type TSinchProgressReact = NectaryComponentReactByType<TSinchProgress>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-progress': TSinchProgress;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress': NectaryComponentVanilla<'sinch-progress'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress': NectaryComponentReact<'sinch-progress'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-progress': NectaryComponentReact<'sinch-progress'>;
+        }
+    }
+}

package/progress/types.js

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

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

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

package/progress-stepper/global/index.js

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

package/progress-stepper/index.d.ts

@@ -1,6 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { TSinchProgressStepper } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+import type { TRect } from '../types';
+export * from './types';
 export declare class ProgressStepper extends NectaryElement {
     #private;
     constructor();
@@ -14,23 +14,3 @@ export declare class ProgressStepper extends NectaryElement {
     get progressValue(): string;
     nthOptionRect(index: number): TRect | null;
 }
-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'>;
-        }
-    }
-}