@nectary/components 5.29.0 → 5.29.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.29.0",
+  "version": "5.29.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.6.8"
+    "@nectary/assets": "3.6.9"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -40,6 +40,6 @@
     "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.15.0"
+    "@nectary/theme-base": "1.15.1"
   }
 }

package/pop/index.d.ts

@@ -2,6 +2,12 @@ import { NectaryElement } from '../utils';
 import type { TSinchPopOrientation } from './types';
 import type { TRect } from '../types';
 export * from './types';
+/**
+ * `<sinch-pop>` is the overlay primitive shared by `<sinch-tooltip>`,
+ * `<sinch-dropdown>` and similar components. It anchors a popover to a target
+ * element, manages its open lifecycle, and reconciles position across viewport
+ * resizes, scrolling, and transformed ancestors.
+ */
 export declare class Pop extends NectaryElement {
     #private;
     constructor();

package/pop/index.js

@@ -1,13 +1,14 @@
 import { Context, subscribeContext } from "../utils/context.js";
-import { getBooleanAttribute, updateBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateIntegerAttribute, getIntegerAttribute, isAttrEqual, getScrollableParents, isAttrTrue } from "../utils/dom.js";
+import { getBooleanAttribute, updateBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateIntegerAttribute, getIntegerAttribute, isAttrEqual, getScrollableParents, getTransformedAncestor, isAttrTrue } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { getFirstSlotElement, getFirstFocusableElement, isElementFocused } from "../utils/slot.js";
 import { throttleAnimationFrame } from "../utils/throttle.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { isTargetEqual } from "../utils/event-target.js";
-import { orientationValues, disableOverscroll, enableOverscroll } from "./utils.js";
-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>';
+import { getPlacementContext, toLocalRect } from "../utils/placement.js";
+import { orientationValues, disableOverscroll, enableOverscroll, getAnchorPosition, clampPosition } from "./utils.js";
+const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;transform:translate(var(--sinch-pop-offset-x),var(--sinch-pop-offset-y));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;
 class Pop extends NectaryElement {
@@ -15,6 +16,7 @@ class Pop extends NectaryElement {
   #$focus;
   #$dialog;
   #resizeThrottle;
+  #scrollPositionThrottle;
   #resizeObserver;
   #$targetSlot;
   #$targetOpenSlot;
@@ -24,10 +26,15 @@ class Pop extends NectaryElement {
   #controller;
   #keydownContext;
   #visibilityContext;
-  #targetStyleValue = null;
   #modalWidth = 0;
   #modalHeight = 0;
   #scrollableParents = [];
+  #openSession = {
+    effectiveAllowScroll: false,
+    modalSemantics: false,
+    targetStyleValue: null,
+    transformedAncestor: null
+  };
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -40,6 +47,9 @@ class Pop extends NectaryElement {
     this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
     this.#$targetOpenWrapper = shadowRoot.querySelector("#target-open");
     this.#resizeThrottle = throttleAnimationFrame(this.#updateOrientation);
+    this.#scrollPositionThrottle = throttleAnimationFrame(() => {
+      this.#updatePosition(false);
+    });
     this.#resizeObserver = new ResizeObserver(() => {
       this.#resizeThrottle.fn();
     });
@@ -69,6 +79,7 @@ class Pop extends NectaryElement {
     this.#controller.abort();
     this.#controller = null;
     this.#resizeThrottle.cancel();
+    this.#scrollPositionThrottle.cancel();
     this.#resizeObserver.disconnect();
     this.#onCollapse();
   }
@@ -164,10 +175,68 @@ class Pop extends NectaryElement {
     }
     return item;
   }
