@nectary/components 2.12.1 → 2.12.2

package/lib/cjs/pop/index.js

@@ -0,0 +1,427 @@
+"use strict";
+
+var _utils = require('../utils');
+var _utils2 = require('./utils');
+const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-pop', class extends _utils.NectaryElement {
+  #$targetWrapper;
+  #$focus;
+  #$dialog;
+  #resizeThrottle;
+  #$targetSlot;
+  #$targetOpenSlot;
+  #$contentSlot;
+  #$targetOpenWrapper;
+  #targetActiveElement = null;
+  #controller;
+  #keydownContext;
+  #visibilityContext;
+  #targetStyleValue = null;
+  #modalWidth = 0;
+  #modalHeight = 0;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$targetWrapper = shadowRoot.querySelector('#target');
+    this.#$focus = shadowRoot.querySelector('#focus');
+    this.#$dialog = shadowRoot.querySelector('#dialog');
+    this.#$targetSlot = shadowRoot.querySelector('slot[name="target"]');
+    this.#$targetOpenSlot = shadowRoot.querySelector('slot[name="target-open"]');
+    this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
+    this.#$targetOpenWrapper = shadowRoot.querySelector('#target-open');
+    this.#resizeThrottle = (0, _utils.throttleAnimationFrame)(this.#updateOrientation);
+    this.#keydownContext = new _utils.Context(this.#$contentSlot, 'keydown');
+    this.#visibilityContext = new _utils.Context(this.#$contentSlot, 'visibility');
+    this.#controller = new AbortController();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.#controller === null) {
+      this.#controller = new AbortController();
+    }
+    const {
+      signal
+    } = this.#controller;
+    this.#keydownContext.listen(signal);
+    this.#visibilityContext.listen(signal);
+    this.role = 'dialog';
+    this.#$dialog.addEventListener('cancel', this.#onCancel, {
+      signal
+    });
+    this.#$dialog.addEventListener('mousedown', this.#onBackdropMouseDown, {
+      signal
+    });
+    this.addEventListener('-close', this.#onCloseReactHandler, {
+      signal
+    });
+    (0, _utils.subscribeContext)(this, 'visibility', this.#onContextVisibility, signal);
+    if ((0, _utils.getBooleanAttribute)(this, 'open')) {
+      this.#onExpand();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller.abort();
+    this.#controller = null;
+    this.#resizeThrottle.cancel();
+    this.#onCollapse();
+  }
+  static get observedAttributes() {
+    return ['orientation', 'open'];
+  }
+  set modal(isModal) {
+    (0, _utils.updateBooleanAttribute)(this, 'modal', isModal);
+  }
+  get modal() {
+    return (0, _utils.getBooleanAttribute)(this, 'modal');
+  }
+  set open(isOpen) {
+    (0, _utils.updateBooleanAttribute)(this, 'open', isOpen);
+  }
+  get open() {
+    return (0, _utils.getBooleanAttribute)(this, 'open');
+  }
+  get orientation() {
+    return (0, _utils.getLiteralAttribute)(this, _utils2.orientationValues, 'orientation');
+  }
+  set orientation(value) {
+    (0, _utils.updateLiteralAttribute)(this, _utils2.orientationValues, 'orientation', value);
+  }
+  set inset(inset) {
+    (0, _utils.updateIntegerAttribute)(this, 'inset', inset);
+  }
+  get inset() {
+    return (0, _utils.getIntegerAttribute)(this, 'inset', 0);
+  }
+  get footprintRect() {
+    return this.#getTargetRect();
+  }
+  get popoverRect() {
+    return (0, _utils.getRect)(this.#$dialog);
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if ((0, _utils.isAttrEqual)(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'open':
+        {
+          const shouldOpen = (0, _utils.isAttrTrue)(newVal);
+          if (shouldOpen) {
+            requestAnimationFrame(() => {
+              if (this.isDomConnected && (0, _utils.getBooleanAttribute)(this, 'open')) {
+                this.#onExpand();
+              }
+            });
+          } else {
+            this.#onCollapse();
+          }
+          (0, _utils.updateBooleanAttribute)(this, 'open', shouldOpen);
+          break;
+        }
+      case 'orientation':
+        {
+          if (this.#$dialog.open) {
+            this.#updateOrientation();
+          }
+          break;
+        }
+    }
+  }
+  #getTargetRect() {
+    let item = (0, _utils.getFirstSlotElement)(this.#$targetSlot, true);
+    if (item === null && this.#$dialog.open) {
+      item = (0, _utils.getFirstSlotElement)(this.#$targetOpenSlot, true);
+    }
+    if (item === null) {
+      return (0, _utils.getRect)(this.#$targetWrapper);
+    }
+    if (Reflect.has(item, 'footprintRect')) {
+      return item.footprintRect;
+    }
+    return (0, _utils.getRect)(item);
+  }
+  #getFirstTargetElement(slot) {
+    const item = (0, _utils.getFirstSlotElement)(slot, true);
+    if (item === null) {
+      return this.#$targetWrapper;
+    }
+    return item;
+  }
+  #onExpand() {
+    if (!this.isDomConnected || this.#$dialog.open) {
+      return;
+    }
+    this.#$targetSlot.addEventListener('blur', this.#stopEventPropagation, true);
+    this.#$focus.setAttribute('tabindex', '-1');
+    this.#$focus.style.display = 'block';
+    this.#$focus.addEventListener('focus', this.#captureRelatedActiveElement);
+    this.#$focus.focus();
+    this.#$focus.removeEventListener('focus', this.#captureRelatedActiveElement);
+    this.#$targetSlot.removeEventListener('blur', this.#stopEventPropagation, true);
+    this.#$focus.removeAttribute('tabindex');
+    this.#$focus.removeAttribute('style');
+    this.#$dialog.showModal();
+    this.#$targetWrapper.setAttribute('aria-expanded', 'true');
+    this.#updateOrientation();
+    if (this.modal) {
+      (0, _utils.getFirstFocusableElement)(this.#$contentSlot)?.focus();
+    } else {
+      const $targetEl = this.#getFirstTargetElement(this.#$targetSlot);
+      const targetElComputedStyle = getComputedStyle($targetEl);
+      const marginLeft = parseInt(targetElComputedStyle.marginLeft);
+      const marginRight = parseInt(targetElComputedStyle.marginRight);
+      const marginTop = parseInt(targetElComputedStyle.marginTop);
+      const marginBottom = parseInt(targetElComputedStyle.marginBottom);
+      const targetRect = this.#getTargetRect();
+      this.#$targetWrapper.style.setProperty('display', 'block');
+      this.#$targetWrapper.style.setProperty('width', `${targetRect.width + marginLeft + marginRight}px`);
+      this.#$targetWrapper.style.setProperty('height', `${targetRect.height + marginTop + marginBottom}px`);
+      this.#$targetOpenWrapper.style.setProperty('width', `${targetRect.width}px`);
+      this.#$targetOpenWrapper.style.setProperty('height', `${targetRect.height}px`);
+      this.#targetStyleValue = $targetEl.getAttribute('style');
+      $targetEl.style.setProperty('margin', '0');
+      $targetEl.style.setProperty('position', 'static');
+      if (targetElComputedStyle.transform !== 'none') {
+        const matrix = new DOMMatrixReadOnly(targetElComputedStyle.transform);
+        $targetEl.style.setProperty('transform', matrix.translate(-matrix.e, -matrix.f).toString());
+      }
+      (0, _utils.getFirstSlotElement)(this.#$targetSlot)?.setAttribute('slot', 'target-open');
+      this.#$targetOpenSlot.addEventListener('keydown', this.#onTargetKeydown);
+      if (this.#targetActiveElement !== null) {
+        this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
+        this.#targetActiveElement.focus();
+        this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+        if (!(0, _utils.isElementFocused)(this.#targetActiveElement)) {
+          requestAnimationFrame(() => {
+            if (this.isDomConnected && this.#$dialog.open) {
+              this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
+              this.#targetActiveElement.focus();
+              this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+            }
+          });
+        }
+      }
+    }
+    (0, _utils2.disableOverscroll)();
+    window.addEventListener('scroll', this.#updatePosition, {
+      passive: false
+    });
+    window.addEventListener('resize', this.#onResize);
+    requestAnimationFrame(() => {
+      if (this.isDomConnected && this.#$dialog.open) {
+        this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
+      }
+    });
+    this.#dispatchContentVisibility(true);
+  }
+  #onCollapse() {
+    if (!this.#$dialog.open) {
+      return;
+    }
+    const isNonModal = !this.modal;
+    this.#dispatchContentVisibility(false);
+    this.#$targetOpenSlot.removeEventListener('keydown', this.#onTargetKeydown);
+    if (isNonModal) {
+      this.#$targetOpenSlot.addEventListener('blur', this.#captureActiveElement, true);
+    }
+    this.#$dialog.close();
+    this.#$targetWrapper.setAttribute('aria-expanded', 'false');
+    if (isNonModal) {
+      this.#$targetOpenSlot.removeEventListener('blur', this.#captureActiveElement, true);
+    }
+    if (isNonModal) {
+      const targetEl = this.#getFirstTargetElement(this.#$targetOpenSlot);
+      targetEl.style.removeProperty('margin');
+      targetEl.style.removeProperty('position');
+      targetEl.style.removeProperty('transform');
+      if (this.#targetStyleValue !== null) {
+        targetEl.setAttribute('style', this.#targetStyleValue);
+        this.#targetStyleValue = null;
+      }
+      (0, _utils.getFirstSlotElement)(this.#$targetOpenSlot)?.setAttribute('slot', 'target');
+      this.#$targetWrapper.style.removeProperty('display');
+      this.#$targetWrapper.style.removeProperty('width');
+      this.#$targetWrapper.style.removeProperty('height');
+    }
+    if (this.#targetActiveElement !== null) {
+      if (!(0, _utils.isElementFocused)(this.#targetActiveElement)) {
+        this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
+        this.#targetActiveElement.focus({
+          preventScroll: true
+        });
+        this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+        if (!(0, _utils.isElementFocused)(this.#targetActiveElement)) {
+          const $targetEl = this.#targetActiveElement;
+          requestAnimationFrame(() => {
+            if (this.isDomConnected && !this.#$dialog.open) {
+              this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
+              $targetEl.focus({
+                preventScroll: true
+              });
+              this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+            }
+          });
+        }
+        this.#targetActiveElement = null;
+      }
+    }
+    (0, _utils2.enableOverscroll)();
+    this.#resizeThrottle.cancel();
+    window.removeEventListener('resize', this.#onResize);
+    window.removeEventListener('scroll', this.#updatePosition);
+    this.#$contentSlot.removeEventListener('slotchange', this.#onContentSlotChange);
+  }
+  #onResize = () => {
+    this.#resizeThrottle.fn();
+  };
+  #updatePosition = () => {
+    const targetRect = this.modal ? this.#getTargetRect() : this.#$targetWrapper.getBoundingClientRect();
+    const orient = this.orientation;
+    const modalWidth = this.#modalWidth;
+    const modalHeight = this.#modalHeight;
+    const inset = this.inset;
+    let xPos = 0;
+    let yPos = 0;
+    if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top-stretch' || orient === 'bottom-stretch') {
+      xPos = targetRect.x;
+    }
+    if (orient === 'bottom-left' || orient === 'top-left') {
+      xPos = targetRect.x + targetRect.width - modalWidth;
+    }
+    if (orient === 'bottom-center' || orient === 'top-center') {
+      xPos = targetRect.x + targetRect.width / 2 - modalWidth / 2;
+    }
+    if (orient === 'center-right') {
+      xPos = targetRect.x + targetRect.width;
+    }
+    if (orient === 'center-left') {
+      xPos = targetRect.x - modalWidth;
+    }
+    if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom-stretch' || orient === 'bottom-center') {
+      yPos = targetRect.y + targetRect.height;
+    }
+    if (orient === 'top-left' || orient === 'top-right' || orient === 'top-stretch' || orient === 'top-center') {
+      yPos = targetRect.y - modalHeight;
+    }
+    if (orient === 'center-left' || orient === 'center-right') {
+      yPos = targetRect.y + targetRect.height / 2 - modalHeight / 2;
+    }
+    const clampedXPos = Math.max(inset, Math.min(xPos, window.innerWidth - modalWidth - inset));
+    const clampedYPos = Math.max(inset, Math.min(yPos, window.innerHeight - modalHeight - inset));
+    this.#$dialog.style.setProperty('left', `${clampedXPos}px`);
+    this.#$dialog.style.setProperty('top', `${clampedYPos}px`);
+    if (!this.modal) {
+      const targetLeftPos = targetRect.x - clampedXPos;
+      const targetTopPos = targetRect.y - clampedYPos;
+      this.#$targetOpenWrapper.style.setProperty('left', `${targetLeftPos}px`);
+      this.#$targetOpenWrapper.style.setProperty('top', `${targetTopPos}px`);
+    }
+  };
+  #updateOrientation = () => {
+    this.#$dialog.style.setProperty('width', 'max-content');
+    const targetRect = this.#getTargetRect();
+    const modalRect = this.#$dialog.getBoundingClientRect();
+    const orient = this.orientation;
+    const shouldSetWidthToTarget = orient === 'top-stretch' || orient === 'bottom-stretch';
+    const modalHeight = modalRect.height;
+    const modalWidth = shouldSetWidthToTarget ? targetRect.width : modalRect.width;
+    const inset = this.inset;
+    let xPos = 0;
+    let yPos = 0;
+    this.#modalHeight = modalHeight;
+    this.#modalWidth = modalWidth;
+    if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top-stretch' || orient === 'bottom-stretch') {
+      xPos = targetRect.x;
+    }
+    if (orient === 'bottom-left' || orient === 'top-left') {
+      xPos = targetRect.x + targetRect.width - modalWidth;
+    }
+    if (orient === 'bottom-center' || orient === 'top-center') {
+      xPos = targetRect.x + targetRect.width / 2 - modalWidth / 2;
+    }
+    if (orient === 'center-right') {
+      xPos = targetRect.x + targetRect.width;
+    }
+    if (orient === 'center-left') {
+      xPos = targetRect.x - modalWidth;
+    }
+    if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom-stretch' || orient === 'bottom-center') {
+      yPos = targetRect.y + targetRect.height;
+    }
+    if (orient === 'top-left' || orient === 'top-right' || orient === 'top-stretch' || orient === 'top-center') {
+      yPos = targetRect.y - modalHeight;
+    }
+    if (orient === 'center-left' || orient === 'center-right') {
+      yPos = targetRect.y + targetRect.height / 2 - modalHeight / 2;
+    }
+    xPos = Math.round(Math.max(inset, Math.min(xPos, window.innerWidth - modalWidth - inset)));
+    yPos = Math.round(Math.max(inset, Math.min(yPos, window.innerHeight - modalHeight - inset)));
+    this.#$dialog.style.setProperty('left', `${xPos}px`);
+    this.#$dialog.style.setProperty('top', `${yPos}px`);
+    this.#$dialog.style.setProperty('width', `${modalWidth}px`);
+    if (!this.modal) {
+      const targetLeftPos = targetRect.x - xPos;
+      const targetTopPos = targetRect.y - yPos;
+      this.#$targetOpenWrapper.style.setProperty('left', `${targetLeftPos}px`);
+      this.#$targetOpenWrapper.style.setProperty('top', `${targetTopPos}px`);
+    }
+  };
+  #onBackdropMouseDown = e => {
+    if ((0, _utils.isTargetEqual)(e, this.#$dialog)) {
+      const rect = this.popoverRect;
+      const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
+      if (!isInside) {
+        e.stopPropagation();
+        this.#dispatchCloseEvent();
+      }
+    }
+  };
+  #onCancel = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.#dispatchCloseEvent();
+  };
+  #onCloseReactHandler = e => {
+    (0, _utils.getReactEventHandler)(this, 'on-close')?.(e);
+  };
+  #dispatchCloseEvent() {
+    this.dispatchEvent(new CustomEvent('-close'));
+  }
+  #captureRelatedActiveElement = e => {
+    e.stopPropagation();
+    this.#targetActiveElement = e.relatedTarget;
+  };
+  #captureActiveElement = e => {
+    e.stopPropagation();
+    this.#targetActiveElement = e.target;
+  };
+  #stopEventPropagation = e => {
+    e.stopPropagation();
+  };
+  #dispatchContentVisibility(isVisible) {
+    this.#visibilityContext.dispatch(isVisible);
+  }
+  #onTargetKeydown = e => {
+    this.#keydownContext.dispatch({
+      code: e.code,
+      preventDefault: () => {
+        e.preventDefault();
+      }
+    });
+  };
+  #onContextVisibility = e => {
+    if (!e.detail) {
+      this.#dispatchCloseEvent();
+    }
+  };
+  #onContentSlotChange = e => {
+    e.stopPropagation();
+    if (this.#$dialog.open) {
+      this.#updateOrientation();
+    }
+  };
+});

