@tsparticles/stencil 4.1.3 → 4.2.1

package/dist/esm/{index-BXzC9NH1.js → index-BH3sNkGS.js}

@@ -7,7 +7,7 @@ const generatedAttribute = "generated", defaultCompositeValue = "source-over", r
     b: 0,
     c: 0,
     d: 1,
-}, randomColorValue = "random", double = 2, doublePI = Math.PI * double, defaultFps = 60, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, spatialHashGridCellSize = 100, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity = 1, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, tryCountIncrement = 1, minZ = 0, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, defaultDensityFactor = 1, deleteCount = 1, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultZoom = 1;
+}, randomColorValue = "random", double = 2, doublePI = Math.PI * double, defaultFps = 60, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, spatialHashGridCellSize = 100, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity = 1, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, tryCountIncrement = 1, minZ = 0, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, defaultDensityFactor = 1, deleteCount = 1, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, maxNits = 400, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultZoom = 1;
 
 var MoveDirection;
 (function (MoveDirection) {
@@ -74,11 +74,6 @@ class Vector3d {
     div(n) {
         return Vector3d.create(this.x / n, this.y / n, this.z / n);
     }
-    divTo(n) {
-        this.x /= n;
-        this.y /= n;
-        this.z /= n;
-    }
     getLengthSq() {
         return this.x ** squareExp + this.y ** squareExp;
     }
@@ -260,27 +255,6 @@ function calcExactPositionOrRandomFromSize(data) {
     };
 }
 
-var AnimationMode;
-(function (AnimationMode) {
-    AnimationMode["auto"] = "auto";
-    AnimationMode["increase"] = "increase";
-    AnimationMode["decrease"] = "decrease";
-    AnimationMode["random"] = "random";
-})(AnimationMode || (AnimationMode = {}));
-
-var AnimationStatus;
-(function (AnimationStatus) {
-    AnimationStatus["increasing"] = "increasing";
-    AnimationStatus["decreasing"] = "decreasing";
-})(AnimationStatus || (AnimationStatus = {}));
-
-var DestroyType;
-(function (DestroyType) {
-    DestroyType["none"] = "none";
-    DestroyType["max"] = "max";
-    DestroyType["min"] = "min";
-})(DestroyType || (DestroyType = {}));
-
 var OutModeDirection;
 (function (OutModeDirection) {
     OutModeDirection["bottom"] = "bottom";
@@ -295,66 +269,6 @@ var PixelMode;
     PixelMode["percent"] = "percent";
 })(PixelMode || (PixelMode = {}));
 
-var StartValueType;
-(function (StartValueType) {
-    StartValueType["max"] = "max";
-    StartValueType["min"] = "min";
-    StartValueType["random"] = "random";
-})(StartValueType || (StartValueType = {}));
-
-function memoize(fn, options) {
-    const cache = new Map(), keyFn = options?.keyFn, stableStringify = (obj, seen = new WeakSet()) => {
-        if (obj === null) {
-            return "null";
-        }
-        const t = typeof obj;
-        if (t === "undefined") {
-            return "undefined";
-        }
-        if (t === "number" || t === "boolean" || t === "string") {
-            return JSON.stringify(obj);
-        }
-        if (t === "function") {
-            try {
-                const fn = obj;
-                return fn.toString();
-            }
-            catch {
-                return '"[Function]"';
-            }
-        }
-        if (t === "symbol") {
-            try {
-                return obj.toString();
-            }
-            catch {
-                return '"[Symbol]"';
-            }
-        }
-        if (Array.isArray(obj)) {
-            return `[${obj.map(i => stableStringify(i, seen)).join(",")}]`;
-        }
-        if (seen.has(obj)) {
-            return '"[Circular]"';
-        }
-        seen.add(obj);
-        const keys = Object.keys(obj).sort();
-        return `{${keys.map(k => `${JSON.stringify(k)}:${stableStringify(obj[k], seen)}`).join(",")}}`;
-    }, defaultKeyer = (args) => stableStringify(args), makeKey = (args) => (keyFn ? keyFn(args) : defaultKeyer(args));
-    return (...args) => {
-        const key = makeKey(args), now = Date.now(), entry = cache.get(key);
-        if (entry !== undefined) {
-            {
-                cache.delete(key);
-                cache.set(key, { value: entry.value, ts: entry.ts });
-                return entry.value;
-            }
-        }
-        const result = fn(...args);
-        cache.set(key, { value: result, ts: now });
-        return result;
-    };
-}
 function hasMatchMedia() {
     return typeof matchMedia !== "undefined";
 }
@@ -376,11 +290,8 @@ function safeMutationObserver(callback) {
 function isInArray(value, array) {
     return value === array || (isArray(array) && array.includes(value));
 }
-function arrayRandomIndex(array) {
-    return Math.floor(getRandom() * array.length);
-}
 function itemFromArray(array, index, useIndex = true) {
-    return array[index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array)];
+    return array[index !== undefined && useIndex ? index % array.length : Math.floor(getRandom() * array.length)];
 }
 function deepExtend(destination, ...sources) {
     for (const source of sources) {
@@ -481,30 +392,34 @@ function cloneStyle(style) {
     }
     return clonedStyle;
 }
-function computeFullScreenStyle(zIndex) {
-    const fullScreenStyle = safeDocument().createElement("div").style, radix = 10, style = {
-        width: "100%",
-        height: "100%",
-        margin: "0",
-        padding: "0",
-        borderWidth: "0",
-        position: "fixed",
-        zIndex: zIndex.toString(radix),
-        "z-index": zIndex.toString(radix),
-        top: "0",
-        left: "0",
-        "pointer-events": "none",
-    };
-    for (const key in style) {
-        const value = style[key];
-        if (value === undefined) {
-            continue;
+let _cachedZIndex, _cachedStyle;
+function getFullScreenStyle(zIndex) {
+    if (_cachedZIndex !== zIndex || !_cachedStyle) {
+        _cachedZIndex = zIndex;
+        const fullScreenStyle = safeDocument().createElement("div").style, radix = 10, style = {
+            width: "100%",
+            height: "100%",
+            margin: "0",
+            padding: "0",
+            borderWidth: "0",
+            position: "fixed",
+            zIndex: zIndex.toString(radix),
+            "z-index": zIndex.toString(radix),
+            top: "0",
+            left: "0",
+            "pointer-events": "none",
+        };
+        for (const key in style) {
+            const value = style[key];
+            if (value === undefined) {
+                continue;
+            }
+            fullScreenStyle.setProperty(key, value);
         }
-        fullScreenStyle.setProperty(key, value);
+        _cachedStyle = fullScreenStyle;
     }
-    return fullScreenStyle;
+    return _cachedStyle;
 }
-const getFullScreenStyle = memoize(computeFullScreenStyle);
 function manageListener(element, event, handler, add, options) {
     if (add) {
         let addOptions = { passive: true };
@@ -831,7 +746,7 @@ class Engine {
         return this.#domArray;
     }
     get version() {
-        return "4.1.3";
+        return "4.2.1";
     }
     addEventListener(type, listener) {
         this.#eventDispatcher.addEventListener(type, listener);
@@ -866,7 +781,7 @@ class Engine {
         if (typeof HTMLElement !== "undefined" && params.element instanceof HTMLElement) {
             domSourceElement = params.element;
         }
-        const { Container } = await import('./Container-BxLt611H.js'), id = params.id ?? domSourceElement?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
+        const { Container } = await import('./Container-DZZsfp6i.js'), id = params.id ?? domSourceElement?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
             dispatchCallback: (eventType, args) => {
                 this.dispatchEvent(eventType, args);
             },
@@ -928,6 +843,14 @@ var RotateDirection;
     RotateDirection["random"] = "random";
 })(RotateDirection || (RotateDirection = {}));
 
+var AnimationMode;
+(function (AnimationMode) {
+    AnimationMode["auto"] = "auto";
+    AnimationMode["increase"] = "increase";
+    AnimationMode["decrease"] = "decrease";
+    AnimationMode["random"] = "random";
+})(AnimationMode || (AnimationMode = {}));
+
 var LimitMode;
 (function (LimitMode) {
     LimitMode["delete"] = "delete";
@@ -949,6 +872,13 @@ var AlterType;
     AlterType["enlighten"] = "enlighten";
 })(AlterType || (AlterType = {}));
 
+var DestroyType;
+(function (DestroyType) {
+    DestroyType["none"] = "none";
+    DestroyType["max"] = "max";
+    DestroyType["min"] = "min";
+})(DestroyType || (DestroyType = {}));
+
 var GradientType;
 (function (GradientType) {
     GradientType["linear"] = "linear";
@@ -963,51 +893,18 @@ var ParticleOutType;
     ParticleOutType["outside"] = "outside";
 })(ParticleOutType || (ParticleOutType = {}));
 
-var EasingType;
-(function (EasingType) {
-    EasingType["easeInBack"] = "ease-in-back";
-    EasingType["easeInBounce"] = "ease-in-bounce";
-    EasingType["easeInCirc"] = "ease-in-circ";
-    EasingType["easeInCubic"] = "ease-in-cubic";
-    EasingType["easeInElastic"] = "ease-in-elastic";
-    EasingType["easeInExpo"] = "ease-in-expo";
-    EasingType["easeInGaussian"] = "ease-in-gaussian";
-    EasingType["easeInLinear"] = "ease-in-linear";
-    EasingType["easeInQuad"] = "ease-in-quad";
-    EasingType["easeInQuart"] = "ease-in-quart";
-    EasingType["easeInQuint"] = "ease-in-quint";
-    EasingType["easeInSigmoid"] = "ease-in-sigmoid";
-    EasingType["easeInSine"] = "ease-in-sine";
-    EasingType["easeInSmoothstep"] = "ease-in-smoothstep";
-    EasingType["easeOutBack"] = "ease-out-back";
-    EasingType["easeOutBounce"] = "ease-out-bounce";
-    EasingType["easeOutCirc"] = "ease-out-circ";
-    EasingType["easeOutCubic"] = "ease-out-cubic";
-    EasingType["easeOutElastic"] = "ease-out-elastic";
-    EasingType["easeOutExpo"] = "ease-out-expo";
-    EasingType["easeOutGaussian"] = "ease-out-gaussian";
-    EasingType["easeOutLinear"] = "ease-out-linear";
-    EasingType["easeOutQuad"] = "ease-out-quad";
-    EasingType["easeOutQuart"] = "ease-out-quart";
-    EasingType["easeOutQuint"] = "ease-out-quint";
-    EasingType["easeOutSigmoid"] = "ease-out-sigmoid";
-    EasingType["easeOutSine"] = "ease-out-sine";
-    EasingType["easeOutSmoothstep"] = "ease-out-smoothstep";
-    EasingType["easeInOutBack"] = "ease-in-out-back";
-    EasingType["easeInOutBounce"] = "ease-in-out-bounce";
-    EasingType["easeInOutCirc"] = "ease-in-out-circ";
-    EasingType["easeInOutCubic"] = "ease-in-out-cubic";
-    EasingType["easeInOutElastic"] = "ease-in-out-elastic";
-    EasingType["easeInOutExpo"] = "ease-in-out-expo";
-    EasingType["easeInOutGaussian"] = "ease-in-out-gaussian";
-    EasingType["easeInOutLinear"] = "ease-in-out-linear";
-    EasingType["easeInOutQuad"] = "ease-in-out-quad";
-    EasingType["easeInOutQuart"] = "ease-in-out-quart";
-    EasingType["easeInOutQuint"] = "ease-in-out-quint";
-    EasingType["easeInOutSigmoid"] = "ease-in-out-sigmoid";
-    EasingType["easeInOutSine"] = "ease-in-out-sine";
-    EasingType["easeInOutSmoothstep"] = "ease-in-out-smoothstep";
-})(EasingType || (EasingType = {}));
+var StartValueType;
+(function (StartValueType) {
+    StartValueType["max"] = "max";
+    StartValueType["min"] = "min";
+    StartValueType["random"] = "random";
+})(StartValueType || (StartValueType = {}));
+
+var AnimationStatus;
+(function (AnimationStatus) {
+    AnimationStatus["increasing"] = "increasing";
+    AnimationStatus["decreasing"] = "decreasing";
+})(AnimationStatus || (AnimationStatus = {}));
 
 const tsParticles = initEngine();
 
@@ -1049,4 +946,4 @@ async function waitForParticlesEngineInitialization() {
     await (initPromise !== null && initPromise !== void 0 ? initPromise : Promise.resolve());
 }
 
-export { millisecondsToSeconds as $, AlterType as A, lFactor as B, double as C, hPhase as D, rgbMax as E, getRandomInRange as F, identity as G, defaultRgbMin as H, sextuple as I, triple as J, phaseNumerator as K, LimitMode as L, MoveDirection as M, sNormalizedOffset as N, OutMode as O, PixelMode as P, minimumSize as Q, RangeType as R, defaultCompositeValue as S, defaultTransformValue as T, zIndexFactorOffset as U, safeMutationObserver as V, generatedAttribute as W, cloneStyle as X, safeMatchMedia as Y, getFullScreenStyle as Z, safeDocument as _, isNull as a, manageListener as a0, visibilityChangeEvent as a1, resizeEvent as a2, Vector3d as a3, EventType as a4, defaultAngle as a5, defaultTransform as a6, ParticleOutType as a7, itemFromSingleOrMultiple as a8, getRandom as a9, defaultRatio as aA, defaultReduceFactor as aB, animate as aC, defaultFpsLimit as aD, minFpsLimit as aE, cancelAnimation as aF, defaultFps as aG, isParticlesEngineInitialized as aH, waitForParticlesEngineInitialization as aI, defaultRetryCount as aa, tryCountIncrement as ab, getParticleBaseVelocity as ac, randomInRangeValue as ad, OutModeDirection as ae, clamp as af, minZ as ag, getPosition as ah, getParticleDirectionAngle as ai, Vector as aj, getRangeValue as ak, doublePI as al, calcExactPositionOrRandomFromSize as am, isInArray as an, degToRad as ao, spatialHashGridCellSize as ap, minLimit as aq, minCount as ar, getLogger as as, minIndex as at, defaultRemoveQuantity as au, defaultDensityFactor as av, empty as aw, deleteCount as ax, countOffset as ay, one as az, setRangeValue as b, checkDistance as c, hMax as d, lMax as e, sMin as f, sMax as g, hMin as h, initParticlesEngine as i, isString as j, isArray as k, lMin as l, deepExtend as m, isNumber as n, isObject as o, executeOnSingleOrMultiple as p, isBoolean as q, originPoint as r, squareExp as s, tsParticles as t, minStrokeWidth as u, defaultZoom as v, itemFromArray as w, defaultOpacity as x, randomColorValue as y, half as z };
+export { safeDocument as $, AlterType as A, rgbMax as B, getRandomInRange as C, identity as D, defaultRgbMin as E, maxNits as F, sextuple as G, triple as H, phaseNumerator as I, sNormalizedOffset as J, originPoint as K, LimitMode as L, MoveDirection as M, minimumSize as N, OutMode as O, PixelMode as P, defaultCompositeValue as Q, RangeType as R, minStrokeWidth as S, defaultZoom as T, zIndexFactorOffset as U, defaultTransformValue as V, safeMutationObserver as W, generatedAttribute as X, cloneStyle as Y, safeMatchMedia as Z, getFullScreenStyle as _, isNull as a, millisecondsToSeconds as a0, manageListener as a1, visibilityChangeEvent as a2, resizeEvent as a3, Vector3d as a4, EventType as a5, defaultAngle as a6, defaultTransform as a7, defaultRetryCount as a8, tryCountIncrement as a9, defaultRatio as aA, defaultReduceFactor as aB, animate as aC, defaultFpsLimit as aD, minFpsLimit as aE, cancelAnimation as aF, defaultFps as aG, isParticlesEngineInitialized as aH, waitForParticlesEngineInitialization as aI, getParticleBaseVelocity as aa, randomInRangeValue as ab, getRandom as ac, OutModeDirection as ad, clamp as ae, minZ as af, getPosition as ag, getParticleDirectionAngle as ah, ParticleOutType as ai, Vector as aj, getRangeValue as ak, calcExactPositionOrRandomFromSize as al, itemFromSingleOrMultiple as am, isInArray as an, doublePI as ao, degToRad as ap, spatialHashGridCellSize as aq, minLimit as ar, minCount as as, getLogger as at, minIndex as au, defaultRemoveQuantity as av, defaultDensityFactor as aw, deleteCount as ax, countOffset as ay, one as az, setRangeValue as b, checkDistance as c, hMax as d, lMax as e, sMin as f, sMax as g, hMin as h, initParticlesEngine as i, isString as j, isArray as k, lMin as l, deepExtend as m, isNumber as n, isObject as o, executeOnSingleOrMultiple as p, isBoolean as q, itemFromArray as r, squareExp as s, tsParticles as t, defaultOpacity as u, randomColorValue as v, lFactor as w, half as x, double as y, hPhase as z };

package/dist/esm/{index-DKFk70aj.js → index-PhwiK2_P.js}

@@ -82,6 +82,7 @@ var registerHost = (hostElement, cmpMeta) => {
   hostElement.__stencil__getHostRef = () => ref;
   return ref;
 };
+var isMemberInElement = (elm, memberName) => memberName in elm;
 var consoleError = (e, el) => (0, console.error)(e, el);
 
 // src/client/client-load-module.ts
@@ -289,6 +290,25 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   }
   return propValue;
 };
+var getElement = (ref) => {
+  var _a;
+  return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
+};
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail
+      });
+    }
+  };
+};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -298,6 +318,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
   if (oldValue === newValue) {
     return;
   }
+  let isProp = isMemberInElement(elm, memberName);
   memberName.toLowerCase();
   if (memberName === "style") {
     {
@@ -324,7 +345,70 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     if (newValue) {
       queueRefAttachment(newValue, elm);
     }
-  } else ;
+  } else if (memberName[0] === "a" && memberName.startsWith("attr:")) {
+    const propName = memberName.slice(5);
+    let attrName;
+    {
+      const hostRef = getHostRef(elm);
+      if (hostRef && hostRef.$cmpMeta$ && hostRef.$cmpMeta$.$members$) {
+        const memberMeta = hostRef.$cmpMeta$.$members$[propName];
+        if (memberMeta && memberMeta[1]) {
+          attrName = memberMeta[1];
+        }
+      }
+    }
+    if (!attrName) {
+      attrName = propName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(attrName) === "") {
+        elm.removeAttribute(attrName);
+      }
+    } else {
+      elm.setAttribute(attrName, newValue === true ? "" : newValue);
+    }
+    return;
+  } else if (memberName[0] === "p" && memberName.startsWith("prop:")) {
+    const propName = memberName.slice(5);
+    try {
+      elm[propName] = newValue;
+    } catch (e) {
+    }
+    return;
+  } else {
+    const isComplex = isComplexType(newValue);
+    if ((isProp || isComplex && newValue !== null) && !isSvg) {
+      try {
+        if (!elm.tagName.includes("-")) {
+          const n = newValue == null ? "" : newValue;
+          if (memberName === "list") {
+            isProp = false;
+          } else if (oldValue == null || elm[memberName] !== n) {
+            if (typeof elm.__lookupSetter__(memberName) === "function") {
+              elm[memberName] = n;
+            } else {
+              elm.setAttribute(memberName, n);
+            }
+          }
+        } else if (elm[memberName] !== newValue) {
+          elm[memberName] = newValue;
+        }
+      } catch (e) {
+      }
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(memberName) === "") {
+        {
+          elm.removeAttribute(memberName);
+        }
+      }
+    } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
+      newValue = newValue === true ? "" : newValue;
+      {
+        elm.setAttribute(memberName, newValue);
+      }
+    }
+  }
 };
 
 // src/runtime/vdom/update-element.ts
