@nectary/components 0.39.0 → 0.41.0

package/utils/colors.d.ts

@@ -0,0 +1,5 @@
+export declare const NO_COLOR: "";
+export declare const lightColorNames: string;
+export declare const darkColorNames: string;
+export declare const vibrantColorNames: string;
+export declare const skinToneColorNames: string;

package/utils/colors.js

@@ -0,0 +1,5 @@
+export const NO_COLOR = '';
+export const lightColorNames = ['light-violet', 'light-blue', 'light-green', 'light-yellow', 'light-orange', 'light-pink', 'light-brown', 'light-gray'].join(',');
+export const darkColorNames = ['dark-violet', 'dark-blue', 'dark-green', 'dark-yellow', 'dark-orange', 'dark-pink', 'dark-brown', 'dark-gray'].join(',');
+export const vibrantColorNames = ['violet', 'blue', 'green', 'yellow', 'orange', 'pink', 'brown', 'gray'].join(',');
+export const skinToneColorNames = ['skin-tone-0', 'skin-tone-10', 'skin-tone-20', 'skin-tone-30', 'skin-tone-40', 'skin-tone-50'].join(',');

package/utils/context.d.ts

@@ -0,0 +1,15 @@
+export declare type TContextName = 'visibility' | 'keydown';
+export declare type TContextKeyboard = {
+    code: string;
+    preventDefault: () => void;
+};
+export declare type TContextVisibility = boolean;
+export declare class Context {
+    #private;
+    constructor($element: Element, name: TContextName);
+    get elements(): Iterable<Element>;
+    subscribe(): void;
+    unsubscribe(): void;
+}
+export declare const dispatchContextConnectEvent: (el: Element, name: TContextName) => void;
+export declare const dispatchContextDisconnectEvent: (el: Element, name: TContextName) => void;

package/utils/context.js

@@ -0,0 +1,57 @@
+export class Context {
+  #$root;
+  #listeners = new Set();
+  #name;
+  #isSubscribed = false;
+
+  constructor($element, name) {
+    this.#$root = $element;
+    this.#name = name;
+  }
+
+  get elements() {
+    return this.#listeners;
+  }
+
+  subscribe() {
+    if (this.#isSubscribed) {
+      return;
+    }
+
+    this.#$root.addEventListener(`-context-connect-${this.#name}`, this.#onConnect);
+    this.#$root.addEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
+    this.#isSubscribed = true;
+  }
+
+  unsubscribe() {
+    this.#listeners.clear();
+    this.#$root.removeEventListener(`-context-connect-${this.#name}`, this.#onConnect);
+    this.#$root.removeEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
+    this.#isSubscribed = false;
+  }
+
+  #onConnect = e => {
+    e.stopPropagation();
+    this.#listeners.add(e.detail);
+  };
+  #onDisconnect = e => {
+    e.stopPropagation();
+    this.#listeners.delete(e.detail);
+  };
+}
+export const dispatchContextConnectEvent = (el, name) => {
+  requestAnimationFrame(() => {
+    el.dispatchEvent(new CustomEvent(`-context-connect-${name}`, {
+      bubbles: true,
+      composed: true,
+      detail: el
+    }));
+  });
+};
+export const dispatchContextDisconnectEvent = (el, name) => {
+  el.dispatchEvent(new CustomEvent(`-context-disconnect-${name}`, {
+    bubbles: true,
+    composed: true,
+    detail: el
+  }));
+};

package/{utils.d.ts → utils/index.d.ts}

