@uibit/particles 0.1.0 → 0.2.0

package/dist/frameworks/astro/index.d.ts

@@ -1,10 +1,23 @@
 import type { Particles as HTMLElementClass } from '@uibit/particles';
 import '@uibit/particles';
+import type { Particle, ParticleHoverEffect, ParticleMode } from '@uibit/particles';
 
 declare global {
   namespace astroHTML.JSX {
     interface IntrinsicElements {
-      'uibit-particles': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+      'uibit-particles': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes & {
+      count?: number;
+      speed?: number;
+      mode?: ParticleMode;
+      connect?: boolean;
+      connectDistance?: number;
+      hoverEffect?: ParticleHoverEffect;
+      interactiveRadius?: number;
+      _resize?: any;
+      _loop?: any;
+      locale?: string;
+
+      };
     }
   }
 }

package/dist/frameworks/preact/index.d.ts

@@ -16,6 +16,8 @@ declare module 'preact' {
       interactiveRadius?: number;
       _resize?: any;
       _loop?: any;
+      locale?: string;
+
       };
     }
   }

package/dist/frameworks/react/index.ts

@@ -0,0 +1,150 @@
+import React, { useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import type { Particles as HTMLElementClass } from '@uibit/particles';
+import '@uibit/particles';
+import type { Particle, ParticleHoverEffect, ParticleMode } from '@uibit/particles';
+const useTypeOfLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export interface ParticlesProps extends Omit<React.HTMLAttributes<HTMLElementClass>, 'count' | 'speed' | 'mode' | 'connect' | 'connectDistance' | 'hoverEffect' | 'interactiveRadius' | '_resize' | '_loop' | 'locale'> {
+    children?: React.ReactNode;
+    count?: number;
+    speed?: number;
+    mode?: ParticleMode;
+    connect?: boolean;
+    connectDistance?: number;
+    hoverEffect?: ParticleHoverEffect;
+    interactiveRadius?: number;
+    _resize?: any;
+    _loop?: any;
+    locale?: string;
+}
+export const Particles = ({ ref, children, ...props }: ParticlesProps & {
+    ref?: React.Ref<HTMLElementClass>;
+})=>{
+    const innerRef = useRef<HTMLElementClass>(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    useImperativeHandle(ref, ()=>innerRef.current!);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.count !== undefined) {
+            (element as any).count = props.count;
+        }
+    }, [
+        props.count
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.speed !== undefined) {
+            (element as any).speed = props.speed;
+        }
+    }, [
+        props.speed
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.mode !== undefined) {
+            (element as any).mode = props.mode;
+        }
+    }, [
+        props.mode
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.connect !== undefined) {
+            (element as any).connect = props.connect;
+        }
+    }, [
+        props.connect
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.connectDistance !== undefined) {
+            (element as any).connectDistance = props.connectDistance;
+        }
+    }, [
+        props.connectDistance
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.hoverEffect !== undefined) {
+            (element as any).hoverEffect = props.hoverEffect;
+        }
+    }, [
+        props.hoverEffect
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.interactiveRadius !== undefined) {
+            (element as any).interactiveRadius = props.interactiveRadius;
+        }
+    }, [
+        props.interactiveRadius
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props._resize !== undefined) {
+            (element as any)._resize = props._resize;
+        }
+    }, [
+        props._resize
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props._loop !== undefined) {
+            (element as any)._loop = props._loop;
+        }
+    }, [
+        props._loop
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.locale !== undefined) {
+            (element as any).locale = props.locale;
+        }
+    }, [
+        props.locale
+    ]);
+    const domProps = {
+        ...props
+    };
+    const customPropNames = [
+        'count',
+        'speed',
+        'mode',
+        'connect',
+        'connectDistance',
+        'hoverEffect',
+        'interactiveRadius',
+        '_resize',
+        '_loop',
+        'locale'
+    ];
+    for (const key of customPropNames){
+        delete (domProps as any)[key];
+    }
+    return React.createElement('uibit-particles', {
+        ref: innerRef,
+        ...domProps
+    }, children);
+};
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'uibit-particles': React.ClassAttributes<HTMLElementClass> & React.HTMLAttributes<HTMLElementClass> & {
+                    children?: React.ReactNode;
+                    class?: string;
+                    count?: number;
+                    speed?: number;
+                    mode?: ParticleMode;
+                    connect?: boolean;
+                    connectDistance?: number;
+                    hoverEffect?: ParticleHoverEffect;
+                    interactiveRadius?: number;
+                    _resize?: any;
+                    _loop?: any;
+                    locale?: string;
+                };
+            }
+        }
+    }
+}

package/dist/frameworks/solid/index.d.ts

