@nectary/components 2.9.0 → 2.11.0

package/pop/types.d.ts

@@ -0,0 +1,35 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchPopOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'bottom-stretch' | 'top-center' | 'top-stretch' | 'center-right' | 'center-left';
+export type TSinchPopElement = HTMLElement & {
+    /** Open/close state */
+    open: boolean;
+    /** Orientation, where it *points to* from origin */
+    orientation: TSinchPopOrientation;
+    /** Modal/non-modal mode */
+    modal: boolean;
+    inset: number;
+    readonly footprintRect: TRect;
+    readonly popoverRect: TRect;
+    /** Close event */
+    addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
+    /** Open/close state */
+    setAttribute(name: 'open', value: ''): void;
+    /** Orientation, where it *points to* from origin */
+    setAttribute(name: 'orientation', value: TSinchPopOrientation): void;
+    /** Modal/non-modal mode */
+    setAttribute(name: 'modal', value: boolean): void;
+    setAttribute(name: 'inset', value: string): void;
+};
+export type TSinchPopReact = TSinchElementReact<TSinchPopElement> & {
+    /** Open/close state */
+    open: boolean;
+    /** Orientation, where it *points to* from origin */
+    orientation: TSinchPopOrientation;
+    /** Modal/non-modal mode */
+    modal?: boolean;
+    inset?: number;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Close event handler */
+    'on-close'?: (e: CustomEvent<void>) => void;
+};

package/pop/types.js

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

package/pop/utils.d.ts

@@ -0,0 +1,4 @@
+import type { TSinchPopOrientation } from './types';
+export declare const orientationValues: readonly TSinchPopOrientation[];
+export declare const disableOverscroll: () => void;
+export declare const enableOverscroll: () => void;

package/pop/utils.js

@@ -0,0 +1,16 @@
+export 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 = () => {
+  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');
+  }
+};
+export 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');
+  }
+};

package/popover/index.d.ts

@@ -0,0 +1,12 @@
+import '../pop';
+import type { TSinchPopoverElement, TSinchPopoverReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-popover': TSinchPopoverReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-popover': TSinchPopoverElement;
+    }
+}

package/popover/index.js

@@ -0,0 +1,146 @@
+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}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
+import { getPopOrientation, orientationValues } from './utils';
+const TIP_SIZE = 16;
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-popover', class extends NectaryElement {
+  #$pop;
+  #$content;
+  #$tip;
+  #controller = null;
+  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');
+  }
+  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));
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    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 'modal':
+      case 'open':
+        {
+          updateAttribute(this.#$pop, name, newVal);
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+      case 'aria-label':
+      case 'aria-description':
+        {
+          updateAttribute(this.#$pop, name, newVal);
+          break;
+        }
+    }
+  }
+  set modal(isModal) {
+    updateBooleanAttribute(this, 'modal', isModal);
+  }
+  get modal() {
+    return getBooleanAttribute(this, 'modal');
+  }
+  set open(isOpen) {
+    updateBooleanAttribute(this, 'open', isOpen);
+  }
+  get open() {
+    return getBooleanAttribute(this, 'open');
+  }
+  set tip(hasTip) {
+    updateBooleanAttribute(this, 'tip', hasTip);
+  }
+  get tip() {
+    return getBooleanAttribute(this, 'tip');
+  }
+  get orientation() {
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-left');
+  }
+  set orientation(value) {
+    updateLiteralAttribute(this, orientationValues, 'orientation', value);
+  }
+  get footprintRect() {
+    return this.#$pop.footprintRect;
+  }
+  get popoverRect() {
+    return this.#$pop.popoverRect;
+  }
+  #onPopClose = () => {
+    this.#dispatchCloseEvent();
+  };
+  #onCloseReactHandler = e => {
+    getReactEventHandler(this, 'onClose')?.();
+    getReactEventHandler(this, 'on-close')?.(e);
+  };
+  #dispatchCloseEvent() {
+    this.dispatchEvent(new CustomEvent('-close'));
+  }
+  #onContextVisibility = e => {
+    if (e.detail) {
+      this.#updateTipOrientation();
+    } else {
+      this.#resetTipOrientation();
+    }
+  };
+  #resetTipOrientation() {
+    this.#$tip.style.top = '';
+    this.#$tip.style.left = '';
+  }
+  #updateTipOrientation = () => {
+    const orientation = this.orientation;
+    const targetRect = this.#$pop.footprintRect;
+    const contentRect = this.#$content.getBoundingClientRect();
+    const diffX = targetRect.x - contentRect.x;
+    let desiredX = diffX + targetRect.width / 2;
+    if (orientation === 'bottom-left' || orientation === 'top-left') {
+      desiredX = Math.max(desiredX, contentRect.width * 0.75);
+    }
+    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));
+  };
+});