+  #prepareTransferredTarget() {
+    const targetEl = this.#getFirstTargetElement(this.#$targetSlot);
+    const targetElComputedStyle = getComputedStyle(targetEl);
+    const marginLeft = parseInt(targetElComputedStyle.marginLeft, 10);
+    const marginRight = parseInt(targetElComputedStyle.marginRight, 10);
+    const marginTop = parseInt(targetElComputedStyle.marginTop, 10);
+    const marginBottom = parseInt(targetElComputedStyle.marginBottom, 10);
+    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.#openSession.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());
+    }
+    getFirstSlotElement(this.#$targetSlot)?.setAttribute("slot", "target-open");
+  }
+  #restoreTransferredTarget() {
+    const targetEl = this.#getFirstTargetElement(this.#$targetOpenSlot);
+    const { targetStyleValue } = this.#openSession;
+    if (targetStyleValue === null) {
+      targetEl.style.removeProperty("margin");
+      targetEl.style.removeProperty("position");
+      targetEl.style.removeProperty("transform");
+    } else {
+      targetEl.setAttribute("style", targetStyleValue);
+    }
+    getFirstSlotElement(this.#$targetOpenSlot)?.setAttribute("slot", "target");
+    this.#$targetWrapper.style.removeProperty("display");
+    this.#$targetWrapper.style.removeProperty("width");
+    this.#$targetWrapper.style.removeProperty("height");
+  }
+  #subscribeScrollTracking() {
+    this.#scrollableParents = getScrollableParents(this.#getFirstTargetElement(this.#$targetSlot));
+    this.#scrollableParents.forEach((el) => {
+      el.addEventListener("scroll", this.#onScrollableParentScroll, { passive: true, capture: true });
+    });
+  }
+  #unsubscribeScrollTracking() {
+    this.#scrollableParents.forEach((el) => {
+      el.removeEventListener("scroll", this.#onScrollableParentScroll, { capture: true });
+    });
+  }
   #onExpand() {
     if (!this.isDomConnected || this.#$dialog.open) {
       return;
     }
+    const transformedAncestor = getTransformedAncestor(this);
+    const effectiveAllowScroll = this.allowScroll || transformedAncestor != null;
+    const shouldUseModal = this.modal && transformedAncestor == null;
+    const openAsModal = shouldUseModal || !effectiveAllowScroll;
+    this.#openSession = {
+      effectiveAllowScroll,
+      modalSemantics: shouldUseModal,
+      targetStyleValue: null,
+      transformedAncestor
+    };
     this.#$targetSlot.addEventListener("blur", this.#stopEventPropagation, true);
     this.#$focus.setAttribute("tabindex", "-1");
     this.#$focus.style.display = "block";
