@nectary/components 5.20.2 → 5.20.3

package/bundle.js

@@ -3751,7 +3751,7 @@ const TIP_SIZE$1 = 8;
 const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
 const HIDE_DELAY = 0;
-const ANIMATION_DURATION$1 = 100;
+const ANIMATION_DURATION = 100;
 const template$Q = document.createElement("template");
 template$Q.innerHTML = templateHTML$Q;
 class Tooltip extends NectaryElement {
@@ -3779,8 +3779,8 @@ class Tooltip extends NectaryElement {
     this.#shouldReduceMotion = shouldReduceMotion();
     this.#tooltipState = new TooltipState({
       showDelay: SHOW_DELAY_SLOW,
-      hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION$1 : HIDE_DELAY,
-      hideAnimationDuration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION$1,
+      hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION : HIDE_DELAY,
+      hideAnimationDuration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
       onShowStart: this.#onStateShowStart,
       onShowEnd: this.#onStateShowEnd,
       onHideStart: this.#onStateHideStart,
@@ -3947,7 +3947,7 @@ class Tooltip extends NectaryElement {
       this.#animation = this.#$content.animate({
         opacity: [0, 1]
       }, {
-        duration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION$1,
+        duration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
         iterations: 1,
         fill: "forwards"
       });
@@ -12463,7 +12463,7 @@ class SelectMenu extends NectaryElement {
   };
 }
 defineCustomElement("sinch-select-menu", SelectMenu);
-const templateHTML$e = '<style>:host{display:block;height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size=xs]){height:var(--sinch-sys-size-xs);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-xs)}:host([size="s"]){height:var(--sinch-sys-size-s);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-s)}:host([size="m"]){height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size="l"]){height:var(--sinch-sys-size-l);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-l)}#content{height:100%;background-color:var(--sinch-sys-color-border-subtle);border-radius:var(--sinch-local-shape-radius)}</style><div id="content"></div>';
+const templateHTML$e = '<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 template$e = document.createElement("template");
 template$e.innerHTML = templateHTML$e;
 class SkeletonItem extends NectaryElement {
@@ -12487,21 +12487,19 @@ const getUid = () => crypto.getRandomValues(new Uint8Array(21)).reduce((id, byte
   }
   return `${id}_`;
 }, "");
-const templateHTML$d = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;overflow:hidden}:host([card]:not([card=false]))>#wrapper{padding:16px;background-color:var(--sinch-sys-color-surface-primary-default);border-radius:var(--sinch-sys-shape-radius-l);border:1px solid var(--sinch-sys-color-border-subtle)}#shimmer{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0,var(--sinch-sys-color-surface-tertiary-default) 100px,transparent 200px);clip-path:url("#clip")}#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></div>';
+const templateHTML$d = '<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 template$d = document.createElement("template");
 template$d.innerHTML = templateHTML$d;
-const ANIMATION_DURATION = 2e3;
 const BORDER_WIDTH = 1;
 class Skeleton extends NectaryElement {
-  #animation = null;
   #shimmer;
   #wrapper;
   #slot;
-  #controller = null;
   #clip;
-  #borderWidth = 0;
+  #controller = null;
   #bb = null;
   #observer = null;
+  #borderWidth = 0;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -12515,28 +12513,33 @@ class Skeleton extends NectaryElement {
     const id = getUid();
     this.#shimmer.style.setProperty("clip-path", `url(#${id})`);
     this.#clip.setAttribute("id", id);
+    this.#borderWidth = isAttrTrue(this.getAttribute("card")) ? BORDER_WIDTH : 0;
     this.#controller = new AbortController();
     if (!shouldReduceMotion()) {
-      this.#slot.addEventListener("slotchange", this.#onSlotChange, { signal: this.#controller.signal });
-      this.#observer = new IntersectionObserver((entries) => {
-        this.#bb = entries[0].boundingClientRect;
-        if (this.#bb.width === 0) {
-          return;
-        }
-        this.#updateAnimation();
-        for (const child of this.#slot.assignedElements()) {
-          this.#handleSkeletonItemData(child);
-        }
-        this.#observer.disconnect();
-        this.#observer = null;
-      }, { threshold: 1 });
+      this.#slot.addEventListener("slotchange", this.#onSlotChange, {
+        signal: this.#controller.signal
+      });
+      this.#observer = new IntersectionObserver(
+        (entries) => {
+          this.#bb = entries[0].boundingClientRect;
+          if (this.#bb.width === 0) {
+            return;
+          }
+          this.#buildClipPath();
+          this.#shimmer.classList.add("animated");
+          this.#observer?.disconnect();
+          this.#observer = null;
+        },
+        { threshold: 1 }
+      );
       this.#observer.observe(this.#wrapper);
     }
   }
   disconnectedCallback() {
-    this.#animation?.cancel();
-    this.#animation = null;
-    this.#controller.abort();
+    this.#shimmer.classList.remove("animated");
+    this.#bb = null;
+    this.#clip.innerHTML = "";
+    this.#controller?.abort();
     this.#controller = null;
     this.#observer?.disconnect();
     this.#observer = null;
@@ -12544,45 +12547,40 @@ class Skeleton extends NectaryElement {
   static get observedAttributes() {
     return ["card"];
   }
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case "card": {
-        this.#borderWidth = isAttrTrue(newVal) ? BORDER_WIDTH : 0;
-        break;
-      }
+  attributeChangedCallback(name, _oldVal, newVal) {
+    if (name === "card") {
+      this.#borderWidth = isAttrTrue(newVal) ? BORDER_WIDTH : 0;
     }
   }
-  #updateAnimation() {
-    const bb = this.#bb;
-    const bgWidth = bb.width * 4;
-    this.#shimmer.style.setProperty("background-size", `${bgWidth}px`);
-    this.#animation = this.#shimmer.animate({
-      backgroundPosition: [`0px`, `${bgWidth}px`]
-    }, {
-      duration: ANIMATION_DURATION,
-      iterations: Infinity
-    });
-  }
-  #onSlotChange = () => {
+  #buildClipPath() {
     this.#clip.innerHTML = "";
     if (this.#bb === null) {
       return;
     }
     for (const child of this.#slot.assignedElements()) {
-      this.#handleSkeletonItemData(child);
+      this.#addClipRect(child);
     }