package/popover/types.d.ts

@@ -0,0 +1,38 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top';
+export type TSinchPopoverElement = HTMLElement & {
+    /** Open/close state */
+    open: boolean;
+    /** Orientation, where it *points to* from origin */
+    orientation: TSinchPopoverOrientation;
+    /** Modal/non-modal mode */
+    modal: boolean;
+    /** Show tip */
+    tip: boolean;
+    readonly footprintRect: TRect;
+    readonly popoverRect: TRect;
+    /** Close event */
+    addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
+    /** Open/close state */
+    setAttribute(name: 'open', value: ''): void;
+    /** Orientation, where it *points to* from origin */
+    setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
+    /** Modal/non-modal mode */
+    setAttribute(name: 'modal', value: ''): void;
+    /** Show tip */
+    setAttribute(name: 'tip', value: ''): void;
+};
+export type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
+    /** Open/close state */
+    open: boolean;
+    /** Orientation, where it *points to* from origin */
+    orientation?: TSinchPopoverOrientation;
+    /** Modal/non-modal mode */
+    modal?: boolean;
+    /** Show tip */
+    tip?: boolean;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Close event handler */
+    'on-close'?: (e: CustomEvent<void>) => void;
+};

package/popover/types.js

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

package/popover/utils.d.ts

@@ -0,0 +1,4 @@
+import type { TSinchPopoverOrientation } from './types';
+import type { TSinchPopOrientation } from '../pop/types';
+export declare const orientationValues: readonly TSinchPopoverOrientation[];
+export declare const getPopOrientation: (orientation: TSinchPopoverOrientation) => TSinchPopOrientation;

package/popover/utils.js

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

package/progress/index.d.ts

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchProgressElement, TSinchProgressReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress': TSinchProgressReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress': TSinchProgressElement;
+    }
+}

package/progress/index.js

@@ -0,0 +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');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-progress', class 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');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'progressbar');
+  }
+  static get observedAttributes() {
+    return ['value', 'detailed'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          const int = attrValueToInteger(newVal, {
+            min: 0,
+            max: 100
+          });
+          const intCss = int === null ? '0%' : `${int}%`;
+          this.#$bar.style.width = intCss;
+          this.#$text.textContent = intCss;
+          this.setAttribute('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);
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get detailed() {
+    return getBooleanAttribute(this, 'detailed');
+  }
+  set detailed(isDetailed) {
+    updateBooleanAttribute(this, 'detailed', isDetailed);
+  }
+});

package/progress/types.d.ts

@@ -0,0 +1,12 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchProgressElement = HTMLElement & {
+    value: number;
+    detailed: boolean;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'detailed', value: ''): void;
+};
+export type TSinchProgressReact = TSinchElementReact<TSinchProgressElement> & {
+    value: number;
+    detailed?: boolean;
+    'aria-label': string;
+};

package/progress/types.js

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

package/progress-stepper/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchProgressStepperElement, TSinchProgressStepperReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress-stepper': TSinchProgressStepperReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress-stepper': TSinchProgressStepperElement;
+    }
+}

package/progress-stepper/index.js

