@genarou/blazir-icons 1.2.20 → 1.3.3

package/dist/IconBadge.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { DynamicIconProps } from "./types";
+interface BadgeProps extends DynamicIconProps {
+    /** true = punto rojo | number = conteo | string = texto */
+    badge?: boolean | number | string;
+    /** Color de fondo del badge. Default: rojo */
+    badgeColor?: string;
+    /** Color del texto del badge. Default: blanco */
+    badgeTextColor?: string;
+    /** Tamaño del badge en px. Default: 8 (dot) o 16 (con texto) */
+    badgeSize?: number;
+    /** Posición del badge. Default: top-right */
+    badgePosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+}
+declare const IconBadge: import("svelte").Component<BadgeProps, {}, "">;
+type IconBadge = ReturnType<typeof IconBadge>;
+export default IconBadge;

package/dist/IconBase.svelte

@@ -10,77 +10,102 @@
   } from "./utils/defaults.js";
 
   // Constantes
-  const DEFAULT_MS = 180;
-  const DEFAULT_EASING = "cubic-bezier(.2,.8,.2,1)";
+  const DEFAULT_MS = 250;
+  const DEFAULT_EASING = "ease";
   const DEFAULT_ICON_COLOR = "var(--icon-fg, var(--ui-muted-fg, currentColor))";
 
   const MS_REGEX = /ms$/;
   const S_REGEX = /s$/;
 
+  // Presets semánticos de velocidad hover
+  const HOVER_SPEED_MAP: Record<string, number> = {
+    instant: 0,
+    fast: 120,
+    normal: 250,
+    slow: 400,
+    sluggish: 600,
+  };
+
   function normalizeMs(v?: number | string): number {
     if (v == null) return DEFAULT_MS;
     if (typeof v === "number") return v;
     const s = String(v).trim();
+    if (s in HOVER_SPEED_MAP) return HOVER_SPEED_MAP[s];
     if (MS_REGEX.test(s)) return parseFloat(s);
     if (S_REGEX.test(s)) return parseFloat(s) * 1000;
     const n = parseFloat(s);
     return Number.isFinite(n) ? n : DEFAULT_MS;
   }
 
-  let uidCounter = 0;
-  function uid(): string {
-    return `bz-${Date.now().toString(36)}-${(uidCounter++).toString(36)}`;
-  }
+  // UID por instancia — generado UNA SOLA VEZ por componente, nunca en $derived.
+  // Antes se generaba dentro de $derived, lo que causaba un UID nuevo cada vez
+  // que props.title cambiaba, produciendo IDs inconsistentes en aria-labelledby.
+  let _uidCounter = 0;
+  const _instanceUid = `bz-${Date.now().toString(36)}-${(_uidCounter++).toString(36)}`;
 
   // Props
   const props: IconProps & { mode?: IconMode } = $props();
 
   // Hover (nativo + heredado)
   let internalHovered = $state(false);
+  let internalPressed = $state(false);
   const isHovered = $derived(
-    internalHovered || (props.parentHoverContext?.hovered ?? false)
+    !props.disabled &&
+    !props.loading &&
+    (internalHovered || (props.parentHoverContext?.hovered ?? false))
   );
+  const isPressed = $derived(!props.disabled && internalPressed);
 
-  // Color
+  // Color — prioridad: activeColor (pressed) > hoverColor (hover) > color > default
   const effectiveColor = $derived(
-    (isHovered && props.hoverColor ? props.hoverColor : props.color) ??
-      DEFAULT_ICON_COLOR
+    (isPressed && props.activeColor
+      ? props.activeColor
+      : isHovered && props.hoverColor
+        ? props.hoverColor
+        : props.color) ?? DEFAULT_ICON_COLOR
   );
 
   // Mode
   const mode = $derived(props.mode ?? "solid");
 
