@shimmer-from-structure/svelte 1.1.0 → 2.1.1

package/README.md

@@ -124,7 +124,8 @@ const isLoading = ref(true);
 ```svelte
 <script>
 import { Shimmer } from '@shimmer-from-structure/svelte';
-let isLoading = true;
+
+let isLoading = $state(true);
 </script>
 
 <Shimmer loading={isLoading}>
@@ -205,8 +206,9 @@ const userTemplate = {
 import { Shimmer } from '@shimmer-from-structure/svelte';
 import UserCard from './UserCard.svelte';
 
-export let user;
-let loading = true;
+let { user } = $props();
+let loading = $state(true);
+
 const userTemplate = {
   name: 'Loading...',
   role: 'Loading role...',
@@ -534,7 +536,9 @@ provideShimmerConfig({
 <!-- App.svelte or any parent component -->
 <script>
 import { setShimmerConfig } from '@shimmer-from-structure/svelte';
+import Dashboard from './Dashboard.svelte';
 
+// Must be called at the top level during component initialization
 setShimmerConfig({
   shimmerColor: 'rgba(56, 189, 248, 0.4)',
   backgroundColor: 'rgba(56, 189, 248, 0.1)',

package/dist/index.esm.js

@@ -1,801 +1,122 @@
-var _e = Object.defineProperty;
-var ge = (e, t, n) => t in e ? _e(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var G = (e, t, n) => ge(e, typeof t != "symbol" ? t + "" : t, n);
-import { setContext as pe, getContext as be, onMount as ye, tick as ke } from "svelte";
-import { shimmerDefaults as we, extractElementInfo as ve } from "@shimmer-from-structure/core";
-import { shimmerDefaults as ot } from "@shimmer-from-structure/core";
-function X() {
-}
-function Ce(e, t) {
-  for (const n in t) e[n] = t[n];
-  return (
-    /** @type {T & S} */
-    e
-  );
-}
-function ie(e) {
-  return e();
-}
-function Z() {
-  return /* @__PURE__ */ Object.create(null);
-}
-function O(e) {
-  e.forEach(ie);
-}
-function le(e) {
-  return typeof e == "function";
-}
-function Re(e, t) {
-  return e != e ? t == t : e !== t || e && typeof e == "object" || typeof e == "function";
-}
-function Ee(e) {
-  return Object.keys(e).length === 0;
-}
-function Y(e, t, n, r) {
-  if (e) {
-    const o = se(e, t, n, r);
-    return e[0](o);
-  }
-}
-function se(e, t, n, r) {
-  return e[1] && r ? Ce(n.ctx.slice(), e[1](r(t))) : n.ctx;
-}
-function q(e, t, n, r) {
-  if (e[2] && r) {
-    const o = e[2](r(n));
-    if (t.dirty === void 0)
-      return o;
-    if (typeof o == "object") {
-      const l = [], i = Math.max(t.dirty.length, o.length);
-      for (let a = 0; a < i; a += 1)
-        l[a] = t.dirty[a] | o[a];
-      return l;
-    }
-    return t.dirty | o;
-  }
-  return t.dirty;
-}
-function z(e, t, n, r, o, l) {
-  if (o) {
-    const i = se(t, n, r, l);
-    e.p(i, o);
-  }
-}
-function J(e) {
-  if (e.ctx.length > 32) {
-    const t = [], n = e.ctx.length / 32;
-    for (let r = 0; r < n; r++)
-      t[r] = -1;
-    return t;
-  }
-  return -1;
-}
-function N(e, t) {
-  e.appendChild(t);
-}
-function xe(e, t, n) {
-  const r = Be(e);
-  if (!r.getElementById(t)) {
-    const o = P("style");
-    o.id = t, o.textContent = n, Se(r, o);
-  }
-}
-function Be(e) {
-  if (!e) return document;
-  const t = e.getRootNode ? e.getRootNode() : e.ownerDocument;
-  return t && /** @type {ShadowRoot} */
-  t.host ? (
-    /** @type {ShadowRoot} */
-    t
-  ) : e.ownerDocument;
-}
-function Se(e, t) {
-  return N(
-    /** @type {Document} */
-    e.head || e,
-    t
-  ), t.sheet;
-}
-function Q(e, t, n) {
-  e.insertBefore(t, n || null);
-}
-function T(e) {
-  e.parentNode && e.parentNode.removeChild(e);
-}
-function P(e) {
-  return document.createElement(e);
-}
-function ue(e) {
-  return document.createTextNode(e);
-}
-function fe() {
-  return ue(" ");
-}
-function Me() {
-  return ue("");
-}
-function $(e, t, n) {
-  n == null ? e.removeAttribute(t) : e.getAttribute(t) !== n && e.setAttribute(t, n);
-}
-function Ne(e) {
-  return Array.from(e.childNodes);
-}
-function f(e, t, n, r) {
-  n == null ? e.style.removeProperty(t) : e.style.setProperty(t, n, "");
-}
-let W;
-function D(e) {
-  W = e;
-}
-const M = [], K = [];
-let I = [];
-const ee = [], Pe = /* @__PURE__ */ Promise.resolve();
-let U = !1;
-function Ie() {
-  U || (U = !0, Pe.then(ce));
-}
-function V(e) {
-  I.push(e);
-}
-const H = /* @__PURE__ */ new Set();
-let S = 0;
-function ce() {
-  if (S !== 0)
-    return;
-  const e = W;
-  do {
-    try {
-      for (; S < M.length; ) {
-        const t = M[S];
-        S++, D(t), Oe(t.$$);
-      }
-    } catch (t) {
-      throw M.length = 0, S = 0, t;
-    }
-    for (D(null), M.length = 0, S = 0; K.length; ) K.pop()();
-    for (let t = 0; t < I.length; t += 1) {
-      const n = I[t];
-      H.has(n) || (H.add(n), n());
-    }
-    I.length = 0;
-  } while (M.length);
-  for (; ee.length; )
-    ee.pop()();
-  U = !1, H.clear(), D(e);
-}
-function Oe(e) {
-  if (e.fragment !== null) {
-    e.update(), O(e.before_update);
-    const t = e.dirty;
-    e.dirty = [-1], e.fragment && e.fragment.p(e.ctx, t), e.after_update.forEach(V);
-  }
-}
-function De(e) {
-  const t = [], n = [];
-  I.forEach((r) => e.indexOf(r) === -1 ? t.push(r) : n.push(r)), n.forEach((r) => r()), I = t;
-}
-const L = /* @__PURE__ */ new Set();
-let x;
-function ae() {
-  x = {
-    r: 0,
-    c: [],
-    p: x
-    // parent group
-  };
-}
-function de() {
-  x.r || O(x.c), x = x.p;
-}
-function R(e, t) {
-  e && e.i && (L.delete(e), e.i(t));
-}
-function B(e, t, n, r) {
-  if (e && e.o) {
-    if (L.has(e)) return;
-    L.add(e), x.c.push(() => {
-      L.delete(e), r && (n && e.d(1), r());
-    }), e.o(t);
-  } else r && r();
-}
-function te(e) {
-  return (e == null ? void 0 : e.length) !== void 0 ? e : Array.from(e);
-}
-function Ae(e, t) {
-  e.d(1), t.delete(e.key);
-}
-function je(e, t, n, r, o, l, i, a, c, u, y, m) {
-  let p = e.length, b = l.length, k = p;
-  const s = {};
-  for (; k--; ) s[e[k].key] = k;
-  const h = [], _ = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Map(), w = [];
-  for (k = b; k--; ) {
-    const g = m(o, l, k), v = n(g);
-    let C = i.get(v);
-    C ? w.push(() => C.p(g, t)) : (C = u(v, g), C.c()), _.set(v, h[k] = C), v in s && E.set(v, Math.abs(k - s[v]));
-  }
-  const A = /* @__PURE__ */ new Set(), j = /* @__PURE__ */ new Set();
-  function d(g) {
-    R(g, 1), g.m(a, y), i.set(g.key, g), y = g.first, b--;
-  }
-  for (; p && b; ) {
-    const g = h[b - 1], v = e[p - 1], C = g.key, F = v.key;
-    g === v ? (y = g.first, p--, b--) : _.has(F) ? !i.has(C) || A.has(C) ? d(g) : j.has(F) ? p-- : E.get(C) > E.get(F) ? (j.add(C), d(g)) : (A.add(F), p--) : (c(v, i), p--);
-  }
-  for (; p--; ) {
-    const g = e[p];
-    _.has(g.key) || c(g, i);
-  }
-  for (; b; ) d(h[b - 1]);
-  return O(w), h;
-}
-function Fe(e, t, n) {
-  const { fragment: r, after_update: o } = e.$$;
-  r && r.m(t, n), V(() => {
-    const l = e.$$.on_mount.map(ie).filter(le);
-    e.$$.on_destroy ? e.$$.on_destroy.push(...l) : O(l), e.$$.on_mount = [];
-  }), o.forEach(V);
-}
-function Le(e, t) {
-  const n = e.$$;
-  n.fragment !== null && (De(n.after_update), O(n.on_destroy), n.fragment && n.fragment.d(t), n.on_destroy = n.fragment = null, n.ctx = []);
-}
-function Te(e, t) {
-  e.$$.dirty[0] === -1 && (M.push(e), Ie(), e.$$.dirty.fill(0)), e.$$.dirty[t / 31 | 0] |= 1 << t % 31;
-}
-function Ge(e, t, n, r, o, l, i = null, a = [-1]) {
-  const c = W;
-  D(e);
-  const u = e.$$ = {
-    fragment: null,
-    ctx: [],
-    // state
-    props: l,
-    update: X,
-    not_equal: o,
-    bound: Z(),
-    // lifecycle
-    on_mount: [],
-    on_destroy: [],
-    on_disconnect: [],
-    before_update: [],
-    after_update: [],
-    context: new Map(t.context || (c ? c.$$.context : [])),
-    // everything else
-    callbacks: Z(),
-    dirty: a,
-    skip_bound: !1,
-    root: t.target || c.$$.root
-  };
-  i && i(u.root);
-  let y = !1;
-  if (u.ctx = n ? n(e, t.props || {}, (m, p, ...b) => {
-    const k = b.length ? b[0] : p;
-    return u.ctx && o(u.ctx[m], u.ctx[m] = k) && (!u.skip_bound && u.bound[m] && u.bound[m](k), y && Te(e, m)), p;
-  }) : [], u.update(), y = !0, O(u.before_update), u.fragment = r ? r(u.ctx) : !1, t.target) {
-    if (t.hydrate) {
-      const m = Ne(t.target);
-      u.fragment && u.fragment.l(m), m.forEach(T);
-    } else
-      u.fragment && u.fragment.c();
-    t.intro && R(e.$$.fragment), Fe(e, t.target, t.anchor), ce();
-  }
-  D(c);
-}
-class He {
-  constructor() {
-    /**
-     * ### PRIVATE API
-     *
-     * Do not use, may change at any time
-     *
-     * @type {any}
-     */
-    G(this, "$$");
-    /**
-     * ### PRIVATE API
-     *
-     * Do not use, may change at any time
-     *
-     * @type {any}
-     */
-    G(this, "$$set");
-  }
-  /** @returns {void} */
-  $destroy() {
-    Le(this, 1), this.$destroy = X;
-  }
-  /**
-   * @template {Extract<keyof Events, string>} K
-   * @param {K} type
-   * @param {((e: Events[K]) => void) | null | undefined} callback
-   * @returns {() => void}
-   */
-  $on(t, n) {
-    if (!le(n))
-      return X;
-    const r = this.$$.callbacks[t] || (this.$$.callbacks[t] = []);
-    return r.push(n), () => {
-      const o = r.indexOf(n);
-      o !== -1 && r.splice(o, 1);
-    };
-  }
-  /**
-   * @param {Partial<Props>} props
-   * @returns {void}
-   */
-  $set(t) {
-    this.$$set && !Ee(t) && (this.$$.skip_bound = !0, this.$$set(t), this.$$.skip_bound = !1);
-  }
-}
-const Xe = "4";
-typeof window < "u" && (window.__svelte || (window.__svelte = { v: /* @__PURE__ */ new Set() })).v.add(Xe);
-const me = Symbol("SHIMMER_CONFIG");
-function he() {
-  return be(me) || we;
-}
-function et(e = {}) {
-  const t = he(), n = {
-    shimmerColor: e.shimmerColor ?? t.shimmerColor,
-    backgroundColor: e.backgroundColor ?? t.backgroundColor,
-    duration: e.duration ?? t.duration,
-    fallbackBorderRadius: e.fallbackBorderRadius ?? t.fallbackBorderRadius
+import "svelte/internal/disclose-version";
+import * as e from "svelte/internal/client";
+import { getContext as G, setContext as H, onMount as L, tick as N } from "svelte";
+import { shimmerDefaults as X, extractElementInfo as A } from "@shimmer-from-structure/core";
+import { shimmerDefaults as V } from "@shimmer-from-structure/core";
+const b = Symbol("SHIMMER_CONFIG");
+function C() {
+  return G(b) || X;
+}
+function J(a = {}) {
+  const t = C(), d = {
+    shimmerColor: a.shimmerColor ?? t.shimmerColor,
+    backgroundColor: a.backgroundColor ?? t.backgroundColor,
+    duration: a.duration ?? t.duration,
+    fallbackBorderRadius: a.fallbackBorderRadius ?? t.fallbackBorderRadius
   };
-  pe(me, n);
-}
-function Ke(e) {
-  xe(e, "svelte-17yl4xt", ".shimmer-measure-container.svelte-17yl4xt *{color:transparent !important}.shimmer-measure-container.svelte-17yl4xt img,.shimmer-measure-container.svelte-17yl4xt svg,.shimmer-measure-container.svelte-17yl4xt video{opacity:0}@keyframes svelte-17yl4xt-shimmer-animation{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}");
-}
-function ne(e, t, n) {
-  const r = e.slice();
-  return r[19] = t[n], r[21] = n, r;
-}
-const Ue = (e) => ({
-  shimmerTemplateProps: e & /*templateProps*/
-  2
-}), re = (e) => ({
-  shimmerTemplateProps: (
-    /*templateProps*/
-    e[1]
-  )
-});
-function Ve(e) {
-  let t, n, r, o, l, i, a = [], c = /* @__PURE__ */ new Map(), u;
-  const y = [ze, qe], m = [];
-  function p(s, h) {
-    return (
-      /*templateProps*/
-      s[1] ? 0 : 1
-    );
-  }
-  r = p(e), o = m[r] = y[r](e);
-  let b = te(
-    /*elements*/
-    e[3]
-  );
-  const k = (s) => (
-    /*index*/
-    s[21]
-  );
-  for (let s = 0; s < b.length; s += 1) {
-    let h = ne(e, b, s), _ = k(h);
-    c.set(_, a[s] = oe(_, h));
-  }
-  return {
-    c() {
-      t = P("div"), n = P("div"), o.c(), l = fe(), i = P("div");
-      for (let s = 0; s < a.length; s += 1)
-        a[s].c();
-      $(n, "class", "shimmer-measure-container svelte-17yl4xt"), f(n, "pointer-events", "none"), $(n, "aria-hidden", "true"), f(i, "position", "absolute"), f(i, "top", "0"), f(i, "left", "0"), f(i, "right", "0"), f(i, "bottom", "0"), f(i, "overflow", "hidden"), f(i, "pointer-events", "none"), f(t, "position", "relative");
-    },
-    m(s, h) {
-      Q(s, t, h), N(t, n), m[r].m(n, null), e[15](n), N(t, l), N(t, i);
-      for (let _ = 0; _ < a.length; _ += 1)
-        a[_] && a[_].m(i, null);
-      u = !0;
-    },
-    p(s, h) {
-      let _ = r;
-      r = p(s), r === _ ? m[r].p(s, h) : (ae(), B(m[_], 1, 1, () => {
-        m[_] = null;
-      }), de(), o = m[r], o ? o.p(s, h) : (o = m[r] = y[r](s), o.c()), R(o, 1), o.m(n, null)), h & /*elements, resolvedBackgroundColor, resolvedFallbackBorderRadius, resolvedShimmerColor, resolvedDuration*/
-      248 && (b = te(
-        /*elements*/
-        s[3]
-      ), a = je(a, h, k, 1, s, b, c, i, Ae, oe, null, ne));
-    },
-    i(s) {
-      u || (R(o), u = !0);
-    },
-    o(s) {
-      B(o), u = !1;
-    },
-    d(s) {
-      s && T(t), m[r].d(), e[15](null);
-      for (let h = 0; h < a.length; h += 1)
-        a[h].d();
+  H(b, d);
+}
+var K = e.from_html('<div class="svelte-euvo5u"><div class="svelte-euvo5u"></div></div>'), P = e.from_html(`<div style="position: relative;" class="svelte-euvo5u"><div class="shimmer-measure-container svelte-euvo5u" style="pointer-events: none;" aria-hidden="true"><!></div> <div style="
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+        pointer-events: none;
+      " class="svelte-euvo5u"></div></div>`);
+const Y = {
+  hash: "svelte-euvo5u",
+  code: `.shimmer-measure-container.svelte-euvo5u * {color:transparent !important;}.shimmer-measure-container.svelte-euvo5u img,
+  .shimmer-measure-container.svelte-euvo5u svg,
+  .shimmer-measure-container.svelte-euvo5u video {opacity:0;}
+  @keyframes svelte-euvo5u-shimmer-animation {
+    0% {
+      transform: translateX(-100%);
     }
-  };
-}
-function Ye(e) {
-  let t;
-  const n = (
-    /*#slots*/
-    e[14].default
-  ), r = Y(
-    n,
-    e,
-    /*$$scope*/
-    e[13],
-    null
-  );
-  return {
-    c() {
-      r && r.c();
-    },
-    m(o, l) {
-      r && r.m(o, l), t = !0;
-    },
-    p(o, l) {
-      r && r.p && (!t || l & /*$$scope*/
-      8192) && z(
-        r,
-        n,
-        o,
-        /*$$scope*/
-        o[13],
-        t ? q(
-          n,
-          /*$$scope*/
-          o[13],
-          l,
-          null
-        ) : J(
-          /*$$scope*/
-          o[13]
-        ),
-        null
-      );
-    },
-    i(o) {
-      t || (R(r, o), t = !0);
-    },
-    o(o) {
-      B(r, o), t = !1;
-    },
-    d(o) {
-      r && r.d(o);
-    }
-  };
-}
-function qe(e) {
-  let t;
-  const n = (
-    /*#slots*/
-    e[14].default
-  ), r = Y(
-    n,
-    e,
-    /*$$scope*/
-    e[13],
-    null
-  );
-  return {
-    c() {
-      r && r.c();
-    },
-    m(o, l) {
-      r && r.m(o, l), t = !0;
-    },
-    p(o, l) {
-      r && r.p && (!t || l & /*$$scope*/
-      8192) && z(
-        r,
-        n,
-        o,
-        /*$$scope*/
-        o[13],
-        t ? q(
-          n,
-          /*$$scope*/
-          o[13],
-          l,
-          null
-        ) : J(
-          /*$$scope*/
-          o[13]
-        ),
-        null
-      );
-    },
-    i(o) {
-      t || (R(r, o), t = !0);
-    },
-    o(o) {
-      B(r, o), t = !1;
-    },
-    d(o) {
-      r && r.d(o);
-    }
-  };
-}
-function ze(e) {
-  let t;
-  const n = (
-    /*#slots*/
-    e[14].default
-  ), r = Y(
-    n,
-    e,
-    /*$$scope*/
-    e[13],
-    re
-  );
-  return {
-    c() {
-      r && r.c();
-    },
-    m(o, l) {
-      r && r.m(o, l), t = !0;
-    },
-    p(o, l) {
-      r && r.p && (!t || l & /*$$scope, templateProps*/
-      8194) && z(
-        r,
-        n,
-        o,
-        /*$$scope*/
-        o[13],
-        t ? q(
-          n,
-          /*$$scope*/
-          o[13],
-          l,
-          Ue
-        ) : J(
-          /*$$scope*/
-          o[13]
-        ),
-        re
-      );
-    },
-    i(o) {
-      t || (R(r, o), t = !0);
-    },
-    o(o) {
-      B(r, o), t = !1;
-    },
-    d(o) {
-      r && r.d(o);
-    }
-  };
-}
-function oe(e, t) {
-  let n, r, o;
-  return {
-    key: e,
-    first: null,
-    c() {
-      n = P("div"), r = P("div"), o = fe(), f(r, "position", "absolute"), f(r, "top", "0"), f(r, "left", "0"), f(r, "width", "100%"), f(r, "height", "100%"), f(r, "background", "linear-gradient(90deg, transparent, " + /*resolvedShimmerColor*/
-      t[7] + ", transparent)"), f(r, "animation", "shimmer-animation " + /*resolvedDuration*/
-      t[5] + "s infinite"), f(n, "position", "absolute"), f(
-        n,
-        "left",
-        /*element*/
-        t[19].x + "px"
-      ), f(
-        n,
-        "top",
-        /*element*/
-        t[19].y + "px"
-      ), f(
-        n,
-        "width",
-        /*element*/
-        t[19].width + "px"
-      ), f(
-        n,
-        "height",
-        /*element*/
-        t[19].height + "px"
-      ), f(
-        n,
-        "background-color",
-        /*resolvedBackgroundColor*/
-        t[6]
-      ), f(
-        n,
-        "border-radius",
-        /*element*/
-        t[19].borderRadius === "0px" ? (
-          /*resolvedFallbackBorderRadius*/
-          t[4] + "px"
-        ) : (
-          /*element*/
-          t[19].borderRadius
-        )
-      ), f(n, "overflow", "hidden"), this.first = n;
-    },
-    m(l, i) {
-      Q(l, n, i), N(n, r), N(n, o);
-    },
-    p(l, i) {
-      t = l, i & /*resolvedShimmerColor*/
-      128 && f(r, "background", "linear-gradient(90deg, transparent, " + /*resolvedShimmerColor*/
-      t[7] + ", transparent)"), i & /*resolvedDuration*/
-      32 && f(r, "animation", "shimmer-animation " + /*resolvedDuration*/
-      t[5] + "s infinite"), i & /*elements*/
-      8 && f(
-        n,
-        "left",
-        /*element*/
-        t[19].x + "px"
-      ), i & /*elements*/
-      8 && f(
-        n,
-        "top",
-        /*element*/
-        t[19].y + "px"
-      ), i & /*elements*/
-      8 && f(
-        n,
-        "width",
-        /*element*/
-        t[19].width + "px"
-      ), i & /*elements*/
-      8 && f(
-        n,
-        "height",
-        /*element*/
-        t[19].height + "px"
-      ), i & /*resolvedBackgroundColor*/
-      64 && f(
-        n,
-        "background-color",
-        /*resolvedBackgroundColor*/
-        t[6]
-      ), i & /*elements, resolvedFallbackBorderRadius*/
-      24 && f(
-        n,
-        "border-radius",
-        /*element*/
-        t[19].borderRadius === "0px" ? (
-          /*resolvedFallbackBorderRadius*/
-          t[4] + "px"
-        ) : (
-          /*element*/
-          t[19].borderRadius
-        )
-      );
-    },
-    d(l) {
-      l && T(n);
+    100% {
+      transform: translateX(100%);
     }
-  };
-}
-function Je(e) {
-  let t, n, r, o;
-  const l = [Ye, Ve], i = [];
-  function a(c, u) {
-    return (
-      /*loading*/
-      c[0] ? 1 : 0
-    );
-  }
-  return t = a(e), n = i[t] = l[t](e), {
-    c() {
-      n.c(), r = Me();
-    },
-    m(c, u) {
-      i[t].m(c, u), Q(c, r, u), o = !0;
-    },
-    p(c, [u]) {
-      let y = t;
-      t = a(c), t === y ? i[t].p(c, u) : (ae(), B(i[y], 1, 1, () => {
-        i[y] = null;
-      }), de(), n = i[t], n ? n.p(c, u) : (n = i[t] = l[t](c), n.c()), R(n, 1), n.m(r.parentNode, r));
-    },
-    i(c) {
-      o || (R(n), o = !0);
-    },
-    o(c) {
-      B(n), o = !1;
-    },
-    d(c) {
-      c && T(r), i[t].d(c);
-    }
-  };
-}
-function Qe(e, t, n) {
-  let r, o, l, i, { $$slots: a = {}, $$scope: c } = t, { loading: u = !0 } = t, { shimmerColor: y = void 0 } = t, { backgroundColor: m = void 0 } = t, { duration: p = void 0 } = t, { fallbackBorderRadius: b = void 0 } = t, { templateProps: k = void 0 } = t, s, h = [];
-  const _ = he();
-  async function E() {
-    if (!u || !s) return;
-    w == null || w.disconnect(), await ke();
-    const d = s, g = d.getBoundingClientRect(), v = [];
-    Array.from(d.children).forEach((C) => {
-      v.push(...ve(C, g));
-    }), n(3, h = v), s && w && w.observe(s, {
+  }`
+};
+function Q(a, t) {
+  e.push(t, !0), e.append_styles(a, Y);
+  let d = e.prop(t, "loading", 3, !0), _ = e.prop(t, "shimmerColor", 3, void 0), k = e.prop(t, "backgroundColor", 3, void 0), x = e.prop(t, "duration", 3, void 0), R = e.prop(t, "fallbackBorderRadius", 3, void 0);
+  e.prop(t, "templateProps", 3, void 0);
+  let o = e.state(void 0), h = e.state(e.proxy([]));
+  const u = C(), y = e.derived(() => _() ?? u.shimmerColor), B = e.derived(() => k() ?? u.backgroundColor), w = e.derived(() => x() ?? u.duration), E = e.derived(() => R() ?? u.fallbackBorderRadius);
+  let r;
+  async function c() {
+    if (!d() || !e.get(o)) return;
+    r == null || r.disconnect(), await N();
+    const i = e.get(o), s = i.getBoundingClientRect(), n = [];
+    Array.from(i.children).forEach((v) => {
+      n.push(...A(v, s));
+    }), e.set(h, n, !0), e.get(o) && r && r.observe(e.get(o), {
       childList: !0,
       subtree: !0,
       characterData: !0,
       attributes: !1
     });
   }
-  let w;
-  ye(() => (E(), s && (w = new MutationObserver(() => {
-    u && E();
-  }), w.observe(s, {
+  e.user_effect(() => {
+    d() && e.get(o) && c();
+  }), L(() => (c(), e.get(o) && (r = new MutationObserver(() => {
+    d() && c();
+  }), r.observe(e.get(o), {
     childList: !0,
     subtree: !0,
     characterData: !0,
     attributes: !1
+    // Don't observe attribute changes (style updates)
   })), () => {
-    w == null || w.disconnect();
+    r == null || r.disconnect();
   }));
-  function A() {
-    E();
-  }
-  function j(d) {
-    K[d ? "unshift" : "push"](() => {
-      s = d, n(2, s);
+  function S() {
+    c();
+  }
+  var M = { remeasure: S }, g = e.comment(), D = e.first_child(g);
+  {
+    var I = (i) => {
+      var s = e.comment(), n = e.first_child(s);
+      e.snippet(n, () => t.children), e.append(i, s);
+    }, F = (i) => {
+      var s = P(), n = e.child(s), v = e.child(n);
+      e.snippet(v, () => t.children), e.reset(n), e.bind_this(n, (f) => e.set(o, f), () => e.get(o));
+      var p = e.sibling(n, 2);
+      e.each(p, 21, () => e.get(h), e.index, (f, l) => {
+        var m = K(), O = e.child(m);
+        e.reset(m), e.template_effect(() => {
+          e.set_style(m, `
+            position: absolute;
+            left: ${e.get(l).x ?? ""}px;
+            top: ${e.get(l).y ?? ""}px;
+            width: ${e.get(l).width ?? ""}px;
+            height: ${e.get(l).height ?? ""}px;
+            background-color: ${e.get(B) ?? ""};
+            border-radius: ${(e.get(l).borderRadius === "0px" ? e.get(E) + "px" : e.get(l).borderRadius) ?? ""};
+            overflow: hidden;
+          `), e.set_style(O, `
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              background: linear-gradient(90deg, transparent, ${e.get(y) ?? ""}, transparent);
+              animation: shimmer-animation ${e.get(w) ?? ""}s infinite;
+            `);
+        }), e.append(f, m);
+      }), e.reset(p), e.reset(s), e.append(i, s);
+    };
+    e.if(D, (i) => {
+      d() ? i(F, !1) : i(I);
     });
   }
-  return e.$$set = (d) => {
-    "loading" in d && n(0, u = d.loading), "shimmerColor" in d && n(8, y = d.shimmerColor), "backgroundColor" in d && n(9, m = d.backgroundColor), "duration" in d && n(10, p = d.duration), "fallbackBorderRadius" in d && n(11, b = d.fallbackBorderRadius), "templateProps" in d && n(1, k = d.templateProps), "$$scope" in d && n(13, c = d.$$scope);
-  }, e.$$.update = () => {
-    e.$$.dirty & /*shimmerColor*/
-    256 && n(7, r = y ?? _.shimmerColor), e.$$.dirty & /*backgroundColor*/
-    512 && n(6, o = m ?? _.backgroundColor), e.$$.dirty & /*duration*/
-    1024 && n(5, l = p ?? _.duration), e.$$.dirty & /*fallbackBorderRadius*/
-    2048 && n(4, i = b ?? _.fallbackBorderRadius), e.$$.dirty & /*loading, measureRef*/
-    5 && u && s && E();
-  }, [
-    u,
-    k,
-    s,
-    h,
-    i,
-    l,
-    o,
-    r,
-    y,
-    m,
-    p,
-    b,
-    A,
-    c,
-    a,
-    j
-  ];
-}
-class tt extends He {
-  constructor(t) {
-    super(), Ge(
-      this,
-      t,
-      Qe,
-      Je,
-      Re,
-      {
-        loading: 0,
-        shimmerColor: 8,
-        backgroundColor: 9,
-        duration: 10,
-        fallbackBorderRadius: 11,
-        templateProps: 1,
-        remeasure: 12
-      },
-      Ke
-    );
-  }
-  get remeasure() {
-    return this.$$.ctx[12];
-  }
+  return e.append(a, g), e.pop(M);
 }
 export {
-  tt as Shimmer,
-  he as getShimmerConfig,
-  et as setShimmerConfig,
-  ot as shimmerDefaults
+  Q as Shimmer,
+  C as getShimmerConfig,
+  J as setShimmerConfig,
+  V as shimmerDefaults
 };

package/dist/index.js

@@ -1 +1,36 @@
-(function(y,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("svelte"),require("@shimmer-from-structure/core")):typeof define=="function"&&define.amd?define(["exports","svelte","@shimmer-from-structure/core"],v):(y=typeof globalThis<"u"?globalThis:y||self,v(y.ShimmerSvelte={},y.Svelte,y.ShimmerCore))})(this,function(y,v,B){"use strict";var ze=Object.defineProperty;var Je=(y,v,B)=>v in y?ze(y,v,{enumerable:!0,configurable:!0,writable:!0,value:B}):y[v]=B;var te=(y,v,B)=>Je(y,typeof v!="symbol"?v+"":v,B);function X(){}function be(e,t){for(const n in t)e[n]=t[n];return e}function ne(e){return e()}function re(){return Object.create(null)}function N(e){e.forEach(ne)}function oe(e){return typeof e=="function"}function ye(e,t){return e!=e?t==t:e!==t||e&&typeof e=="object"||typeof e=="function"}function ke(e){return Object.keys(e).length===0}function K(e,t,n,r){if(e){const o=ie(e,t,n,r);return e[0](o)}}function ie(e,t,n,r){return e[1]&&r?be(n.ctx.slice(),e[1](r(t))):n.ctx}function U(e,t,n,r){if(e[2]&&r){const o=e[2](r(n));if(t.dirty===void 0)return o;if(typeof o=="object"){const l=[],i=Math.max(t.dirty.length,o.length);for(let a=0;a<i;a+=1)l[a]=t.dirty[a]|o[a];return l}return t.dirty|o}return t.dirty}function V(e,t,n,r,o,l){if(o){const i=ie(t,n,r,l);e.p(i,o)}}function Y(e){if(e.ctx.length>32){const t=[],n=e.ctx.length/32;for(let r=0;r<n;r++)t[r]=-1;return t}return-1}function O(e,t){e.appendChild(t)}function we(e,t,n){const r=ve(e);if(!r.getElementById(t)){const o=j("style");o.id=t,o.textContent=n,Ce(r,o)}}function ve(e){if(!e)return document;const t=e.getRootNode?e.getRootNode():e.ownerDocument;return t&&t.host?t:e.ownerDocument}function Ce(e,t){return O(e.head||e,t),t.sheet}function z(e,t,n){e.insertBefore(t,n||null)}function F(e){e.parentNode&&e.parentNode.removeChild(e)}function j(e){return document.createElement(e)}function le(e){return document.createTextNode(e)}function se(){return le(" ")}function Se(){return le("")}function ue(e,t,n){n==null?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function Re(e){return Array.from(e.childNodes)}function f(e,t,n,r){n==null?e.style.removeProperty(t):e.style.setProperty(t,n,"")}let J;function T(e){J=e}const D=[],Q=[];let I=[];const fe=[],Ee=Promise.resolve();let W=!1;function Be(){W||(W=!0,Ee.then(ce))}function Z(e){I.push(e)}const $=new Set;let A=0;function ce(){if(A!==0)return;const e=J;do{try{for(;A<D.length;){const t=D[A];A++,T(t),Me(t.$$)}}catch(t){throw D.length=0,A=0,t}for(T(null),D.length=0,A=0;Q.length;)Q.pop()();for(let t=0;t<I.length;t+=1){const n=I[t];$.has(n)||($.add(n),n())}I.length=0}while(D.length);for(;fe.length;)fe.pop()();W=!1,$.clear(),T(e)}function Me(e){if(e.fragment!==null){e.update(),N(e.before_update);const t=e.dirty;e.dirty=[-1],e.fragment&&e.fragment.p(e.ctx,t),e.after_update.forEach(Z)}}function xe(e){const t=[],n=[];I.forEach(r=>e.indexOf(r)===-1?t.push(r):n.push(r)),n.forEach(r=>r()),I=t}const L=new Set;let x;function ae(){x={r:0,c:[],p:x}}function de(){x.r||N(x.c),x=x.p}function E(e,t){e&&e.i&&(L.delete(e),e.i(t))}function P(e,t,n,r){if(e&&e.o){if(L.has(e))return;L.add(e),x.c.push(()=>{L.delete(e),r&&(n&&e.d(1),r())}),e.o(t)}else r&&r()}function me(e){return(e==null?void 0:e.length)!==void 0?e:Array.from(e)}function Pe(e,t){e.d(1),t.delete(e.key)}function Ne(e,t,n,r,o,l,i,a,c,u,k,m){let p=e.length,b=l.length,w=p;const s={};for(;w--;)s[e[w].key]=w;const h=[],_=new Map,M=new Map,C=[];for(w=b;w--;){const g=m(o,l,w),S=n(g);let R=i.get(S);R?C.push(()=>R.p(g,t)):(R=u(S,g),R.c()),_.set(S,h[w]=R),S in s&&M.set(S,Math.abs(w-s[S]))}const q=new Set,G=new Set;function d(g){E(g,1),g.m(a,k),i.set(g.key,g),k=g.first,b--}for(;p&&b;){const g=h[b-1],S=e[p-1],R=g.key,H=S.key;g===S?(k=g.first,p--,b--):_.has(H)?!i.has(R)||q.has(R)?d(g):G.has(H)?p--:M.get(R)>M.get(H)?(G.add(R),d(g)):(q.add(H),p--):(c(S,i),p--)}for(;p--;){const g=e[p];_.has(g.key)||c(g,i)}for(;b;)d(h[b-1]);return N(C),h}function Oe(e,t,n){const{fragment:r,after_update:o}=e.$$;r&&r.m(t,n),Z(()=>{const l=e.$$.on_mount.map(ne).filter(oe);e.$$.on_destroy?e.$$.on_destroy.push(...l):N(l),e.$$.on_mount=[]}),o.forEach(Z)}function je(e,t){const n=e.$$;n.fragment!==null&&(xe(n.after_update),N(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function De(e,t){e.$$.dirty[0]===-1&&(D.push(e),Be(),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<<t%31}function Ie(e,t,n,r,o,l,i=null,a=[-1]){const c=J;T(e);const u=e.$$={fragment:null,ctx:[],props:l,update:X,not_equal:o,bound:re(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(t.context||(c?c.$$.context:[])),callbacks:re(),dirty:a,skip_bound:!1,root:t.target||c.$$.root};i&&i(u.root);let k=!1;if(u.ctx=n?n(e,t.props||{},(m,p,...b)=>{const w=b.length?b[0]:p;return u.ctx&&o(u.ctx[m],u.ctx[m]=w)&&(!u.skip_bound&&u.bound[m]&&u.bound[m](w),k&&De(e,m)),p}):[],u.update(),k=!0,N(u.before_update),u.fragment=r?r(u.ctx):!1,t.target){if(t.hydrate){const m=Re(t.target);u.fragment&&u.fragment.l(m),m.forEach(F)}else u.fragment&&u.fragment.c();t.intro&&E(e.$$.fragment),Oe(e,t.target,t.anchor),ce()}T(c)}class Ae{constructor(){te(this,"$$");te(this,"$$set")}$destroy(){je(this,1),this.$destroy=X}$on(t,n){if(!oe(n))return X;const r=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return r.push(n),()=>{const o=r.indexOf(n);o!==-1&&r.splice(o,1)}}$set(t){this.$$set&&!ke(t)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const Te="4";typeof window<"u"&&(window.__svelte||(window.__svelte={v:new Set})).v.add(Te);const he=Symbol("SHIMMER_CONFIG");function ee(){return v.getContext(he)||B.shimmerDefaults}function Fe(e={}){const t=ee(),n={shimmerColor:e.shimmerColor??t.shimmerColor,backgroundColor:e.backgroundColor??t.backgroundColor,duration:e.duration??t.duration,fallbackBorderRadius:e.fallbackBorderRadius??t.fallbackBorderRadius};v.setContext(he,n)}function Le(e){we(e,"svelte-17yl4xt",".shimmer-measure-container.svelte-17yl4xt *{color:transparent !important}.shimmer-measure-container.svelte-17yl4xt img,.shimmer-measure-container.svelte-17yl4xt svg,.shimmer-measure-container.svelte-17yl4xt video{opacity:0}@keyframes svelte-17yl4xt-shimmer-animation{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}")}function _e(e,t,n){const r=e.slice();return r[19]=t[n],r[21]=n,r}const qe=e=>({shimmerTemplateProps:e&2}),ge=e=>({shimmerTemplateProps:e[1]});function Ge(e){let t,n,r,o,l,i,a=[],c=new Map,u;const k=[Ke,Xe],m=[];function p(s,h){return s[1]?0:1}r=p(e),o=m[r]=k[r](e);let b=me(e[3]);const w=s=>s[21];for(let s=0;s<b.length;s+=1){let h=_e(e,b,s),_=w(h);c.set(_,a[s]=pe(_,h))}return{c(){t=j("div"),n=j("div"),o.c(),l=se(),i=j("div");for(let s=0;s<a.length;s+=1)a[s].c();ue(n,"class","shimmer-measure-container svelte-17yl4xt"),f(n,"pointer-events","none"),ue(n,"aria-hidden","true"),f(i,"position","absolute"),f(i,"top","0"),f(i,"left","0"),f(i,"right","0"),f(i,"bottom","0"),f(i,"overflow","hidden"),f(i,"pointer-events","none"),f(t,"position","relative")},m(s,h){z(s,t,h),O(t,n),m[r].m(n,null),e[15](n),O(t,l),O(t,i);for(let _=0;_<a.length;_+=1)a[_]&&a[_].m(i,null);u=!0},p(s,h){let _=r;r=p(s),r===_?m[r].p(s,h):(ae(),P(m[_],1,1,()=>{m[_]=null}),de(),o=m[r],o?o.p(s,h):(o=m[r]=k[r](s),o.c()),E(o,1),o.m(n,null)),h&248&&(b=me(s[3]),a=Ne(a,h,w,1,s,b,c,i,Pe,pe,null,_e))},i(s){u||(E(o),u=!0)},o(s){P(o),u=!1},d(s){s&&F(t),m[r].d(),e[15](null);for(let h=0;h<a.length;h+=1)a[h].d()}}}function He(e){let t;const n=e[14].default,r=K(n,e,e[13],null);return{c(){r&&r.c()},m(o,l){r&&r.m(o,l),t=!0},p(o,l){r&&r.p&&(!t||l&8192)&&V(r,n,o,o[13],t?U(n,o[13],l,null):Y(o[13]),null)},i(o){t||(E(r,o),t=!0)},o(o){P(r,o),t=!1},d(o){r&&r.d(o)}}}function Xe(e){let t;const n=e[14].default,r=K(n,e,e[13],null);return{c(){r&&r.c()},m(o,l){r&&r.m(o,l),t=!0},p(o,l){r&&r.p&&(!t||l&8192)&&V(r,n,o,o[13],t?U(n,o[13],l,null):Y(o[13]),null)},i(o){t||(E(r,o),t=!0)},o(o){P(r,o),t=!1},d(o){r&&r.d(o)}}}function Ke(e){let t;const n=e[14].default,r=K(n,e,e[13],ge);return{c(){r&&r.c()},m(o,l){r&&r.m(o,l),t=!0},p(o,l){r&&r.p&&(!t||l&8194)&&V(r,n,o,o[13],t?U(n,o[13],l,qe):Y(o[13]),ge)},i(o){t||(E(r,o),t=!0)},o(o){P(r,o),t=!1},d(o){r&&r.d(o)}}}function pe(e,t){let n,r,o;return{key:e,first:null,c(){n=j("div"),r=j("div"),o=se(),f(r,"position","absolute"),f(r,"top","0"),f(r,"left","0"),f(r,"width","100%"),f(r,"height","100%"),f(r,"background","linear-gradient(90deg, transparent, "+t[7]+", transparent)"),f(r,"animation","shimmer-animation "+t[5]+"s infinite"),f(n,"position","absolute"),f(n,"left",t[19].x+"px"),f(n,"top",t[19].y+"px"),f(n,"width",t[19].width+"px"),f(n,"height",t[19].height+"px"),f(n,"background-color",t[6]),f(n,"border-radius",t[19].borderRadius==="0px"?t[4]+"px":t[19].borderRadius),f(n,"overflow","hidden"),this.first=n},m(l,i){z(l,n,i),O(n,r),O(n,o)},p(l,i){t=l,i&128&&f(r,"background","linear-gradient(90deg, transparent, "+t[7]+", transparent)"),i&32&&f(r,"animation","shimmer-animation "+t[5]+"s infinite"),i&8&&f(n,"left",t[19].x+"px"),i&8&&f(n,"top",t[19].y+"px"),i&8&&f(n,"width",t[19].width+"px"),i&8&&f(n,"height",t[19].height+"px"),i&64&&f(n,"background-color",t[6]),i&24&&f(n,"border-radius",t[19].borderRadius==="0px"?t[4]+"px":t[19].borderRadius)},d(l){l&&F(n)}}}function Ue(e){let t,n,r,o;const l=[He,Ge],i=[];function a(c,u){return c[0]?1:0}return t=a(e),n=i[t]=l[t](e),{c(){n.c(),r=Se()},m(c,u){i[t].m(c,u),z(c,r,u),o=!0},p(c,[u]){let k=t;t=a(c),t===k?i[t].p(c,u):(ae(),P(i[k],1,1,()=>{i[k]=null}),de(),n=i[t],n?n.p(c,u):(n=i[t]=l[t](c),n.c()),E(n,1),n.m(r.parentNode,r))},i(c){o||(E(n),o=!0)},o(c){P(n),o=!1},d(c){c&&F(r),i[t].d(c)}}}function Ve(e,t,n){let r,o,l,i,{$$slots:a={},$$scope:c}=t,{loading:u=!0}=t,{shimmerColor:k=void 0}=t,{backgroundColor:m=void 0}=t,{duration:p=void 0}=t,{fallbackBorderRadius:b=void 0}=t,{templateProps:w=void 0}=t,s,h=[];const _=ee();async function M(){if(!u||!s)return;C==null||C.disconnect(),await v.tick();const d=s,g=d.getBoundingClientRect(),S=[];Array.from(d.children).forEach(R=>{S.push(...B.extractElementInfo(R,g))}),n(3,h=S),s&&C&&C.observe(s,{childList:!0,subtree:!0,characterData:!0,attributes:!1})}let C;v.onMount(()=>(M(),s&&(C=new MutationObserver(()=>{u&&M()}),C.observe(s,{childList:!0,subtree:!0,characterData:!0,attributes:!1})),()=>{C==null||C.disconnect()}));function q(){M()}function G(d){Q[d?"unshift":"push"](()=>{s=d,n(2,s)})}return e.$$set=d=>{"loading"in d&&n(0,u=d.loading),"shimmerColor"in d&&n(8,k=d.shimmerColor),"backgroundColor"in d&&n(9,m=d.backgroundColor),"duration"in d&&n(10,p=d.duration),"fallbackBorderRadius"in d&&n(11,b=d.fallbackBorderRadius),"templateProps"in d&&n(1,w=d.templateProps),"$$scope"in d&&n(13,c=d.$$scope)},e.$$.update=()=>{e.$$.dirty&256&&n(7,r=k??_.shimmerColor),e.$$.dirty&512&&n(6,o=m??_.backgroundColor),e.$$.dirty&1024&&n(5,l=p??_.duration),e.$$.dirty&2048&&n(4,i=b??_.fallbackBorderRadius),e.$$.dirty&5&&u&&s&&M()},[u,w,s,h,i,l,o,r,k,m,p,b,q,c,a,G]}class Ye extends Ae{constructor(t){super(),Ie(this,t,Ve,Ue,ye,{loading:0,shimmerColor:8,backgroundColor:9,duration:10,fallbackBorderRadius:11,templateProps:1,remeasure:12},Le)}get remeasure(){return this.$$.ctx[12]}}Object.defineProperty(y,"shimmerDefaults",{enumerable:!0,get:()=>B.shimmerDefaults}),y.Shimmer=Ye,y.getShimmerConfig=ee,y.setShimmerConfig=Fe,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})});
+(function(n,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("svelte/internal/disclose-version"),require("svelte/internal/client"),require("svelte"),require("@shimmer-from-structure/core")):typeof define=="function"&&define.amd?define(["exports","svelte/internal/disclose-version","svelte/internal/client","svelte","@shimmer-from-structure/core"],c):(n=typeof globalThis<"u"?globalThis:n||self,c(n.ShimmerSvelte={},null,n.SvelteInternalClient,n.Svelte,n.ShimmerCore))})(this,function(n,c,R,m,p){"use strict";function O(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const i in r)if(i!=="default"){const f=Object.getOwnPropertyDescriptor(r,i);Object.defineProperty(t,i,f.get?f:{enumerable:!0,get:()=>r[i]})}}return t.default=r,Object.freeze(t)}const e=O(R),y=Symbol("SHIMMER_CONFIG");function b(){return m.getContext(y)||p.shimmerDefaults}function B(r={}){const t=b(),i={shimmerColor:r.shimmerColor??t.shimmerColor,backgroundColor:r.backgroundColor??t.backgroundColor,duration:r.duration??t.duration,fallbackBorderRadius:r.fallbackBorderRadius??t.fallbackBorderRadius};m.setContext(y,i)}var w=e.from_html('<div class="svelte-euvo5u"><div class="svelte-euvo5u"></div></div>'),D=e.from_html(`<div style="position: relative;" class="svelte-euvo5u"><div class="shimmer-measure-container svelte-euvo5u" style="pointer-events: none;" aria-hidden="true"><!></div> <div style="
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+        pointer-events: none;
+      " class="svelte-euvo5u"></div></div>`);const M={hash:"svelte-euvo5u",code:`.shimmer-measure-container.svelte-euvo5u * {color:transparent !important;}.shimmer-measure-container.svelte-euvo5u img,
+  .shimmer-measure-container.svelte-euvo5u svg,
+  .shimmer-measure-container.svelte-euvo5u video {opacity:0;}
+  @keyframes svelte-euvo5u-shimmer-animation {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }`};function j(r,t){e.push(t,!0),e.append_styles(r,M);let i=e.prop(t,"loading",3,!0),f=e.prop(t,"shimmerColor",3,void 0),E=e.prop(t,"backgroundColor",3,void 0),I=e.prop(t,"duration",3,void 0),P=e.prop(t,"fallbackBorderRadius",3,void 0);e.prop(t,"templateProps",3,void 0);let s=e.state(void 0),k=e.state(e.proxy([]));const v=b(),q=e.derived(()=>f()??v.shimmerColor),T=e.derived(()=>E()??v.backgroundColor),F=e.derived(()=>I()??v.duration),N=e.derived(()=>P()??v.fallbackBorderRadius);let o;async function h(){if(!i()||!e.get(s))return;o==null||o.disconnect(),await m.tick();const a=e.get(s),u=a.getBoundingClientRect(),d=[];Array.from(a.children).forEach(C=>{d.push(...p.extractElementInfo(C,u))}),e.set(k,d,!0),e.get(s)&&o&&o.observe(e.get(s),{childList:!0,subtree:!0,characterData:!0,attributes:!1})}e.user_effect(()=>{i()&&e.get(s)&&h()}),m.onMount(()=>(h(),e.get(s)&&(o=new MutationObserver(()=>{i()&&h()}),o.observe(e.get(s),{childList:!0,subtree:!0,characterData:!0,attributes:!1})),()=>{o==null||o.disconnect()}));function G(){h()}var H={remeasure:G},S=e.comment(),L=e.first_child(S);{var X=a=>{var u=e.comment(),d=e.first_child(u);e.snippet(d,()=>t.children),e.append(a,u)},z=a=>{var u=D(),d=e.child(u),C=e.child(d);e.snippet(C,()=>t.children),e.reset(d),e.bind_this(d,_=>e.set(s,_),()=>e.get(s));var x=e.sibling(d,2);e.each(x,21,()=>e.get(k),e.index,(_,l)=>{var g=w(),A=e.child(g);e.reset(g),e.template_effect(()=>{e.set_style(g,`
+            position: absolute;
+            left: ${e.get(l).x??""}px;
+            top: ${e.get(l).y??""}px;
+            width: ${e.get(l).width??""}px;
+            height: ${e.get(l).height??""}px;
+            background-color: ${e.get(T)??""};
+            border-radius: ${(e.get(l).borderRadius==="0px"?e.get(N)+"px":e.get(l).borderRadius)??""};
+            overflow: hidden;
+          `),e.set_style(A,`
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              background: linear-gradient(90deg, transparent, ${e.get(q)??""}, transparent);
+              animation: shimmer-animation ${e.get(F)??""}s infinite;
+            `)}),e.append(_,g)}),e.reset(x),e.reset(u),e.append(a,u)};e.if(L,a=>{i()?a(z,!1):a(X)})}return e.append(r,S),e.pop(H)}Object.defineProperty(n,"shimmerDefaults",{enumerable:!0,get:()=>p.shimmerDefaults}),n.Shimmer=j,n.getShimmerConfig=b,n.setShimmerConfig=B,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/dist/src/types.d.ts

@@ -1,3 +1,4 @@
+import { Snippet } from 'svelte';
 export interface ShimmerProps {
     loading?: boolean;
     shimmerColor?: string;
@@ -15,6 +16,10 @@ export interface ShimmerProps {
      * Example: { user: { name: "Lorem" }, settings: { theme: "dark" } }
      */
     templateProps?: Record<string, unknown>;
+    /**
+     * The content to render inside the shimmer component.
+     */
+    children?: Snippet;
 }
 export type { ShimmerConfig, ShimmerContextValue, ElementInfo } from '@shimmer-from-structure/core';
 //# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAGD,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shimmer-from-structure/svelte",
-  "version": "1.1.0",
+  "version": "2.1.1",
   "type": "module",
   "description": "Svelte adapter for shimmer-from-structure",
   "main": "dist/index.js",
@@ -24,19 +24,19 @@
     "prepublishOnly": "cp ../../README.md ."
   },
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0"
+    "svelte": "^5.0.0"
   },
   "dependencies": {
     "@shimmer-from-structure/core": "*"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
     "jsdom": "^27.4.0",
-    "svelte": "^4.0.0",
-    "svelte-check": "^3.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
     "tslib": "^2.0.0",
     "typescript": "^5.0.0"
   },