@nectary/components 2.8.8 → 2.9.0

package/pop/types.d.ts

@@ -1,35 +0,0 @@
-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

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

package/pop/utils.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,146 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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 */
-    onClose?: () => void;
-    /** Close event handler */
-    'on-close'?: (e: CustomEvent<void>) => void;
-};

package/popover/types.js

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

package/popover/utils.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

package/progress-stepper/index.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,206 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-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;
-    }
-}