@@ -0,0 +1,206 @@
+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;
+defineCustomElement('sinch-progress-stepper', class extends NectaryElement {
+  #$slot;
+  #controller = null;
+  #$items = [];
+  #currentActiveDescendantIndex = -1;
+  #isGoingToFocusItem = false;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$slot = shadowRoot.querySelector('slot');
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.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.#onSlotChange();
+    });
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['value', 'progressvalue'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          this.#onValueChange(newVal);
+          break;
+        }
+      case 'progressvalue':
+        {
+          this.#updateProgressValue();
+          break;
+        }
+    }
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set progressValue(value) {
+    updateAttribute(this, 'progressvalue', value);
+  }
+  get progressValue() {
+    return getAttribute(this, 'progressvalue', '');
+  }
+  nthOptionRect(index) {
+    const $el = this.#$slot.assignedElements()[index];
+    if ($el != null) {
+      return getRect($el);
+    }
+    return null;
+  }
+  #onSlotChange = () => {
+    this.#$items = this.#$slot.assignedElements();
+    this.#onValueChange(this.value);
+    this.#updateProgressValue();
+  };
+  #onOptionClick = e => {
+    const target = getTargetByAttribute(e, 'value');
+    if (target !== null && isProgressStepperItemActive(target)) {
+      this.dispatchEvent(new CustomEvent('-change', {
+        detail: getAttribute(target, 'value')
+      }));
+    }
+  };
+  #onValueChange(value) {
+    for (const $item of this.#$items) {
+      const isChecked = value === getAttribute($item, 'value');
+      setProgressStepperItemChecked($item, isChecked);
+    }
+    this.#resetActiveDescendant();
+  }
+  #focusNextItem() {
+    for (let i = 0; i < this.#$items.length; i++) {
+      const nextIndex = (this.#currentActiveDescendantIndex + 1 + i) % this.#$items.length;
+      const item = this.#$items[nextIndex];
+      if (isProgressStepperItemActive(item)) {
+        setProgressStepperItemActiveDescendant(item, true);
+        this.#isGoingToFocusItem = true;
+        item.focus();
+        if (this.#currentActiveDescendantIndex >= 0) {
+          setProgressStepperItemActiveDescendant(this.#$items[this.#currentActiveDescendantIndex], false);
+        }
+        this.#currentActiveDescendantIndex = nextIndex;
+        break;
+      }
+    }
+  }
+  #focusPrevItem() {
+    for (let i = 0; i < this.#$items.length; i++) {
+      const nextIndex = (this.#currentActiveDescendantIndex - i - 1 + this.#$items.length) % this.#$items.length;
+      const item = this.#$items[nextIndex];
+      if (isProgressStepperItemActive(item)) {
+        setProgressStepperItemActiveDescendant(item, true);
+        this.#isGoingToFocusItem = true;
+        item.focus();
+        if (this.#currentActiveDescendantIndex >= 0) {
+          setProgressStepperItemActiveDescendant(this.#$items[this.#currentActiveDescendantIndex], false);
+        }
+        this.#currentActiveDescendantIndex = nextIndex;
+        break;
+      }
+    }
+  }
+  #updateProgressValue() {
+    const progressValue = this.progressValue;
+    const $items = this.#$slot.assignedElements();
+    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');
+      } else if ($progressValueIndex > i) {
+        setProgressStepperItemStatus($items[i], 'complete');
+      } else {
+        setProgressStepperItemStatus($items[i], 'incomplete');
+      }
+    }
+    this.#resetActiveDescendant();
+  }
+  #getCheckedItemIndex() {
+    for (let i = 0; i < this.#$items.length; i++) {
+      if (isProgressStepperItemChecked(this.#$items[i])) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  #getFirstActiveItemIndex() {
+    for (let i = 0; i < this.#$items.length; i++) {
+      if (isProgressStepperItemActive(this.#$items[i])) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  #resetActiveDescendant() {
+    if (this.#currentActiveDescendantIndex >= 0) {
+      setProgressStepperItemActiveDescendant(this.#$items[this.#currentActiveDescendantIndex], false);
+    }
+    this.#currentActiveDescendantIndex = this.#getCheckedItemIndex();
+    if (this.#currentActiveDescendantIndex >= 0) {
+      setProgressStepperItemActiveDescendant(this.#$items[this.#currentActiveDescendantIndex], true);
+      return;
+    }
+    this.#currentActiveDescendantIndex = this.#getFirstActiveItemIndex();
+    if (this.#currentActiveDescendantIndex >= 0) {
+      setProgressStepperItemActiveDescendant(this.#$items[this.#currentActiveDescendantIndex], true);
+    }
+  }
+  #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;
+        }
+    }
+  };
+  #onOptionBlur = () => {
+    if (this.#isGoingToFocusItem) {
+      this.#isGoingToFocusItem = false;
+      return;
+    }
+    this.#resetActiveDescendant();
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/progress-stepper/types.d.ts

@@ -0,0 +1,22 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchProgressStepperElement = HTMLElement & {
+    /** Current selected item value */
+    value: string;
+    /** Current progress value */
+    progressValue: string;
+    nthOptionRect(index: number): TRect | null;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Current selected item value */
+    setAttribute(name: 'value', value: string): void;
+    /** Current progress value */
+    setAttribute(name: 'progressvalue', value: string): void;
+};
+export type TSinchProgressStepperReact = TSinchElementReact<TSinchProgressStepperElement> & {
+    /** Current selected item value */
+    value: string;
+    /** Current progress value */
+    progressValue: string;
+    /** Change selected value event */
+    'on-change'?: (e: CustomEvent<string>) => void;
+};

package/progress-stepper/types.js

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

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

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchProgressStepperItemElement, TSinchProgressStepperItemReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress-stepper-item': TSinchProgressStepperItemReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress-stepper-item': TSinchProgressStepperItemElement;
+    }
+}