@vielzeug/refine 1.7.0 → 2.0.0

package/dist/carousel.js

@@ -1,190 +1,138 @@
-import { warn as e } from "./_dev.js";
-import { createSwipeControl as t } from "./headless/swipe.js";
-import { announce as n } from "./headless/announcer.js";
-import r from "./content/carousel/carousel.css.js";
-import { CAROUSEL_SLIDE_TAG as i } from "./content/carousel/carousel-slide.js";
-import { bind as a, define as o, getHost as s, html as c, onMounted as l, prop as u, useEmit as d } from "@vielzeug/ore";
-import { computed as f, signal as p, watch as m } from "@vielzeug/ripple";
+import { createSwipeControl as e } from "./core/swipe.js";
+import { announce as t } from "./core/announcer.js";
+import n from "./content/carousel/carousel.css.js";
+import { CAROUSEL_SLIDE_TAG as r } from "./content/carousel/carousel-slide.js";
+import { bind as i, define as a, getHost as o, html as s, onMounted as c, prop as l, useEmit as u } from "@vielzeug/ore";
+import { computed as d, signal as f } from "@vielzeug/ripple";
+import { watch as p } from "@vielzeug/ripple/watch";
 //#region src/content/carousel/carousel.ts
-var h = "ore-carousel", g = (e, t) => {
+var m = "ore-carousel", h = (e, t) => {
 	let n = e.length;
 	e.forEach((e, r) => {
 		let i = r === t;
 		e.toggleAttribute("data-active", i), e.setAttribute("aria-hidden", String(!i)), e.setAttribute("aria-label", e.getAttribute("aria-label") ?? `Slide ${r + 1} of ${n}`), e.removeAttribute("data-gallery-visible"), e.toggleAttribute("data-before", r < t), e.toggleAttribute("data-after", r > t);
 	});
-}, _ = (e, t) => {
+}, g = (e, t) => {
 	let n = e.length;
 	e.forEach((e, r) => {
 		let i = r === t;
 		e.toggleAttribute("data-active", i), e.setAttribute("aria-hidden", String(!i)), e.setAttribute("aria-label", e.getAttribute("aria-label") ?? `Slide ${r + 1} of ${n}`), e.removeAttribute("data-gallery-visible"), e.removeAttribute("data-before"), e.removeAttribute("data-after");
 	});
-}, v = (e, t) => {
+}, _ = (e, t) => {
 	let n = e.length;
 	e.forEach((e, r) => {
 		let i = r === t, a = t > 0 && r === t - 1, o = t < n - 1 && r === t + 1;
 		e.toggleAttribute("data-active", i), e.setAttribute("aria-hidden", String(!i)), e.setAttribute("aria-label", e.getAttribute("aria-label") ?? `Slide ${r + 1} of ${n}`), e.removeAttribute("data-before"), e.removeAttribute("data-after"), e.toggleAttribute("data-gallery-visible", i || a || o);
 	});
-}, y = (e, t) => {
-	e.forEach((e, n) => {
-		e.toggleAttribute("data-active", n === t), e.setAttribute("aria-hidden", "false"), e.removeAttribute("data-before"), e.removeAttribute("data-after"), e.removeAttribute("data-gallery-visible");
-	});
 };
-o(h, {
+a(m, {
 	props: {
-		autoplay: u.bool(!1),
-		"autoplay-interval": u.number(5e3),
-		color: u.string(),
-		label: u.string("Carousel"),
-		loop: u.bool(!0),
-		"marquee-duration": u.number(10),
-		orientation: u.string("horizontal"),
-		"show-controls": u.bool(!0),
-		"show-indicators": u.bool(!0),
-		"slide-index": u.number(0),
-		variant: u.string("default")
+		autoplay: l.bool(!1),
+		"autoplay-interval": l.number(5e3),
+		color: l.string(),
+		label: l.string("Carousel"),
+		loop: l.bool(!0),
+		orientation: l.string("horizontal"),
+		"show-controls": l.bool(!0),
+		"show-indicators": l.bool(!0),
+		"slide-index": l.number(0),
+		variant: l.string("default")
 	},
-	setup(r) {
-		let i = s(), o = d(), u = p(r["slide-index"].value ?? 0), h = f(() => r.variant.value === "marquee"), b = null, x = Array.from(i.querySelectorAll(":scope > ore-carousel-slide")), S = p(x.length), C = () => {
-			x = Array.from(i.querySelectorAll(":scope > ore-carousel-slide")), S.value = x.length;
-		}, w = f(() => r.orientation.value !== "vertical"), T = f(() => r.loop.value !== !1), E = f(() => r["show-controls"].value !== !1), D = f(() => r["show-indicators"].value !== !1), O = f(() => T.value || u.value > 0), k = f(() => T.value || u.value < S.value - 1), A = null, j = (e, t = !0) => {
-			let r = S.value;
-			if (r === 0) return;
-			let a = T.value ? (e % r + r) % r : Math.max(0, Math.min(e, r - 1));
-			a !== u.value && (u.value = a, i.setAttribute("slide-index", String(a)), o("change", { index: a }), A?.seekTo(a, x), t && n(x[a]?.getAttribute("aria-label") ?? `Slide ${a + 1} of ${r}`));
-		}, M = () => j(u.value - 1), N = () => j(u.value + 1);
-		m(r["slide-index"], (e) => {
-			typeof e == "number" && e !== u.value && j(e, !1);
+	setup(n) {
+		let r = o(), a = u(), l = f(n["slide-index"].value ?? 0), m = null, v = Array.from(r.querySelectorAll(":scope > ore-carousel-slide")), y = f(v.length), b = () => {
+			v = Array.from(r.querySelectorAll(":scope > ore-carousel-slide")), y.value = v.length;
+		}, x = d(() => n.orientation.value !== "vertical"), S = d(() => n.loop.value !== !1), C = d(() => n["show-controls"].value !== !1), w = d(() => n["show-indicators"].value !== !1), T = d(() => S.value || l.value > 0), E = d(() => S.value || l.value < y.value - 1), D = (e, n = !0) => {
+			let i = y.value;
+			if (i === 0) return;
+			let o = S.value ? (e % i + i) % i : Math.max(0, Math.min(e, i - 1));
+			o !== l.value && (l.value = o, r.setAttribute("slide-index", String(o)), a("change", { index: o }), n && t(v[o]?.getAttribute("aria-label") ?? `Slide ${o + 1} of ${i}`));
+		}, O = () => D(l.value - 1), k = () => D(l.value + 1);
+		p(n["slide-index"], (e) => {
+			typeof e == "number" && e !== l.value && D(e, !1);
 		});
-		let P = () => {
-			let e = r.variant.value ?? "default", t = r.orientation.value ?? "horizontal";
-			x.forEach((n) => {
+		let A = () => {
+			let e = n.variant.value ?? "default", t = n.orientation.value ?? "horizontal";
+			v.forEach((n) => {
 				n.setAttribute("data-variant", e), n.setAttribute("data-orientation", t);
 			});
 		};
-		m(f(() => ({
-			orientation: r.orientation.value,
-			variant: r.variant.value
-		})), P, { immediate: !0 });
-		let F = {
-			default: g,
-			fade: g,
-			filmstrip: _,
-			gallery: v,
-			marquee: y
-		}, I = () => {
-			let e = r.variant.value ?? "default";
-			F[e](x, u.value);
+		p(d(() => ({
+			orientation: n.orientation.value,
+			variant: n.variant.value
+		})), A, { immediate: !0 });
+		let j = {
+			default: h,
+			fade: h,
+			filmstrip: g,
+			gallery: _
+		}, M = () => {
+			let e = n.variant.value ?? "default";
+			j[e](v, l.value);
 		};
-		m(u, I, { immediate: !0 });
-		let L = () => {
-			b === null && (b = setInterval(N, r["autoplay-interval"].value ?? 5e3));
-		}, R = () => {
-			b !== null && (clearInterval(b), b = null);
+		p(l, M, { immediate: !0 });
+		let N = () => {
+			m === null && (m = setInterval(k, n["autoplay-interval"].value ?? 5e3));
+		}, P = () => {
+			m !== null && (clearInterval(m), m = null);
 		};
-		m(f(() => ({
-			enabled: r.autoplay.value,
-			interval: r["autoplay-interval"].value
+		p(d(() => ({
+			enabled: n.autoplay.value,
+			interval: n["autoplay-interval"].value
 		})), ({ enabled: e }) => {
-			R(), e && L();
+			P(), e && N();
 		});
-		let z = (e) => {
-			let t = w.value, n = t ? "ArrowLeft" : "ArrowUp", r = t ? "ArrowRight" : "ArrowDown";
-			e.key === n ? (e.preventDefault(), M()) : e.key === r ? (e.preventDefault(), N()) : e.key === "Home" ? (e.preventDefault(), j(0)) : e.key === "End" && (e.preventDefault(), j(S.value - 1));
-		}, B = t({
-			axis: () => w.value ? "x" : "y",
+		let F = (e) => {
+			let t = x.value, n = t ? "ArrowLeft" : "ArrowUp", r = t ? "ArrowRight" : "ArrowDown";
+			e.key === n ? (e.preventDefault(), O()) : e.key === r ? (e.preventDefault(), k()) : e.key === "Home" ? (e.preventDefault(), D(0)) : e.key === "End" && (e.preventDefault(), D(y.value - 1));
+		}, I = e({
+			axis: () => x.value ? "x" : "y",
 			onCommit: (e) => {
-				e.distance < 0 ? N() : M();
+				e.distance < 0 ? k() : O();
 			},
 			threshold: () => 48
 		});
-		a({
+		i({
 			attr: {
-				"aria-label": () => r.label.value ?? "Carousel",
+				"aria-label": () => n.label.value ?? "Carousel",
 				"aria-roledescription": () => "carousel",
-				orientation: () => r.orientation.value ?? "horizontal",
+				orientation: () => n.orientation.value ?? "horizontal",
 				role: () => "region",
-				style: () => `touch-action:${w.value ? "pan-y" : "pan-x"}`,
-				variant: () => r.variant.value ?? "default"
+				style: () => `touch-action:${x.value ? "pan-y" : "pan-x"}`,
+				variant: () => n.variant.value ?? "default"
 			},
 			on: {
 				focusin: () => {
-					R();
+					P();
 				},
 				focusout: () => {
-					r.autoplay.value && L();
+					n.autoplay.value && N();
 				},
-				keydown: z,
-				pointercancel: (e) => B.handlePointerCancel(e),
+				keydown: F,
+				pointercancel: (e) => I.handlePointerCancel(e),
 				pointerdown: (e) => {
-					e.composedPath().some((e) => e instanceof HTMLElement && (e.tagName === "BUTTON" || e.tagName === "ORE-BUTTON" || e.tagName === "ORE-PROGRESS")) || B.handlePointerDown(e);
+					e.composedPath().some((e) => e instanceof HTMLElement && (e.tagName === "BUTTON" || e.tagName === "ORE-BUTTON" || e.tagName === "ORE-PROGRESS")) || I.handlePointerDown(e);
 				},
 				pointerenter: () => {
-					R();
+					P();
 				},
 				pointerleave: () => {
-					r.autoplay.value && L();
+					n.autoplay.value && N();
 				},
-				pointermove: (e) => B.handlePointerMove(e),
-				pointerup: (e) => B.handlePointerUp(e)
+				pointermove: (e) => I.handlePointerMove(e),
+				pointerup: (e) => I.handlePointerUp(e)
 			}
-		});
-		let V = (t) => {
-			let n = r.orientation.value ?? "horizontal", a = n !== "vertical";
-			h.value && r.loop.value === !1 && e("ore-carousel: loop=\"false\" on the marquee variant stops the scroll animation rather than disabling navigation wrap-around. Navigation in marquee always loops. This is different from loop=\"false\" on other variants.");
-			let o = x.map((e) => {
-				let r = e.cloneNode(!0);
-				return r.setAttribute("aria-hidden", "true"), r.setAttribute("data-variant", "marquee"), r.setAttribute("data-orientation", n), r.setAttribute("data-marquee-clone", ""), t.appendChild(r), r;
-			});
-			t.style.setProperty("--_marquee-duration", `${r["marquee-duration"].value ?? 10}s`), T.value || t.style.setProperty("animation-iteration-count", "1");
-			let s = !1, c = () => {
-				s = !0, t.style.setProperty("animation-play-state", "paused");
-			}, l = () => {
-				s = !1, t.style.removeProperty("animation-play-state");
-			};
-			i.addEventListener("mouseenter", c), i.addEventListener("mouseleave", l);
-			let u = null;
-			return {
-				cleanup: () => {
-					u !== null && clearTimeout(u), u = null, o.forEach((e) => e.remove()), t.style.removeProperty("transition"), t.style.removeProperty("transform"), t.style.removeProperty("animation"), t.style.removeProperty("--_marquee-duration"), t.style.removeProperty("animation-iteration-count"), t.style.removeProperty("animation-delay"), t.style.removeProperty("animation-play-state"), i.removeEventListener("mouseenter", c), i.removeEventListener("mouseleave", l);
-				},
-				seekTo: (e, n) => {
-					let o = n[e];
-					if (!o) return;
-					let c = a ? o.offsetLeft : o.offsetTop, l = a ? t.scrollWidth / 2 : t.scrollHeight / 2, d = r["marquee-duration"].value ?? 10, f = l > 0 ? -(c / l * d) : 0;
-					if (u !== null && (clearTimeout(u), u = null, t.style.removeProperty("transition")), l === 0) {
-						t.style.setProperty("animation-delay", `${f}s`), s || t.style.removeProperty("animation-play-state");
-						return;
-					}
-					let p = parseFloat(getComputedStyle(i).getPropertyValue("--carousel-transition-duration") || "0.35") * 1e3 || 350, m = a ? `translateX(-${c}px)` : `translateY(-${c}px)`;
-					t.getBoundingClientRect();
-					let h = getComputedStyle(t).transform.match(/matrix\(([^)]+)\)/)?.[1].split(",").map(Number), g = a ? h?.[4] ?? 0 : h?.[5] ?? 0, _ = a ? `translateX(${g}px)` : `translateY(${g}px)`;
-					t.style.setProperty("animation", "none"), t.style.setProperty("transform", _), requestAnimationFrame(() => {
-						t.style.setProperty("transition", `transform ${p}ms ease-in-out`), t.style.setProperty("transform", m), u = setTimeout(() => {
-							u = null, t.style.removeProperty("transition"), t.style.removeProperty("transform"), t.style.removeProperty("animation"), t.style.setProperty("animation-delay", `${f}s`), s && t.style.setProperty("animation-play-state", "paused");
-						}, p);
-					});
-				}
-			};
-		};
-		l(() => {
-			let e = i.shadowRoot, t = e.querySelector(".track"), n = e.querySelector("slot"), a = () => {
-				C(), P(), I(), h.value && (A?.cleanup(), A = V(t));
+		}), c(() => {
+			let e = r.shadowRoot.querySelector("slot"), t = () => {
+				b(), A(), M();
 			};
-			return n.addEventListener("slotchange", a), m(f(() => ({
-				duration: r["marquee-duration"].value,
-				isMarquee: h.value,
-				loop: r.loop.value,
-				orientation: r.orientation.value
-			})), ({ isMarquee: e }) => {
-				A?.cleanup(), A = e ? V(t) : null;
-			}, { immediate: !0 }), r.autoplay.value && L(), () => {
-				R(), B.dispose(), n.removeEventListener("slotchange", a), A?.cleanup();
+			return e.addEventListener("slotchange", t), n.autoplay.value && N(), () => {
+				P(), I.dispose(), e.removeEventListener("slotchange", t);
 			};
 		});
-		let H = (e) => {
-			(i.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus();
-		}, U = (e, t) => {
-			let n = S.value, r;
+		let L = (e) => {
+			(r.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus();
+		}, R = (e, t) => {
+			let n = y.value, r;
 			switch (e.key) {
 				case "ArrowDown":
 				case "ArrowRight":
@@ -202,79 +150,87 @@ o(h, {
 					break;
 				default: return;
 			}
-			e.preventDefault(), j(r), H(r);
-		}, W = () => E.value ? c`<div class="controls" part="controls">
-            <ore-button
-              class="nav-btn prev-btn"
-              part="prev-btn"
-              variant="ghost"
-              :color=${() => r.color.value}
-              rounded
-              icon-only
-              aria-label="Previous slide"
-              :disabled=${() => O.value ? void 0 : !0}
-              @click=${(e) => {
-			e.stopPropagation(), M();
+			e.preventDefault(), D(r), L(r);
+		}, z = () => C.value ? s`
+            <div class="controls" part="controls">
+              <ore-button
+                class="nav-btn prev-btn"
+                part="prev-btn"
+                variant="ghost"
+                color=${() => n.color.value}
+                rounded
+                icon-only
+                aria-label="Previous slide"
+                disabled=${() => !T.value || void 0}
+                @click=${(e) => {
+			e.stopPropagation(), O();
 		}}>
-              <ore-icon
-                :name=${() => w.value ? "chevron-left" : "chevron-up"}
-                size="16"
-                stroke-width="2"
-                aria-hidden="true"></ore-icon>
-            </ore-button>
-            <ore-button
-              class="nav-btn next-btn"
-              part="next-btn"
-              variant="ghost"
-              :color=${() => r.color.value}
-              rounded
-              icon-only
-              aria-label="Next slide"
-              :disabled=${() => k.value ? void 0 : !0}
-              @click=${(e) => {
-			e.stopPropagation(), N();
+                <ore-icon
+                  name=${() => x.value ? "chevron-left" : "chevron-up"}
+                  size="16"
+                  stroke-width="2"
+                  aria-hidden="true"></ore-icon>
+              </ore-button>
+              <ore-button
+                class="nav-btn next-btn"
+                part="next-btn"
+                variant="ghost"
+                color=${() => n.color.value}
+                rounded
+                icon-only
+                aria-label="Next slide"
+                disabled=${() => !E.value || void 0}
+                @click=${(e) => {
+			e.stopPropagation(), k();
 		}}>
-              <ore-icon
-                :name=${() => w.value ? "chevron-right" : "chevron-down"}
-                size="16"
-                stroke-width="2"
-                aria-hidden="true"></ore-icon>
-            </ore-button>
-          </div>` : c``;
-		return c`
-      <div class="track" part="track" :aria-live=${() => r.autoplay.value ? "off" : "polite"}>
+                <ore-icon
+                  name=${() => x.value ? "chevron-right" : "chevron-down"}
+                  size="16"
+                  stroke-width="2"
+                  aria-hidden="true"></ore-icon>
+              </ore-button>
+            </div>
+          ` : s``;
+		return s`
+      <div class="track" part="track" aria-live=${() => n.autoplay.value ? "off" : "polite"}>
         <slot></slot>
       </div>
 
-      ${() => D.value && S.value > 1 && !h.value ? c`<div class="indicators" part="indicators" role="tablist" aria-label="Slide indicators">
-              ${() => Array.from({ length: S.value }, (e, t) => c`<button
-                      type="button"
-                      role="tab"
-                      data-index="${t}"
-                      :class=${() => `indicator${!h.value && t === u.value ? " indicator-active" : ""}`}
-                      :aria-selected=${() => String(!h.value && t === u.value)}
-                      :tabindex=${() => !h.value && t === u.value ? "0" : "-1"}
-                      aria-label="${`Go to slide ${t + 1}`}"
-                      @click=${() => j(t)}
-                      @keydown=${(e) => U(e, t)}>
-                      <ore-progress
-                        aria-hidden="true"
-                        tabindex="-1"
-                        :color=${() => r.color.value}
-                        :type=${() => w.value ? "linear" : "vertical"}
-                        :value=${() => !h.value && t === u.value ? 100 : 0}
-                        :style=${() => {
-			let e = w.value ? "carousel-fill" : "carousel-fill-v";
-			return `--carousel-timeout:${r["autoplay-interval"].value ?? 5e3};--carousel-animation-name:${!h.value && t === u.value && r.autoplay.value ? e : "none"}`;
+      ${() => w.value && y.value > 1 ? s`
+              <div class="indicators" part="indicators" role="tablist" aria-label="Slide indicators">
+                ${() => Array.from({ length: y.value }, (e, t) => s`
+                      <button
+                        type="button"
+                        role="tab"
+                        data-index="${t}"
+                        class=${() => `indicator${t === l.value ? " indicator-active" : ""}`}
+                        aria-selected=${() => String(t === l.value)}
+                        tabindex=${() => t === l.value ? "0" : "-1"}
+                        aria-label="${`Go to slide ${t + 1}`}"
+                        @click=${() => D(t)}
+                        @keydown=${(e) => R(e, t)}>
+                        <ore-progress
+                          aria-hidden="true"
+                          tabindex="-1"
+                          color=${() => n.color.value}
+                          type=${() => x.value ? "linear" : "vertical"}
+                          value=${() => t === l.value ? 100 : 0}
+                          style=${() => {
+			let e = x.value ? "carousel-fill" : "carousel-fill-v";
+			return `--carousel-timeout:${n["autoplay-interval"].value ?? 5e3};--carousel-animation-name:${t === l.value && n.autoplay.value ? e : "none"}`;
 		}}></ore-progress>
-                    </button>`)}
-              ${W}
-            </div>` : c`${W}`}
+                      </button>
+                    `)}
+                ${z}
+              </div>
+            ` : s`
+              ${z}
+            `}
     `;
 	},
-	styles: [r]
+	styles: [n]
 });
 //#endregion
-export { i as CAROUSEL_SLIDE_TAG, h as CAROUSEL_TAG };
+export { r as CAROUSEL_SLIDE_TAG, m as CAROUSEL_TAG };
 
 //# sourceMappingURL=carousel.js.map

package/dist/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport { warn } from '../../_dev';\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { announce, createSwipeControl } from '../../headless';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport type CarouselOrientation = 'horizontal' | 'vertical';\nexport type CarouselVariant = 'default' | 'fade' | 'filmstrip' | 'gallery' | 'marquee';\n\nexport type OreCarouselEvents = {\n  /** Fired when the active slide changes. */\n  change: { index: number };\n};\n\nexport type OreCarouselProps = {\n  /**\n   * Whether to advance slides automatically. Defaults to `false`.\n   * Opt in explicitly — autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.\n   */\n  autoplay?: boolean;\n  /** Interval in milliseconds between automatic slide advances. Defaults to `5000`. */\n  'autoplay-interval'?: number;\n  /** Theme color passed to the prev/next navigation buttons. */\n  color?: ThemeColor;\n  /** Accessible label for the carousel region. */\n  label?: string;\n  /**\n   * Whether the carousel loops from the last slide back to the first. Defaults to `true`.\n   *\n   * > **Note for `marquee` variant:** `loop=\"false\"` runs the scroll animation once then stops,\n   * > rather than controlling navigation wrap-around (marquee navigation always loops).\n   * > If you intend to stop wrapping navigation in another variant, use `loop` there as expected.\n   */\n  loop?: boolean;\n  /**\n   * Duration in seconds for one full marquee loop cycle. Defaults to `10`.\n   * Shorter values = faster scroll; longer values = slower scroll.\n   */\n  'marquee-duration'?: number;\n  /** Carousel orientation. Defaults to `'horizontal'`. */\n  orientation?: CarouselOrientation;\n  /** Show next/prev navigation buttons. Defaults to `true`. */\n  'show-controls'?: boolean;\n  /** Show dot/indicator navigation. Defaults to `true`. */\n  'show-indicators'?: boolean;\n  /** Index of the currently active slide (zero-based). Defaults to `0`. */\n  'slide-index'?: number;\n  /**\n   * Layout variant.\n   * - `'default'`   — slides translate in/out (default)\n   * - `'fade'`      — slides crossfade; no movement\n   * - `'filmstrip'` — all slides visible side-by-side; active expands\n   * - `'gallery'`   — active slide fills the majority; adjacent slides show as thumbnails\n   * - `'marquee'`   — continuous auto-scroll ticker; `loop` controls whether it repeats\n   */\n  variant?: CarouselVariant;\n};\n\n// ── Internal marquee instance type ────────────────────────────────────────────\n\ntype MarqueeInstance = {\n  cleanup: () => void;\n  seekTo: (index: number, slideSnapshot: HTMLElement[]) => void;\n};\n\n/**\n * An accessible, keyboard-navigable carousel / slideshow with optional\n * autoplay, swipe support, and indicator dots.\n *\n * Place `<ore-carousel-slide>` elements as direct children.\n *\n * @element ore-carousel\n * @element ore-carousel-slide - Child element for individual slides\n *\n * @attr {string}  color             - Theme color for navigation buttons: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} autoplay          - Advance slides automatically (default false)\n * @attr {number}  autoplay-interval - Milliseconds between automatic advances (default 5000)\n * @attr {string}  label             - Accessible label for the carousel region\n * @attr {boolean} loop              - Loop from last slide to first (default true); in marquee mode: repeat vs run-once\n * @attr {string}  orientation       - 'horizontal' (default) | 'vertical'\n * @attr {string}  variant           - 'default' | 'fade' | 'filmstrip' | 'gallery' | 'marquee'\n * @attr {boolean} show-controls     - Show prev/next buttons (default true)\n * @attr {boolean} show-indicators   - Show indicator dots (default true)\n * @attr {number}  slide-index       - Active slide index (zero-based, default 0)\n * @attr {number}  marquee-duration  - Loop cycle duration in seconds for marquee variant (default 10)\n *\n * @fires change - Fires when the active slide changes. detail: { index: number }\n *\n * @slot - Place `<ore-carousel-slide>` elements here\n *\n * @cssprop --carousel-bg                  - Slide area background\n * @cssprop --carousel-radius              - Border radius of the carousel\n * @cssprop --carousel-dot-bg              - Inactive indicator color (default: var(--color-contrast-300))\n * @cssprop --carousel-dot-active-bg       - Active indicator / fill color (default: var(--color-contrast-700))\n * @cssprop --carousel-transition-duration - Slide transition duration (default 0.35s; 0s under prefers-reduced-motion). Also controls marquee seek animation duration.\n * @cssprop --carousel-min-height          - Minimum height when no explicit height is set (default 240px)\n * @cssprop --carousel-filmstrip-inactive  - Width (horizontal) or height (vertical) of inactive slides in filmstrip mode\n * @cssprop --carousel-filmstrip-gap       - Gap between slides in filmstrip mode\n * @cssprop --carousel-gallery-thumbnail   - Width (horizontal) or height (vertical) of thumbnail slides in gallery mode (default var(--size-24))\n * @cssprop --carousel-gallery-gap         - Gap between slides in gallery mode (default var(--size-2))\n * @cssprop --carousel-marquee-gap         - Gap between slides in marquee mode (default var(--size-4))\n *\n * @part track      - The scrolling slide track element\n * @part controls   - The prev/next button container\n * @part indicators - The indicator dots container\n * @part prev-btn   - The previous-slide button\n * @part next-btn   - The next-slide button\n *\n * @example\n * ```html\n * <ore-carousel label=\"Product highlights\" loop>\n *   <ore-carousel-slide>Slide 1</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 2</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 3</ore-carousel-slide>\n * </ore-carousel>\n * ```\n */\nexport const CAROUSEL_TAG = 'ore-carousel' as const;\n\n// ── Slide-state sync helpers ──────────────────────────────────────────────────\n// Each function handles exactly one variant's attribute bookkeeping.\n// Called from a dispatch table in syncActiveState.\n\nconst syncDefaultSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.toggleAttribute('data-before', i < current);\n    slide.toggleAttribute('data-after', i > current);\n  });\n};\n\nconst syncFilmstripSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n  });\n};\n\nconst syncGallerySlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n    const isPrev = current > 0 && i === current - 1;\n    const isNext = current < count - 1 && i === current + 1;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.toggleAttribute('data-gallery-visible', active || isPrev || isNext);\n  });\n};\n\nconst syncMarqueeSlides = (slides: HTMLElement[], current: number): void => {\n  slides.forEach((slide, i) => {\n    slide.toggleAttribute('data-active', i === current);\n    slide.setAttribute('aria-hidden', 'false');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.removeAttribute('data-gallery-visible');\n  });\n};\n\n// ── ore-carousel ──────────────────────────────────────────────────────────────\n\ndefine<OreCarouselProps>(CAROUSEL_TAG, {\n  props: {\n    autoplay: prop.bool(false),\n    'autoplay-interval': prop.number(5000),\n    color: prop.string<ThemeColor>(),\n    label: prop.string('Carousel'),\n    loop: prop.bool(true),\n    'marquee-duration': prop.number(10),\n    orientation: prop.string<CarouselOrientation>('horizontal'),\n    'show-controls': prop.bool(true),\n    'show-indicators': prop.bool(true),\n    'slide-index': prop.number(0),\n    variant: prop.string<CarouselVariant>('default'),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCarouselEvents>();\n\n    // ── State ────────────────────────────────────────────────────────────────\n\n    const activeIndex = signal<number>(props['slide-index'].value ?? 0);\n    const isMarquee = computed(() => props.variant.value === 'marquee');\n    let autoplayTimer: ReturnType<typeof setInterval> | null = null;\n\n    // Slide cache — populated immediately, refreshed on slotchange.\n    let slides: HTMLElement[] = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n    const slideCount = signal(slides.length);\n\n    const refreshSlides = (): void => {\n      slides = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n      slideCount.value = slides.length;\n    };\n\n    const isHorizontal = computed(() => props.orientation.value !== 'vertical');\n    const looping = computed(() => props.loop.value !== false);\n    const showControls = computed(() => props['show-controls'].value !== false);\n    const showIndicators = computed(() => props['show-indicators'].value !== false);\n\n    const canGoPrev = computed(() => looping.value || activeIndex.value > 0);\n    const canGoNext = computed(() => looping.value || activeIndex.value < slideCount.value - 1);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\n\n    // marqueeInstance is set in onMounted; accessed here via module-level ref\n    // stored on the setup closure. No separate side-channel variable needed.\n    let marqueeInstance: MarqueeInstance | null = null;\n\n    const goTo = (index: number, announce_: boolean = true): void => {\n      const count = slideCount.value;\n\n      if (count === 0) return;\n\n      const next = looping.value ? ((index % count) + count) % count : Math.max(0, Math.min(index, count - 1));\n\n      if (next === activeIndex.value) return;\n\n      activeIndex.value = next;\n      el.setAttribute('slide-index', String(next));\n      emit('change', { index: next });\n      // Pass current slides snapshot so seekTo never reads a stale closure.\n      marqueeInstance?.seekTo(next, slides);\n\n      if (announce_) {\n        announce(slides[next]?.getAttribute('aria-label') ?? `Slide ${next + 1} of ${count}`);\n      }\n    };\n\n    const prev = (): void => goTo(activeIndex.value - 1);\n    const next = (): void => goTo(activeIndex.value + 1);\n\n    // ── Sync prop → state ────────────────────────────────────────────────────\n\n    watch(props['slide-index'], (v) => {\n      if (typeof v === 'number' && v !== activeIndex.value) goTo(v, false);\n    });\n\n    // ── Sync variant + orientation → slides ──────────────────────────────────\n\n    const syncSlideVariants = (): void => {\n      const variant = props.variant.value ?? 'default';\n      const orientation = props.orientation.value ?? 'horizontal';\n\n      slides.forEach((slide) => {\n        slide.setAttribute('data-variant', variant);\n        slide.setAttribute('data-orientation', orientation);\n      });\n    };\n\n    watch(\n      computed(() => ({ orientation: props.orientation.value, variant: props.variant.value })),\n      syncSlideVariants,\n      { immediate: true },\n    );\n\n    // ── Sync active index → slides — dispatch table ───────────────────────────\n\n    const syncTable: Record<CarouselVariant, (slides: HTMLElement[], current: number) => void> = {\n      default: syncDefaultSlides,\n      fade: syncDefaultSlides,\n      filmstrip: syncFilmstripSlides,\n      gallery: syncGallerySlides,\n      marquee: syncMarqueeSlides,\n    };\n\n    const syncActiveState = (): void => {\n      const variant = (props.variant.value ?? 'default') as CarouselVariant;\n\n      syncTable[variant](slides, activeIndex.value);\n    };\n\n    watch(activeIndex, syncActiveState, { immediate: true });\n\n    // ── Autoplay ─────────────────────────────────────────────────────────────\n\n    const startAutoplay = (): void => {\n      if (autoplayTimer !== null) return;\n\n      autoplayTimer = setInterval(next, props['autoplay-interval'].value ?? 5000);\n    };\n\n    const stopAutoplay = (): void => {\n      if (autoplayTimer !== null) {\n        clearInterval(autoplayTimer);\n        autoplayTimer = null;\n      }\n    };\n\n    watch(\n      computed(() => ({ enabled: props.autoplay.value, interval: props['autoplay-interval'].value })),\n      ({ enabled }) => {\n        stopAutoplay();\n\n        if (enabled) startAutoplay();\n      },\n    );\n\n    // ── Keyboard navigation ──────────────────────────────────────────────────\n\n    const handleKeydown = (e: KeyboardEvent): void => {\n      const isH = isHorizontal.value;\n      const prevKey = isH ? 'ArrowLeft' : 'ArrowUp';\n      const nextKey = isH ? 'ArrowRight' : 'ArrowDown';\n\n      if (e.key === prevKey) {\n        e.preventDefault();\n        prev();\n      } else if (e.key === nextKey) {\n        e.preventDefault();\n        next();\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        goTo(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        goTo(slideCount.value - 1);\n      }\n    };\n\n    // ── Swipe ────────────────────────────────────────────────────────────────\n\n    const swipe = createSwipeControl({\n      axis: () => (isHorizontal.value ? 'x' : 'y'),\n      onCommit: (detail) => {\n        if (detail.distance < 0) next();\n        else prev();\n      },\n      threshold: () => 48,\n    });\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-label': () => props.label.value ?? 'Carousel',\n        'aria-roledescription': () => 'carousel',\n        orientation: () => props.orientation.value ?? 'horizontal',\n        role: () => 'region',\n        style: () => `touch-action:${isHorizontal.value ? 'pan-y' : 'pan-x'}`,\n        variant: () => props.variant.value ?? 'default',\n      },\n      on: {\n        focusin: () => {\n          stopAutoplay();\n        },\n        focusout: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        keydown: handleKeydown,\n        pointercancel: (e: PointerEvent) => swipe.handlePointerCancel(e),\n        pointerdown: (e: PointerEvent) => {\n          const path = e.composedPath();\n          const onButton = path.some(\n            (n) =>\n              n instanceof HTMLElement &&\n              (n.tagName === 'BUTTON' || n.tagName === 'ORE-BUTTON' || n.tagName === 'ORE-PROGRESS'),\n          );\n\n          if (!onButton) swipe.handlePointerDown(e);\n        },\n        pointerenter: () => {\n          stopAutoplay();\n        },\n        pointerleave: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        pointermove: (e: PointerEvent) => swipe.handlePointerMove(e),\n        pointerup: (e: PointerEvent) => swipe.handlePointerUp(e),\n      },\n    });\n\n    // ── Marquee ───────────────────────────────────────────────────────────────\n    // Clones slides for a seamless loop. Seek uses WAAPI when available\n    // (all modern browsers) so it can be cancelled cleanly. Falls back to\n    // instant negative-delay repositioning in environments without WAAPI\n    // (e.g. jsdom in tests).\n\n    const setupMarquee = (track: HTMLElement): MarqueeInstance => {\n      const orientation = props.orientation.value ?? 'horizontal';\n      const horizontal = orientation !== 'vertical';\n\n      if (isMarquee.value && props.loop.value === false) {\n        warn(\n          'ore-carousel: loop=\"false\" on the marquee variant stops the scroll animation rather than ' +\n            'disabling navigation wrap-around. Navigation in marquee always loops. ' +\n            'This is different from loop=\"false\" on other variants.',\n        );\n      }\n\n      const clones = slides.map((s) => {\n        const clone = s.cloneNode(true) as HTMLElement;\n\n        clone.setAttribute('aria-hidden', 'true');\n        clone.setAttribute('data-variant', 'marquee');\n        clone.setAttribute('data-orientation', orientation);\n        clone.setAttribute('data-marquee-clone', '');\n        track.appendChild(clone);\n\n        return clone;\n      });\n\n      track.style.setProperty('--_marquee-duration', `${props['marquee-duration'].value ?? 10}s`);\n\n      if (!looping.value) {\n        track.style.setProperty('animation-iteration-count', '1');\n      }\n\n      let isHovered = false;\n\n      const pause = (): void => {\n        isHovered = true;\n        track.style.setProperty('animation-play-state', 'paused');\n      };\n\n      const resume = (): void => {\n        isHovered = false;\n        track.style.removeProperty('animation-play-state');\n      };\n\n      // mouseenter/mouseleave fire only when the pointer crosses the host\n      // boundary — never when moving between children (e.g. onto controls).\n      // This means clicking buttons never accidentally resumes the animation.\n      el.addEventListener('mouseenter', pause);\n      el.addEventListener('mouseleave', resume);\n\n      // ── Seek ──────────────────────────────────────────────────────────────\n      // Smoothly slides to the target position using a CSS transition on the\n      // inline transform (the CSS keyframe animation is paused throughout so\n      // there is no compositing conflict). On transitionend, switches back to\n      // the keyframe animation via a negative animation-delay.\n\n      let seekTimer: ReturnType<typeof setTimeout> | null = null;\n\n      const seekTo = (index: number, slideSnapshot: HTMLElement[]): void => {\n        const slide = slideSnapshot[index];\n\n        if (!slide) return;\n\n        const targetOffset = horizontal ? slide.offsetLeft : slide.offsetTop;\n        const halfSize = horizontal ? track.scrollWidth / 2 : track.scrollHeight / 2;\n        const cycleDuration = props['marquee-duration'].value ?? 10;\n        const delay = halfSize > 0 ? -((targetOffset / halfSize) * cycleDuration) : 0;\n\n        // Cancel any in-flight seek timer.\n        if (seekTimer !== null) {\n          clearTimeout(seekTimer);\n          seekTimer = null;\n          // Snap the previous transition to its end state immediately.\n          track.style.removeProperty('transition');\n        }\n\n        // No layout (jsdom): instant seek with no visual transition.\n        if (halfSize === 0) {\n          track.style.setProperty('animation-delay', `${delay}s`);\n\n          if (!isHovered) {\n            track.style.removeProperty('animation-play-state');\n          }\n\n          return;\n        }\n\n        const seekMs =\n          parseFloat(getComputedStyle(el).getPropertyValue('--carousel-transition-duration') || '0.35') * 1000 || 350;\n\n        const targetTransform = horizontal ? `translateX(-${targetOffset}px)` : `translateY(-${targetOffset}px)`;\n\n        // 1. Read the current visual position from the live animation, then\n        //    kill the animation entirely so nothing else drives transform.\n        //    getBoundingClientRect() flushes layout so the matrix is current.\n        void track.getBoundingClientRect();\n\n        const computedTransform = getComputedStyle(track).transform;\n        const matrixValues = computedTransform\n          .match(/matrix\\(([^)]+)\\)/)?.[1]\n          .split(',')\n          .map(Number);\n        const frozenOffset = horizontal ? (matrixValues?.[4] ?? 0) : (matrixValues?.[5] ?? 0);\n        const frozenTransform = horizontal ? `translateX(${frozenOffset}px)` : `translateY(${frozenOffset}px)`;\n\n        // Stop the CSS animation — inline transform is now the sole driver.\n        track.style.setProperty('animation', 'none');\n        track.style.setProperty('transform', frozenTransform);\n\n        // 2. Next frame: apply transition and slide to target.\n        requestAnimationFrame(() => {\n          track.style.setProperty('transition', `transform ${seekMs}ms ease-in-out`);\n          track.style.setProperty('transform', targetTransform);\n\n          // 3. After the transition completes, restore the keyframe animation\n          //    at the correct position via negative animation-delay.\n          seekTimer = setTimeout(() => {\n            seekTimer = null;\n            track.style.removeProperty('transition');\n            track.style.removeProperty('transform');\n            track.style.removeProperty('animation');\n            track.style.setProperty('animation-delay', `${delay}s`);\n\n            if (isHovered) {\n              track.style.setProperty('animation-play-state', 'paused');\n            }\n          }, seekMs);\n        });\n      };\n\n      return {\n        cleanup: () => {\n          if (seekTimer !== null) clearTimeout(seekTimer);\n\n          seekTimer = null;\n          clones.forEach((c) => c.remove());\n          track.style.removeProperty('transition');\n          track.style.removeProperty('transform');\n          track.style.removeProperty('animation');\n          track.style.removeProperty('--_marquee-duration');\n          track.style.removeProperty('animation-iteration-count');\n          track.style.removeProperty('animation-delay');\n          track.style.removeProperty('animation-play-state');\n          el.removeEventListener('mouseenter', pause);\n          el.removeEventListener('mouseleave', resume);\n        },\n        seekTo,\n      };\n    };\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const shadowRoot = el.shadowRoot!;\n      const track = shadowRoot.querySelector<HTMLElement>('.track')!;\n      const slot = shadowRoot.querySelector<HTMLSlotElement>('slot')!;\n\n      // slotchange replaces MutationObserver — fires exactly when assigned\n      // nodes change, scoped to this component's slot, no polling overhead.\n      const onSlotChange = (): void => {\n        refreshSlides();\n        syncSlideVariants();\n        syncActiveState();\n\n        if (isMarquee.value) {\n          marqueeInstance?.cleanup();\n          marqueeInstance = setupMarquee(track);\n        }\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      watch(\n        computed(() => ({\n          duration: props['marquee-duration'].value,\n          isMarquee: isMarquee.value,\n          loop: props.loop.value,\n          orientation: props.orientation.value,\n        })),\n        ({ isMarquee: active }) => {\n          marqueeInstance?.cleanup();\n          marqueeInstance = active ? setupMarquee(track) : null;\n        },\n        { immediate: true },\n      );\n\n      if (props.autoplay.value) {\n        startAutoplay();\n      }\n\n      return () => {\n        stopAutoplay();\n        swipe.dispose();\n        slot.removeEventListener('slotchange', onSlotChange);\n        marqueeInstance?.cleanup();\n      };\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    const focusIndicator = (index: number): void => {\n      const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n      dot?.focus();\n    };\n\n    const handleIndicatorKeydown = (e: KeyboardEvent, i: number): void => {\n      const count = slideCount.value;\n      let target: number | undefined;\n\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowRight':\n          target = (i + 1) % count;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          target = (i - 1 + count) % count;\n          break;\n        case 'End':\n          target = count - 1;\n          break;\n        case 'Home':\n          target = 0;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      goTo(target);\n      focusIndicator(target);\n    };\n\n    const renderControls = () =>\n      showControls.value\n        ? html`<div class=\"controls\" part=\"controls\">\n            <ore-button\n              class=\"nav-btn prev-btn\"\n              part=\"prev-btn\"\n              variant=\"ghost\"\n              :color=${() => props.color.value}\n              rounded\n              icon-only\n              aria-label=\"Previous slide\"\n              :disabled=${() => (!canGoPrev.value ? true : undefined)}\n              @click=${(e: Event) => {\n                e.stopPropagation();\n                prev();\n              }}>\n              <ore-icon\n                :name=${() => (isHorizontal.value ? 'chevron-left' : 'chevron-up')}\n                size=\"16\"\n                stroke-width=\"2\"\n                aria-hidden=\"true\"></ore-icon>\n            </ore-button>\n            <ore-button\n              class=\"nav-btn next-btn\"\n              part=\"next-btn\"\n              variant=\"ghost\"\n              :color=${() => props.color.value}\n              rounded\n              icon-only\n              aria-label=\"Next slide\"\n              :disabled=${() => (!canGoNext.value ? true : undefined)}\n              @click=${(e: Event) => {\n                e.stopPropagation();\n                next();\n              }}>\n              <ore-icon\n                :name=${() => (isHorizontal.value ? 'chevron-right' : 'chevron-down')}\n                size=\"16\"\n                stroke-width=\"2\"\n                aria-hidden=\"true\"></ore-icon>\n            </ore-button>\n          </div>`\n        : html``;\n\n    return html`\n      <div class=\"track\" part=\"track\" :aria-live=${() => (props.autoplay.value ? 'off' : 'polite')}>\n        <slot></slot>\n      </div>\n\n      ${() =>\n        showIndicators.value && slideCount.value > 1 && !isMarquee.value\n          ? html`<div class=\"indicators\" part=\"indicators\" role=\"tablist\" aria-label=\"Slide indicators\">\n              ${() =>\n                Array.from(\n                  { length: slideCount.value },\n                  (_, i) =>\n                    html`<button\n                      type=\"button\"\n                      role=\"tab\"\n                      data-index=\"${i}\"\n                      :class=${() =>\n                        `indicator${!isMarquee.value && i === activeIndex.value ? ' indicator-active' : ''}`}\n                      :aria-selected=${() => String(!isMarquee.value && i === activeIndex.value)}\n                      :tabindex=${() => (!isMarquee.value && i === activeIndex.value ? '0' : '-1')}\n                      aria-label=\"${`Go to slide ${i + 1}`}\"\n                      @click=${() => goTo(i)}\n                      @keydown=${(e: KeyboardEvent) => handleIndicatorKeydown(e, i)}>\n                      <ore-progress\n                        aria-hidden=\"true\"\n                        tabindex=\"-1\"\n                        :color=${() => props.color.value}\n                        :type=${() => (isHorizontal.value ? 'linear' : 'vertical')}\n                        :value=${() => (!isMarquee.value && i === activeIndex.value ? 100 : 0)}\n                        :style=${() => {\n                          const fillAnim = isHorizontal.value ? 'carousel-fill' : 'carousel-fill-v';\n\n                          return `--carousel-timeout:${props['autoplay-interval'].value ?? 5000};--carousel-animation-name:${!isMarquee.value && i === activeIndex.value && props.autoplay.value ? fillAnim : 'none'}`;\n                        }}></ore-progress>\n                    </button>`,\n                )}\n              ${renderControls}\n            </div>`\n          : html`${renderControls}`}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"carousel.js","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { announce, createSwipeControl } from '../../core';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport type CarouselOrientation = 'horizontal' | 'vertical';\nexport type CarouselVariant = 'default' | 'fade' | 'filmstrip' | 'gallery';\n\nexport type OreCarouselEvents = {\n  /** Fired when the active slide changes. */\n  change: { index: number };\n};\n\nexport type OreCarouselProps = {\n  /**\n   * Whether to advance slides automatically. Defaults to `false`.\n   * Opt in explicitly — autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.\n   */\n  autoplay?: boolean;\n  /** Interval in milliseconds between automatic slide advances. Defaults to `5000`. */\n  'autoplay-interval'?: number;\n  /** Theme color passed to the prev/next navigation buttons. */\n  color?: ThemeColor;\n  /** Accessible label for the carousel region. */\n  label?: string;\n  /** Whether the carousel loops from the last slide back to the first. Defaults to `true`. */\n  loop?: boolean;\n  /** Carousel orientation. Defaults to `'horizontal'`. */\n  orientation?: CarouselOrientation;\n  /** Show next/prev navigation buttons. Defaults to `true`. */\n  'show-controls'?: boolean;\n  /** Show dot/indicator navigation. Defaults to `true`. */\n  'show-indicators'?: boolean;\n  /** Index of the currently active slide (zero-based). Defaults to `0`. */\n  'slide-index'?: number;\n  /**\n   * Layout variant.\n   * - `'default'`   — slides translate in/out (default)\n   * - `'fade'`      — slides crossfade; no movement\n   * - `'filmstrip'` — all slides visible side-by-side; active expands\n   * - `'gallery'`   — active slide fills the majority; adjacent slides show as thumbnails\n   */\n  variant?: CarouselVariant;\n};\n\n/**\n * An accessible, keyboard-navigable carousel / slideshow with optional\n * autoplay, swipe support, and indicator dots.\n *\n * Place `<ore-carousel-slide>` elements as direct children.\n *\n * @element ore-carousel\n * @element ore-carousel-slide - Child element for individual slides\n *\n * @attr {string}  color             - Theme color for navigation buttons: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} autoplay          - Advance slides automatically (default false)\n * @attr {number}  autoplay-interval - Milliseconds between automatic advances (default 5000)\n * @attr {string}  label             - Accessible label for the carousel region\n * @attr {boolean} loop              - Loop from last slide to first (default true)\n * @attr {string}  orientation       - 'horizontal' (default) | 'vertical'\n * @attr {string}  variant           - 'default' | 'fade' | 'filmstrip' | 'gallery'\n * @attr {boolean} show-controls     - Show prev/next buttons (default true)\n * @attr {boolean} show-indicators   - Show indicator dots (default true)\n * @attr {number}  slide-index       - Active slide index (zero-based, default 0)\n *\n * @fires change - Fires when the active slide changes. detail: { index: number }\n *\n * @slot - Place `<ore-carousel-slide>` elements here\n *\n * @cssprop --carousel-bg                  - Slide area background\n * @cssprop --carousel-radius              - Border radius of the carousel\n * @cssprop --carousel-dot-bg              - Inactive indicator color (default: var(--color-contrast-300))\n * @cssprop --carousel-dot-active-bg       - Active indicator / fill color (default: var(--color-contrast-700))\n * @cssprop --carousel-transition-duration - Slide transition duration (default 0.35s; 0s under prefers-reduced-motion).\n * @cssprop --carousel-min-height          - Minimum height when no explicit height is set (default 240px)\n * @cssprop --carousel-filmstrip-inactive  - Width (horizontal) or height (vertical) of inactive slides in filmstrip mode\n * @cssprop --carousel-filmstrip-gap       - Gap between slides in filmstrip mode\n * @cssprop --carousel-gallery-thumbnail   - Width (horizontal) or height (vertical) of thumbnail slides in gallery mode (default var(--size-24))\n * @cssprop --carousel-gallery-gap         - Gap between slides in gallery mode (default var(--size-2))\n *\n * @part track      - The scrolling slide track element\n * @part controls   - The prev/next button container\n * @part indicators - The indicator dots container\n * @part prev-btn   - The previous-slide button\n * @part next-btn   - The next-slide button\n *\n * @example\n * ```html\n * <ore-carousel label=\"Product highlights\" loop>\n *   <ore-carousel-slide>Slide 1</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 2</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 3</ore-carousel-slide>\n * </ore-carousel>\n * ```\n */\nexport const CAROUSEL_TAG = 'ore-carousel' as const;\n\n// ── Slide-state sync helpers ──────────────────────────────────────────────────\n// Each function handles exactly one variant's attribute bookkeeping.\n// Called from a dispatch table in syncActiveState.\n\nconst syncDefaultSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.toggleAttribute('data-before', i < current);\n    slide.toggleAttribute('data-after', i > current);\n  });\n};\n\nconst syncFilmstripSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n  });\n};\n\nconst syncGallerySlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n    const isPrev = current > 0 && i === current - 1;\n    const isNext = current < count - 1 && i === current + 1;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.toggleAttribute('data-gallery-visible', active || isPrev || isNext);\n  });\n};\n\n// ── ore-carousel ──────────────────────────────────────────────────────────────\n\ndefine<OreCarouselProps>(CAROUSEL_TAG, {\n  props: {\n    autoplay: prop.bool(false),\n    'autoplay-interval': prop.number(5000),\n    color: prop.string<ThemeColor>(),\n    label: prop.string('Carousel'),\n    loop: prop.bool(true),\n    orientation: prop.string<CarouselOrientation>('horizontal'),\n    'show-controls': prop.bool(true),\n    'show-indicators': prop.bool(true),\n    'slide-index': prop.number(0),\n    variant: prop.string<CarouselVariant>('default'),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCarouselEvents>();\n\n    // ── State ────────────────────────────────────────────────────────────────\n\n    const activeIndex = signal<number>(props['slide-index'].value ?? 0);\n    let autoplayTimer: ReturnType<typeof setInterval> | null = null;\n\n    // Slide cache — populated immediately, refreshed on slotchange.\n    let slides: HTMLElement[] = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n    const slideCount = signal(slides.length);\n\n    const refreshSlides = (): void => {\n      slides = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n      slideCount.value = slides.length;\n    };\n\n    const isHorizontal = computed(() => props.orientation.value !== 'vertical');\n    const looping = computed(() => props.loop.value !== false);\n    const showControls = computed(() => props['show-controls'].value !== false);\n    const showIndicators = computed(() => props['show-indicators'].value !== false);\n\n    const canGoPrev = computed(() => looping.value || activeIndex.value > 0);\n    const canGoNext = computed(() => looping.value || activeIndex.value < slideCount.value - 1);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\n\n    const goTo = (index: number, announce_: boolean = true): void => {\n      const count = slideCount.value;\n\n      if (count === 0) return;\n\n      const next = looping.value ? ((index % count) + count) % count : Math.max(0, Math.min(index, count - 1));\n\n      if (next === activeIndex.value) return;\n\n      activeIndex.value = next;\n      el.setAttribute('slide-index', String(next));\n      emit('change', { index: next });\n\n      if (announce_) {\n        announce(slides[next]?.getAttribute('aria-label') ?? `Slide ${next + 1} of ${count}`);\n      }\n    };\n\n    const prev = (): void => goTo(activeIndex.value - 1);\n    const next = (): void => goTo(activeIndex.value + 1);\n\n    // ── Sync prop → state ────────────────────────────────────────────────────\n\n    watch(props['slide-index'], (v) => {\n      if (typeof v === 'number' && v !== activeIndex.value) goTo(v, false);\n    });\n\n    // ── Sync variant + orientation → slides ──────────────────────────────────\n\n    const syncSlideVariants = (): void => {\n      const variant = props.variant.value ?? 'default';\n      const orientation = props.orientation.value ?? 'horizontal';\n\n      slides.forEach((slide) => {\n        slide.setAttribute('data-variant', variant);\n        slide.setAttribute('data-orientation', orientation);\n      });\n    };\n\n    watch(\n      computed(() => ({ orientation: props.orientation.value, variant: props.variant.value })),\n      syncSlideVariants,\n      { immediate: true },\n    );\n\n    // ── Sync active index → slides — dispatch table ───────────────────────────\n\n    const syncTable: Record<CarouselVariant, (slides: HTMLElement[], current: number) => void> = {\n      default: syncDefaultSlides,\n      fade: syncDefaultSlides,\n      filmstrip: syncFilmstripSlides,\n      gallery: syncGallerySlides,\n    };\n\n    const syncActiveState = (): void => {\n      const variant = (props.variant.value ?? 'default') as CarouselVariant;\n\n      syncTable[variant](slides, activeIndex.value);\n    };\n\n    watch(activeIndex, syncActiveState, { immediate: true });\n\n    // ── Autoplay ─────────────────────────────────────────────────────────────\n\n    const startAutoplay = (): void => {\n      if (autoplayTimer !== null) return;\n\n      autoplayTimer = setInterval(next, props['autoplay-interval'].value ?? 5000);\n    };\n\n    const stopAutoplay = (): void => {\n      if (autoplayTimer !== null) {\n        clearInterval(autoplayTimer);\n        autoplayTimer = null;\n      }\n    };\n\n    watch(\n      computed(() => ({ enabled: props.autoplay.value, interval: props['autoplay-interval'].value })),\n      ({ enabled }) => {\n        stopAutoplay();\n\n        if (enabled) startAutoplay();\n      },\n    );\n\n    // ── Keyboard navigation ──────────────────────────────────────────────────\n\n    const handleKeydown = (e: KeyboardEvent): void => {\n      const isH = isHorizontal.value;\n      const prevKey = isH ? 'ArrowLeft' : 'ArrowUp';\n      const nextKey = isH ? 'ArrowRight' : 'ArrowDown';\n\n      if (e.key === prevKey) {\n        e.preventDefault();\n        prev();\n      } else if (e.key === nextKey) {\n        e.preventDefault();\n        next();\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        goTo(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        goTo(slideCount.value - 1);\n      }\n    };\n\n    // ── Swipe ────────────────────────────────────────────────────────────────\n\n    const swipe = createSwipeControl({\n      axis: () => (isHorizontal.value ? 'x' : 'y'),\n      onCommit: (detail) => {\n        if (detail.distance < 0) next();\n        else prev();\n      },\n      threshold: () => 48,\n    });\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-label': () => props.label.value ?? 'Carousel',\n        'aria-roledescription': () => 'carousel',\n        orientation: () => props.orientation.value ?? 'horizontal',\n        role: () => 'region',\n        style: () => `touch-action:${isHorizontal.value ? 'pan-y' : 'pan-x'}`,\n        variant: () => props.variant.value ?? 'default',\n      },\n      on: {\n        focusin: () => {\n          stopAutoplay();\n        },\n        focusout: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        keydown: handleKeydown,\n        pointercancel: (e: PointerEvent) => swipe.handlePointerCancel(e),\n        pointerdown: (e: PointerEvent) => {\n          const path = e.composedPath();\n          const onButton = path.some(\n            (n) =>\n              n instanceof HTMLElement &&\n              (n.tagName === 'BUTTON' || n.tagName === 'ORE-BUTTON' || n.tagName === 'ORE-PROGRESS'),\n          );\n\n          if (!onButton) swipe.handlePointerDown(e);\n        },\n        pointerenter: () => {\n          stopAutoplay();\n        },\n        pointerleave: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        pointermove: (e: PointerEvent) => swipe.handlePointerMove(e),\n        pointerup: (e: PointerEvent) => swipe.handlePointerUp(e),\n      },\n    });\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const shadowRoot = el.shadowRoot!;\n      const slot = shadowRoot.querySelector<HTMLSlotElement>('slot')!;\n\n      // slotchange replaces MutationObserver — fires exactly when assigned\n      // nodes change, scoped to this component's slot, no polling overhead.\n      const onSlotChange = (): void => {\n        refreshSlides();\n        syncSlideVariants();\n        syncActiveState();\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      if (props.autoplay.value) {\n        startAutoplay();\n      }\n\n      return () => {\n        stopAutoplay();\n        swipe.dispose();\n        slot.removeEventListener('slotchange', onSlotChange);\n      };\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    const focusIndicator = (index: number): void => {\n      const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n      dot?.focus();\n    };\n\n    const handleIndicatorKeydown = (e: KeyboardEvent, i: number): void => {\n      const count = slideCount.value;\n      let target: number | undefined;\n\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowRight':\n          target = (i + 1) % count;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          target = (i - 1 + count) % count;\n          break;\n        case 'End':\n          target = count - 1;\n          break;\n        case 'Home':\n          target = 0;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      goTo(target);\n      focusIndicator(target);\n    };\n\n    const renderControls = () =>\n      showControls.value\n        ? html`\n            <div class=\"controls\" part=\"controls\">\n              <ore-button\n                class=\"nav-btn prev-btn\"\n                part=\"prev-btn\"\n                variant=\"ghost\"\n                color=${() => props.color.value}\n                rounded\n                icon-only\n                aria-label=\"Previous slide\"\n                disabled=${() => (!canGoPrev.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  prev();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-left' : 'chevron-up')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  aria-hidden=\"true\"></ore-icon>\n              </ore-button>\n              <ore-button\n                class=\"nav-btn next-btn\"\n                part=\"next-btn\"\n                variant=\"ghost\"\n                color=${() => props.color.value}\n                rounded\n                icon-only\n                aria-label=\"Next slide\"\n                disabled=${() => (!canGoNext.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  next();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-right' : 'chevron-down')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  aria-hidden=\"true\"></ore-icon>\n              </ore-button>\n            </div>\n          `\n        : html``;\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=${() => (props.autoplay.value ? 'off' : 'polite')}>\n        <slot></slot>\n      </div>\n\n      ${() =>\n        showIndicators.value && slideCount.value > 1\n          ? html`\n              <div class=\"indicators\" part=\"indicators\" role=\"tablist\" aria-label=\"Slide indicators\">\n                ${() =>\n                  Array.from(\n                    { length: slideCount.value },\n                    (_, i) => html`\n                      <button\n                        type=\"button\"\n                        role=\"tab\"\n                        data-index=\"${i}\"\n                        class=${() => `indicator${i === activeIndex.value ? ' indicator-active' : ''}`}\n                        aria-selected=${() => String(i === activeIndex.value)}\n                        tabindex=${() => (i === activeIndex.value ? '0' : '-1')}\n                        aria-label=\"${`Go to slide ${i + 1}`}\"\n                        @click=${() => goTo(i)}\n                        @keydown=${(e: KeyboardEvent) => handleIndicatorKeydown(e, i)}>\n                        <ore-progress\n                          aria-hidden=\"true\"\n                          tabindex=\"-1\"\n                          color=${() => props.color.value}\n                          type=${() => (isHorizontal.value ? 'linear' : 'vertical')}\n                          value=${() => (i === activeIndex.value ? 100 : 0)}\n                          style=${() => {\n                            const fillAnim = isHorizontal.value ? 'carousel-fill' : 'carousel-fill-v';\n\n                            return `--carousel-timeout:${props['autoplay-interval'].value ?? 5000};--carousel-animation-name:${i === activeIndex.value && props.autoplay.value ? fillAnim : 'none'}`;\n                          }}></ore-progress>\n                      </button>\n                    `,\n                  )}\n                ${renderControls}\n              </div>\n            `\n          : html`\n              ${renderControls}\n            `}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}