+  }
+  #onSlotChange = () => {
+    this.#buildClipPath();
   };
-  #handleSkeletonItemData(child) {
+  #addClipRect(child) {
     const data2 = child.getBoundingClientRect();
-    const radiusStr = getCssVar(child, "--sinch-local-shape-radius") ?? "0";
-    const radius = attrValueToInteger(radiusStr, { min: 0, defaultValue: 0 });
     const bb = this.#bb;
-    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-    rect.setAttribute("x", (data2.x - bb.x - this.#borderWidth).toString());
-    rect.setAttribute("y", (data2.y - bb.y - this.#borderWidth).toString());
-    rect.setAttribute("width", data2.width.toString());
-    rect.setAttribute("height", data2.height.toString());
-    rect.setAttribute("rx", radius.toString());
+    const radiusStr = getCssVar(child, "--sinch-local-shape-radius") ?? "0";
+    const radius = attrValueToInteger(radiusStr, {
+      min: 0,
+      defaultValue: 0
+    });
+    const rect = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    );
+    rect.setAttribute("x", String(data2.x - bb.x - this.#borderWidth));
+    rect.setAttribute("y", String(data2.y - bb.y - this.#borderWidth));
+    rect.setAttribute("width", String(data2.width));
+    rect.setAttribute("height", String(data2.height));
+    rect.setAttribute("rx", String(radius));
     this.#clip.appendChild(rect);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.20.2",
+  "version": "5.20.3",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/skeleton/index.d.ts

@@ -6,5 +6,5 @@ export declare class Skeleton extends NectaryElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    attributeChangedCallback(name: string, _oldVal: string | null, newVal: string | null): void;
 }

package/skeleton/index.js

@@ -1,21 +1,19 @@
-import { shouldReduceMotion, isAttrTrue, getCssVar, attrValueToInteger } from "../utils/dom.js";
+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}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;overflow:hidden}:host([card]:not([card=false]))>#wrapper{padding:16px;background-color:var(--sinch-sys-color-surface-primary-default);border-radius:var(--sinch-sys-shape-radius-l);border:1px solid var(--sinch-sys-color-border-subtle)}#shimmer{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0,var(--sinch-sys-color-surface-tertiary-default) 100px,transparent 200px);clip-path:url("#clip")}#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></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 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 template = document.createElement("template");
 template.innerHTML = templateHTML;
-const ANIMATION_DURATION = 2e3;
 const BORDER_WIDTH = 1;
 class Skeleton extends NectaryElement {
-  #animation = null;
   #shimmer;
   #wrapper;
   #slot;
-  #controller = null;
   #clip;
-  #borderWidth = 0;
+  #controller = null;
   #bb = null;
   #observer = null;
+  #borderWidth = 0;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -29,28 +27,33 @@ class Skeleton extends NectaryElement {
     const id = getUid();
     this.#shimmer.style.setProperty("clip-path", `url(#${id})`);
     this.#clip.setAttribute("id", id);
+    this.#borderWidth = isAttrTrue(this.getAttribute("card")) ? BORDER_WIDTH : 0;
     this.#controller = new AbortController();
     if (!shouldReduceMotion()) {
-      this.#slot.addEventListener("slotchange", this.#onSlotChange, { signal: this.#controller.signal });
-      this.#observer = new IntersectionObserver((entries) => {
-        this.#bb = entries[0].boundingClientRect;
-        if (this.#bb.width === 0) {
-          return;
-        }
-        this.#updateAnimation();
-        for (const child of this.#slot.assignedElements()) {
-          this.#handleSkeletonItemData(child);
-        }
-        this.#observer.disconnect();
-        this.#observer = null;
-      }, { threshold: 1 });
+      this.#slot.addEventListener("slotchange", this.#onSlotChange, {
+        signal: this.#controller.signal
+      });
+      this.#observer = new IntersectionObserver(
+        (entries) => {
+          this.#bb = entries[0].boundingClientRect;
+          if (this.#bb.width === 0) {
+            return;
+          }
+          this.#buildClipPath();
+          this.#shimmer.classList.add("animated");
+          this.#observer?.disconnect();
+          this.#observer = null;
+        },
+        { threshold: 1 }
+      );
       this.#observer.observe(this.#wrapper);
     }
   }
   disconnectedCallback() {
-    this.#animation?.cancel();
-    this.#animation = null;
-    this.#controller.abort();
+    this.#shimmer.classList.remove("animated");
+    this.#bb = null;
+    this.#clip.innerHTML = "";
+    this.#controller?.abort();
     this.#controller = null;
     this.#observer?.disconnect();
     this.#observer = null;
@@ -58,45 +61,40 @@ class Skeleton extends NectaryElement {
   static get observedAttributes() {
     return ["card"];
   }
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case "card": {
-        this.#borderWidth = isAttrTrue(newVal) ? BORDER_WIDTH : 0;
-        break;
-      }
+  attributeChangedCallback(name, _oldVal, newVal) {
+    if (name === "card") {
+      this.#borderWidth = isAttrTrue(newVal) ? BORDER_WIDTH : 0;
     }
   }
-  #updateAnimation() {
-    const bb = this.#bb;
-    const bgWidth = bb.width * 4;
-    this.#shimmer.style.setProperty("background-size", `${bgWidth}px`);
-    this.#animation = this.#shimmer.animate({
-      backgroundPosition: [`0px`, `${bgWidth}px`]
-    }, {
-      duration: ANIMATION_DURATION,
-      iterations: Infinity
-    });
-  }
-  #onSlotChange = () => {
+  #buildClipPath() {
     this.#clip.innerHTML = "";
     if (this.#bb === null) {
       return;
     }
     for (const child of this.#slot.assignedElements()) {
-      this.#handleSkeletonItemData(child);
+      this.#addClipRect(child);
     }