@@ -177,7 +246,7 @@ class Pop extends NectaryElement {
     this.#$targetSlot.removeEventListener("blur", this.#stopEventPropagation, true);
     this.#$focus.removeAttribute("tabindex");
     this.#$focus.removeAttribute("style");
-    if (this.modal || !this.allowScroll) {
+    if (openAsModal) {
       this.#$dialog.showModal();
     } else {
       this.#$dialog.show();
@@ -185,32 +254,13 @@ class Pop extends NectaryElement {
     this.#$targetWrapper.setAttribute("aria-expanded", "true");
     this.#updateOrientation();
     this.#resizeObserver.observe(this.#$dialog);
-    if (this.modal) {
+    if (shouldUseModal) {
       getFirstFocusableElement(this.#$contentSlot)?.focus();
     } else {
-      if (!this.allowScroll) {
-        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());
-        }
-        getFirstSlotElement(this.#$targetSlot)?.setAttribute("slot", "target-open");
+      if (!effectiveAllowScroll) {
+        this.#prepareTransferredTarget();
       }
-      const activeSlot = this.allowScroll ? this.#$targetSlot : this.#$targetOpenSlot;
+      const activeSlot = effectiveAllowScroll ? this.#$targetSlot : this.#$targetOpenSlot;
       activeSlot.addEventListener("keydown", this.#onTargetKeydown);
       if (this.#targetActiveElement !== null) {
         activeSlot.addEventListener("focus", this.#stopEventPropagation, true);
@@ -227,13 +277,10 @@ class Pop extends NectaryElement {
         }
       }
     }
-    if (!this.allowScroll) {
+    if (!effectiveAllowScroll) {
       disableOverscroll();
     } else {
-      this.#scrollableParents = getScrollableParents(this.#getFirstTargetElement(this.#$targetSlot));
-      this.#scrollableParents.forEach((el) => {
-        el.addEventListener("scroll", () => this.#updatePosition(false), { passive: true, capture: true });
-      });
+      this.#subscribeScrollTracking();
     }
     window.addEventListener("resize", this.#onResize);
     requestAnimationFrame(() => {
@@ -248,9 +295,11 @@ class Pop extends NectaryElement {
     if (!this.#$dialog.open) {
       return;
     }
+    const openSession = this.#openSession;
+    const effectiveAllowScroll = openSession.effectiveAllowScroll;
     this.#resizeObserver.disconnect();
-    const isNonModal = !this.modal;
-    const activeSlot = this.allowScroll ? this.#$targetSlot : this.#$targetOpenSlot;
+    const isNonModal = !openSession.modalSemantics;
+    const activeSlot = effectiveAllowScroll ? this.#$targetSlot : this.#$targetOpenSlot;
     this.#dispatchContentVisibility(false);
     activeSlot.removeEventListener("keydown", this.#onTargetKeydown);
     if (isNonModal) {
@@ -261,19 +310,8 @@ class Pop extends NectaryElement {
     if (isNonModal) {
       activeSlot.removeEventListener("blur", this.#captureActiveElement, true);
     }
-    if (isNonModal && !this.allowScroll) {
-      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;
-      }
-      getFirstSlotElement(this.#$targetOpenSlot)?.setAttribute("slot", "target");
-      this.#$targetWrapper.style.removeProperty("display");
-      this.#$targetWrapper.style.removeProperty("width");
-      this.#$targetWrapper.style.removeProperty("height");
+    if (isNonModal && !effectiveAllowScroll) {
+      this.#restoreTransferredTarget();
     }
     if (this.#targetActiveElement !== null) {
       if (!isElementFocused(this.#targetActiveElement)) {
@@ -293,57 +331,69 @@ class Pop extends NectaryElement {
         this.#targetActiveElement = null;
       }
     }
-    if (!this.allowScroll) {
+    if (!effectiveAllowScroll) {
       enableOverscroll();
     } else {
-      this.#scrollableParents.forEach((el) => {
-        el.removeEventListener("scroll", () => this.#updatePosition(false), { capture: true });
-      });
+      this.#unsubscribeScrollTracking();
     }
     this.#resizeThrottle.cancel();
+    this.#scrollPositionThrottle.cancel();
     window.removeEventListener("resize", this.#onResize);
     this.#scrollableParents = [];
     this.#$contentSlot.removeEventListener("slotchange", this.#onContentSlotChange);
+    this.#openSession = {
+      effectiveAllowScroll: false,
+      modalSemantics: false,
+      targetStyleValue: null,
+      transformedAncestor: null
+    };
   }
   #onResize = () => {
     this.#resizeThrottle.fn();
   };
+  #onScrollableParentScroll = () => {
+    this.#scrollPositionThrottle.fn();
+  };
   #updatePosition = (updateWidth) => {
-    const targetRect = this.modal || this.allowScroll ? this.#getTargetRect() : this.#$targetWrapper.getBoundingClientRect();
+    const placementContext = getPlacementContext(this, this.#openSession.transformedAncestor);
+    const { scaleX, scaleY, boundsWidth, boundsHeight } = placementContext;
+    const { modalSemantics, effectiveAllowScroll } = this.#openSession;
+    const shouldClamp = !effectiveAllowScroll;
+    const targetRectViewport = modalSemantics || effectiveAllowScroll ? 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));
-    if (this.hideOutsideViewport && this.#isPopPointInViewport(xPos, yPos)) {
-      this.#$dialog.style.setProperty("visibility", "hidden");
+    const insetX = inset / scaleX;
+    const insetY = inset / scaleY;
+    const targetRect = toLocalRect(targetRectViewport, placementContext);
+    const liveRect = this.#$dialog.open ? this.#$dialog.getBoundingClientRect() : null;
+    const isStretch = orient === "top-stretch" || orient === "bottom-stretch";
+    const modalWidthViewport = isStretch ? this.#modalWidth : liveRect?.width ?? this.#modalWidth;
+    const modalHeightViewport = liveRect?.height ?? this.#modalHeight;
+    const modalWidth = modalWidthViewport / scaleX;
+    const modalHeight = modalHeightViewport / scaleY;
+    const localPos = getAnchorPosition(targetRect, modalWidth, modalHeight, orient);
+    const xPos = localPos.x;
+    const yPos = localPos.y;
+    const localViewportInfos = { boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight };
+    const clampedPosition = shouldClamp ? clampPosition({ x: xPos, y: yPos, ...localViewportInfos }) : { x: xPos, y: yPos };
+    const clampedXPos = clampedPosition.x;
+    const clampedYPos = clampedPosition.y;
+    if (this.hideOutsideViewport) {
+      const viewportPosition = getAnchorPosition(targetRectViewport, modalWidthViewport, modalHeightViewport, orient);
+      const visibilityViewportInfos = {
+        boundsWidth: window.innerWidth,
+        boundsHeight: window.innerHeight,
+        insetX: inset,
+        insetY: inset,
+        modalWidth: modalWidthViewport,
+        modalHeight: modalHeightViewport
+      };
+      const isOutOfViewport = this.#isOutsideViewport(viewportPosition.x, viewportPosition.y, visibilityViewportInfos);
+      if (isOutOfViewport) {
+        this.#$dialog.style.setProperty("visibility", "hidden");
+      } else {
+        this.#$dialog.style.removeProperty("visibility");
+      }
     } else {
       this.#$dialog.style.removeProperty("visibility");
     }
@@ -352,7 +402,7 @@ class Pop extends NectaryElement {
     if (updateWidth === true) {
       this.#$dialog.style.setProperty("width", `${modalWidth}px`);
     }
-    if (!this.modal && !this.allowScroll) {
+    if (!modalSemantics && !effectiveAllowScroll) {
       const targetLeftPos = targetRect.x - clampedXPos;
       const targetTopPos = targetRect.y - clampedYPos;
       this.#$targetOpenWrapper.style.setProperty("left", `${targetLeftPos}px`);
@@ -428,13 +478,10 @@ class Pop extends NectaryElement {
       this.#updateOrientation();
     }
   };
-  #isPopPointInViewport(x, y) {
-    const inset = this.inset;
-    const modalWidth = this.#modalWidth;
-    const modalHeight = this.#modalHeight;
-    const clampedX = Math.max(inset, Math.min(x, window.innerWidth - modalWidth - inset));
-    const clampedY = Math.max(inset, Math.min(y, window.innerHeight - modalHeight - inset));
-    return Math.abs(clampedX - x) > 2 || Math.abs(clampedY - y) > 2;
+  #isOutsideViewport(x, y, viewportInfos) {
+    const { boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight } = viewportInfos;
+    const clampedPosition = clampPosition({ x, y, boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight });
+    return Math.abs(clampedPosition.x - x) > 2 || Math.abs(clampedPosition.y - y) > 2;
   }
 }
 defineCustomElement("sinch-pop", Pop);

package/pop/utils.d.ts

@@ -1,4 +1,24 @@
 import type { TSinchPopOrientation } from './types';
+import type { TRect } from '../types';
 export declare const orientationValues: readonly TSinchPopOrientation[];
+type TClampPositionArgs = {
+    x: number;
+    y: number;
+    boundsWidth: number;
+    boundsHeight: number;
+    insetX: number;
+    insetY: number;
+    modalWidth: number;
+    modalHeight: number;
+};
+export declare const getAnchorPosition: (rect: TRect, width: number, height: number, orient: TSinchPopOrientation) => {
+    x: number;
+    y: number;
+};
+export declare const clampPosition: ({ x, y, boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight, }: TClampPositionArgs) => {
+    x: number;
+    y: number;
+};
 export declare const disableOverscroll: () => void;
 export declare const enableOverscroll: () => void;
+export {};

package/pop/utils.js

@@ -10,6 +10,50 @@ const orientationValues = [
   "center-left",
   "center-right"
 ];
+const getAnchorPosition = (rect, width, height, orient) => {
+  let x = 0;
+  let y = 0;
+  if (orient === "bottom-right" || orient === "top-right" || orient === "top-stretch" || orient === "bottom-stretch") {
+    x = rect.x;
+  }
+  if (orient === "bottom-left" || orient === "top-left") {
+    x = rect.x + rect.width - width;
+  }
+  if (orient === "bottom-center" || orient === "top-center") {
+    x = rect.x + rect.width / 2 - width / 2;
+  }
+  if (orient === "center-right") {
+    x = rect.x + rect.width;
+  }
+  if (orient === "center-left") {
+    x = rect.x - width;
+  }
+  if (orient === "bottom-left" || orient === "bottom-right" || orient === "bottom-stretch" || orient === "bottom-center") {
+    y = rect.y + rect.height;
+  }
+  if (orient === "top-left" || orient === "top-right" || orient === "top-stretch" || orient === "top-center") {
+    y = rect.y - height;
+  }
+  if (orient === "center-left" || orient === "center-right") {
+    y = rect.y + rect.height / 2 - height / 2;
+  }
+  return { x, y };
+};
+const clampPosition = ({
+  x,
+  y,
+  boundsWidth,
+  boundsHeight,
+  insetX,
+  insetY,
+  modalWidth,
+  modalHeight
+}) => {
+  return {
+    x: Math.max(insetX, Math.min(x, boundsWidth - modalWidth - insetX)),
+    y: Math.max(insetY, Math.min(y, boundsHeight - modalHeight - insetY))
+  };
+};
 const bodyEl = document.body;
 const disableOverscroll = () => {
   bodyEl.__pop_counter__ = (bodyEl.__pop_counter__ ?? 0) + 1;
@@ -26,7 +70,9 @@ const enableOverscroll = () => {
   }
 };
 export {
+  clampPosition,
   disableOverscroll,
   enableOverscroll,
+  getAnchorPosition,
   orientationValues
 };

package/skeleton/index.js

@@ -1,7 +1,7 @@
 import { isAttrTrue, shouldReduceMotion, getCssVar, attrValueToInteger } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getUid } from "../utils/uid.js";
-const templateHTML = '<style>:host{display:block;position:relative}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;overflow:hidden;box-sizing:border-box}:host([card]:not([card=false])) #wrapper{background-color:var(--sinch-sys-color-surface-primary-default);border:1px solid var(--sinch-sys-color-border-subtle);border-radius:var(--sinch-sys-shape-radius-l);padding:16px}#shimmer{position:absolute;inset:0;overflow:hidden;pointer-events:none}#shimmer-inner{position:absolute;left:0;top:0;width:400%;height:100%;background-image:linear-gradient(90deg,transparent 0,transparent 47%,var(--sinch-sys-color-surface-tertiary-default) 50%,transparent 53%,transparent 100%);background-size:100% 100%}#shimmer.animated #shimmer-inner{animation:nectary-skeleton-shimmer 2s linear infinite}@media (prefers-reduced-motion:reduce){#shimmer.animated #shimmer-inner{animation:none}}@keyframes nectary-skeleton-shimmer{0%{transform:translateX(-75%)}100%{transform:translateX(0)}}#svg{display:block;width:0;height:0}</style><svg id="svg"><defs><clipPath id="clip"></clipPath></defs></svg><div id="wrapper"><slot></slot><div id="shimmer"><div id="shimmer-inner"></div></div></div>';
+const templateHTML = '<style>:host{display:block;position:relative}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;overflow:hidden;box-sizing:border-box}:host([card]:not([card=false])) #wrapper{background-color:var(--sinch-sys-color-surface-primary-default);border:1px solid var(--sinch-sys-color-border-subtle);border-radius:var(--sinch-sys-shape-radius-l);padding:16px}#shimmer{position:absolute;inset:0;overflow:hidden;pointer-events:none}#shimmer-inner{position:absolute;left:0;top:0;width:400%;height:100%;background-image:linear-gradient(90deg,transparent 0,transparent 30%,var(--sinch-comp-skeleton-color-shimmer) 50%,transparent 53%,transparent 100%);background-size:100% 100%}#shimmer.animated #shimmer-inner{animation:nectary-skeleton-shimmer 2s linear infinite}@media (prefers-reduced-motion:reduce){#shimmer.animated #shimmer-inner{animation:none}}@keyframes nectary-skeleton-shimmer{0%{transform:translateX(-75%)}100%{transform:translateX(0)}}#svg{display:block;width:0;height:0}</style><svg id="svg"><defs><clipPath id="clip"></clipPath></defs></svg><div id="wrapper"><slot></slot><div id="shimmer"><div id="shimmer-inner"></div></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 const BORDER_WIDTH = 1;

package/skeleton-item/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>:host{display:block;box-sizing:border-box;--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m, 4px)}#content{width:100%;height:100%;min-height:100%;box-sizing:border-box;background-color:var(--sinch-sys-color-border-subtle);overflow:hidden;position:relative;border-radius:var(--sinch-local-shape-radius)}:host([size=xs]){height:var(--sinch-sys-size-xs,24px);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-xs, 4px)}:host([size="s"]){height:var(--sinch-sys-size-s,32px);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-s, 4px)}:host(:not([size])),:host([size="m"]){height:var(--sinch-sys-size-m,40px);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m, 4px)}:host([size="l"]){height:var(--sinch-sys-size-l,48px);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-l, 4px)}</style><div id="content"></div>';
+const templateHTML = '<style>:host{display:block;box-sizing:border-box;--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m, 4px)}#content{width:100%;height:100%;min-height:100%;box-sizing:border-box;background-color:var(--sinch-comp-skeleton-color-background);overflow:hidden;position:relative;border-radius:var(--sinch-local-shape-radius)}:host([size=xs]){height:var(--sinch-sys-size-xs,24px);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-xs, 4px)}:host([size="s"]){height:var(--sinch-sys-size-s,32px);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-s, 4px)}:host(:not([size])),:host([size="m"]){height:var(--sinch-sys-size-m,40px);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m, 4px)}:host([size="l"]){height:var(--sinch-sys-size-l,48px);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-l, 4px)}</style><div id="content"></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SkeletonItem extends NectaryElement {