@genarou/blazir-icons 1.0.18 → 1.1.1

package/dist/DynamicIcon.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { iconRegistry } from "./icons/registry.js";
+  import type { IconName, IconProps } from "./types.js";
+
+  // Props específicas del componente dinámico
+  interface DynamicIconProps extends Omit<IconProps, "children"> {
+    name: IconName;
+  }
+
+  const props: DynamicIconProps = $props();
+
+  // Obtener el componente del registry
+  const IconComponent = $derived(iconRegistry[props.name]);
+
+  // Extraer solo las props que necesita el icono (sin 'name')
+  const iconProps = $derived(() => {
+    const { name, ...rest } = props;
+    return rest;
+  });
+</script>
+
+// 📁 src/lib/DynamicIcon.svelte - Componente que usa el registry
+{#if IconComponent}
+  <IconComponent {...iconProps} />
+{:else}
+  <!-- Fallback si el icono no existe -->
+  <span class="missing-icon" data-icon={props.name}> ? </span>
+{/if}
+
+<style>
+  .missing-icon {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background: #ff0000;
+    color: white;
+    text-align: center;
+    line-height: 1;
+    font-size: 0.75em;
+    border-radius: 2px;
+  }
+</style>

package/dist/DynamicIcon.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { IconName, IconProps } from "./types.js";
+interface DynamicIconProps extends Omit<IconProps, "children"> {
+    name: IconName;
+}
+declare const DynamicIcon: import("svelte").Component<DynamicIconProps, {}, "">;
+type DynamicIcon = ReturnType<typeof DynamicIcon>;
+export default DynamicIcon;

package/dist/IconBase.svelte

@@ -1,99 +1,85 @@
 <script lang="ts">
-  import type { IconProps } from "./types";
+  import type { IconMode, IconProps } from "./types.js";
+  import {
+    combineTransforms,
+    getAnimationClasses,
+    getAnimationStyle,
+  } from "./utils/animations.js";
+  import {
+    commonDefaults,
+    modeDefaults,
+    normalizeClass,
+  } from "./utils/defaults.js";
 
-  let {
-    children,
-    size = $bindable(24),
-    stroke = $bindable("currentColor"),
-    strokeWidth = $bindable(2),
-    fill = $bindable("none"),
-    className = $bindable(""),
-    ariaLabel = $bindable("icon"),
-    title = $bindable(""),
-    viewBox = $bindable("0 0 24 24"),
-    strokeLinecap = $bindable("round"),
-    strokeLinejoin = $bindable("round"),
-    style = $bindable(""),
-    rotate = $bindable(0),
-    flipH = $bindable(false),
-    flipV = $bindable(false),
-    spin = $bindable(false),
-    color = $bindable(undefined),
-    nonScalingStroke = $bindable(false),
-    preserveAspectRatio = $bindable("xMidYMid meet"),
-    decorative = $bindable(false),
-    titleId = $bindable(""),
-    testId = $bindable(undefined),
-    attrs = $bindable({}),
-  }: IconProps = $props();
+  const props: IconProps & { mode?: IconMode } = $props();
+  const mode = $derived(props.mode ?? "solid");
 
-  // ===== Derivados =====
-  const _size = $derived(typeof size === "number" ? `${size}px` : size);
-  const _strokeWidth = $derived(
-    typeof strokeWidth === "string" ? parseFloat(strokeWidth) : strokeWidth
-  );
-  const _rotate = $derived(
-    typeof rotate === "number" ? `${rotate}deg` : rotate
-  );
-  const _flip = $derived(
-    `${flipH ? "scaleX(-1)" : ""} ${flipV ? "scaleY(-1)" : ""}`.trim()
-  );
-  const defaultGray = "#6b7280";
+  const klass = $derived(normalizeClass(props));
+  const common = $derived(commonDefaults(props));
+  const visual = $derived(modeDefaults(mode, props));
 
-  const _stroke = $derived(stroke ?? color ?? defaultGray);
-  const _fill = $derived(fill ?? (stroke ? "none" : (color ?? "none")));
+  const animationClasses = $derived(getAnimationClasses(props).join(" "));
+  const baseTransform = $derived(combineTransforms(props));
+  const animationStyle = $derived(getAnimationStyle(props));
 
-  const _transform = $derived(
-    `${rotate ? `rotate(${_rotate})` : ""} ${_flip}`.trim()
+  const ariaLabel = $derived(props.ariaLabel);
+  const title = $derived(props.title);
+  const titleId = $derived(props.titleId);
+  const _ariaHidden = $derived(props.decorative ? "true" : undefined);
+  const _ariaLabel = $derived(
+    props.decorative ? undefined : ariaLabel || undefined
   );
-  const _spinDur = $derived(
-    spin === true ? "1s" : typeof spin === "number" ? `${spin}ms` : spin || ""
-  );
-  const _style = $derived(
-    `${style ? style + ";" : ""}` +
-      `${_transform ? `transform: ${_transform}; transform-origin: center;` : ""}` +
-      `${_spinDur ? `animation: __icon_spin ${_spinDur} linear infinite;` : ""}`
+  const _ariaLabelledby = $derived(
+    !props.decorative && title ? titleId : undefined
   );
 
-  let _titleId = $state(titleId);
-  $effect(() => {
-    if (!_titleId && title) {
-      _titleId = `icon-title-${Math.random().toString(36).slice(2, 9)}`;
-    }
+  const transformStr = $derived(() => {
+    return baseTransform
+      ? `transform: ${baseTransform}; transform-origin: center;`
+      : "";
   });
 
-  const _ariaHidden = $derived(decorative ? "true" : undefined);
-  const _ariaLabel = $derived(decorative ? undefined : ariaLabel || undefined);
-  const _ariaLabelledby = $derived(!decorative && title ? _titleId : undefined);
-  const _vectorEffect = $derived(
-    nonScalingStroke ? "non-scaling-stroke" : undefined
+  const spinStr = $derived(() => {
+    const s = props.spin;
+    if (!s) return "";
+    const dur = s === true ? "1s" : typeof s === "number" ? `${s}ms` : s;
+    return `animation: __icon_spin ${dur} linear infinite;`;
+  });
+
+  const style = $derived(
+    `${props.style || ""}${props.style && !props.style.endsWith(";") ? ";" : ""}${transformStr}${spinStr}${animationStyle}`.trim()
+  );
+
+  const finalClass = $derived(
+    `${klass} ${animationClasses} ${props.chevronState ? "bz-icon-chevron" : ""}`.trim()
   );
 </script>
 
+// 📁 src/lib/Icon.svelte
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={_size}
-  height={_size}
-  fill={_fill}
-  stroke={_stroke}
-  stroke-width={_strokeWidth}
-  stroke-linecap={strokeLinecap}
-  stroke-linejoin={strokeLinejoin}
-  {viewBox}
-  {preserveAspectRatio}
-  class={className}
+  width={typeof common.size === "number" ? `${common.size}px` : common.size}
+  height={typeof common.size === "number" ? `${common.size}px` : common.size}
+  viewBox={common.viewBox}
+  preserveAspectRatio={common.preserveAspectRatio}
+  class={finalClass}
   role="img"
   aria-hidden={_ariaHidden}
   aria-label={_ariaLabel}
   aria-labelledby={_ariaLabelledby}
   focusable="false"
-  style={_style}
-  data-testid={testId}
-  vector-effect={_vectorEffect}
-  {...attrs}
+  {style}
+  fill={visual.fill}
+  stroke={visual.stroke}
+  stroke-width={visual.strokeWidth}
+  stroke-linecap={props.strokeLinecap}
+  stroke-linejoin={props.strokeLinejoin}
+  vector-effect={props.nonScalingStroke ? "non-scaling-stroke" : undefined}
+  data-testid={props.testId}
+  {...props.attrs ?? {}}
 >
-  {#if title}<title id={_titleId}>{title}</title>{/if}
-  {@render children?.()}
+  {#if title}<title id={titleId}>{title}</title>{/if}
+  {@render props.children()}
 </svg>
 
 <style>

package/dist/IconBase.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "./types";
-declare const IconBase: import("svelte").Component<IconProps, {}, "size" | "stroke" | "strokeWidth" | "fill" | "className" | "ariaLabel" | "title" | "viewBox" | "strokeLinecap" | "strokeLinejoin" | "style" | "rotate" | "flipH" | "flipV" | "spin" | "color" | "nonScalingStroke" | "preserveAspectRatio" | "decorative" | "titleId" | "testId" | "attrs">;
+import type { IconMode, IconProps } from "./types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const IconBase: import("svelte").Component<$$ComponentProps, {}, "">;
 type IconBase = ReturnType<typeof IconBase>;
 export default IconBase;

package/dist/actions.d.ts

@@ -0,0 +1,21 @@
+export type IconEffectOptions = {
+    hoverColor?: string;
+    activeColor?: string;
+    hoverScale?: number;
+    pressScale?: number;
+    rotateOnHover?: number;
+    spinOnHover?: boolean;
+    bounceOnHover?: boolean;
+    pulse?: boolean;
+    opacityHover?: number;
+    transitionMs?: number;
+    easing?: string;
+    cursor?: string;
+    tooltip?: string;
+    focusRing?: boolean;
+    kbFocusAttr?: string;
+};
+export declare function iconEffects(node: HTMLElement, opts?: IconEffectOptions): {
+    update(next?: IconEffectOptions): void;
+    destroy(): void;
+};

package/dist/actions.js

@@ -0,0 +1,150 @@
+// Cache global para media query
+let _prefersReducedMotion = null;
+function getPrefersReducedMotion() {
+    if (_prefersReducedMotion === null && typeof window !== "undefined") {
+        _prefersReducedMotion =
+            window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    }
+    return _prefersReducedMotion ?? false;
+}
+// Pool de transiciones comunes
+const EASING_PRESETS = {
+    "cubic-bezier(.2,.8,.2,1)": "cubic-bezier(.2,.8,.2,1)",
+    ease: "ease",
+    "ease-in-out": "ease-in-out",
+};
+export function iconEffects(node, opts = {}) {
+    // Setup inicial con defaults optimizados
+    const o = {
+        hoverColor: opts.hoverColor ?? "",
+        activeColor: opts.activeColor ?? "",
+        hoverScale: opts.hoverScale ?? 1,
+        pressScale: opts.pressScale ?? 1,
+        rotateOnHover: opts.rotateOnHover ?? 0,
+        spinOnHover: opts.spinOnHover ?? false,
+        bounceOnHover: opts.bounceOnHover ?? false,
+        pulse: opts.pulse ?? false,
+        opacityHover: opts.opacityHover ?? 1,
+        transitionMs: opts.transitionMs ?? 160,
+        easing: opts.easing ?? "cubic-bezier(.2,.8,.2,1)",
+        cursor: opts.cursor ?? "",
+        tooltip: opts.tooltip ?? "",
+        focusRing: opts.focusRing ?? true,
+        kbFocusAttr: opts.kbFocusAttr ?? "data-bz-kb-focus",
+    };
+    // Setup inicial - batching de propiedades
+    const initialProps = {};
+    if (o.tooltip)
+        node.setAttribute("title", o.tooltip);
+    if (o.cursor)
+        initialProps.cursor = o.cursor;
+    // Pre-calcular transición una sola vez
+    const prefersReducedMotion = getPrefersReducedMotion();
+    const baseTransition = prefersReducedMotion ? "0ms" : `${o.transitionMs}ms`;
+    const easing = EASING_PRESETS[o.easing] ?? o.easing;
+    initialProps.transition = `transform ${baseTransition} ${easing}, opacity ${baseTransition} ${easing}, color ${baseTransition} ${easing}, fill ${baseTransition} ${easing}, stroke ${baseTransition} ${easing}`;
+    // Aplicar todas las propiedades iniciales de una vez
+    Object.assign(node.style, initialProps);
+    // Pulso inicial
+    if (o.pulse && !prefersReducedMotion) {
+        node.classList.add("bz-icon-pulse");
+    }
+    // Focus ring handlers optimizados
+    function onKeydown(e) {
+        if (!o.focusRing || e.key !== "Tab")
+            return;
+        node.setAttribute(o.kbFocusAttr, "true");
+    }
+    function onMousedown() {
+        if (!o.focusRing)
+            return;
+        node.removeAttribute(o.kbFocusAttr);
+    }
+    // Estado de interacción
+    let hovering = false;
+    let pressing = false;
+    let rafId = 0;
+    // Helper para animaciones CSS optimizado
+    const setAnim = (enable, className) => {
+        if (prefersReducedMotion)
+            return;
+        node.classList.toggle(className, enable);
+    };
+    // Aplicar cambios visuales con RAF para evitar layout thrashing
+    function applyVisual() {
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(() => {
+            // Pre-calcular todos los valores
+            const parts = [];
+            if (hovering && o.rotateOnHover) {
+                parts.push(`rotate(${o.rotateOnHover}deg)`);
+            }
+            const scale = hovering ? (pressing ? o.pressScale : o.hoverScale) : 1;
+            if (scale !== 1) {
+                parts.push(`scale(${scale})`);
+            }
+            const transform = parts.length ? parts.join(" ") : "";
+            const opacity = hovering ? String(o.opacityHover) : "1";
+            const color = pressing && o.activeColor
+                ? o.activeColor
+                : hovering && o.hoverColor
+                    ? o.hoverColor
+                    : "";
+            // Batching de todas las propiedades de estilo
+            const styleUpdates = {
+                transform,
+                opacity,
+            };
+            if (color !== "") {
+                styleUpdates.color = color;
+            }
+            else if (node.style.color) {
+                styleUpdates.color = "";
+            }
+            Object.assign(node.style, styleUpdates);
+            // Animaciones CSS
+            setAnim(hovering && o.spinOnHover, "bz-icon-spin");
+            setAnim(hovering && o.bounceOnHover, "bz-icon-bounce");
+        });
+    }
+    // Event handlers optimizados
+    function onEnter() {
+        hovering = true;
+        applyVisual();
+    }
+    function onLeave() {
+        hovering = false;
+        pressing = false;
+        applyVisual();
+    }
+    function onDown() {
+        pressing = true;
+        applyVisual();
+    }
+    function onUp() {
+        pressing = false;
+        applyVisual();
+    }
+    // Event listeners
+    node.addEventListener("pointerenter", onEnter, { passive: true });
+    node.addEventListener("pointerleave", onLeave, { passive: true });
+    node.addEventListener("pointerdown", onDown, { passive: true });
+    node.addEventListener("pointerup", onUp, { passive: true });
+    node.addEventListener("keydown", onKeydown, { passive: true });
+    node.addEventListener("mousedown", onMousedown, { passive: true });
+    return {
+        update(next) {
+            Object.assign(o, next);
+            applyVisual();
+        },
+        destroy() {
+            cancelAnimationFrame(rafId);
+            node.removeEventListener("pointerenter", onEnter);
+            node.removeEventListener("pointerleave", onLeave);
+            node.addEventListener("pointerdown", onDown);
+            node.removeEventListener("pointerup", onUp);
+            node.removeEventListener("keydown", onKeydown);
+            node.removeEventListener("mousedown", onMousedown);
+        },
+    };
+}

package/dist/auto-inject.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/auto-inject.js

@@ -0,0 +1,8 @@
+// 📁 src/lib/auto-inject.ts
+import { injectIconEffectsCSS } from "./styles/css-injection.js";
+// Auto-ejecuta solo en cliente
+if (typeof window !== "undefined") {
+    Promise.resolve().then(() => {
+        injectIconEffectsCSS();
+    });
+}

package/dist/effects/icon-effects.d.ts

@@ -0,0 +1,5 @@
+import type { IconEffectOptions } from "../types.js";
+export declare function iconEffects(node: HTMLElement, opts?: IconEffectOptions): {
+    update(next?: IconEffectOptions): void;
+    destroy(): void;
+};

package/dist/effects/icon-effects.js

@@ -0,0 +1,222 @@
+import { batchStyleUpdates, getPrefersReducedMotion, optimizeEasing, } from "../utils/performance.js";
+export function iconEffects(node, opts = {}) {
+    // 🎯 SIMPLE: Variables directas sin Required<> ni tipos complejos
+    let hoverColor = opts.hoverColor ?? "";
+    let activeColor = opts.activeColor ?? "";
+    let hoverScale = opts.hoverScale ?? 1;
+    let pressScale = opts.pressScale ?? 1;
+    let rotateOnHover = opts.rotateOnHover ?? 0;
+    let opacityHover = opts.opacityHover ?? 1;
+    let spinOnHover = opts.spinOnHover ?? false;
+    let bounceOnHover = opts.bounceOnHover ?? false;
+    let wiggleOnHover = opts.wiggleOnHover ?? false;
+    let slideOnHover = opts.slideOnHover; // undefined está perfectamente OK
+    let morphOnHover = opts.morphOnHover; // undefined está perfectamente OK
+    let elasticOnClick = opts.elasticOnClick ?? false;
+    let heartbeatOnActive = opts.heartbeatOnActive ?? false;
+    let pulse = opts.pulse ?? false;
+    let transitionMs = opts.transitionMs ?? 160;
+    let easing = opts.easing ?? "cubic-bezier(.2,.8,.2,1)";
+    let cursor = opts.cursor ?? "";
+    let tooltip = opts.tooltip ?? "";
+    let focusRing = opts.focusRing ?? true;
+    let kbFocusAttr = opts.kbFocusAttr ?? "data-bz-kb-focus";
+    const prefersReducedMotion = getPrefersReducedMotion();
+    // Setup inicial
+    const initialProps = {};
+    if (tooltip)
+        node.setAttribute("title", tooltip);
+    if (cursor)
+        initialProps.cursor = cursor;
+    const baseTransition = prefersReducedMotion ? "0ms" : `${transitionMs}ms`;
+    const optimizedEasing = optimizeEasing(easing);
+    initialProps.transition = `transform ${baseTransition} ${optimizedEasing}, opacity ${baseTransition} ${optimizedEasing}, color ${baseTransition} ${optimizedEasing}, fill ${baseTransition} ${optimizedEasing}, stroke ${baseTransition} ${optimizedEasing}`;
+    batchStyleUpdates(node, initialProps);
+    if (pulse && !prefersReducedMotion) {
+        node.classList.add("bz-icon-pulse");
+    }
+    // Estado de interacción
+    let hovering = false;
+    let pressing = false;
+    let rafId = 0;
+    const setAnimClass = (className, enable) => {
+        if (prefersReducedMotion)
+            return;
+        node.classList.toggle(className, enable);
+    };
+    function applyVisual() {
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(() => {
+            const parts = [];
+            // Rotación en hover
+            if (hovering && rotateOnHover) {
+                parts.push(`rotate(${rotateOnHover}deg)`);
+            }
+            // Escala según estado
+            const scale = hovering ? (pressing ? pressScale : hoverScale) : 1;
+            if (scale !== 1) {
+                parts.push(`scale(${scale})`);
+            }
+            // Slide en hover - undefined está OK, se evalúa como falsy
+            if (hovering && slideOnHover) {
+                const slideMap = {
+                    up: "translateY(-4px)",
+                    down: "translateY(4px)",
+                    left: "translateX(-4px)",
+                    right: "translateX(4px)",
+                };
+                parts.push(slideMap[slideOnHover]);
+            }
+            // Aplicar transform
+            const transform = parts.length ? parts.join(" ") : "";
+            const opacity = hovering ? String(opacityHover) : "1";
+            // Colores
+            const color = pressing && activeColor
+                ? activeColor
+                : hovering && hoverColor
+                    ? hoverColor
+                    : "";
+            // Batching de estilos
+            const styleUpdates = {
+                transform,
+                opacity,
+            };
+            if (color !== "") {
+                styleUpdates.color = color;
+            }
+            else if (node.style.color) {
+                styleUpdates.color = "";
+            }
+            batchStyleUpdates(node, styleUpdates);
+            // Animaciones CSS
+            setAnimClass("bz-icon-spin", hovering && spinOnHover);
+            setAnimClass("bz-icon-bounce", hovering && bounceOnHover);
+            setAnimClass("bz-icon-wiggle", hovering && wiggleOnHover);
+            setAnimClass("bz-icon-heartbeat", pressing && heartbeatOnActive);
+            setAnimClass("bz-icon-elastic", pressing && elasticOnClick);
+            // Morph en hover - undefined está OK, se evalúa como falsy
+            if (morphOnHover) {
+                setAnimClass(`bz-icon-morph-${morphOnHover}`, hovering);
+            }
+        });
+    }
+    // Event handlers
+    function onEnter() {
+        hovering = true;
+        applyVisual();
+    }
+    function onLeave() {
+        hovering = false;
+        pressing = false;
+        applyVisual();
+    }
+    function onDown() {
+        pressing = true;
+        applyVisual();
+    }
+    function onUp() {
+        pressing = false;
+        applyVisual();
+    }
+    function onKeydown(e) {
+        if (!focusRing || e.key !== "Tab")
+            return;
+        node.setAttribute(kbFocusAttr, "true");
+    }
+    function onMousedown() {
+        if (!focusRing)
+            return;
+        node.removeAttribute(kbFocusAttr);
+    }
+    // Event listeners
+    node.addEventListener("pointerenter", onEnter, { passive: true });
+    node.addEventListener("pointerleave", onLeave, { passive: true });
+    node.addEventListener("pointerdown", onDown, { passive: true });
+    node.addEventListener("pointerup", onUp, { passive: true });
+    node.addEventListener("keydown", onKeydown, { passive: true });
+    node.addEventListener("mousedown", onMousedown, { passive: true });
+    return {
+        update(next) {
+            // 🎯 SIMPLE: Actualizar cada variable directamente
+            if (next) {
+                if (next.hoverColor !== undefined)
+                    hoverColor = next.hoverColor;
+                if (next.activeColor !== undefined)
+                    activeColor = next.activeColor;
+                if (next.hoverScale !== undefined)
+                    hoverScale = next.hoverScale;
+                if (next.pressScale !== undefined)
+                    pressScale = next.pressScale;
+                if (next.rotateOnHover !== undefined)
+                    rotateOnHover = next.rotateOnHover;
+                if (next.opacityHover !== undefined)
+                    opacityHover = next.opacityHover;
+                if (next.spinOnHover !== undefined)
+                    spinOnHover = next.spinOnHover;
+                if (next.bounceOnHover !== undefined)
+                    bounceOnHover = next.bounceOnHover;
+                if (next.wiggleOnHover !== undefined)
+                    wiggleOnHover = next.wiggleOnHover;
+                if (next.slideOnHover !== undefined)
+                    slideOnHover = next.slideOnHover;
+                if (next.morphOnHover !== undefined)
+                    morphOnHover = next.morphOnHover;
+                if (next.elasticOnClick !== undefined)
+                    elasticOnClick = next.elasticOnClick;
+                if (next.heartbeatOnActive !== undefined)
+                    heartbeatOnActive = next.heartbeatOnActive;
+                if (next.pulse !== undefined)
+                    pulse = next.pulse;
+                if (next.transitionMs !== undefined)
+                    transitionMs = next.transitionMs;
+                if (next.easing !== undefined)
+                    easing = next.easing;
+                if (next.cursor !== undefined)
+                    cursor = next.cursor;
+                if (next.tooltip !== undefined)
+                    tooltip = next.tooltip;
+                if (next.focusRing !== undefined)
+                    focusRing = next.focusRing;
+                if (next.kbFocusAttr !== undefined)
+                    kbFocusAttr = next.kbFocusAttr;
+                // Re-aplicar setup si es necesario
+                if (next.tooltip !== undefined) {
+                    if (tooltip) {
+                        node.setAttribute("title", tooltip);
+                    }
+                    else {
+                        node.removeAttribute("title");
+                    }
+                }
+                if (next.cursor !== undefined) {
+                    node.style.cursor = cursor;
+                }
+                if (next.transitionMs !== undefined || next.easing !== undefined) {
+                    const newBaseTransition = prefersReducedMotion
+                        ? "0ms"
+                        : `${transitionMs}ms`;
+                    const newOptimizedEasing = optimizeEasing(easing);
+                    node.style.transition = `transform ${newBaseTransition} ${newOptimizedEasing}, opacity ${newBaseTransition} ${newOptimizedEasing}, color ${newBaseTransition} ${newOptimizedEasing}, fill ${newBaseTransition} ${newOptimizedEasing}, stroke ${newBaseTransition} ${newOptimizedEasing}`;
+                }
+                if (next.pulse !== undefined) {
+                    if (pulse && !prefersReducedMotion) {
+                        node.classList.add("bz-icon-pulse");
+                    }
+                    else {
+                        node.classList.remove("bz-icon-pulse");
+                    }
+                }
+            }
+            applyVisual();
+        },
+        destroy() {
+            cancelAnimationFrame(rafId);
+            node.removeEventListener("pointerenter", onEnter);
+            node.removeEventListener("pointerleave", onLeave);
+            node.removeEventListener("pointerdown", onDown);
+            node.removeEventListener("pointerup", onUp);
+            node.removeEventListener("keydown", onKeydown);
+            node.removeEventListener("mousedown", onMousedown);
+        },
+    };
+}