package/lib/cjs/pop/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/pop/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.orientationValues = exports.enableOverscroll = exports.disableOverscroll = void 0;
+const orientationValues = exports.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;
+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');
+  }
+};
+exports.disableOverscroll = disableOverscroll;
+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');
+  }
+};
+exports.enableOverscroll = enableOverscroll;

package/lib/cjs/popover/index.js

@@ -0,0 +1,148 @@
+"use strict";
+
+require('../pop');
+var _utils = require('../utils');
+var _utils2 = require('./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>';
+const TIP_SIZE = 16;
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-popover', class extends _utils.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
+    });
+    (0, _utils.subscribeContext)(this.#$content, 'visibility', this.#onContextVisibility, signal);
+    (0, _utils.updateAttribute)(this.#$pop, 'orientation', (0, _utils2.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 ((0, _utils.isAttrEqual)(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'orientation':
+        {
+          (0, _utils.updateAttribute)(this.#$pop, 'orientation', (0, _utils2.getPopOrientation)(this.orientation));
+          if (this.#$pop.open) {
+            this.#updateTipOrientation();
+          }
+          break;
+        }
+      case 'tip':
+        {
+          const hasTip = (0, _utils.isAttrTrue)(newVal);
+          if (hasTip && this.#$pop.open) {
+            this.#updateTipOrientation();
+          }
+          (0, _utils.updateBooleanAttribute)(this, name, hasTip);
+          break;
+        }
+      case 'modal':
+      case 'open':
+        {
+          (0, _utils.updateAttribute)(this.#$pop, name, newVal);
+          (0, _utils.updateBooleanAttribute)(this, name, (0, _utils.isAttrTrue)(newVal));
+          break;
+        }
+      case 'aria-label':
+      case 'aria-description':
+        {
+          (0, _utils.updateAttribute)(this.#$pop, name, newVal);
+          break;
+        }
+    }
+  }
+  set modal(isModal) {
+    (0, _utils.updateBooleanAttribute)(this, 'modal', isModal);
+  }
+  get modal() {
+    return (0, _utils.getBooleanAttribute)(this, 'modal');
+  }
+  set open(isOpen) {
+    (0, _utils.updateBooleanAttribute)(this, 'open', isOpen);
+  }
+  get open() {
+    return (0, _utils.getBooleanAttribute)(this, 'open');
+  }
+  set tip(hasTip) {
+    (0, _utils.updateBooleanAttribute)(this, 'tip', hasTip);
+  }
+  get tip() {
+    return (0, _utils.getBooleanAttribute)(this, 'tip');
+  }
+  get orientation() {
+    return (0, _utils.getLiteralAttribute)(this, _utils2.orientationValues, 'orientation', 'bottom-left');
+  }
+  set orientation(value) {
+    (0, _utils.updateLiteralAttribute)(this, _utils2.orientationValues, 'orientation', value);
+  }
+  get footprintRect() {
+    return this.#$pop.footprintRect;
+  }
+  get popoverRect() {
+    return this.#$pop.popoverRect;
+  }
+  #onPopClose = () => {
+    this.#dispatchCloseEvent();
+  };
+  #onCloseReactHandler = e => {
+    (0, _utils.getReactEventHandler)(this, 'onClose')?.();
+    (0, _utils.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`;
+    (0, _utils.setClass)(this.#$tip, 'hidden', (0, _utils.rectOverlap)(targetRect, contentRect));
+  };
+});

package/lib/cjs/popover/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/popover/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.orientationValues = exports.getPopOrientation = void 0;
+const orientationValues = exports.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';
+  }
+  return orientation;
+};
+exports.getPopOrientation = getPopOrientation;

package/lib/cjs/progress/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+require('../text');
+var _utils = require('../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;
+(0, _utils.defineCustomElement)('sinch-progress', class extends _utils.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 = (0, _utils.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 ((0, _utils.isAttrEqual)(oldVal, newVal)) {
+            break;
+          }
+          (0, _utils.updateBooleanAttribute)(this, name, (0, _utils.isAttrTrue)(newVal));
+          break;
+        }
+    }
+  }
+  get value() {
+    return (0, _utils.getIntegerAttribute)(this, 'value', 0);
+  }
+  set value(value) {
+    (0, _utils.updateAttribute)(this, 'value', value);
+  }
+  get detailed() {
+    return (0, _utils.getBooleanAttribute)(this, 'detailed');
+  }
+  set detailed(isDetailed) {
+    (0, _utils.updateBooleanAttribute)(this, 'detailed', isDetailed);
+  }
+});

package/lib/cjs/progress/types.js

@@ -0,0 +1 @@
+"use strict";