@frybynite/image-cloud 0.11.3 → 1.0.1

package/dist/index.d.ts

@@ -864,6 +864,7 @@ export declare class ImageCloud {
     private counterElAutoCreated;
     private prevButtonEl;
     private nextButtonEl;
+    private ariaLiveEl;
     private prevButtonElAutoCreated;
     private nextButtonElAutoCreated;
     constructor(options?: ImageCloudOptions);
@@ -891,6 +892,7 @@ export declare class ImageCloud {
     private createDefaultCounterElement;
     private createDefaultPrevButtonElement;
     private createDefaultNextButtonElement;
+    private getImageAlt;
     private setupEventListeners;
     /**
      * Navigate to the next image (Right arrow)

package/dist/react.d.ts

@@ -864,6 +864,7 @@ export declare class ImageCloud {
     private counterElAutoCreated;
     private prevButtonEl;
     private nextButtonEl;
+    private ariaLiveEl;
     private prevButtonElAutoCreated;
     private nextButtonElAutoCreated;
     constructor(options?: ImageCloudOptions);
@@ -891,6 +892,7 @@ export declare class ImageCloud {
     private createDefaultCounterElement;
     private createDefaultPrevButtonElement;
     private createDefaultNextButtonElement;
+    private getImageAlt;
     private setupEventListeners;
     /**
      * Navigate to the next image (Right arrow)

package/dist/react.js

@@ -24,7 +24,7 @@ const mt = Object.freeze({
   type: "linear"
 }), vt = Object.freeze({
   mode: "none"
-}), xt = Object.freeze({
+}), Et = Object.freeze({
   mode: "none"
 }), Mt = Object.freeze({
   default: Object.freeze({
@@ -159,7 +159,7 @@ const mt = Object.freeze({
       // smooth deceleration
       path: yt,
       rotation: vt,
-      scale: xt
+      scale: Et
     }),
     idle: $t
   }),
@@ -280,7 +280,7 @@ function ee(o = {}) {
     timing: o.animation.entry.timing ? { ...L.animation.entry.timing, ...o.animation.entry.timing } : L.animation.entry.timing,
     path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } : L.animation.entry.path,
     rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : L.animation.entry.rotation,
-    scale: o.animation.entry.scale ? { ...xt, ...o.animation.entry.scale } : L.animation.entry.scale
+    scale: o.animation.entry.scale ? { ...Et, ...o.animation.entry.scale } : L.animation.entry.scale
   }), o.animation.idle && (s.animation.idle = {
     ...$t,
     ...o.animation.idle
@@ -579,14 +579,14 @@ function fe(o) {
     startRotation: p,
     scaleConfig: w,
     startScale: v
-  } = o, l = n.type, g = p !== void 0 && p !== c, h = m?.mode === "wobble", b = m?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, I = g || h, y = v !== void 0 && v !== d, x = w?.mode === "pop", E = w?.pop || { overshoot: 1.2, bounces: 1 };
-  if (l === "linear" && !I && !(y || x)) {
+  } = o, l = n.type, g = p !== void 0 && p !== c, h = m?.mode === "wobble", b = m?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, I = g || h, y = v !== void 0 && v !== d, E = w?.mode === "pop", x = w?.pop || { overshoot: 1.2, bounces: 1 };
+  if (l === "linear" && !I && !(y || E)) {
     u && u();
     return;
   }
   const R = performance.now(), M = -r / 2, T = -a / 2;
-  function z(k) {
-    const D = k - R, O = Math.min(D / s, 1);
+  function z(_) {
+    const D = _ - R, O = Math.min(D / s, 1);
     let S;
     switch (l) {
       case "bounce": {
@@ -619,11 +619,11 @@ function fe(o) {
           y: J(i.y, e.y, O)
         };
     }
-    const _ = S.x - e.x, $ = S.y - e.y;
+    const U = S.x - e.x, k = S.y - e.y;
     let A;
     h ? A = de(O, c, b) : g ? A = J(p, c, O) : A = c;
     let j;
-    x ? j = ue(O, d, E) : y ? j = J(v, d, O) : j = d, t.style.transform = `translate(${M}px, ${T}px) translate(${_}px, ${$}px) rotate(${A}deg) scale(${j})`, f && O < 1 && f(O, D, {
+    E ? j = ue(O, d, x) : y ? j = J(v, d, O) : j = d, t.style.transform = `translate(${M}px, ${T}px) translate(${U}px, ${k}px) rotate(${A}deg) scale(${j})`, f && O < 1 && f(O, D, {
       x: S.x,
       y: S.y,
       rotation: A,
@@ -646,7 +646,7 @@ const me = {
 };
 class pe {
   constructor(t, i) {
-    this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || yt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || xt;
+    this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || yt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || Et;
   }
   /**
    * Get the effective start position, considering layout-aware defaults
@@ -1187,10 +1187,10 @@ class ye {
    */
   generate(t, i, e = {}) {
     const n = [], { width: s, height: r } = i, a = this.config.spacing.padding, c = e.fixedHeight ?? 200, d = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, f = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, w = m !== 1 || p !== 1, l = c * 1.5 / 2, g = c / 2, h = s - a - l, b = r - a - g, I = a + l, y = a + g;
-    for (let x = 0; x < t; x++) {
-      const E = this.random(I, h), F = this.random(y, b), R = d === "random" ? this.random(u, f) : 0, M = w ? this.random(m, p) : 1, T = c * M, z = {
-        id: x,
-        x: E,
+    for (let E = 0; E < t; E++) {
+      const x = this.random(I, h), F = this.random(y, b), R = d === "random" ? this.random(u, f) : 0, M = w ? this.random(m, p) : 1, T = c * M, z = {
+        id: E,
+        x,
         y: F,
         rotation: R,
         scale: M,
@@ -1243,32 +1243,32 @@ class ve {
         // Center image is highest
       });
     }
-    let x = 1, E = 1;
-    for (; x < t; ) {
-      const F = E / b, R = w > 0 ? 1 - F * w * 0.5 : 1, M = Math.max(l * 0.8, y / b * 1.5 / v.tightness), T = E * M, z = T * 1.5, k = Math.PI * (3 * (z + T) - Math.sqrt((3 * z + T) * (z + 3 * T))), D = this.estimateWidth(l), O = Math.floor(k / (D * 0.7));
+    let E = 1, x = 1;
+    for (; E < t; ) {
+      const F = x / b, R = w > 0 ? 1 - F * w * 0.5 : 1, M = Math.max(l * 0.8, y / b * 1.5 / v.tightness), T = x * M, z = T * 1.5, _ = Math.PI * (3 * (z + T) - Math.sqrt((3 * z + T) * (z + 3 * T))), D = this.estimateWidth(l), O = Math.floor(_ / (D * 0.7));
       if (O === 0) {
-        E++;
+        x++;
         continue;
       }
-      const S = 2 * Math.PI / O, _ = E * (20 * Math.PI / 180);
-      for (let $ = 0; $ < O && x < t; $++) {
-        const A = $ * S + _, j = p ? this.random(f, m) : 1, N = R * j, P = l * N;
-        let H = g + Math.cos(A) * z, U = h + Math.sin(A) * T;
-        const B = P * 1.5 / 2, W = P / 2;
-        H - B < I ? H = I + B : H + B > s - I && (H = s - I - B), U - W < I ? U = I + W : U + W > r - I && (U = r - I - W);
+      const S = 2 * Math.PI / O, U = x * (20 * Math.PI / 180);
+      for (let k = 0; k < O && E < t; k++) {
+        const A = k * S + U, j = p ? this.random(f, m) : 1, N = R * j, $ = l * N;
+        let H = g + Math.cos(A) * z, P = h + Math.sin(A) * T;
+        const B = $ * 1.5 / 2, W = $ / 2;
+        H - B < I ? H = I + B : H + B > s - I && (H = s - I - B), P - W < I ? P = I + W : P + W > r - I && (P = r - I - W);
         const X = c === "random" ? this.random(d, u) : 0;
         n.push({
-          id: x,
+          id: E,
           x: H,
-          y: U,
+          y: P,
           rotation: X,
           scale: N,
-          baseSize: P,
-          zIndex: Math.max(1, 100 - E)
+          baseSize: $,
+          zIndex: Math.max(1, 100 - x)
           // Outer rings have lower z-index
-        }), x++;
+        }), E++;
       }
-      E++;
+      x++;
     }
     return n;
   }
@@ -1291,7 +1291,7 @@ class ve {
     return Math.random() * (i - t) + t;
   }
 }
-const xe = {
+const Ee = {
   columns: "auto",
   rows: "auto",
   stagger: "none",
@@ -1319,7 +1319,7 @@ const xe = {
   { x: 0, y: 1 }
   // down
 ];
-class Ee {
+class xe {
   constructor(t, i = {}) {
     this.config = t, this.imageConfig = i;
   }
@@ -1331,47 +1331,36 @@ class Ee {
    * @returns Array of layout objects with position, rotation, scale
    */
   generate(t, i, e = {}) {
-    const n = [], { width: s, height: r } = i, a = { ...xe, ...this.config.grid }, c = this.config.spacing.padding, d = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", f = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || m !== 1, w = s - 2 * c, v = r - 2 * c, { columns: l, rows: g } = this.calculateGridDimensions(
+    const n = [], { width: s, height: r } = i, a = { ...Ee, ...this.config.grid }, c = this.config.spacing.padding, d = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", f = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || m !== 1, w = s - 2 * c, v = r - 2 * c, { columns: l, rows: g } = this.calculateGridDimensions(
       t,
       w,
       v,
       d,
       a
-    ), h = a.stagger === "row", b = a.stagger === "column", I = h ? l + 0.5 : l, y = b ? g + 0.5 : g, x = (w - a.gap * (l - 1)) / I, E = (v - a.gap * (g - 1)) / y, F = h ? x / 2 : 0, R = b ? E / 2 : 0, M = 1 + a.overlap, T = Math.min(x, E) * M, z = e.fixedHeight ? Math.min(e.fixedHeight, T) : T, k = l * x + (l - 1) * a.gap + F, D = g * E + (g - 1) * a.gap + R, O = c + (w - k) / 2, S = c + (v - D) / 2, _ = l * g, $ = a.columns !== "auto" && a.rows !== "auto", A = $ && t > _;
-    typeof window < "u" && (window.__gridOverflowDebug = {
-      gridConfigColumns: a.columns,
-      gridConfigRows: a.rows,
-      columns: l,
-      rows: g,
-      cellCount: _,
-      hasFixedGrid: $,
-      imageCount: t,
-      isOverflowMode: A
-    });
-    const j = A ? new Array(_).fill(0) : [], N = Math.min(x, E) * a.overflowOffset;
-    for (let P = 0; P < t; P++) {
-      let H, U, Y = 0;
-      if (A && P >= _) {
-        const q = P - _, G = q % _;
-        Y = Math.floor(q / _) + 1, j[G]++, a.fillDirection === "row" ? (H = G % l, U = Math.floor(G / l)) : (U = G % g, H = Math.floor(G / g));
+    ), h = a.stagger === "row", b = a.stagger === "column", I = h ? l + 0.5 : l, y = b ? g + 0.5 : g, E = (w - a.gap * (l - 1)) / I, x = (v - a.gap * (g - 1)) / y, F = h ? E / 2 : 0, R = b ? x / 2 : 0, M = 1 + a.overlap, T = Math.min(E, x) * M, z = e.fixedHeight ? Math.min(e.fixedHeight, T) : T, _ = l * E + (l - 1) * a.gap + F, D = g * x + (g - 1) * a.gap + R, O = c + (w - _) / 2, S = c + (v - D) / 2, U = l * g, A = a.columns !== "auto" && a.rows !== "auto" && t > U, j = A ? new Array(U).fill(0) : [], N = Math.min(E, x) * a.overflowOffset;
+    for (let $ = 0; $ < t; $++) {
+      let H, P, Y = 0;
+      if (A && $ >= U) {
+        const q = $ - U, G = q % U;
+        Y = Math.floor(q / U) + 1, j[G]++, a.fillDirection === "row" ? (H = G % l, P = Math.floor(G / l)) : (P = G % g, H = Math.floor(G / g));
       } else
-        a.fillDirection === "row" ? (H = P % l, U = Math.floor(P / l)) : (U = P % g, H = Math.floor(P / g));
-      let B = O + H * (x + a.gap) + x / 2, W = S + U * (E + a.gap) + E / 2;
-      if (a.stagger === "row" && U % 2 === 1 ? B += x / 2 : a.stagger === "column" && H % 2 === 1 && (W += E / 2), Y > 0) {
+        a.fillDirection === "row" ? (H = $ % l, P = Math.floor($ / l)) : (P = $ % g, H = Math.floor($ / g));
+      let B = O + H * (E + a.gap) + E / 2, W = S + P * (x + a.gap) + x / 2;
+      if (a.stagger === "row" && P % 2 === 1 ? B += E / 2 : a.stagger === "column" && H % 2 === 1 && (W += x / 2), Y > 0) {
         const q = (Y - 1) % At.length, G = At[q];
         B += G.x * N, W += G.y * N;
       }
       if (a.jitter > 0) {
-        const q = x / 2 * a.jitter, G = E / 2 * a.jitter;
+        const q = E / 2 * a.jitter, G = x / 2 * a.jitter;
         B += this.random(-q, q), W += this.random(-G, G);
       }
       let X = B, V = W;
       if (!A && a.fillDirection === "row") {
         const q = t % l || l;
-        if (U === Math.floor((t - 1) / l) && q < l) {
-          const It = q * x + (q - 1) * a.gap;
+        if (P === Math.floor((t - 1) / l) && q < l) {
+          const It = q * E + (q - 1) * a.gap;
           let gt = 0;
-          a.alignment === "center" ? gt = (k - It) / 2 : a.alignment === "end" && (gt = k - It), X += gt;
+          a.alignment === "center" ? gt = (_ - It) / 2 : a.alignment === "end" && (gt = _ - It), X += gt;
         }
       }
       const ct = p ? this.random(f, m) : 1, K = z * ct, nt = K * 1.5 / 2, ot = K / 2, ht = c + nt, dt = s - c - nt, _t = c + ot, Ut = r - c - ot;
@@ -1382,8 +1371,8 @@ class Ee {
         a.jitter > 0 ? ut = this.random(q * a.jitter, G * a.jitter) : ut = this.random(q, G);
       }
       let ft;
-      A && Y > 0 ? ft = 50 - Y : ft = A ? 100 + P : P + 1, n.push({
-        id: P,
+      A && Y > 0 ? ft = 50 - Y : ft = A ? 100 + $ : $ + 1, n.push({
+        id: $,
         x: X,
         y: V,
         rotation: ut,
@@ -1443,29 +1432,29 @@ class Se {
       h - c - d / 2
     ), I = a.direction === "clockwise" ? -1 : 1;
     for (let y = 0; y < t; y++) {
-      let x, E;
+      let E, x;
       if (a.spiralType === "golden")
-        x = y * we * I + a.startAngle, E = this.calculateGoldenRadius(y, t, b, a.tightness);
+        E = y * we * I + a.startAngle, x = this.calculateGoldenRadius(y, t, b, a.tightness);
       else if (a.spiralType === "archimedean") {
         const B = y * 0.5 * a.tightness;
-        x = B * I + a.startAngle, E = this.calculateArchimedeanRadius(B, t, b, a.tightness);
+        E = B * I + a.startAngle, x = this.calculateArchimedeanRadius(B, t, b, a.tightness);
       } else {
         const B = y * 0.3 * a.tightness;
-        x = B * I + a.startAngle, E = this.calculateLogarithmicRadius(B, t, b, a.tightness);
+        E = B * I + a.startAngle, x = this.calculateLogarithmicRadius(B, t, b, a.tightness);
       }
-      const F = g + Math.cos(x) * E, R = h + Math.sin(x) * E, M = E / b, T = l > 0 ? 1 - M * l * 0.5 : 1, z = v ? this.random(p, w) : 1, k = T * z, D = d * k, S = D * 1.5 / 2, _ = D / 2, $ = c + S, A = s - c - S, j = c + _, N = r - c - _, P = Math.max($, Math.min(F, A)), H = Math.max(j, Math.min(R, N));
-      let U = 0;
+      const F = g + Math.cos(E) * x, R = h + Math.sin(E) * x, M = x / b, T = l > 0 ? 1 - M * l * 0.5 : 1, z = v ? this.random(p, w) : 1, _ = T * z, D = d * _, S = D * 1.5 / 2, U = D / 2, k = c + S, A = s - c - S, j = c + U, N = r - c - U, $ = Math.max(k, Math.min(F, A)), H = Math.max(j, Math.min(R, N));
+      let P = 0;
       if (u === "random") {
-        const B = x * 180 / Math.PI % 360, W = this.random(f, m);
-        U = a.spiralType === "golden" ? W : B * 0.1 + W * 0.9;
-      } else u === "tangent" && (U = this.calculateSpiralTangent(x, E, a));
+        const B = E * 180 / Math.PI % 360, W = this.random(f, m);
+        P = a.spiralType === "golden" ? W : B * 0.1 + W * 0.9;
+      } else u === "tangent" && (P = this.calculateSpiralTangent(E, x, a));
       const Y = t - y;
       n.push({
         id: y,
-        x: P,
+        x: $,
         y: H,
-        rotation: U,
-        scale: k,
+        rotation: P,
+        scale: _,
         baseSize: D,
         zIndex: Y
       });
@@ -1557,28 +1546,28 @@ class Re {
       h[I % l]++;
     let b = 0;
     for (let I = 0; I < l; I++) {
-      const y = g[I], x = h[I];
-      for (let E = 0; E < x; E++) {
+      const y = g[I], E = h[I];
+      for (let x = 0; x < E; x++) {
         let F, R;
         if (a.distribution === "gaussian")
           F = this.gaussianRandom() * y.spread, R = this.gaussianRandom() * y.spread;
         else {
-          const U = this.random(0, Math.PI * 2), Y = this.random(0, y.spread);
-          F = Math.cos(U) * Y, R = Math.sin(U) * Y;
+          const P = this.random(0, Math.PI * 2), Y = this.random(0, y.spread);
+          F = Math.cos(P) * Y, R = Math.sin(P) * Y;
         }
         const M = 1 + a.overlap * 0.5, T = 1 + a.overlap * 0.3;
         F /= M, R /= M;
-        const z = v ? this.random(p, w) : 1, k = T * z, D = d * k;
+        const z = v ? this.random(p, w) : 1, _ = T * z, D = d * _;
         let O = y.x + F, S = y.y + R;
-        const $ = D * 1.5 / 2, A = D / 2;
-        O = Math.max(c + $, Math.min(O, s - c - $)), S = Math.max(c + A, Math.min(S, r - c - A));
-        const j = u === "random" ? this.random(f, m) : 0, P = Math.sqrt(F * F + R * R) / y.spread, H = Math.round((1 - P) * 50) + 1;
+        const k = D * 1.5 / 2, A = D / 2;
+        O = Math.max(c + k, Math.min(O, s - c - k)), S = Math.max(c + A, Math.min(S, r - c - A));
+        const j = u === "random" ? this.random(f, m) : 0, $ = Math.sqrt(F * F + R * R) / y.spread, H = Math.round((1 - $) * 50) + 1;
         n.push({
           id: b,
           x: O,
           y: S,
           rotation: j,
-          scale: k,
+          scale: _,
           baseSize: D,
           zIndex: H
         }), b++;
@@ -1661,26 +1650,26 @@ class Te {
     const n = [], { width: s, height: r } = i, a = e.fixedHeight ?? 200, c = this.config.spacing.padding ?? 50, d = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, f = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, w = m !== 1 || p !== 1, v = e.fixedHeight ?? a, l = {
       ...Wt,
       ...this.config.wave
-    }, { rows: g, amplitude: h, frequency: b, phaseShift: I, synchronization: y } = l, x = Math.ceil(t / g), R = v * 1.5 / 2, M = c + R, T = s - c - R, z = T - M, k = x > 1 ? z / (x - 1) : 0, D = c + h + v / 2, O = r - c - h - v / 2, S = O - D, _ = g > 1 ? S / (g - 1) : 0;
-    let $ = 0;
-    for (let A = 0; A < g && $ < t; A++) {
-      const j = g === 1 ? (D + O) / 2 : D + A * _;
+    }, { rows: g, amplitude: h, frequency: b, phaseShift: I, synchronization: y } = l, E = Math.ceil(t / g), R = v * 1.5 / 2, M = c + R, T = s - c - R, z = T - M, _ = E > 1 ? z / (E - 1) : 0, D = c + h + v / 2, O = r - c - h - v / 2, S = O - D, U = g > 1 ? S / (g - 1) : 0;
+    let k = 0;
+    for (let A = 0; A < g && k < t; A++) {
+      const j = g === 1 ? (D + O) / 2 : D + A * U;
       let N = 0;
       y === "offset" ? N = A * I : y === "alternating" && (N = A * Math.PI);
-      for (let P = 0; P < x && $ < t; P++) {
-        const H = x === 1 ? (M + T) / 2 : M + P * k, U = this.calculateWaveY(H, s, h, b, N), Y = H, B = j + U, W = w ? this.random(m, p) : 1, X = v * W;
+      for (let $ = 0; $ < E && k < t; $++) {
+        const H = E === 1 ? (M + T) / 2 : M + $ * _, P = this.calculateWaveY(H, s, h, b, N), Y = H, B = j + P, W = w ? this.random(m, p) : 1, X = v * W;
         let V = 0;
         d === "tangent" ? V = this.calculateRotation(H, s, h, b, N) : d === "random" && (V = this.random(u, f));
         const K = X * 1.5 / 2, lt = X / 2, nt = c + K, ot = s - c - K, ht = c + lt, dt = r - c - lt;
         n.push({
-          id: $,
+          id: k,
           x: Math.max(nt, Math.min(Y, ot)),
           y: Math.max(ht, Math.min(B, dt)),
           rotation: V,
           scale: W,
           baseSize: X,
-          zIndex: $ + 1
-        }), $++;
+          zIndex: k + 1
+        }), k++;
       }
     }
     return n;
@@ -1723,7 +1712,7 @@ class Te {
     return Math.random() * (i - t) + t;
   }
 }
-const Et = 100, Q = 100 / Math.sqrt(3), wt = [
+const xt = 100, Q = 100 / Math.sqrt(3), wt = [
   [Q / 2, 0],
   // upper-left
   [3 * Q / 2, 0],
@@ -1736,7 +1725,7 @@ const Et = 100, Q = 100 / Math.sqrt(3), wt = [
   // lower-left
   [0, 50]
   // left
-], Ae = wt[1][0] / Et, Le = wt[2][1] / Et;
+], Ae = wt[1][0] / xt, Le = wt[2][1] / xt;
 function Fe(o) {
   return {
     colStep: Ae * o,
@@ -1813,7 +1802,7 @@ class $e {
       case "radial":
         return new ve(this.config, this.imageConfig);
       case "grid":
-        return new Ee(this.config, this.imageConfig);
+        return new xe(this.config, this.imageConfig);
       case "spiral":
         return new Se(this.config, this.imageConfig);
       case "cluster":
@@ -1969,7 +1958,7 @@ const Lt = {
   },
   // Hexagon - regular hexagon (reference points imported from hexagonGeometry)
   hexagon: {
-    refHeight: Et,
+    refHeight: xt,
     points: wt
   },
   // Octagon - regular octagon
@@ -3223,7 +3212,7 @@ function ei() {
 }
 let ii = class {
   constructor(t = {}) {
-    this.fullConfig = ee(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.callbacks = t.on ?? {}, this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.prevButtonEl = null, this.nextButtonEl = null, this.prevButtonElAutoCreated = !1, this.nextButtonElAutoCreated = !1, this.animationEngine = new se(this.fullConfig.animation), this.layoutEngine = new $e({
+    this.ariaLiveEl = null, this.fullConfig = ee(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.callbacks = t.on ?? {}, this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.prevButtonEl = null, this.nextButtonEl = null, this.prevButtonElAutoCreated = !1, this.nextButtonElAutoCreated = !1, this.animationEngine = new se(this.fullConfig.animation), this.layoutEngine = new $e({
       layout: this.fullConfig.layout,
       image: this.fullConfig.image
     }), this.zoomEngine = new je(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = it(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
@@ -3313,7 +3302,7 @@ let ii = class {
         this.containerEl = this.containerRef;
       else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
         throw new Error(`Container "#${this.containerId}" not found. Ensure an element with id="${this.containerId}" exists in the DOM before calling imageCloud().`);
-      this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new bt(this.containerEl, {
+      this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.containerEl.setAttribute("role", "region"), this.containerEl.setAttribute("aria-label", "Image gallery"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new bt(this.containerEl, {
         onNext: () => this.navigateToNextImage(),
         onPrev: () => this.navigateToPreviousImage(),
         onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
@@ -3331,7 +3320,7 @@ let ii = class {
       i.stopPropagation(), this.navigateToPreviousImage();
     }), this.nextButtonEl?.addEventListener("click", (i) => {
       i.stopPropagation(), this.navigateToNextImage();
-    }));
+    })), this.ariaLiveEl = document.createElement("div"), this.ariaLiveEl.setAttribute("aria-live", "polite"), this.ariaLiveEl.setAttribute("aria-atomic", "true"), this.ariaLiveEl.className = "fbn-ic-sr-only", this.containerEl.appendChild(this.ariaLiveEl);
   }
   resolveElement(t) {
     return t instanceof HTMLElement ? t : document.getElementById(t);
@@ -3354,11 +3343,19 @@ let ii = class {
   }
   createDefaultPrevButtonElement() {
     const t = document.createElement("button");
-    return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-prev fbn-ic-hidden", t.textContent = "‹", t.setAttribute("aria-label", "Previous image"), t.setAttribute("tabindex", "-1"), this.containerEl.appendChild(t), t;
+    return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-prev fbn-ic-hidden", t.textContent = "‹", t.setAttribute("aria-label", "Previous image"), this.containerEl.appendChild(t), t;
   }
   createDefaultNextButtonElement() {
     const t = document.createElement("button");
-    return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-next fbn-ic-hidden", t.textContent = "›", t.setAttribute("aria-label", "Next image"), t.setAttribute("tabindex", "-1"), this.containerEl.appendChild(t), t;
+    return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-next fbn-ic-hidden", t.textContent = "›", t.setAttribute("aria-label", "Next image"), this.containerEl.appendChild(t), t;
+  }
+  getImageAlt(t, i) {
+    try {
+      const s = (new URL(t).pathname.split("/").pop() ?? "").replace(/\.[^.]+$/, "").replace(/[-_]/g, " ").trim();
+      return s.length > 0 ? s : `Image ${i + 1}`;
+    } catch {
+      return `Image ${i + 1}`;
+    }
   }
   setupEventListeners() {
     this.fullConfig.interaction.navigation?.keyboard !== !1 && this.containerEl.addEventListener("keydown", (t) => {
@@ -3475,15 +3472,15 @@ let ii = class {
     }, w = (l) => {
       this.containerEl && (this.containerEl.appendChild(l), this.imageElements.push(l), requestAnimationFrame(async () => {
         l.offsetWidth, l.style.opacity = this.defaultStyles.opacity ?? "1";
-        const g = parseInt(l.dataset.imageId || "0"), h = this.imageLayouts[g], b = this.entryAnimationEngine.getTiming(), I = performance.now(), y = parseFloat(l.dataset.startX || "0"), x = parseFloat(l.dataset.startY || "0"), E = parseFloat(l.dataset.endX || "0"), F = parseFloat(l.dataset.endY || "0"), R = parseFloat(l.dataset.rotation || "0"), M = parseFloat(l.dataset.scale || "1"), T = parseFloat(l.dataset.startRotation || l.dataset.rotation || "0"), z = parseFloat(l.dataset.startScale || l.dataset.scale || "1"), k = parseFloat(l.dataset.imageWidth || "0"), D = parseFloat(l.dataset.imageHeight || "0");
+        const g = parseInt(l.dataset.imageId || "0"), h = this.imageLayouts[g], b = this.entryAnimationEngine.getTiming(), I = performance.now(), y = parseFloat(l.dataset.startX || "0"), E = parseFloat(l.dataset.startY || "0"), x = parseFloat(l.dataset.endX || "0"), F = parseFloat(l.dataset.endY || "0"), R = parseFloat(l.dataset.rotation || "0"), M = parseFloat(l.dataset.scale || "1"), T = parseFloat(l.dataset.startRotation || l.dataset.rotation || "0"), z = parseFloat(l.dataset.startScale || l.dataset.scale || "1"), _ = parseFloat(l.dataset.imageWidth || "0"), D = parseFloat(l.dataset.imageHeight || "0");
         if (this.callbacks.onEntryStart && h) {
           const S = {
             element: l,
             index: g,
             totalImages: this.imageLayouts.length,
             layout: h,
-            from: { x: y, y: x, rotation: T, scale: z },
-            to: { x: E, y: F, rotation: R, scale: M },
+            from: { x: y, y: E, rotation: T, scale: z },
+            to: { x, y: F, rotation: R, scale: M },
             startTime: I,
             duration: b.duration
           };
@@ -3492,11 +3489,11 @@ let ii = class {
         if (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || l.dataset.startRotation !== l.dataset.rotation || l.dataset.startScale !== l.dataset.scale)
           fe({
             element: l,
-            startPosition: { x: y, y: x },
-            endPosition: { x: E, y: F },
+            startPosition: { x: y, y: E },
+            endPosition: { x, y: F },
             pathConfig: this.entryAnimationEngine.getPathConfig(),
             duration: b.duration,
-            imageWidth: k,
+            imageWidth: _,
             imageHeight: D,
             rotation: R,
             scale: M,
@@ -3504,20 +3501,20 @@ let ii = class {
             startRotation: T,
             scaleConfig: this.entryAnimationEngine.getScaleConfig(),
             startScale: z,
-            onProgress: this.callbacks.onEntryProgress && h ? (S, _, $) => {
+            onProgress: this.callbacks.onEntryProgress && h ? (S, U, k) => {
               const A = {
                 element: l,
                 index: g,
                 totalImages: this.imageLayouts.length,
                 layout: h,
-                from: { x: y, y: x, rotation: T, scale: z },
-                to: { x: E, y: F, rotation: R, scale: M },
+                from: { x: y, y: E, rotation: T, scale: z },
+                to: { x, y: F, rotation: R, scale: M },
                 startTime: I,
                 duration: b.duration,
                 progress: S,
                 rawProgress: S,
-                elapsed: _,
-                current: $
+                elapsed: U,
+                current: k
               };
               this.callbacks.onEntryProgress(A);
             } : void 0,
@@ -3538,9 +3535,9 @@ let ii = class {
         else {
           const S = l.dataset.finalTransform || "";
           if (l.style.transform = S, this.callbacks.onEntryComplete && h) {
-            const _ = ($) => {
-              if ($.propertyName !== "transform") return;
-              l.removeEventListener("transitionend", _);
+            const U = (k) => {
+              if (k.propertyName !== "transform") return;
+              l.removeEventListener("transitionend", U);
               const A = {
                 element: l,
                 index: g,
@@ -3551,7 +3548,7 @@ let ii = class {
               };
               this.callbacks.onEntryComplete(A);
             };
-            l.addEventListener("transitionend", _);
+            l.addEventListener("transitionend", U);
           }
         }
         if (this.fullConfig.config.debug?.enabled && g < 3) {
@@ -3608,7 +3605,7 @@ let ii = class {
       h.style.left = `${b - 6}px`, h.style.top = `${I - 6}px`, h.title = `Image ${g}: center (${Math.round(b)}, ${Math.round(I)})`, this.containerEl.appendChild(h);
     })), t.forEach((l, g) => {
       const h = document.createElement("img");
-      h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(g), h.dataset.createdFlag = "true";
+      h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), h.alt = this.getImageAlt(l, g), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(g);
       const b = s[g];
       h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${b.x}px`, h.style.top = `${b.y}px`, b.zIndex && (h.style.zIndex = String(b.zIndex)), et(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
         if (this.hoveredImage = { element: h, layout: b }, !this.zoomEngine.isInvolved(h)) {
@@ -3633,10 +3630,10 @@ let ii = class {
       }), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
         if (n !== this.loadGeneration)
           return;
-        const y = h.naturalWidth / h.naturalHeight, x = i * y;
-        h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${g}] Called with imageHeight=${i}, renderedWidth=${x}`), h.style.width = `${x}px`, h.cachedRenderedWidth = x, h.aspectRatio = y, st(h, this.fullConfig.styling?.default, i, x);
-        const E = { x: b.x, y: b.y }, F = { width: x, height: i }, R = this.entryAnimationEngine.calculateStartPosition(
-          E,
+        const y = h.naturalWidth / h.naturalHeight, E = i * y;
+        h.style.width = `${E}px`, h.cachedRenderedWidth = E, h.aspectRatio = y, st(h, this.fullConfig.styling?.default, i, E);
+        const x = { x: b.x, y: b.y }, F = { width: E, height: i }, R = this.entryAnimationEngine.calculateStartPosition(
+          x,
           F,
           e,
           g,
@@ -3644,27 +3641,27 @@ let ii = class {
         ), M = this.entryAnimationEngine.calculateStartRotation(b.rotation), T = this.entryAnimationEngine.calculateStartScale(b.scale), z = this.entryAnimationEngine.buildFinalTransform(
           b.rotation,
           b.scale,
-          x,
+          E,
           i
-        ), k = this.entryAnimationEngine.buildStartTransform(
+        ), _ = this.entryAnimationEngine.buildStartTransform(
           R,
-          E,
+          x,
           b.rotation,
           b.scale,
-          x,
+          E,
           i,
           M,
           T
         );
         if (this.fullConfig.config.debug?.enabled && g < 3 && console.log(`Image ${g}:`, {
-          finalPosition: E,
+          finalPosition: x,
           imageSize: F,
           left: b.x,
           top: b.y,
           finalTransform: z,
-          renderedWidth: x,
+          renderedWidth: E,
           renderedHeight: i
-        }), h.style.transform = k, h.dataset.finalTransform = z, h.dataset.startX = String(R.x), h.dataset.startY = String(R.y), h.dataset.endX = String(E.x), h.dataset.endY = String(E.y), h.dataset.imageWidth = String(x), h.dataset.imageHeight = String(i), h.dataset.rotation = String(b.rotation), h.dataset.scale = String(b.scale), h.dataset.startRotation = String(M), h.dataset.startScale = String(T), a++, this.callbacks.onImageLoaded) {
+        }), h.style.transform = _, h.dataset.finalTransform = z, h.dataset.startX = String(R.x), h.dataset.startY = String(R.y), h.dataset.endX = String(x.x), h.dataset.endY = String(x.y), h.dataset.imageWidth = String(E), h.dataset.imageHeight = String(i), h.dataset.rotation = String(b.rotation), h.dataset.scale = String(b.scale), h.dataset.startRotation = String(M), h.dataset.startScale = String(T), a++, this.callbacks.onImageLoaded) {
           const D = {
             element: h,
             url: l,
@@ -3706,22 +3703,22 @@ let ii = class {
       h.onerror = () => I(), (async () => {
         let y = l;
         if (this.callbacks.onBeforeImageLoad) {
-          const x = { url: l, index: g, totalImages: t.length }, E = await this.callbacks.onBeforeImageLoad(x);
-          if (E)
-            if (E.fetch !== void 0) {
-              const F = E.url ?? l;
+          const E = { url: l, index: g, totalImages: t.length }, x = await this.callbacks.onBeforeImageLoad(E);
+          if (x)
+            if (x.fetch !== void 0) {
+              const F = x.url ?? l;
               try {
-                const M = await (await fetch(F, E.fetch)).blob(), T = URL.createObjectURL(M);
+                const M = await (await fetch(F, x.fetch)).blob(), T = URL.createObjectURL(M);
                 y = T;
                 const z = h.onload;
-                h.onload = (k) => {
-                  URL.revokeObjectURL(T), z?.call(h, k);
+                h.onload = (_) => {
+                  URL.revokeObjectURL(T), z?.call(h, _);
                 };
               } catch {
                 I();
                 return;
               }
-            } else E.url && (y = E.url);
+            } else x.url && (y = x.url);
         }
         d === 0 && (d = performance.now()), f.set(g, performance.now()), h.src = y;
       })();
@@ -3734,11 +3731,15 @@ let ii = class {
       height: this.containerEl.offsetHeight
     };
     if (e)
-      await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.hideFocusIndicator();
+      await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.ariaLiveEl && (this.ariaLiveEl.textContent = ""), this.hideFocusIndicator();
     else {
       this.idleAnimationEngine?.pauseForImage(t);
       const s = t.dataset.imageId;
-      if (this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), this.containerEl?.focus({ preventScroll: !0 }), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex), this.showNavButtons(), this.showFocusIndicator(), this.callbacks.onImageFocus && this.currentFocusIndex !== null) {
+      if (this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), this.containerEl?.focus({ preventScroll: !0 }), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex), this.showNavButtons(), this.ariaLiveEl && this.currentFocusIndex !== null) {
+        const r = t.alt, a = this.imageLayouts.length;
+        this.ariaLiveEl.textContent = `Image ${this.currentFocusIndex + 1} of ${a}: ${r}`;
+      }
+      if (this.showFocusIndicator(), this.callbacks.onImageFocus && this.currentFocusIndex !== null) {
         const r = this.imageLoader.imageURLs(), a = {
           element: t,
           index: this.currentFocusIndex,