@@ -1,4 +1,4 @@
-import type { TRect } from './types';
+import type { TRect } from '../types';
 export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
 export declare const setNectaryRegistry: (registry: CustomElementRegistry) => void;
 declare global {
@@ -8,7 +8,8 @@ declare global {
 }
 export declare class NectaryElement extends HTMLElement {
     attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
-    __version: string;
+    version: string;
+    get focusable(): boolean;
 }
 export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;
 export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
@@ -16,8 +17,7 @@ export declare const isAttrTrue: (attrValue: string | null) => boolean;
 export declare const getBooleanAttribute: ($element: Element, attrName: string) => boolean;
 export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
 export declare const updateAttribute: ($element: Element, attrName: string, attrValue: string | number | boolean | null | undefined) => void;
-export declare function getAttribute($element: Element, attrName: string): string | undefined;
-export declare function getAttribute($element: Element, attrName: string, defaultValue: null): string | null;
+export declare function getAttribute($element: Element, attrName: string): string | null;
 export declare function getAttribute($element: Element, attrName: string, defaultValue: string): string;
 export declare const isLiteralValue: <T extends readonly string[]>(literals: T, value: string | null | undefined) => value is T[number];
 export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: string | null | undefined) => void;
@@ -25,15 +25,16 @@ export declare function getLiteralAttribute<T extends readonly string[]>($elemen
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
 export declare const clampNumber: (value: number, min: number, max: number) => number;
-declare type TRange = {
+declare type IntegerOptions = {
     min?: number;
     max?: number;
+    defaultValue?: number | null;
+    itemSizeMultiplier?: number;
+    itemSpaceBetween?: number;
 };
-export declare const attrValueToInteger: (value: string | null, range?: TRange) => number | null;
-export declare const attrValueToPixels: (value: string | null, options?: TRange & {
-    multiplier?: number;
-}) => string;
-export declare const updateIntegerAttribute: ($element: Element, attrName: string, attrValue: string | number | null | undefined, range?: TRange) => void;
+export declare const attrValueToInteger: (value: string | null, options?: IntegerOptions) => number | null;
+export declare const attrValueToPixels: (value: string | null, options?: IntegerOptions) => string;
+export declare const updateIntegerAttribute: ($element: Element, attrName: string, attrValue: string | number | null | undefined, options?: IntegerOptions) => void;
 export declare function getIntegerAttribute($element: Element, attrName: string): number | undefined;
 export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: null): number | null;
 export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: number): number;
@@ -47,6 +48,9 @@ export declare const throttleAnimationFrame: (cb: (...args: any[]) => void) => {
     fn: (...args: any[]) => void;
     cancel: () => void;
 };
-export declare const getFirstSlotElement: (root: HTMLSlotElement) => HTMLElement | null;
+export declare const getFirstSlotElement: (root: HTMLSlotElement, isDeep?: boolean) => HTMLElement | null;
+export declare const getFirstFocusableElement: (root: Element) => NectaryElement | null;
 export declare const cloneNode: (el: Element, deep: boolean) => Element;
+export declare const isElementFocused: ($el: Element | null) => boolean;
+export declare const rectOverlap: (targetRect: TRect, contentRect: TRect) => boolean;
 export {};

package/{utils.js → utils/index.js}