-  // Derivados base
+  // Derivados base — usando $derived.by donde el cuerpo es complejo
   const klass = $derived(normalizeClass(props));
   const common = $derived(commonDefaults(props));
-  const propsWithEffectiveColor = $derived({ ...props, color: effectiveColor });
+
+  // propsWithEffectiveColor: evitar reconstruir si color no cambió.
+  // $derived.by garantiza que solo re-ejecuta cuando sus deps cambian.
+  const propsWithEffectiveColor = $derived.by(() => ({
+    ...props,
+    color: effectiveColor,
+  }));
+
   const visual = $derived(modeDefaults(mode, propsWithEffectiveColor));
   const timingStyle = $derived(getAnimationStyle(props));
 
-  // Transiciones
+  // Transiciones — hoverSpeed > transitionMs > default
   const hoverMs = $derived(
-    normalizeMs(props.transitionMs ?? props.animationDuration)
-  );
-  const hoverEase = $derived(
-    props.transitionEasing ?? props.animationEasing ?? DEFAULT_EASING
+    normalizeMs(props.transitionMs ?? props.hoverSpeed)
   );
+  const hoverEase = $derived(props.transitionEasing ?? DEFAULT_EASING);
 
-  // Animaciones continuas
-  const spinDuration = $derived(() => {
+  // Animaciones continuas — $derived.by idiomático (Svelte 5)
+  const spinDuration = $derived.by(() => {
+    if (props.loading) return "0.75s";          // loading siempre gira
     if (!props.spin) return null;
     if (props.spin === true) return "1s";
     return typeof props.spin === "number"
       ? `${props.spin}ms`
       : String(props.spin);
   });
+
   const wantsPulse = $derived(!!props.pulse);
   const wantsBounce = $derived(!!props.bounce);
   const wantsWiggle = $derived(!!props.wiggle);
   const wantsHeartbeat = $derived(!!props.heartbeat);
   const wantsElastic = $derived(!!props.elastic);
 
-  // ===== Chevron state ⇒ grados (se animará por CSS) =====
-  const effectiveChevronState = $derived(() => {
+  // ===== Chevron state ⇒ grados =====
+  const effectiveChevronState = $derived.by(() => {
     if (props.chevronState) return props.chevronState;
     if (props.chevronOpen !== undefined) {
       return props.chevronOpen ? "open" : "closed";
@@ -88,8 +113,8 @@
     return undefined;
   });
 
-  const chevronDeg = $derived((): number | null => {
-    switch (effectiveChevronState()) {
+  const chevronDeg = $derived.by((): number | null => {
+    switch (effectiveChevronState) {
       case "open":
       case "down":
         return 90;
@@ -107,11 +132,10 @@
 
   // Clase final
   const finalClass = $derived(
-    `bz-icon ${klass}${effectiveChevronState() ? " bz-icon-chevron" : ""}`.trim()
+    `bz-icon ${klass}${effectiveChevronState ? " bz-icon-chevron" : ""}`.trim()
   );
 
   // ===== SVG transform (solo rotate/flip declarativos) =====
-  // Rot/flip en <g> para no interferir con la transición del <svg>
   function getViewBoxCenter(vb: string) {
     const parts = vb.trim().split(/\s+/);
     const minX = Number(parts[0]);
@@ -120,12 +144,12 @@
     const h = Number(parts[3]);
     return { cx: minX + w / 2, cy: minY + h / 2 };
   }
+
   const center = $derived(getViewBoxCenter(common.viewBox));
 
-  const svgTransform = $derived(() => {
+  const svgTransform = $derived.by(() => {
     const cmds: string[] = [];
 
-    // Rotate (prop)
     if (props.rotate != null) {
       const r =
         typeof props.rotate === "number"
@@ -134,7 +158,6 @@
       if (!isNaN(r)) cmds.push(`rotate(${r} ${center.cx} ${center.cy})`);
     }
 
-    // Flip (prop)
     if (props.flipH || props.flipV) {
       const sx = props.flipH ? -1 : 1;
       const sy = props.flipV ? -1 : 1;
@@ -143,48 +166,39 @@
       );
     }
 
-    // ⛔️ OJO: chevron NO va aquí (aquí no hay transición CSS)
     return cmds.length ? cmds.join(" ") : "";
   });
 
-  // ===== Style inline del <svg> (incluye transición y chevron por CSS) =====
-  const style = $derived(() => {
+  // ===== Style inline del <svg> =====
+  const style = $derived.by(() => {
     const parts: string[] = [];
 
-    // estilo previo del usuario
     if (props.style) {
       parts.push(props.style.endsWith(";") ? props.style : `${props.style};`);
     }
 
-    // color
+    if (props.disabled) parts.push("opacity:0.4;pointer-events:none;");
     parts.push(`color:${effectiveColor};`);
 
-    // Vars de timing (si las hay)
     const tstyle = timingStyle;
     if (tstyle) parts.push(tstyle);
 
-    // transición para transform/opacidad/stroke/fill
     parts.push(
       `transition:color ${hoverMs}ms ${hoverEase},fill ${hoverMs}ms ${hoverEase},` +
         `stroke ${hoverMs}ms ${hoverEase},transform ${hoverMs}ms ${hoverEase},opacity ${hoverMs}ms ${hoverEase};`
     );
 
-    // ✅ Var CSS para chevron (si hay estado). Usamos rotate(Xdeg)
-    const deg = chevronDeg();
+    const deg = chevronDeg;
     if (deg != null) {
       parts.push(`--bz-chevron-rot: rotate(${deg}deg);`);
     } else {
-      // mantener consistente
       parts.push(`--bz-chevron-rot: rotate(0deg);`);
     }
 
-    // Transform del SVG: incluir SIEMPRE la var del chevron al final
-    // (puedes añadir más términos aquí si usas CSS-only transforms)
     parts.push(`transform-origin:center;`);
     parts.push(`transform: var(--bz-chevron-rot);`);
 
-    // Animaciones declarativas (spin/pulse/etc) — se apilan con transform
-    const spin = spinDuration();
+    const spin = spinDuration;
     if (
       spin ||
       wantsPulse ||
@@ -212,10 +226,10 @@
     return parts.join(" ");
   });
 
-  // A11y
+  // A11y — computedTitleId usa el UID de instancia (estable durante todo el ciclo de vida)
   const ariaHidden = $derived(props.decorative ? "true" : undefined);
   const computedTitleId = $derived(
-    props.title ? (props.titleId ?? `bz-icon-title-${uid()}`) : undefined
+    props.title ? (props.titleId ?? `bz-icon-title-${_instanceUid}`) : undefined
   );
   const ariaLabel = $derived(
     props.decorative ? undefined : props.ariaLabel || undefined
@@ -228,7 +242,8 @@
   const finalSize = $derived(
     typeof common.size === "number" ? `${common.size}px` : common.size
   );
-  const safeAttrs = $derived(() => {
+
+  const safeAttrs = $derived.by(() => {
     if (!props.attrs) return {};
     const { width, height, ...rest } = props.attrs as any;
     return rest;
@@ -238,9 +253,11 @@
   let svgRef: SVGSVGElement | null = $state(null);
   let fxLayer: SVGGElement | null = $state(null);
 
-  // Efectos (incluye heartbeatOnHover si viene en attrs/effects)
+  // Efectos — el $effect solo se re-ejecuta cuando fxLayer o las opciones de
+  // efectos cambian. Devuelve la función de cleanup para destroy automático.
   $effect(() => {
     if (!fxLayer) return;
+
     const effectsOpts: IconEffectOptions = { ...(props.effects ?? {}) };
     const a = props.attrs;
     if (a) {
@@ -255,22 +272,22 @@
       if (a.hoverScale) effectsOpts.hoverScale = a.hoverScale;
       if (a.pressScale) effectsOpts.pressScale = a.pressScale;
     }
+
+    if (props.tooltip) effectsOpts.tooltip = props.tooltip;
     const controller = iconEffects(fxLayer, effectsOpts);
     return () => controller.destroy();
   });
 
-  function handleMouseEnter() {
-    internalHovered = true;
-  }
-  function handleMouseLeave() {
-    internalHovered = false;
-  }
+  function handleMouseEnter() { internalHovered = true; }
+  function handleMouseLeave() { internalHovered = false; internalPressed = false; }
+  function handleMouseDown()  { internalPressed = true; }
+  function handleMouseUp()    { internalPressed = false; }
 </script>
 
 <svg
   bind:this={svgRef}
   xmlns="http://www.w3.org/2000/svg"
-  {...safeAttrs()}
+  {...safeAttrs}
   width={finalSize}
   height={finalSize}
   viewBox={common.viewBox}
@@ -281,7 +298,7 @@
   aria-label={ariaLabel}
   aria-labelledby={ariaLabelledby}
   focusable="false"
-  style={style()}
+  style={style}
   fill={visual.fill}
   stroke={visual.stroke}
   stroke-width={visual.strokeWidth}
@@ -291,10 +308,20 @@
   data-testid={props.testId}
   onmouseenter={handleMouseEnter}
   onmouseleave={handleMouseLeave}
+  onmousedown={handleMouseDown}
+  onmouseup={handleMouseUp}
 >
-  {#if props.title}<title id={computedTitleId}>{props.title}</title>{/if}
-  <g bind:this={fxLayer} transform={svgTransform()}>
-    {@render props.children?.()}
+  {#if props.title}
+    <title id={computedTitleId}>{props.title}</title>
+  {:else if props.tooltip}
+    <title>{props.tooltip}</title>
+  {/if}
+  <g bind:this={fxLayer} transform={svgTransform}>
+    {#if props.loading}
+      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2.5" stroke-dasharray="42 15" stroke-linecap="round" />
+    {:else}
+      {@render props.children?.()}
+    {/if}
   </g>
 </svg>
 
@@ -321,6 +348,7 @@
       transform: rotate(360deg);
     }
   }
+
   @keyframes bz-icon-bounce {
     0% {
       transform: translateY(0);
@@ -332,6 +360,7 @@
       transform: translateY(0);
     }
   }
+
   @keyframes bz-icon-pulse {
     0%,
     100% {
@@ -343,6 +372,7 @@
       opacity: 0.92;
     }
   }
+
   @keyframes bz-icon-wiggle {
     0% {
       transform: rotate(0deg);
@@ -357,6 +387,7 @@
       transform: rotate(0deg);
     }
   }
+
   @keyframes bz-icon-elastic {
     0% {
       transform: scale(1);
@@ -371,6 +402,7 @@
       transform: scale(1);
     }
   }
+
   @keyframes bz-icon-heartbeat {
     0%,
     100% {

package/dist/effects.js

@@ -62,9 +62,7 @@ export function iconEffects(node, opts = {}) {
     if (target instanceof SVGSVGElement) {
         target.style.pointerEvents = "bounding-box";
     }
-    // Setup inicial
-    if (opts.tooltip)
-        target.setAttribute("title", opts.tooltip);
+    // Setup inicial — tooltip lo maneja Icon.svelte via data-bz-tooltip + CSS
     if (opts.cursor && isHTML)
         node.style.cursor = opts.cursor;
     const ms = opts.transitionMs ?? DEFAULTS.transitionMs;

package/dist/icons/Ai.svelte

@@ -2,17 +2,45 @@
   import IconBase from "../IconBase.svelte";
   import type { IconProps } from "../types";
 
+  // Usamos el patrón de Svelte 5 que espera tu IconBase
   const props: IconProps = $props();
 </script>
 
 <IconBase
   {...props}
-  mode="solid"
+  mode="outline"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "File settings icon"}
-  title={props.title ?? ""}
+  ariaLabel={props.ariaLabel ?? "Inteligencia Artificial"}
+  title={props.title ?? "IA Core"}
 >
-  <path
-    d="m20.467 8.694l.246-.566a4.36 4.36 0 0 1 2.22-2.25l.759-.339a.53.53 0 0 0 0-.963l-.717-.319a4.37 4.37 0 0 1-2.251-2.326l-.253-.611a.506.506 0 0 0-.942 0l-.253.61a4.37 4.37 0 0 1-2.25 2.327l-.718.32a.53.53 0 0 0 0 .962l.76.338a4.36 4.36 0 0 1 2.219 2.251l.246.566c.18.414.753.414.934 0M5.8 16h2.154l.6-1.5h2.892l.6 1.5H14.2L11 8H9zm4.2-5.115l.646 1.615H9.354zM15 16V8h2v8zM3 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-9h-2v8H4V5h10V3z"
-  />
+  {#snippet children()}
+    <rect
+      x="4"
+      y="4"
+      width="16"
+      height="16"
+      rx="2"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+    />
+
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      d="M9 2v2m6-2v2M9 20v2m6-2v2M2 9h2m-2 6h2M20 9h2m-2 6h2"
+    />
+
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linejoin="round"
+      d="M12 8l3 4-3 4-3-4z"
+    />
+
+    <circle cx="12" cy="12" r="1" fill="currentColor" />
+  {/snippet}
 </IconBase>

package/dist/icons/Alternate.svelte

@@ -1,19 +1,26 @@
-<!-- src/lib/icons/TextHeading.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
-  import type { IconProps } from "../types";
+  import type { IconMode, IconProps } from "../types.js";
 
-  const props: IconProps = $props();
+  const props: IconProps & { mode?: IconMode } = $props();
 </script>
 
 <IconBase
   {...props}
   mode="solid"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "Text Heading"}
-  title={props.title ?? ""}
+  ariaLabel={props.ariaLabel ?? "Encabezado de texto"}
+  title={props.title ?? "Text Heading"}
 >
-  <path
-    d="M9 5.5c0 .83.67 1.5 1.5 1.5H14v10.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V7h3.5c.83 0 1.5-.67 1.5-1.5S21.33 4 20.5 4h-10C9.67 4 9 4.67 9 5.5M4.5 12H6v5.5c0 .83.67 1.5 1.5 1.5S9 18.33 9 17.5V12h1.5c.83 0 1.5-.67 1.5-1.5S11.33 9 10.5 9h-6C3.67 9 3 9.67 3 10.5S3.67 12 4.5 12"
-  />
+  {#snippet children()}
+    <path
+      fill="currentColor"
+      d="M21 5c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1s.45 1 1 1h5v12c0 .55.45 1 1 1s1-.45 1-1V6h4c.55 0 1-.45 1-1z"
+    />
+
+    <path
+      fill="currentColor"
+      d="M11 11c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1h3v6c0 .55.45 1 1 1s1-.45 1-1v-6h1c.55 0 1-.45 1-1z"
+    />
+  {/snippet}
 </IconBase>

package/dist/icons/Alternate.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "../types";
-declare const Alternate: import("svelte").Component<IconProps, {}, "">;
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const Alternate: import("svelte").Component<$$ComponentProps, {}, "">;
 type Alternate = ReturnType<typeof Alternate>;
 export default Alternate;

package/dist/icons/AnimatedArrowLeft.svelte

@@ -1,23 +1,41 @@
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
-  import type { IconProps } from "../types";
+  import type { IconMode, IconProps } from "../types.js";
 
-  const props: IconProps = $props();
+  const props: IconProps & { mode?: IconMode } = $props();
 </script>
 
 <IconBase
   {...props}
   mode="outline"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "Arrow Right Animated"}
-  title={props.title ?? ""}
+  ariaLabel={props.ariaLabel ?? "Flecha derecha"}
+  title={props.title ?? "Arrow Right"}
 >
-  <path d="M9 12l5 -5M9 12l5 5" stroke-dasharray="10" stroke-dashoffset="10">
-    <animate
-      attributeName="stroke-dashoffset"
-      dur="0.3s"
-      values="10;0"
-      fill="freeze"
+  {#snippet children()}
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="bz-arrow-path"
+      d="M9 6l6 6-6 6"
     />
-  </path>
+  {/snippet}
 </IconBase>
+
+<style>
+  /* Animación delegada a la GPU mediante transformaciones simples.
+    Es mucho más eficiente que animar stroke-dashoffset con JS o <animate>.
+  */
+  :global(.bz-icon:hover .bz-arrow-path) {
+    transform: translateX(2px);
+    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .bz-arrow-path {
+    transition: transform 0.2s ease;
+    will-change: transform;
+  }
+</style>

package/dist/icons/AnimatedArrowLeft.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "../types";
-declare const AnimatedArrowLeft: import("svelte").Component<IconProps, {}, "">;
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const AnimatedArrowLeft: import("svelte").Component<$$ComponentProps, {}, "">;
 type AnimatedArrowLeft = ReturnType<typeof AnimatedArrowLeft>;
 export default AnimatedArrowLeft;

package/dist/icons/Archive.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import IconBase from "../IconBase.svelte";
+    import type { IconMode, IconProps } from "../types.js";
+
+    const props: IconProps & { mode?: IconMode } = $props();
+</script>
+
+<IconBase
+    {...props}
+    mode="solid"
+    viewBox="0 0 24 24"
+    ariaLabel={props.ariaLabel ?? "Copiar o duplicar"}
+    title={props.title ?? "Copy / Duplicate"}
+>
+    {#snippet children()}
+        <path
+            fill="currentColor"
+            d="M14 13q.85 0 1.425-.587T16 11h4V4H8v7h4q0 .825.588 1.413T14 13m-6 5q-.825 0-1.412-.587T6 16V4q0-.825.588-1.412T8 2h12q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18zm-4 4q-.825 0-1.412-.587T2 20V6h2v14h14v2z"
+        />
+    {/snippet}
+</IconBase>

package/dist/icons/Archive.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const Archive: import("svelte").Component<$$ComponentProps, {}, "">;
+type Archive = ReturnType<typeof Archive>;
+export default Archive;

package/dist/icons/Attachment.svelte

@@ -1,21 +1,21 @@
-<!-- src/lib/icons/AttachmentClip.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
-  import type { IconProps } from "../types";
+  import type { IconMode, IconProps } from "../types.js";
 
-  const props: IconProps = $props();
+  const props: IconProps & { mode?: IconMode } = $props();
 </script>
 
 <IconBase
   {...props}
   mode="solid"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "Attachment Clip"}
-  title={props.title ?? ""}
-  strokeWidth={props.strokeWidth ?? 0}
+  ariaLabel={props.ariaLabel ?? "Adjuntar archivo"}
+  title={props.title ?? "Attachment"}
 >
-  <path
-    fill="currentColor"
-    d="M12 19q1.675 0 2.838-1.175T16 15v-3q0-.425-.288-.712T15 11t-.712.288T14 12v3q0 .825-.575 1.413T12 17q-.825 0-1.412-.587T10 15V9.5q0-.225.15-.363T10.5 9q.225 0 .363.138T11 9.5V14q0 .425.288.713T12 15t.713-.288T13 14V9.5q0-1.05-.725-1.775T10.5 7t-1.775.725T8 9.5V15q0 1.65 1.175 2.825T12 19m-6 3q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h9l5 5v13q0 .825-.587 1.413T18 22zm8-18v3q0 .425.288.713T15 8h3z"
-  />
+  {#snippet children()}
+    <path
+      fill="currentColor"
+      d="M16.5 6v11.5c0 2.48-2.02 4.5-4.5 4.5s-4.5-2.02-4.5-4.5V5c0-1.66 1.34-3 3-3s3 1.34 3 3v11.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6h-2v10.5c0 1.93 1.57 3.5 3.5 3.5s3.5-1.57 3.5-3.5V5c0-2.76-2.24-5-5-5S5 2.24 5 5v12.5C5 20.54 8.46 24 12.75 24S20.5 20.54 20.5 16.25V6h-4z"
+    />
+  {/snippet}
 </IconBase>

package/dist/icons/Attachment.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "../types";
-declare const Attachment: import("svelte").Component<IconProps, {}, "">;
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const Attachment: import("svelte").Component<$$ComponentProps, {}, "">;
 type Attachment = ReturnType<typeof Attachment>;
 export default Attachment;

package/dist/icons/Bank.svelte

@@ -1,13 +1,21 @@
-<!-- src/lib/icons/Bank.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
-  import type { IconProps } from "../types";
-  const props: IconProps = $props();
+  import type { IconMode, IconProps } from "../types.js";
+
+  const props: IconProps & { mode?: IconMode } = $props();
 </script>
 
-<IconBase {...props} mode="solid" viewBox="0 0 24 24">
-  <path
-    fill="currentColor"
-    d="M5 16v-5q0-.425.288-.712T6 10t.713.288T7 11v5q0 .425-.288.713T6 17t-.712-.288T5 16m6 0v-5q0-.425.288-.712T12 10t.713.288T13 11v5q0 .425-.288.713T12 17t-.712-.288T11 16m10-8H2.9q-.375 0-.638-.262T2 7.1v-.55q0-.275.138-.475T2.5 5.75l8.6-4.3q.425-.2.9-.2t.9.2l8.55 4.275q.275.125.413.375t.137.525V7q0 .425-.287.713T21 8M3 21q-.425 0-.712-.288T2 20t.288-.712T3 19h10.05q.425 0 .713.288t.287.712t-.288.713t-.712.287zm15-8.25q-.425 0-.712-.288T17 11.75V11q0-.425.288-.712T18 10t.713.288T19 11v.75q0 .425-.288.713T18 12.75m-2 5.8v-1.925q0-.275.138-.525t.412-.375l3-1.5q.2-.125.45-.125t.45.125l3 1.5q.275.125.413.375t.137.525v1.925q0 1.875-.975 3.238t-2.65 2.062q-.05.025-.375.075q-.05 0-.375-.075q-1.675-.7-2.65-2.062T16 18.55m3.275.325l-.45-.45q-.225-.225-.525-.213t-.525.238t-.225.525t.225.525l.8.8q.3.3.7.3t.7-.3l2.25-2.225q.225-.225.225-.525t-.225-.525t-.525-.212t-.525.212z"
-  />
+<IconBase
+  {...props}
+  mode="solid"
+  viewBox="0 0 24 24"
+  ariaLabel={props.ariaLabel ?? "Entidad Bancaria"}
+  title={props.title ?? "Bank Premium"}
+>
+  {#snippet children()}
+    <path
+      fill="currentColor"
+      d="M12 1.5L2 6v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6L12 1.5zM4 8h3v12H4V8zm5 0h6v12H9V8zm8 0h3v12h-3V8zm-5-3.5L19.5 7H4.5L12 4.5zM10 10v8h1v-8h-1zm3 0v8h1v-8h-1z"
+    />
+  {/snippet}
 </IconBase>

package/dist/icons/Bank.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "../types";
-declare const Bank: import("svelte").Component<IconProps, {}, "">;
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const Bank: import("svelte").Component<$$ComponentProps, {}, "">;
 type Bank = ReturnType<typeof Bank>;
 export default Bank;