@@ -339,7 +423,9 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
           elm,
           memberName,
           oldVnodeAttrs[memberName],
-          void 0);
+          void 0,
+          isSvgMode2,
+          newVnode.$flags$);
       }
     }
   }
@@ -348,7 +434,9 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
       elm,
       memberName,
       oldVnodeAttrs[memberName],
-      newVnodeAttrs[memberName]);
+      newVnodeAttrs[memberName],
+      isSvgMode2,
+      newVnode.$flags$);
   }
 };
 function sortedAttrNames(attrNames) {
@@ -361,6 +449,7 @@ function sortedAttrNames(attrNames) {
   );
 }
 var hostTagName;
+var isSvgMode = false;
 var refCallbacksToRemove = [];
 var refCallbacksToAttach = [];
 var createElm = (oldParentVNode, newParentVNode, childIndex) => {
@@ -376,7 +465,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       newVNode2.$tag$
     );
     {
-      updateElement(null, newVNode2);
+      updateElement(null, newVNode2, isSvgMode);
     }
     if (newVNode2.$children$) {
       const appendTarget = newVNode2.$tag$ === "template" ? elm.content : elm;
@@ -522,7 +611,7 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const newChildren = newVNode2.$children$;
   {
     {
-      updateElement(oldVNode, newVNode2);
+      updateElement(oldVNode, newVNode2, isSvgMode);
     }
     if (oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
@@ -1220,4 +1309,4 @@ function transformTag(tag) {
   return tag;
 }
 
-export { bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { bootstrapLazy as b, createEvent as c, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/index.js

@@ -1 +1 @@
-export { i as initParticlesEngine, aH as isParticlesEngineInitialized, aI as waitForParticlesEngineInitialization } from './index-BXzC9NH1.js';
+export { i as initParticlesEngine, aH as isParticlesEngineInitialized, aI as waitForParticlesEngineInitialization } from './index-BH3sNkGS.js';

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-DKFk70aj.js';
-export { s as setNonce } from './index-DKFk70aj.js';
+import { b as bootstrapLazy } from './index-PhwiK2_P.js';
+export { s as setNonce } from './index-PhwiK2_P.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["stencil-particles",[[0,"stencil-particles",{"options":[16],"url":[1],"init":[16]},null,{"options":[{"onPropsChange":0}],"url":[{"onPropsChange":0}],"init":[{"onPropsChange":0}]}]]]], options);
+  return bootstrapLazy([["stencil-particles",[[0,"stencil-particles",{"options":[16],"url":[1],"init":[16],"containerId":[1,"container-id"],"theme":[1]},null,{"options":[{"onPropsChange":0}],"url":[{"onPropsChange":0}],"init":[{"onPropsChange":0}],"containerId":[{"onPropsChange":0}],"theme":[{"onThemeChange":0}]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/stencil-particles.entry.js

@@ -1,9 +1,10 @@
-import { r as registerInstance, h } from './index-DKFk70aj.js';
-import { i as initParticlesEngine, t as tsParticles } from './index-BXzC9NH1.js';
+import { r as registerInstance, c as createEvent, h } from './index-PhwiK2_P.js';
+import { i as initParticlesEngine, t as tsParticles } from './index-BH3sNkGS.js';
 
 const StencilParticles = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.particlesLoaded = createEvent(this, "particlesLoaded");
         this.renderId = 0;
     }
     async componentDidLoad() {
@@ -18,8 +19,14 @@ const StencilParticles = class {
     async onPropsChange() {
         await this.loadParticles(++this.renderId);
     }
+    async onThemeChange() {
+        var _a, _b;
+        if (!this.container)
+            return;
+        (_b = (_a = this.container).loadTheme) === null || _b === void 0 ? void 0 : _b.call(_a, this.theme);
+    }
     async loadParticles(currentRenderId) {
-        var _a;
+        var _a, _b, _c;
         (_a = this.container) === null || _a === void 0 ? void 0 : _a.destroy();
         if (!this.containerElement) {
             console.warn("[stencil-particles] container element not available yet");
@@ -38,8 +45,8 @@ const StencilParticles = class {
                 return;
             }
             // Load particles directly onto the DOM element.
-            // tsParticles will auto-generate a unique internal ID, preventing collisions.
-            const loadParams = Object.assign({ element: this.containerElement }, (this.options ? { options: this.options } : { url: this.url }));
+            // If a container-id is provided, use it so consumers can retrieve the container later.
+            const loadParams = Object.assign(Object.assign({ element: this.containerElement }, (this.containerId ? { id: this.containerId } : {})), (this.options ? { options: this.options } : { url: this.url }));
             container = await tsParticles.load(loadParams);
         }
         catch (error) {
@@ -52,9 +59,13 @@ const StencilParticles = class {
             return;
         }
         this.container = container;
+        this.particlesLoaded.emit(container);
+        if (container && this.theme) {
+            (_c = (_b = container).loadTheme) === null || _c === void 0 ? void 0 : _c.call(_b, this.theme);
+        }
     }
     render() {
-        return (h("div", { key: '870e2cc222aed94f8bbfa274dc3c047392ed8b1a', ref: el => {
+        return (h("div", { key: 'f5fe33d147a1a606a75fe0d1ee385bacaf0e0b7d', id: this.containerId, ref: el => {
                 this.containerElement = el;
             }, style: { width: "100%", height: "100%" } }));
     }
@@ -67,6 +78,12 @@ const StencilParticles = class {
             }],
         "init": [{
                 "onPropsChange": 0
+            }],
+        "containerId": [{
+                "onPropsChange": 0
+            }],
+        "theme": [{
+                "onThemeChange": 0
             }]
     }; }
 };

package/dist/esm/tsparticlesstencil.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-DKFk70aj.js';
-export { s as setNonce } from './index-DKFk70aj.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-PhwiK2_P.js';
+export { s as setNonce } from './index-PhwiK2_P.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*
@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["stencil-particles",[[0,"stencil-particles",{"options":[16],"url":[1],"init":[16]},null,{"options":[{"onPropsChange":0}],"url":[{"onPropsChange":0}],"init":[{"onPropsChange":0}]}]]]], options);
+  return bootstrapLazy([["stencil-particles",[[0,"stencil-particles",{"options":[16],"url":[1],"init":[16],"containerId":[1,"container-id"],"theme":[1]},null,{"options":[{"onPropsChange":0}],"url":[{"onPropsChange":0}],"init":[{"onPropsChange":0}],"containerId":[{"onPropsChange":0}],"theme":[{"onThemeChange":0}]}]]]], options);
 });

package/dist/tsparticlesstencil/index.esm.js

@@ -1 +1 @@
-export{i as initParticlesEngine,aH as isParticlesEngineInitialized,aI as waitForParticlesEngineInitialization}from"./p-BhGs05ap.js";
+export{i as initParticlesEngine,aH as isParticlesEngineInitialized,aI as waitForParticlesEngineInitialization}from"./p-QSzGOBhI.js";