@@ -16,6 +16,7 @@ declare module 'solid-js' {
       interactiveRadius?: number;
       _resize?: any;
       _loop?: any;
+      locale?: string;
 
       };
     }

package/dist/frameworks/stencil/index.d.ts

@@ -15,6 +15,8 @@ declare module '@stencil/core' {
     interactiveRadius?: number;
     _resize?: any;
     _loop?: any;
+    locale?: string;
+
       };
     }
   }

package/dist/frameworks/svelte/index.svelte

@@ -2,20 +2,22 @@
   import '@uibit/particles';
   import type { Particles as HTMLElementClass } from '@uibit/particles';
   import type { Particle, ParticleHoverEffect, ParticleMode } from '@uibit/particles';
-  
-  let {
-    count = undefined,
-      speed = undefined,
-      mode = undefined,
-      connect = undefined,
-      connectDistance = undefined,
-      hoverEffect = undefined,
-      interactiveRadius = undefined,
-      _resize = undefined,
-      _loop = undefined,
-      children
+
+let {
+    count = $bindable(),
+    speed = $bindable(),
+    mode = $bindable(),
+    connect = $bindable(),
+    connectDistance = $bindable(),
+    hoverEffect = $bindable(),
+    interactiveRadius = $bindable(),
+    _resize = $bindable(),
+    _loop = $bindable(),
+    locale = $bindable(),
+    children,
+    ...restProps
   } = $props<{
-    children?: any;
+    children?: import('svelte').Snippet;
     count?: number;
     speed?: number;
     mode?: ParticleMode;
@@ -25,44 +27,97 @@
     interactiveRadius?: number;
     _resize?: any;
     _loop?: any;
-  
+    locale?: string;
+
+    [key: string]: any;
   }>();
-  
-  let elementRef: HTMLElementClass | null = $state(null);
-  
-  $effect(() => {
-    if (elementRef && count !== undefined) {
+
+let elementRef: HTMLElementClass | null = $state(null);
+
+$effect(() => {
+    if (elementRef && count !== undefined && elementRef.count !== count) {
       elementRef.count = count;
     }
-    if (elementRef && speed !== undefined) {
+    if (elementRef && speed !== undefined && elementRef.speed !== speed) {
       elementRef.speed = speed;
     }
-    if (elementRef && mode !== undefined) {
+    if (elementRef && mode !== undefined && elementRef.mode !== mode) {
       elementRef.mode = mode;
     }
-    if (elementRef && connect !== undefined) {
+    if (elementRef && connect !== undefined && elementRef.connect !== connect) {
       elementRef.connect = connect;
     }
-    if (elementRef && connectDistance !== undefined) {
+    if (elementRef && connectDistance !== undefined && elementRef.connectDistance !== connectDistance) {
       elementRef.connectDistance = connectDistance;
     }
-    if (elementRef && hoverEffect !== undefined) {
+    if (elementRef && hoverEffect !== undefined && elementRef.hoverEffect !== hoverEffect) {
       elementRef.hoverEffect = hoverEffect;
     }
-    if (elementRef && interactiveRadius !== undefined) {
+    if (elementRef && interactiveRadius !== undefined && elementRef.interactiveRadius !== interactiveRadius) {
       elementRef.interactiveRadius = interactiveRadius;
     }
-    if (elementRef && _resize !== undefined) {
+    if (elementRef && _resize !== undefined && elementRef._resize !== _resize) {
       elementRef._resize = _resize;
     }
-    if (elementRef && _loop !== undefined) {
+    if (elementRef && _loop !== undefined && elementRef._loop !== _loop) {
       elementRef._loop = _loop;
     }
+    if (elementRef && locale !== undefined && elementRef.locale !== locale) {
+      elementRef.locale = locale;
+    }
   });
-  
+
+$effect(() => {
+    const element = elementRef;
+    if (!element) return;
+
+    const handleEvent = () => {
+      if (count !== element.count) {
+        count = element.count as any;
+      }
+      if (speed !== element.speed) {
+        speed = element.speed as any;
+      }
+      if (mode !== element.mode) {
+        mode = element.mode as any;
+      }
+      if (connect !== element.connect) {
+        connect = element.connect as any;
+      }
+      if (connectDistance !== element.connectDistance) {
+        connectDistance = element.connectDistance as any;
+      }
+      if (hoverEffect !== element.hoverEffect) {
+        hoverEffect = element.hoverEffect as any;
+      }
+      if (interactiveRadius !== element.interactiveRadius) {
+        interactiveRadius = element.interactiveRadius as any;
+      }
+      if (_resize !== element._resize) {
+        _resize = element._resize as any;
+      }
+      if (_loop !== element._loop) {
+        _loop = element._loop as any;
+      }
+      if (locale !== element.locale) {
+        locale = element.locale as any;
+      }
+    };
+
+    const events = ['change', 'input'];
+    for (const event of events) {
+      element.addEventListener(event, handleEvent);
+    }
+    return () => {
+      for (const event of events) {
+        element.removeEventListener(event, handleEvent);
+      }
+    };
+  });
+
 </script>
 
-<uibit-particles bind:this={elementRef} {...$$restProps}>
+<uibit-particles bind:this={elementRef} {...restProps}>
 
   {#if children}
     {@render children()}

package/dist/frameworks/vue/index.ts

@@ -1,31 +1,177 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, ref, watch } from 'vue';
 import type { Particles as HTMLElementClass } from '@uibit/particles';
 import '@uibit/particles';
 import type { Particle, ParticleHoverEffect, ParticleMode } from '@uibit/particles';
-
 export const Particles = defineComponent({
-  name: 'Particles',
-  props: {
-    count: { type: [String, Number, Boolean, Array, Object] as any },
-    speed: { type: [String, Number, Boolean, Array, Object] as any },
-    mode: { type: [String, Number, Boolean, Array, Object] as any },
-    connect: { type: [String, Number, Boolean, Array, Object] as any },
-    connectDistance: { type: [String, Number, Boolean, Array, Object] as any },
-    hoverEffect: { type: [String, Number, Boolean, Array, Object] as any },
-    interactiveRadius: { type: [String, Number, Boolean, Array, Object] as any },
-    _resize: { type: [String, Number, Boolean, Array, Object] as any },
-    _loop: { type: [String, Number, Boolean, Array, Object] as any }
-  },
-  emits: [],
-  setup(props, { slots, emit }) {
-    return () => {
-      const eventListeners: Record<string, any> = {};
-
-
-      return h('uibit-particles', {
-        ...props,
-        ...eventListeners
-      }, slots.default?.());
-    };
-  }
+    name: 'Particles',
+    props: {
+        count: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        speed: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        mode: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        connect: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        connectDistance: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        hoverEffect: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        interactiveRadius: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        _resize: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        _loop: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        locale: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        }
+    },
+    emits: [],
+    setup (props, { slots, emit }) {
+        const elementRef = ref<HTMLElementClass | null>(null);
+        if (false) {
+            watch(()=>props.modelValue, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+            watch(()=>props.value, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+        }
+        watch(()=>props.count, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).count = newVal;
+            }
+        });
+        watch(()=>props.speed, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).speed = newVal;
+            }
+        });
+        watch(()=>props.mode, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).mode = newVal;
+            }
+        });
+        watch(()=>props.connect, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).connect = newVal;
+            }
+        });
+        watch(()=>props.connectDistance, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).connectDistance = newVal;
+            }
+        });
+        watch(()=>props.hoverEffect, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).hoverEffect = newVal;
+            }
+        });
+        watch(()=>props.interactiveRadius, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).interactiveRadius = newVal;
+            }
+        });
+        watch(()=>props._resize, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any)._resize = newVal;
+            }
+        });
+        watch(()=>props._loop, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any)._loop = newVal;
+            }
+        });
+        watch(()=>props.locale, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).locale = newVal;
+            }
+        });
+        return ()=>{
+            const eventListeners: Record<string, any> = {};
+            const mergedProps = {
+                ...props,
+                ...eventListeners,
+                ref: elementRef
+            };
+            if (false && props.modelValue !== undefined) {
+                (mergedProps as any).value = props.modelValue;
+            }
+            return h('uibit-particles', mergedProps, slots.default?.());
+        };
+    }
 });

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { default, Particles } from './particles';
-export type { Particle, ParticleHoverEffect, EffectParticlesConfig } from './types';
+export type { Particle, ParticleHoverEffect, ParticleMode, EffectParticlesConfig } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,QAAQ,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,QAAQ,EAAE,mBAAmB,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}