@@ -1,5 +1,4 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import pkg from './package.json';
+import pkg from '../package.json';
 const nectaryDefinitions = new Map();
 let nectaryRegistry = null;
 export const defineCustomElement = (name, constructor) => {
@@ -29,12 +28,6 @@ export const setNectaryRegistry = registry => {
   nectaryDefinitions.clear();
 };
 export class NectaryElement extends HTMLElement {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, '__version', pkg.version);
-  }
-
   attachShadow(options) {
     return super.attachShadow({
       mode: 'closed',
@@ -44,6 +37,12 @@ export class NectaryElement extends HTMLElement {
     });
   }
 
+  version = pkg.version;
+
+  get focusable() {
+    return false;
+  }
+
 }
 export const getReactEventHandler = ($element, handlerName) => {
   for (const key in $element) {
@@ -81,7 +80,8 @@ export const updateAttribute = ($element, attrName, attrValue) => {
     $element.removeAttribute(attrName);
   }
 };
-export function getAttribute($element, attrName, defaultValue) {
+export function getAttribute($element, attrName) {
+  let defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   return $element.getAttribute(attrName) ?? defaultValue;
 }
 export const isLiteralValue = (literals, value) => {
@@ -110,59 +110,79 @@ export function getLiteralAttribute($element, literals, attrName, defaultValue)
 export const clampNumber = (value, min, max) => {
   return Math.min(max, Math.max(min, value));
 };
+const DEFAULT_INTEGER_OPTIONS = {
+  itemSizeMultiplier: 1,
+  itemSpaceBetween: 0,
+  defaultValue: null
+};
 
-const applyRange = (value, range) => {
+const applyRange = (value, _ref) => {
+  let {
+    min,
+    max
+  } = _ref;
   let result = value;
 
-  if (typeof range.min === 'number') {
-    result = Math.max(range.min, result);
+  if (min != null) {
+    result = Math.max(min, result);
   }
 
-  if (typeof range.max === 'number') {
-    result = Math.min(range.max, result);
+  if (max != null) {
+    result = Math.min(max, result);
   }
 
   return result;
 };
 
 export const attrValueToInteger = function (value) {
-  let range = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+  const {
+    defaultValue = null,
+    itemSizeMultiplier = 1,
+    itemSpaceBetween = 0
+  } = options;
+  let intValue = defaultValue;
 
-  if (value === null) {
-    return null;
-  }
+  if (value !== null) {
+    const int = parseInt(value);
 
-  const int = parseInt(value);
+    if (Number.isInteger(int)) {
+      intValue = applyRange(int, options);
+    }
+  }
 
-  if (!Number.isInteger(int)) {
-    return null;
+  if (intValue !== null) {
+    return intValue * itemSizeMultiplier + Math.max(intValue - 1, 0) * itemSpaceBetween;
   }
 
-  return applyRange(int, range);
+  return null;
 };
 export const attrValueToPixels = function (value) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const int = attrValueToInteger(value, {
-    min: options.min ?? 0,
-    max: options.max
-  });
-  return int === null ? 'unset' : `${int * (options.multiplier ?? 1)}px`;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+  const int = attrValueToInteger(value, options);
+  return int === null ? 'unset' : `${int}px`;
 };
 export const updateIntegerAttribute = function ($element, attrName, attrValue) {
-  let range = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-
-  if (attrValue == null) {
-    $element.removeAttribute(attrName);
-    return;
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DEFAULT_INTEGER_OPTIONS;
+  const {
+    defaultValue = null,
+    itemSizeMultiplier: multiplier = 1
+  } = options;
+  let intValue = null;
+
+  if (typeof attrValue === 'string') {
+    intValue = attrValueToInteger(attrValue, options);
+  } else if (typeof attrValue === 'number') {
+    intValue = applyRange(attrValue, options) * multiplier;
+  } else {
+    intValue = defaultValue;
   }
 
-  const intValue = typeof attrValue === 'string' ? attrValueToInteger(attrValue, range) : applyRange(attrValue, range);
-
   if (intValue === null) {
-    return;
+    $element.removeAttribute(attrName);
+  } else {
+    $element.setAttribute(attrName, intValue.toFixed(0));
   }
-
-  $element.setAttribute(attrName, intValue.toFixed(0));
 };
 export function getIntegerAttribute($element, attrName, defaultValue) {
   return attrValueToInteger($element.getAttribute(attrName)) ?? defaultValue;
@@ -245,22 +265,52 @@ const throttle = (delayFn, cancelFn) => cb => {
 };
 
 export const throttleAnimationFrame = throttle(global.requestAnimationFrame, global.cancelAnimationFrame);
-export const getFirstSlotElement = root => {
-  let slot = root;
 
-  while (true) {
-    const el = slot.assignedElements()[0];
+const isSlotElement = el => {
+  return el.tagName === 'SLOT';
+};
 
-    if (el == null) {
-      return null;
-    }
+export const getFirstSlotElement = function (root) {
+  let isDeep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const el = root.assignedElements()[0];
+
+  if (el == null) {
+    return null;
+  }
+
+  if (isDeep && isSlotElement(el)) {
+    return getFirstSlotElement(el, isDeep);
+  }
+
+  return el;
+};
+
+const getChildren = root => {
+  if (isSlotElement(root)) {
+    return root.assignedElements();
+  }
+
+  return Array.from(root.children);
+};
 
-    if (el.tagName !== 'SLOT') {
-      return el;
+const isFocusable = el => {
+  return el.focusable === true;
+};
+
+export const getFirstFocusableElement = root => {
+  for (const child of getChildren(root)) {
+    if (isFocusable(child)) {
+      return child;
     }
 
-    slot = el;
+    const resultEl = getFirstFocusableElement(child);
+
+    if (resultEl !== null) {
+      return resultEl;
+    }
   }
+
+  return null;
 };
 export const cloneNode = (el, deep) => {
   const root = el.getRootNode();
@@ -283,4 +333,10 @@ export const cloneNode = (el, deep) => {
   }
 
   return el.cloneNode(deep);
+};
+export const isElementFocused = $el => {
+  return $el !== null && $el === $el.getRootNode().activeElement;
+};
+export const rectOverlap = (targetRect, contentRect) => {
+  return targetRect.x < contentRect.x + contentRect.width && targetRect.x + targetRect.width > contentRect.x && targetRect.y < contentRect.y + contentRect.height && targetRect.y + targetRect.height > contentRect.y;
 };

package/vertical-stepper/index.js

@@ -1,68 +1,27 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$itemsSlot, _updateItems;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import '../icons/check';
 import '../icons/error-outline';
 import { clampNumber, defineCustomElement, getAttribute, getIntegerAttribute, NectaryElement, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;width:100%}#progress{position:absolute;height:1px;background-color:var(--sinch-color-snow-700);left:72px;right:72px;top:16px;transform:translateY(-50%)}#bar{position:absolute;height:1px;background-color:var(--sinch-color-stormy-400);left:0;top:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-vertical-stepper', (_$itemsSlot = new WeakMap(), _updateItems = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-vertical-stepper', class extends NectaryElement {
+  #$itemsSlot;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$itemsSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _updateItems, {
-      writable: true,
-      value: () => {
-        const $items = _classPrivateFieldGet(this, _$itemsSlot).assignedElements();
-
-        const activeIndex = clampNumber(getIntegerAttribute(this, 'index', 0), 0, $items.length + 1);
-
-        for (let i = 0; i < $items.length; i++) {
-          const $el = $items[i];
-          const itemIndex = i + 1;
-          $el.setAttribute('data-index', String(itemIndex));
-
-          if (itemIndex === activeIndex) {
-            $el.setAttribute('data-progress', 'active');
-          } else if (itemIndex < activeIndex) {
-            $el.setAttribute('data-progress', 'done');
-          } else {
-            $el.removeAttribute('data-progress');
-          }
-        }
-
-        this.setAttribute('aria-valuemax', String($items.length));
-        this.setAttribute('aria-valuenow', String(clampNumber(activeIndex, 0, $items.length)));
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$itemsSlot, shadowRoot.querySelector('slot'));
+    this.#$itemsSlot = shadowRoot.querySelector('slot');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'progressbar');
     this.setAttribute('aria-valuemin', '0');
-
-    _classPrivateFieldGet(this, _$itemsSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+    this.#$itemsSlot.addEventListener('slotchange', this.#updateItems);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$itemsSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+    this.#$itemsSlot.removeEventListener('slotchange', this.#updateItems);
   }
 
   static get observedAttributes() {
@@ -77,8 +36,7 @@ defineCustomElement('sinch-vertical-stepper', (_$itemsSlot = new WeakMap(), _upd
     switch (name) {
       case 'index':
         {
-          _classPrivateFieldGet(this, _updateItems).call(this);
-
+          this.#updateItems();
           break;
         }
     }
@@ -92,4 +50,25 @@ defineCustomElement('sinch-vertical-stepper', (_$itemsSlot = new WeakMap(), _upd
     return getAttribute(this, 'index', '1');
   }
 
-}));
+  #updateItems = () => {
+    const $items = this.#$itemsSlot.assignedElements();
+    const activeIndex = clampNumber(getIntegerAttribute(this, 'index', 0), 0, $items.length + 1);
+
+    for (let i = 0; i < $items.length; i++) {
+      const $el = $items[i];
+      const itemIndex = i + 1;
+      $el.setAttribute('data-index', String(itemIndex));
+
+      if (itemIndex === activeIndex) {
+        $el.setAttribute('data-progress', 'active');
+      } else if (itemIndex < activeIndex) {
+        $el.setAttribute('data-progress', 'done');
+      } else {
+        $el.removeAttribute('data-progress');
+      }
+    }
+
+    this.setAttribute('aria-valuemax', String($items.length));
+    this.setAttribute('aria-valuenow', String(clampNumber(activeIndex, 0, $items.length)));
+  };
+});

package/vertical-stepper-item/index.js

@@ -1,46 +1,22 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$label, _$description, _$circleText;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import '../icons/check';
 import '../icons/exclamation';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;min-height:68px}#circle-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0}#circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-icon-size:20px}#label-wrapper{margin-top:4px;min-width:0;flex:1}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}#content{display:none;padding:16px 0 16px 40px}#progress{position:absolute;width:1px;left:16px;top:32px;bottom:0;background-color:var(--sinch-color-snow-700);transform:translateX(-50%)}#bar{position:absolute;width:1px;height:0;background-color:var(--sinch-color-stormy-400);left:0;top:0}:host(:last-of-type) #progress{display:none}:host([data-progress=active]) #content{display:block}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-error-200);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}:host([data-progress=done]) #bar{height:100%}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><div id="circle-wrapper"><div id="circle" aria-hidden="true"><sinch-icon-check id="icon-success"></sinch-icon-check><sinch-icon-exclamation id="icon-error"></sinch-icon-exclamation><span id="circle-text"></span></div><div id="label-wrapper"><div id="label"></div><div id="description"></div></div></div><div id="content"><slot></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;min-height:68px}#circle-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0}#circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-size-icon:20px}#label-wrapper{margin-top:4px;min-width:0;flex:1}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}#content{display:none;padding:16px 0 16px 40px}#progress{position:absolute;width:1px;left:16px;top:32px;bottom:0;background-color:var(--sinch-color-snow-700);transform:translateX(-50%)}#bar{position:absolute;width:1px;height:0;background-color:var(--sinch-color-stormy-400);left:0;top:0}:host(:last-of-type) #progress{display:none}:host([data-progress=active]) #content{display:block}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-error-200);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}:host([data-progress=done]) #bar{height:100%}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><div id="circle-wrapper"><div id="circle" aria-hidden="true"><sinch-icon-check id="icon-success"></sinch-icon-check><sinch-icon-exclamation id="icon-error"></sinch-icon-exclamation><span id="circle-text"></span></div><div id="label-wrapper"><div id="label"></div><div id="description"></div></div></div><div id="content"><slot></slot></div></div>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-vertical-stepper-item', (_$label = new WeakMap(), _$description = new WeakMap(), _$circleText = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-vertical-stepper-item', class extends NectaryElement {
+  #$label;
+  #$description;
+  #$circleText;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$description, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$circleText, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
-
-    _classPrivateFieldSet(this, _$description, shadowRoot.querySelector('#description'));
-
-    _classPrivateFieldSet(this, _$circleText, shadowRoot.querySelector('#circle-text'));
+    this.#$label = shadowRoot.querySelector('#label');
+    this.#$description = shadowRoot.querySelector('#description');
+    this.#$circleText = shadowRoot.querySelector('#circle-text');
   }
 
   connectedCallback() {}
@@ -55,19 +31,19 @@ defineCustomElement('sinch-vertical-stepper-item', (_$label = new WeakMap(), _$d
     switch (name) {
       case 'label':
         {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          this.#$label.textContent = newVal;
           break;
         }
 
       case 'description':
         {
-          _classPrivateFieldGet(this, _$description).textContent = newVal;
+          this.#$description.textContent = newVal;
           break;
         }
 
       case 'data-index':
         {
-          _classPrivateFieldGet(this, _$circleText).textContent = newVal;
+          this.#$circleText.textContent = newVal;
           break;
         }
     }
@@ -97,4 +73,4 @@ defineCustomElement('sinch-vertical-stepper-item', (_$label = new WeakMap(), _$d
     updateLiteralAttribute(this, statusValues, 'status', value);
   }
 
-}));
+});

package/dropdown/index.d.ts

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