+  }
+  #onSlotChange = () => {
+    this.#buildClipPath();
   };
-  #handleSkeletonItemData(child) {
+  #addClipRect(child) {
     const data = child.getBoundingClientRect();
-    const radiusStr = getCssVar(child, "--sinch-local-shape-radius") ?? "0";
-    const radius = attrValueToInteger(radiusStr, { min: 0, defaultValue: 0 });
     const bb = this.#bb;
-    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-    rect.setAttribute("x", (data.x - bb.x - this.#borderWidth).toString());
-    rect.setAttribute("y", (data.y - bb.y - this.#borderWidth).toString());
-    rect.setAttribute("width", data.width.toString());
-    rect.setAttribute("height", data.height.toString());
-    rect.setAttribute("rx", radius.toString());
+    const radiusStr = getCssVar(child, "--sinch-local-shape-radius") ?? "0";
+    const radius = attrValueToInteger(radiusStr, {
+      min: 0,
+      defaultValue: 0
+    });
+    const rect = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    );
+    rect.setAttribute("x", String(data.x - bb.x - this.#borderWidth));
+    rect.setAttribute("y", String(data.y - bb.y - this.#borderWidth));
+    rect.setAttribute("width", String(data.width));
+    rect.setAttribute("height", String(data.height));
+    rect.setAttribute("rx", String(radius));
     this.#clip.appendChild(rect);
   }
 }

package/skeleton-item/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>:host{display:block;height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size=xs]){height:var(--sinch-sys-size-xs);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-xs)}:host([size="s"]){height:var(--sinch-sys-size-s);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-s)}:host([size="m"]){height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size="l"]){height:var(--sinch-sys-size-l);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-l)}#content{height:100%;background-color:var(--sinch-sys-color-border-subtle);border-radius:var(--sinch-local-shape-radius)}</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-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 template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SkeletonItem extends NectaryElement {