package/dist/particles.d.ts

@@ -2,6 +2,8 @@ import { UIBitElement, ResizeController, LoopController } from '@uibit/core';
 import type { ParticleHoverEffect, ParticleMode } from './types';
 /**
  * An interactive canvas effect element. Creates dynamic background visuals
+
+ * @summary A lightweight canvas-based interactive particle background effect.
  * across many modes: particles, abstract art, grids, flow fields, and more.
  *
  * @cssprop [--uibit-particles-color=#6b7280] - Space or comma-separated list of colors
@@ -9,7 +11,8 @@ import type { ParticleHoverEffect, ParticleMode } from './types';
  * @cssprop [--uibit-particles-opacity=1] - Opacity of the canvas overlay
  * @cssprop [--uibit-particles-min-size=0.0625rem] - Minimum particle size
  * @cssprop [--uibit-particles-max-size=0.1875rem] - Maximum particle size
- */
+ 
+ * @cssstate paused - Active when particle animations are suspended.*/
 export declare class Particles extends UIBitElement {
     static styles: import("lit").CSSResult;
     /** Number of particles / elements in the field */

package/dist/particles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"particles.d.ts","sourceRoot":"","sources":["../src/particles.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG5F,OAAO,KAAK,EAAY,mBAAmB,EAAE,YAAY,EAAgB,MAAM,SAAS,CAAC;AAEzF;;;;;;;;;GASG;AACH,qBACa,SAAU,SAAQ,YAAY;IACzC,MAAM,CAAC,MAAM,0BAAU;IAEvB,kDAAkD;IACtB,KAAK,SAAM;IAEvC,uBAAuB;IACK,KAAK,SAAK;IAEtC;;;;OAIG;IACyB,IAAI,EAAE,YAAY,CAAW;IAEzD,wDAAwD;IAC3B,OAAO,UAAS;IAE7C,wCAAwC;IACmB,eAAe,SAAO;IAEjF,+DAA+D;IACR,WAAW,EAAE,mBAAmB,CAAW;IAElG,iDAAiD;IACY,iBAAiB,SAAO;IAEpE,OAAO,CAAC,OAAO,CAAqB;IAErD,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,OAAO,CAAsB;IACrC,OAAO,CAAC,MAAM,CAAgE;IAC9E,OAAO,CAAC,IAAI,CAAyC;IACrD,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,eAAe,CAAK;IAC5B,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,KAAK,CAAK;IAElB,SAAS,CAAC,OAAO,mBAKd;IAEH,SAAS,CAAC,KAAK,iBAGZ;IAEH,YAAY,SAOX;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,QAKnD;IAED,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,cAAc;IAkJtB,OAAO,CAAC,cAAc;IA4WtB,MAAM,oCASL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,SAAS,CAAC;KAC9B;CACF;eAEc,SAAS"}
+{"version":3,"file":"particles.d.ts","sourceRoot":"","sources":["../src/particles.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG5F,OAAO,KAAK,EAAY,mBAAmB,EAAE,YAAY,EAAgB,MAAM,SAAS,CAAC;AAEzF;;;;;;;;;;;;sEAYsE;AACtE,qBACa,SAAU,SAAQ,YAAY;IACzC,MAAM,CAAC,MAAM,0BAAU;IAEvB,kDAAkD;IACtB,KAAK,SAAM;IAEvC,uBAAuB;IACK,KAAK,SAAK;IAEtC;;;;OAIG;IACyB,IAAI,EAAE,YAAY,CAAW;IAEzD,wDAAwD;IAC3B,OAAO,UAAS;IAE7C,wCAAwC;IACmB,eAAe,SAAO;IAEjF,+DAA+D;IACR,WAAW,EAAE,mBAAmB,CAAW;IAElG,iDAAiD;IACY,iBAAiB,SAAO;IAEpE,OAAO,CAAC,OAAO,CAAqB;IAErD,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,OAAO,CAAsB;IACrC,OAAO,CAAC,MAAM,CAAgE;IAC9E,OAAO,CAAC,IAAI,CAAyC;IACrD,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,eAAe,CAAK;IAC5B,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,KAAK,CAAK;IAElB,SAAS,CAAC,OAAO,mBAKd;IAEH,SAAS,CAAC,KAAK,iBAGZ;IAEH,YAAY,SAOX;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,QAKnD;IAED,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,cAAc;IAkJtB,OAAO,CAAC,cAAc;IA4WtB,MAAM,oCASL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,SAAS,CAAC;KAC9B;CACF;eAEc,SAAS"}

package/dist/particles.js

@@ -10,6 +10,8 @@ import { property, query } from 'lit/decorators.js';
 import { styles } from './styles';
 /**
  * An interactive canvas effect element. Creates dynamic background visuals
+
+ * @summary A lightweight canvas-based interactive particle background effect.
  * across many modes: particles, abstract art, grids, flow fields, and more.
  *
  * @cssprop [--uibit-particles-color=#6b7280] - Space or comma-separated list of colors
@@ -17,7 +19,8 @@ import { styles } from './styles';
  * @cssprop [--uibit-particles-opacity=1] - Opacity of the canvas overlay
  * @cssprop [--uibit-particles-min-size=0.0625rem] - Minimum particle size
  * @cssprop [--uibit-particles-max-size=0.1875rem] - Maximum particle size
- */
+ 
+ * @cssstate paused - Active when particle animations are suspended.*/
 let Particles = class Particles extends UIBitElement {
     constructor() {
         super(...arguments);