@vielzeug/refine 2.1.3 → 2.2.4

package/dist/carousel.js

@@ -1,171 +1,153 @@
 import { announce as e } from "./core/announcer.js";
-import { createSwipeControl as t } from "./core/swipe.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, watch as p } from "@vielzeug/ripple";
+import { lifecycleSignal as t } from "./core/ore.js";
+import { createListControl as n } from "./core/nav.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, onCleanup as l, onMounted as u, prop as d, useEmit as f } from "@vielzeug/ore";
+import { computed as p, signal as m, watch as h } from "@vielzeug/ripple";
+import { createPanGesture as g } from "@vielzeug/gesture";
 //#region src/content/carousel/carousel.ts
-var m = "ore-carousel", h = (e, t) => {
+var _ = "ore-carousel", v = (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);
 	});
-}, g = (e, t) => {
+}, y = (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");
 	});
-}, _ = (e, t) => {
+}, b = (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);
 	});
 };
-a(m, {
+o(_, {
 	props: {
-		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")
+		autoplay: d.bool(!1),
+		"autoplay-interval": d.number(5e3),
+		color: d.string(),
+		label: d.string("Carousel"),
+		loop: d.bool(!0),
+		orientation: d.string("horizontal"),
+		"show-controls": d.bool(!0),
+		"show-indicators": d.bool(!0),
+		"slide-index": d.number(0),
+		variant: d.string("default")
 	},
-	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 = (t, n = !0) => {
-			let i = y.value;
-			if (i === 0) return;
-			let o = S.value ? (t % i + i) % i : Math.max(0, Math.min(t, i - 1));
-			o !== l.value && (l.value = o, r.setAttribute("slide-index", String(o)), a("change", { index: o }), n && e(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);
+	setup(r) {
+		let i = s(), o = f(), d = m(r["slide-index"].value ?? 0), _ = null, x = Array.from(i.querySelectorAll(":scope > ore-carousel-slide")), S = m(x.length), C = () => {
+			x = Array.from(i.querySelectorAll(":scope > ore-carousel-slide")), S.value = x.length;
+		}, w = p(() => r.orientation.value !== "vertical"), T = p(() => r.loop.value !== !1), E = p(() => r["show-controls"].value !== !1), D = p(() => r["show-indicators"].value !== !1), O = p(() => T.value || d.value > 0), k = p(() => T.value || d.value < S.value - 1), A = (t, n = !0) => {
+			let r = S.value;
+			if (r === 0) return;
+			let a = T.value ? (t % r + r) % r : Math.max(0, Math.min(t, r - 1));
+			a !== d.value && (d.value = a, i.setAttribute("slide-index", String(a)), o("change", { index: a }), n && e(x[a]?.getAttribute("aria-label") ?? `Slide ${a + 1} of ${r}`));
+		}, j = () => A(d.value - 1), M = () => A(d.value + 1);
+		h(r["slide-index"], (e) => {
+			typeof e == "number" && e !== d.value && A(e, !1);
 		});
-		let A = () => {
-			let e = n.variant.value ?? "default", t = n.orientation.value ?? "horizontal";
-			v.forEach((n) => {
+		let N = () => {
+			let e = r.variant.value ?? "default", t = r.orientation.value ?? "horizontal";
+			x.forEach((n) => {
 				n.setAttribute("data-variant", e), n.setAttribute("data-orientation", t);
 			});
 		};
-		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);
+		h(p(() => ({
+			orientation: r.orientation.value,
+			variant: r.variant.value
+		})), N, { immediate: !0 });
+		let P = {
+			default: v,
+			fade: v,
+			filmstrip: y,
+			gallery: b
+		}, F = () => {
+			let e = r.variant.value ?? "default";
+			P[e](x, d.value);
 		};
-		p(l, M, { immediate: !0 });
-		let N = () => {
-			m === null && (m = setInterval(k, n["autoplay-interval"].value ?? 5e3));
-		}, P = () => {
-			m !== null && (clearInterval(m), m = null);
+		h(d, F, { immediate: !0 });
+		let I = () => {
+			_ === null && (_ = setInterval(M, r["autoplay-interval"].value ?? 5e3));
+		}, L = () => {
+			_ !== null && (clearInterval(_), _ = null);
 		};
-		p(d(() => ({
-			enabled: n.autoplay.value,
-			interval: n["autoplay-interval"].value
+		h(p(() => ({
+			enabled: r.autoplay.value,
+			interval: r["autoplay-interval"].value
 		})), ({ enabled: e }) => {
-			P(), e && N();
+			L(), e && I();
 		});
-		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 = t({
-			axis: () => x.value ? "x" : "y",
-			onCommit: (e) => {
-				e.distance < 0 ? k() : O();
+		let R = (e) => {
+			let t = w.value, n = t ? "ArrowLeft" : "ArrowUp", r = t ? "ArrowRight" : "ArrowDown";
+			e.key === n ? (e.preventDefault(), j()) : e.key === r ? (e.preventDefault(), M()) : e.key === "Home" ? (e.preventDefault(), A(0)) : e.key === "End" && (e.preventDefault(), A(S.value - 1));
+		}, z = n({
+			getItems: () => Array.from({ length: S.value }, (e, t) => t),
+			loop: !0,
+			onNavigate: ({ index: e }) => {
+				A(e), (i.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus();
 			},
-			threshold: () => 48
+			orientation: () => w.value ? "horizontal" : "vertical",
+			signal: t(l)
 		});
-		i({
+		a({
 			attr: {
-				"aria-label": () => n.label.value ?? "Carousel",
+				"aria-label": () => r.label.value ?? "Carousel",
 				"aria-roledescription": () => "carousel",
-				orientation: () => n.orientation.value ?? "horizontal",
+				orientation: () => r.orientation.value ?? "horizontal",
 				role: () => "region",
-				style: () => `touch-action:${x.value ? "pan-y" : "pan-x"}`,
-				variant: () => n.variant.value ?? "default"
+				style: () => `touch-action:${w.value ? "pan-y" : "pan-x"}`,
+				variant: () => r.variant.value ?? "default"
 			},
 			on: {
 				focusin: () => {
-					P();
+					L();
 				},
 				focusout: () => {
-					n.autoplay.value && N();
-				},
-				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")) || I.handlePointerDown(e);
+					r.autoplay.value && I();
 				},
+				keydown: R,
 				pointerenter: () => {
-					P();
+					L();
 				},
 				pointerleave: () => {
-					n.autoplay.value && N();
-				},
-				pointermove: (e) => I.handlePointerMove(e),
-				pointerup: (e) => I.handlePointerUp(e)
+					r.autoplay.value && I();
+				}
 			}
-		}), c(() => {
-			let e = r.shadowRoot.querySelector("slot"), t = () => {
-				b(), A(), M();
+		}), u(() => {
+			let e = g(i, {
+				axis: () => w.value ? "x" : "y",
+				onEnd: ({ distance: e, reason: t }) => {
+					t !== "release" || Math.abs(e) < 48 || (e < 0 ? M() : j());
+				},
+				shouldStart: (e) => !e.composedPath().some((e) => e instanceof HTMLElement && (e.tagName === "BUTTON" || e.tagName === "ORE-BUTTON" || e.tagName === "ORE-PROGRESS"))
+			}), t = i.shadowRoot.querySelector("slot"), n = () => {
+				C(), N(), F();
 			};
-			return e.addEventListener("slotchange", t), n.autoplay.value && N(), () => {
-				P(), I.dispose(), e.removeEventListener("slotchange", t);
+			return t.addEventListener("slotchange", n), r.autoplay.value && I(), () => {
+				e.dispose(), L(), t.removeEventListener("slotchange", n);
 			};
 		});
-		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":
-					r = (t + 1) % n;
-					break;
-				case "ArrowLeft":
-				case "ArrowUp":
-					r = (t - 1 + n) % n;
-					break;
-				case "End":
-					r = n - 1;
-					break;
-				case "Home":
-					r = 0;
-					break;
-				default: return;
-			}
-			e.preventDefault(), D(r), L(r);
-		}, z = () => C.value ? s`
+		let B = () => E.value ? c`
             <div class="controls" part="controls">
               <ore-button
                 class="nav-btn prev-btn"
                 part="prev-btn"
                 variant="ghost"
-                color=${() => n.color.value}
+                color=${() => r.color.value}
                 rounded
                 icon-only
                 aria-label="Previous slide"
-                disabled=${() => !T.value || void 0}
+                disabled=${() => !O.value || void 0}
                 @click=${(e) => {
-			e.stopPropagation(), O();
+			e.stopPropagation(), j();
 		}}>
                 <ore-icon
-                  name=${() => x.value ? "chevron-left" : "chevron-up"}
+                  name=${() => w.value ? "chevron-left" : "chevron-up"}
                   size="16"
                   stroke-width="2"
                   aria-hidden="true"></ore-icon>
@@ -174,62 +156,70 @@ a(m, {
                 class="nav-btn next-btn"
                 part="next-btn"
                 variant="ghost"
-                color=${() => n.color.value}
+                color=${() => r.color.value}
                 rounded
                 icon-only
                 aria-label="Next slide"
-                disabled=${() => !E.value || void 0}
+                disabled=${() => !k.value || void 0}
                 @click=${(e) => {
-			e.stopPropagation(), k();
+			e.stopPropagation(), M();
 		}}>
                 <ore-icon
-                  name=${() => x.value ? "chevron-right" : "chevron-down"}
+                  name=${() => w.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"}>
+          ` : c``;
+		return c`
+      <div class="track" part="track" aria-live=${() => r.autoplay.value ? "off" : "polite"}>
         <slot></slot>
       </div>
 
-      ${() => w.value && y.value > 1 ? s`
+      ${() => D.value && S.value > 1 ? c`
               <div class="indicators" part="indicators" role="tablist" aria-label="Slide indicators">
-                ${() => Array.from({ length: y.value }, (e, t) => s`
+                ${() => Array.from({ length: S.value }, (e, t) => c`
                       <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"}
+                        class=${() => `indicator${t === d.value ? " indicator-active" : ""}`}
+                        aria-selected=${() => String(t === d.value)}
+                        tabindex=${() => t === d.value ? "0" : "-1"}
                         aria-label="${`Go to slide ${t + 1}`}"
-                        @click=${() => D(t)}
-                        @keydown=${(e) => R(e, t)}>
+                        @focus=${() => z.set(t)}
+                        @click=${() => A(t)}
+                        @keydown=${(e) => {
+			let t = e.currentTarget;
+			if (t instanceof HTMLElement) {
+				let e = Number(t.dataset.index);
+				Number.isInteger(e) && z.set(e);
+			}
+			z.handleKeydown(e);
+		}}>
                         <ore-progress
                           aria-hidden="true"
                           tabindex="-1"
-                          color=${() => n.color.value}
-                          type=${() => x.value ? "linear" : "vertical"}
-                          value=${() => t === l.value ? 100 : 0}
+                          color=${() => r.color.value}
+                          type=${() => w.value ? "linear" : "vertical"}
+                          value=${() => t === d.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"}`;
+			let e = w.value ? "carousel-fill" : "carousel-fill-v";
+			return `--carousel-timeout:${r["autoplay-interval"].value ?? 5e3};--carousel-animation-name:${t === d.value && r.autoplay.value ? e : "none"}`;
 		}}></ore-progress>
                       </button>
                     `)}
-                ${z}
+                ${B}
               </div>
-            ` : s`
-              ${z}
+            ` : c`
+              ${B}
             `}
     `;
 	},
-	styles: [n]
+	styles: [r]
 });
 //#endregion
-export { r as CAROUSEL_SLIDE_TAG, m as CAROUSEL_TAG };
+export { i as CAROUSEL_SLIDE_TAG, _ 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 { bind, define, getHost, html, onMounted, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\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":";;;;;;;AAyGA,IAAa,IAAe,gBAMtB,KAAqB,GAAuB,MAA0B;CAC1E,IAAM,IAAQ,EAAO;CAErB,EAAO,SAAS,GAAO,MAAM;EAC3B,IAAM,IAAS,MAAM;EAOrB,AALA,EAAM,gBAAgB,eAAe,CAAM,GAC3C,EAAM,aAAa,eAAe,OAAO,CAAC,CAAM,CAAC,GACjD,EAAM,aAAa,cAAc,EAAM,aAAa,YAAY,KAAK,SAAS,IAAI,EAAE,MAAM,GAAO,GACjG,EAAM,gBAAgB,sBAAsB,GAC5C,EAAM,gBAAgB,eAAe,IAAI,CAAO,GAChD,EAAM,gBAAgB,cAAc,IAAI,CAAO;CACjD,CAAC;AACH,GAEM,KAAuB,GAAuB,MAA0B;CAC5E,IAAM,IAAQ,EAAO;CAErB,EAAO,SAAS,GAAO,MAAM;EAC3B,IAAM,IAAS,MAAM;EAOrB,AALA,EAAM,gBAAgB,eAAe,CAAM,GAC3C,EAAM,aAAa,eAAe,OAAO,CAAC,CAAM,CAAC,GACjD,EAAM,aAAa,cAAc,EAAM,aAAa,YAAY,KAAK,SAAS,IAAI,EAAE,MAAM,GAAO,GACjG,EAAM,gBAAgB,sBAAsB,GAC5C,EAAM,gBAAgB,aAAa,GACnC,EAAM,gBAAgB,YAAY;CACpC,CAAC;AACH,GAEM,KAAqB,GAAuB,MAA0B;CAC1E,IAAM,IAAQ,EAAO;CAErB,EAAO,SAAS,GAAO,MAAM;EAC3B,IAAM,IAAS,MAAM,GACf,IAAS,IAAU,KAAK,MAAM,IAAU,GACxC,IAAS,IAAU,IAAQ,KAAK,MAAM,IAAU;EAOtD,AALA,EAAM,gBAAgB,eAAe,CAAM,GAC3C,EAAM,aAAa,eAAe,OAAO,CAAC,CAAM,CAAC,GACjD,EAAM,aAAa,cAAc,EAAM,aAAa,YAAY,KAAK,SAAS,IAAI,EAAE,MAAM,GAAO,GACjG,EAAM,gBAAgB,aAAa,GACnC,EAAM,gBAAgB,YAAY,GAClC,EAAM,gBAAgB,wBAAwB,KAAU,KAAU,CAAM;CAC1E,CAAC;AACH;AAIA,EAAyB,GAAc;CACrC,OAAO;EACL,UAAU,EAAK,KAAK,EAAK;EACzB,qBAAqB,EAAK,OAAO,GAAI;EACrC,OAAO,EAAK,OAAmB;EAC/B,OAAO,EAAK,OAAO,UAAU;EAC7B,MAAM,EAAK,KAAK,EAAI;EACpB,aAAa,EAAK,OAA4B,YAAY;EAC1D,iBAAiB,EAAK,KAAK,EAAI;EAC/B,mBAAmB,EAAK,KAAK,EAAI;EACjC,eAAe,EAAK,OAAO,CAAC;EAC5B,SAAS,EAAK,OAAwB,SAAS;CACjD;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAA2B,GAIlC,IAAc,EAAe,EAAM,cAAc,CAAC,SAAS,CAAC,GAC9D,IAAuD,MAGvD,IAAwB,MAAM,KAAK,EAAG,iBAA8B,6BAA6B,CAAC,GAChG,IAAa,EAAO,EAAO,MAAM,GAEjC,UAA4B;GAEhC,AADA,IAAS,MAAM,KAAK,EAAG,iBAA8B,6BAA6B,CAAC,GACnF,EAAW,QAAQ,EAAO;EAC5B,GAEM,IAAe,QAAe,EAAM,YAAY,UAAU,UAAU,GACpE,IAAU,QAAe,EAAM,KAAK,UAAU,EAAK,GACnD,IAAe,QAAe,EAAM,gBAAgB,CAAC,UAAU,EAAK,GACpE,IAAiB,QAAe,EAAM,kBAAkB,CAAC,UAAU,EAAK,GAExE,IAAY,QAAe,EAAQ,SAAS,EAAY,QAAQ,CAAC,GACjE,IAAY,QAAe,EAAQ,SAAS,EAAY,QAAQ,EAAW,QAAQ,CAAC,GAIpF,KAAQ,GAAe,IAAqB,OAAe;GAC/D,IAAM,IAAQ,EAAW;GAEzB,IAAI,MAAU,GAAG;GAEjB,IAAM,IAAO,EAAQ,SAAU,IAAQ,IAAS,KAAS,IAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAO,IAAQ,CAAC,CAAC;GAEnG,MAAS,EAAY,UAEzB,EAAY,QAAQ,GACpB,EAAG,aAAa,eAAe,OAAO,CAAI,CAAC,GAC3C,EAAK,UAAU,EAAE,OAAO,EAAK,CAAC,GAE1B,KACF,EAAS,EAAO,EAAK,EAAE,aAAa,YAAY,KAAK,SAAS,IAAO,EAAE,MAAM,GAAO;EAExF,GAEM,UAAmB,EAAK,EAAY,QAAQ,CAAC,GAC7C,UAAmB,EAAK,EAAY,QAAQ,CAAC;EAInD,EAAM,EAAM,iBAAiB,MAAM;GACjC,AAAI,OAAO,KAAM,YAAY,MAAM,EAAY,SAAO,EAAK,GAAG,EAAK;EACrE,CAAC;EAID,IAAM,UAAgC;GACpC,IAAM,IAAU,EAAM,QAAQ,SAAS,WACjC,IAAc,EAAM,YAAY,SAAS;GAE/C,EAAO,SAAS,MAAU;IAExB,AADA,EAAM,aAAa,gBAAgB,CAAO,GAC1C,EAAM,aAAa,oBAAoB,CAAW;GACpD,CAAC;EACH;EAEA,EACE,SAAgB;GAAE,aAAa,EAAM,YAAY;GAAO,SAAS,EAAM,QAAQ;EAAM,EAAE,GACvF,GACA,EAAE,WAAW,GAAK,CACpB;EAIA,IAAM,IAAuF;GAC3F,SAAS;GACT,MAAM;GACN,WAAW;GACX,SAAS;EACX,GAEM,UAA8B;GAClC,IAAM,IAAW,EAAM,QAAQ,SAAS;GAExC,EAAU,EAAQ,CAAC,GAAQ,EAAY,KAAK;EAC9C;EAEA,EAAM,GAAa,GAAiB,EAAE,WAAW,GAAK,CAAC;EAIvD,IAAM,UAA4B;GAC5B,MAAkB,SAEtB,IAAgB,YAAY,GAAM,EAAM,oBAAoB,CAAC,SAAS,GAAI;EAC5E,GAEM,UAA2B;GAC/B,AAAI,MAAkB,SACpB,cAAc,CAAa,GAC3B,IAAgB;EAEpB;EAEA,EACE,SAAgB;GAAE,SAAS,EAAM,SAAS;GAAO,UAAU,EAAM,oBAAoB,CAAC;EAAM,EAAE,IAC7F,EAAE,iBAAc;GAGf,AAFA,EAAa,GAET,KAAS,EAAc;EAC7B,CACF;EAIA,IAAM,KAAiB,MAA2B;GAChD,IAAM,IAAM,EAAa,OACnB,IAAU,IAAM,cAAc,WAC9B,IAAU,IAAM,eAAe;GAErC,AAAI,EAAE,QAAQ,KACZ,EAAE,eAAe,GACjB,EAAK,KACI,EAAE,QAAQ,KACnB,EAAE,eAAe,GACjB,EAAK,KACI,EAAE,QAAQ,UACnB,EAAE,eAAe,GACjB,EAAK,CAAC,KACG,EAAE,QAAQ,UACnB,EAAE,eAAe,GACjB,EAAK,EAAW,QAAQ,CAAC;EAE7B,GAIM,IAAQ,EAAmB;GAC/B,YAAa,EAAa,QAAQ,MAAM;GACxC,WAAW,MAAW;IACpB,AAAI,EAAO,WAAW,IAAG,EAAK,IACzB,EAAK;GACZ;GACA,iBAAiB;EACnB,CAAC;EA6CD,AAzCA,EAAK;GACH,MAAM;IACJ,oBAAoB,EAAM,MAAM,SAAS;IACzC,8BAA8B;IAC9B,mBAAmB,EAAM,YAAY,SAAS;IAC9C,YAAY;IACZ,aAAa,gBAAgB,EAAa,QAAQ,UAAU;IAC5D,eAAe,EAAM,QAAQ,SAAS;GACxC;GACA,IAAI;IACF,eAAe;KACb,EAAa;IACf;IACA,gBAAgB;KACd,AAAI,EAAM,SAAS,SAAO,EAAc;IAC1C;IACA,SAAS;IACT,gBAAgB,MAAoB,EAAM,oBAAoB,CAAC;IAC/D,cAAc,MAAoB;KAQhC,AAPa,EAAE,aACE,CAAA,CAAK,MACnB,MACC,aAAa,gBACZ,EAAE,YAAY,YAAY,EAAE,YAAY,gBAAgB,EAAE,YAAY,eAGtE,KAAU,EAAM,kBAAkB,CAAC;IAC1C;IACA,oBAAoB;KAClB,EAAa;IACf;IACA,oBAAoB;KAClB,AAAI,EAAM,SAAS,SAAO,EAAc;IAC1C;IACA,cAAc,MAAoB,EAAM,kBAAkB,CAAC;IAC3D,YAAY,MAAoB,EAAM,gBAAgB,CAAC;GACzD;EACF,CAAC,GAID,QAAgB;GAEd,IAAM,IADa,EAAG,WACE,cAA+B,MAAM,GAIvD,UAA2B;IAG/B,AAFA,EAAc,GACd,EAAkB,GAClB,EAAgB;GAClB;GAQA,OANA,EAAK,iBAAiB,cAAc,CAAY,GAE5C,EAAM,SAAS,SACjB,EAAc,SAGH;IAGX,AAFA,EAAa,GACb,EAAM,QAAQ,GACd,EAAK,oBAAoB,cAAc,CAAY;GACrD;EACF,CAAC;EAID,IAAM,KAAkB,MAAwB;GAG9C,CAFY,EAAG,YAAY,cAA2B,0BAA0B,EAAM,GAAG,EAAA,EAEpF,MAAM;EACb,GAEM,KAA0B,GAAkB,MAAoB;GACpE,IAAM,IAAQ,EAAW,OACrB;GAEJ,QAAQ,EAAE,KAAV;IACE,KAAK;IACL,KAAK;KACH,KAAU,IAAI,KAAK;KACnB;IACF,KAAK;IACL,KAAK;KACH,KAAU,IAAI,IAAI,KAAS;KAC3B;IACF,KAAK;KACH,IAAS,IAAQ;KACjB;IACF,KAAK;KACH,IAAS;KACT;IACF,SACE;GACJ;GAIA,AAFA,EAAE,eAAe,GACjB,EAAK,CAAM,GACX,EAAe,CAAM;EACvB,GAEM,UACJ,EAAa,QACT,CAAI;;;;;;8BAMgB,EAAM,MAAM,MAAM;;;;iCAId,CAAC,EAAU,SAAe,KAAA,EAAW;0BAC7C,MAAa;GAErB,AADA,EAAE,gBAAgB,GAClB,EAAK;EACP,EAAE;;+BAEc,EAAa,QAAQ,iBAAiB,aAAc;;;;;;;;;8BAStD,EAAM,MAAM,MAAM;;;;iCAId,CAAC,EAAU,SAAe,KAAA,EAAW;0BAC7C,MAAa;GAErB,AADA,EAAE,gBAAgB,GAClB,EAAK;EACP,EAAE;;+BAEc,EAAa,QAAQ,kBAAkB,eAAgB;;;;;;cAO7E,CAAI;EAEV,OAAO,CAAI;wDAC0C,EAAM,SAAS,QAAQ,QAAQ,SAAU;;;;cAK1F,EAAe,SAAS,EAAW,QAAQ,IACvC,CAAI;;wBAGE,MAAM,KACJ,EAAE,QAAQ,EAAW,MAAM,IAC1B,GAAG,MAAM,CAAI;;;;sCAII,EAAE;sCACF,YAAY,MAAM,EAAY,QAAQ,sBAAsB,KAAK;8CACzD,OAAO,MAAM,EAAY,KAAK,EAAE;yCACpC,MAAM,EAAY,QAAQ,MAAM,KAAM;sCAC1C,eAAe,IAAI,IAAI;uCACtB,EAAK,CAAC,EAAE;oCACX,MAAqB,EAAuB,GAAG,CAAC,EAAE;;;;wCAI9C,EAAM,MAAM,MAAM;uCAClB,EAAa,QAAQ,WAAW,WAAY;wCAC3C,MAAM,EAAY,QAAQ,MAAM,EAAG;wCACpC;GACZ,IAAM,IAAW,EAAa,QAAQ,kBAAkB;GAExD,OAAO,sBAAsB,EAAM,oBAAoB,CAAC,SAAS,IAAK,6BAA6B,MAAM,EAAY,SAAS,EAAM,SAAS,QAAQ,IAAW;EAClK,EAAE;;qBAGV,EAAE;kBACF,EAAe;;gBAGrB,CAAI;gBACA,EAAe;cACjB;;CAEZ;CACA,QAAQ,CAAC,CAAe;AAC1B,CAAC"}
+{"version":3,"file":"carousel.js","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { createPanGesture } from '@vielzeug/gesture';\nimport { bind, define, getHost, html, onCleanup, onMounted, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { announce, createListControl, lifecycleSignal } 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    const indicatorNav = createListControl<number>({\n      getItems: () => Array.from({ length: slideCount.value }, (_, index) => index),\n      loop: true,\n      onNavigate: ({ index }) => {\n        goTo(index);\n        const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n        dot?.focus();\n      },\n      orientation: () => (isHorizontal.value ? 'horizontal' : 'vertical'),\n      signal: lifecycleSignal(onCleanup),\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        pointerenter: () => {\n          stopAutoplay();\n        },\n        pointerleave: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n      },\n    });\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const pan = createPanGesture(el, {\n        axis: () => (isHorizontal.value ? 'x' : 'y'),\n        onEnd: ({ distance, reason }) => {\n          if (reason !== 'release' || Math.abs(distance) < 48) return;\n\n          if (distance < 0) next();\n          else prev();\n        },\n        shouldStart: (event) => {\n          const path = event.composedPath();\n\n          return !path.some(\n            (node) =>\n              node instanceof HTMLElement &&\n              (node.tagName === 'BUTTON' || node.tagName === 'ORE-BUTTON' || node.tagName === 'ORE-PROGRESS'),\n          );\n        },\n      });\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        pan.dispose();\n        stopAutoplay();\n        slot.removeEventListener('slotchange', onSlotChange);\n      };\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\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                        @focus=${() => indicatorNav.set(i)}\n                        @click=${() => goTo(i)}\n                        @keydown=${(e: KeyboardEvent) => {\n                          const target = e.currentTarget;\n\n                          if (target instanceof HTMLElement) {\n                            const index = Number(target.dataset.index);\n\n                            if (Number.isInteger(index)) indicatorNav.set(index);\n                          }\n\n                          indicatorNav.handleKeydown(e);\n                        }}>\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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"}

package/dist/combobox.cjs

@@ -1,10 +1,10 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./core/keyboard.cjs"),i=require("./core/choice-field.cjs"),a=require("./core/ore.cjs"),ee=require("./core/option-list.cjs"),o=require("./inputs/shared/native-field-event.cjs"),s=require("./inputs/combobox/combobox-options.cjs"),c=require("./inputs/combobox/combobox.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple");var d=`ore-combobox`;(0,l.define)(d,{formAssociated:!0,props:{autoclose:l.prop.bool(!1),color:l.prop.string(),creatable:l.prop.bool(!1),disabled:l.prop.bool(!1),error:l.prop.string(),fullwidth:l.prop.bool(!1),helper:l.prop.string(),label:l.prop.string(),"label-placement":l.prop.oneOf([`inset`,`outside`],`inset`),loading:l.prop.bool(!1),multiple:l.prop.bool(!1),name:l.prop.string(),"no-filter":l.prop.bool(!1),options:l.prop.data(),placeholder:l.prop.string(`Select...`),required:l.prop.bool(!1),rounded:l.prop.string(),size:l.prop.string(),success:l.prop.bool(!1),value:l.prop.string(),variant:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,l.useEmit)(),c=l.watchEffect,d=(0,u.signal)(``),f=null,p=null,m=null,h=null,g=(0,l.ref)(),_=a.lifecycleSignal(l.onCleanup),v=i.createChoiceField({disabled:e.disabled,error:e.error,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],multiple:e.multiple,prefix:`combobox`,required:e.required,signal:_,value:e.value}),y=(0,u.signal)([]),b=ee.createListboxDropdown({getBoundary:()=>t,getFocusedOptionElement:()=>m?.querySelector(`[data-focused]`)??null,getItems:()=>y.value,getOptionId:e=>`${v.fieldId}-opt-${e}`,getPanel:()=>m,getReference:()=>p,getTrigger:()=>f,isDisabled:()=>v.disabled.value,onClose:e=>{n(`open-change`,{open:!1,reason:e}),_.aborted||ce(),v.triggerValidation(`blur`)},onOpen:e=>n(`open-change`,{open:!0,reason:e}),restoreFocus:!1,signal:_}),{disabled:x,fieldId:S,selectedValues:C,triggerValidation:w}=v;v.attachFormField((0,l.useField)({disabled:v.disabled,onReset:v.reset,toFormValue:e=>e,validationMessage:v.validationMessage,validity:v.validity,value:v.formValue}));let{focusedIndex:T,isOpen:E,scrollFocusedIntoView:te,updatePosition:ne}=b,D=()=>!!e.multiple.value,re=()=>!!e.creatable.value,O=()=>!!e[`no-filter`].value;(0,l.bind)({attr:{open:()=>E.value?!0:void 0,size:e.size,variant:e.variant}});let k=null,A=!1,j=(0,u.computed)(()=>C.value[0]??``);Object.defineProperty(t,"value",{configurable:!0,get:()=>v.formValue.value,set:e=>{let t=e;if(Array.isArray(t)){v.setValues(t.map(e=>String(e??``)));return}if(t==null||t===``){v.clear();return}v.setValues(D()?String(t).split(`,`):[String(t)])}});let ie=()=>C.value.length>0;function M(){f?.focus()}let N=(0,u.signal)([]),P=(0,u.signal)([]),ae=()=>!!e.loading.value;function oe(e){return{disabled:!!e.disabled,iconEl:e.iconEl??null,label:e.label??e.value,value:e.value}}let F=(0,u.computed)(()=>{let t=e.options.value,n=Array.isArray(t)?t.map(oe):N.value;return P.value.length===0?n:[...n,...P.value]}),I={clear:()=>{v.clear()},remove:e=>{v.removeValue(e)},select:e=>{v.selectValue(e)},toggle:e=>{v.toggleValue(e)}};function L(e=Array.from(t.children)){if(N.value=s.parseSlottedOptions(e),!D()){let e=F.value.find(e=>e.value===j.value);d.value=e?.label??j.value}}L(),c(()=>{let e=s.filterOptions(F.value,d.value,O());y.value=D()?e.filter(e=>!C.value.includes(e.value)):e});let R=(0,u.computed)(()=>s.getCreatableLabel(d.value,re(),y.value)),z=()=>D()&&C.value.length>0?``:e.placeholder.value||``;function B(){o.dispatchNativeFieldEvent(t,`input`),o.dispatchNativeFieldEvent(t,`change`)}function se(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(I.remove(t),B(),w(`change`))}function ce(){if(!D()){let e=F.value.find(e=>e.value===j.value);A=!0,d.value=e?.label??``,Promise.resolve().then(()=>{A=!1});return}d.value=``}c(()=>{if(E.value&&!D()&&j.value&&T.value===-1&&d.value===``){let e=y.value.findIndex(e=>e.value===j.value);e>=0&&b.set(e)}});function V(e=!0,t=`programmatic`){if(e&&(k=d.value,d.value=``),!D()&&j.value){let e=s.filterOptions(F.value,``,O()).findIndex(e=>e.value===j.value);e>=0&&b.set(e)}b.open(t),!D()&&j.value&&T.value>=0&&requestAnimationFrame(()=>{te()})}function H(e=`programmatic`){b.close(e)}let le=r.createInteraction({disabled:x,onPress:()=>{E.value||V(!0,`click`),M()}}),ue=r.createInteraction({disabled:x,keys:[`Enter`],onPress:e=>{let t=y.value;E.value&&T.value>=0&&T.value<t.length?U(t[T.value],e):E.value&&T.value===-1&&R.value?J(d.value,e):E.value||V(!0,`keyboard`)}});function U(t,n){t.disabled||(D()?(I.toggle(t.value),d.value=``,B(),w(`change`),e.autoclose.value&&H(),M(),requestAnimationFrame(()=>M())):(I.select(t.value),d.value=t.label,B(),w(`change`),H(),M()))}function W(e){let t=e.getAttribute(`data-option-index`),n=t?Number(t):-1;if(Number.isInteger(n)&&n>=0&&n<y.value.length)return y.value[n]??null;let r=e.getAttribute(`data-option-value`);if(r){let e=y.value.find(e=>e.value===r);if(e)return e}let i=e.querySelector(`span`)?.textContent?.trim()??e.textContent?.trim()??``;return i?y.value.find(e=>e.label===i||e.value===i)??null:null}function de(e){e.stopPropagation(),I.clear(),d.value=``,B(),w(`change`),M()}function G(e){let t=e.target,r=t.value;if(!A&&r!==d.value){if(d.value=r,!D()){let e=C.value[0],t=e?F.value.find(t=>t.value===e)?.label??e:``;r===``&&k===t&&(k=null)}b.navigate(`first`),E.value||V(!1,`keyboard`),n(`search`,{query:t.value})}}function K(){}function q(e){if(!x.value&&!b.handleKeydown(e))switch(e.key){case`ArrowDown`:e.preventDefault(),E.value?b.navigate(`next`):(V(!0,`keyboard`),b.navigate(`first`));break;case`ArrowUp`:e.preventDefault(),E.value?b.navigate(`prev`):V(!0,`keyboard`);break;case`Backspace`:D()&&!d.value&&C.value.length>0&&(v.removeValue(C.value[C.value.length-1]??``),B(),w(`change`));break;case`Enter`:ue.handleKeydown(e);break;case`Tab`:H(`programmatic`)}}function J(e,t){let n=e.trim();if(!n)return;let r={disabled:!1,iconEl:null,label:n,value:s.makeCreatableValue(n)};P.value=[...P.value,r],U(r,t)}let fe=(()=>{let e=new MutationObserver(()=>{L()});return e.observe(t,{attributeFilter:[`disabled`,`label`,`value`],attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()})(),Y=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.option`);if(!n)return;let r=W(n);if(!r||r.disabled)return;let i=y.value.findIndex(e=>e.value===r.value);i>=0&&b.set(i)},X=t.shadowRoot;X&&X.addEventListener(`pointermove`,Y);let Z=e=>{let t=e=>{let t=e.target;if(!(t instanceof Element))return;if(t.closest(`.no-results-create`)){e.preventDefault(),e.stopPropagation(),J(d.value,e);return}let n=t.closest(`.option`);if(!n)return;e.preventDefault(),e.stopPropagation();let r=W(n);r&&U(r,e)},n=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.option`);if(!n)return;let r=W(n);if(!r)return;let i=y.value.findIndex(e=>e.value===r.value);i>=0&&b.set(i)};return e.addEventListener(`click`,t),e.addEventListener(`pointermove`,n),()=>{e.removeEventListener(`click`,t),e.removeEventListener(`pointermove`,n)}},Q=null,$=null,pe=e=>{h=e,$!==e&&(Q?.(),Q=null,$=null,e&&(Q=Z(e),$=e))},me=()=>{h&&($===h&&Q||(Q?.(),Q=Z(h),$=h))};return c(()=>{me(),E.value?(m&&`showPopover`in m&&!m.matches(`:popover-open`)&&m.showPopover(),ne()):m&&`hidePopover`in m&&m.matches(`:popover-open`)&&m.hidePopover()}),(0,l.onElement)(g,e=>{p=e;let t=e.shadowRoot?.querySelector(`input`)??null;if(!t)return;f=t,t.setAttribute(`role`,`combobox`),t.setAttribute(`autocomplete`,`off`),t.setAttribute(`aria-autocomplete`,`list`),t.setAttribute(`aria-haspopup`,`listbox`),t.setAttribute(`spellcheck`,`false`),t.setAttribute(`aria-controls`,`${S}-listbox`);let n=()=>{E.value||V(!0,`click`),M()};return t.addEventListener(`input`,G),t.addEventListener(`keydown`,q),t.addEventListener(`focus`,K),t.addEventListener(`click`,n),()=>{f=null,p=null,t.removeEventListener(`input`,G),t.removeEventListener(`keydown`,q),t.removeEventListener(`focus`,K),t.removeEventListener(`click`,n)}}),c(()=>{if(!g.value)return;let t=f;t&&(t.setAttribute(`aria-expanded`,String(E.value)),x.value?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),e.error.value?(t.setAttribute(`aria-invalid`,`true`),t.setAttribute(`aria-errormessage`,`${S}-error`)):(t.removeAttribute(`aria-invalid`),t.removeAttribute(`aria-errormessage`)))}),c(()=>{if(!g.value)return;let e=f;e&&e.value!==d.value&&(e.value=d.value)}),(0,l.onCleanup)(()=>{X?.removeEventListener(`pointermove`,Y),Q?.(),Q=null,$=null,fe()}),l.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./core/keyboard.cjs"),i=require("./core/choice-field.cjs"),a=require("./core/ore.cjs"),ee=require("./core/option-list.cjs"),o=require("./inputs/shared/native-field-event.cjs"),s=require("./inputs/combobox/combobox-options.cjs"),c=require("./inputs/combobox/combobox.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple");var d=`ore-combobox`;(0,l.define)(d,{formAssociated:!0,props:{autoclose:l.prop.bool(!1),color:l.prop.string(),creatable:l.prop.bool(!1),disabled:l.prop.bool(!1),error:l.prop.string(),fullwidth:l.prop.bool(!1),helper:l.prop.string(),label:l.prop.string(),"label-placement":l.prop.oneOf([`inset`,`outside`],`inset`),loading:l.prop.bool(!1),multiple:l.prop.bool(!1),name:l.prop.string(),"no-filter":l.prop.bool(!1),options:l.prop.data(),placeholder:l.prop.string(`Select...`),required:l.prop.bool(!1),rounded:l.prop.string(),size:l.prop.string(),success:l.prop.bool(!1),value:l.prop.string(),variant:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,l.useEmit)(),c=l.watchEffect,d=(0,u.signal)(``),f=null,p=null,m=null,h=null,g=(0,l.ref)(),_=a.lifecycleSignal(l.onCleanup),v=i.createChoiceField({disabled:e.disabled,error:e.error,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],multiple:e.multiple,prefix:`combobox`,required:e.required,signal:_,value:e.value}),y=(0,u.signal)([]),b=ee.createListboxDropdown({getBoundary:()=>t,getFocusedOptionElement:()=>m?.querySelector(`[data-focused]`)??null,getItems:()=>y.value,getOptionId:e=>`${v.fieldId}-opt-${e}`,getPanel:()=>m,getReference:()=>p,getTrigger:()=>f,isDisabled:()=>v.disabled.value,isItemDisabled:e=>e.disabled,onClose:e=>{n(`open-change`,{open:!1,reason:e}),_.aborted||oe(),v.triggerValidation(`blur`)},onOpen:e=>n(`open-change`,{open:!0,reason:e}),restoreFocus:!1,signal:_}),{disabled:x,fieldId:S,selectedValues:C,triggerValidation:w}=v;v.attachFormField((0,l.useField)({disabled:v.disabled,onReset:v.reset,toFormValue:e=>e,validationMessage:v.validationMessage,validity:v.validity,value:v.formValue}));let{focusedIndex:T,isOpen:E,scrollFocusedIntoView:te,updatePosition:ne}=b,D=()=>!!e.multiple.value,O=()=>!!e.creatable.value,k=()=>!!e[`no-filter`].value;(0,l.bind)({attr:{open:()=>E.value?!0:void 0,size:e.size,variant:e.variant}});let A=null,j=!1,M=(0,u.computed)(()=>C.value[0]??``);Object.defineProperty(t,"value",{configurable:!0,get:()=>v.formValue.value,set:e=>{let t=e;if(Array.isArray(t)){v.setValues(t.map(e=>String(e??``)));return}if(t==null||t===``){v.clear();return}v.setValues(D()?String(t).split(`,`):[String(t)])}});let re=()=>C.value.length>0;function N(){f?.focus()}let P=(0,u.signal)([]),F=(0,u.signal)([]),ie=()=>!!e.loading.value;function I(e){return{disabled:!!e.disabled,iconEl:e.iconEl??null,label:e.label??e.value,value:e.value}}let L=(0,u.computed)(()=>{let t=e.options.value,n=Array.isArray(t)?t.map(I):P.value;return F.value.length===0?n:[...n,...F.value]}),R={clear:()=>{v.clear()},remove:e=>{v.removeValue(e)},select:e=>{v.selectValue(e)},toggle:e=>{v.toggleValue(e)}};function z(e=Array.from(t.children)){if(P.value=s.parseSlottedOptions(e),!D()){let e=L.value.find(e=>e.value===M.value);d.value=e?.label??M.value}}z(),c(()=>{let e=s.filterOptions(L.value,d.value,k());y.value=D()?e.filter(e=>!C.value.includes(e.value)):e});let B=(0,u.computed)(()=>s.getCreatableLabel(d.value,O(),y.value)),V=()=>D()&&C.value.length>0?``:e.placeholder.value||``;function H(){o.dispatchNativeFieldEvent(t,`input`),o.dispatchNativeFieldEvent(t,`change`)}function ae(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(R.remove(t),H(),w(`change`))}function oe(){if(!D()){let e=L.value.find(e=>e.value===M.value);j=!0,d.value=e?.label??``,Promise.resolve().then(()=>{j=!1});return}d.value=``}c(()=>{if(E.value&&!D()&&M.value&&T.value===-1&&d.value===``){let e=y.value.findIndex(e=>e.value===M.value);e>=0&&b.set(e)}});function U(e=!0,t=`programmatic`){if(e&&(A=d.value,d.value=``),!D()&&M.value){let e=s.filterOptions(L.value,``,k()).findIndex(e=>e.value===M.value);e>=0&&b.set(e)}b.open(t),!D()&&M.value&&T.value>=0&&requestAnimationFrame(()=>{te()})}function W(e=`programmatic`){b.close(e)}let se=r.createInteraction({disabled:x,onPress:()=>{E.value||U(!0,`click`),N()}}),ce=r.createInteraction({disabled:x,keys:[`Enter`],onPress:e=>{let t=y.value;E.value&&T.value>=0&&T.value<t.length?G(t[T.value],e):E.value&&T.value===-1&&B.value?X(d.value,e):E.value||U(!0,`keyboard`)}});function G(t,n){t.disabled||(D()?(R.toggle(t.value),d.value=``,H(),w(`change`),e.autoclose.value&&W(),N(),requestAnimationFrame(()=>N())):(R.select(t.value),d.value=t.label,H(),w(`change`),W(),N()))}function K(e){let t=e.getAttribute(`data-option-index`),n=t?Number(t):-1;if(Number.isInteger(n)&&n>=0&&n<y.value.length)return y.value[n]??null;let r=e.getAttribute(`data-option-value`);if(r){let e=y.value.find(e=>e.value===r);if(e)return e}let i=e.querySelector(`span`)?.textContent?.trim()??e.textContent?.trim()??``;return i?y.value.find(e=>e.label===i||e.value===i)??null:null}function le(e){e.stopPropagation(),R.clear(),d.value=``,H(),w(`change`),N()}function q(e){let t=e.target,r=t.value;if(!j&&r!==d.value){if(d.value=r,!D()){let e=C.value[0],t=e?L.value.find(t=>t.value===e)?.label??e:``;r===``&&A===t&&(A=null)}b.navigate(`first`),E.value||U(!1,`keyboard`),n(`search`,{query:t.value})}}function J(){}function Y(e){if(!x.value&&!b.handleKeydown(e))switch(e.key){case`ArrowDown`:e.preventDefault(),E.value?b.navigate(`next`):(U(!0,`keyboard`),b.navigate(`first`));break;case`ArrowUp`:e.preventDefault(),E.value?b.navigate(`prev`):U(!0,`keyboard`);break;case`Backspace`:D()&&!d.value&&C.value.length>0&&(v.removeValue(C.value[C.value.length-1]??``),H(),w(`change`));break;case`Enter`:ce.handleKeydown(e);break;case`Tab`:W(`programmatic`)}}function X(e,t){let n=e.trim();if(!n)return;let r={disabled:!1,iconEl:null,label:n,value:s.makeCreatableValue(n)};F.value=[...F.value,r],G(r,t)}let ue=(()=>{let e=new MutationObserver(()=>{z()});return e.observe(t,{attributeFilter:[`disabled`,`label`,`value`],attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()})(),Z=e=>{let t=e=>{let t=e.target;if(!(t instanceof Element))return;if(t.closest(`.no-results-create`)){e.preventDefault(),e.stopPropagation(),X(d.value,e);return}let n=t.closest(`.option`);if(!n)return;e.preventDefault(),e.stopPropagation();let r=K(n);!r||r.disabled||G(r,e)},n=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.option`);if(!n)return;let r=K(n);if(!r)return;let i=y.value.findIndex(e=>e.value===r.value);i>=0&&b.set(i)};return e.addEventListener(`click`,t),e.addEventListener(`pointermove`,n),()=>{e.removeEventListener(`click`,t),e.removeEventListener(`pointermove`,n)}},Q=null,$=null,de=e=>{h=e,$!==e&&(Q?.(),Q=null,$=null,e&&(Q=Z(e),$=e))},fe=()=>{h&&($===h&&Q||(Q?.(),Q=Z(h),$=h))};return c(()=>{fe(),E.value?(m&&`showPopover`in m&&!m.matches(`:popover-open`)&&m.showPopover(),ne()):m&&`hidePopover`in m&&m.matches(`:popover-open`)&&m.hidePopover()}),(0,l.onElement)(g,e=>{p=e;let t=e.shadowRoot?.querySelector(`input`)??null;if(!t)return;f=t,t.setAttribute(`role`,`combobox`),t.setAttribute(`autocomplete`,`off`),t.setAttribute(`aria-autocomplete`,`list`),t.setAttribute(`aria-haspopup`,`listbox`),t.setAttribute(`spellcheck`,`false`),t.setAttribute(`aria-controls`,`${S}-listbox`);let n=()=>{E.value||U(!0,`click`),N()};return t.addEventListener(`input`,q),t.addEventListener(`keydown`,Y),t.addEventListener(`focus`,J),t.addEventListener(`click`,n),()=>{f=null,p=null,t.removeEventListener(`input`,q),t.removeEventListener(`keydown`,Y),t.removeEventListener(`focus`,J),t.removeEventListener(`click`,n)}}),c(()=>{if(!g.value)return;let t=f;t&&(t.setAttribute(`aria-expanded`,String(E.value)),x.value?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),e.error.value?(t.setAttribute(`aria-invalid`,`true`),t.setAttribute(`aria-errormessage`,`${S}-error`)):(t.removeAttribute(`aria-invalid`),t.removeAttribute(`aria-errormessage`)))}),c(()=>{if(!g.value)return;let e=f;e&&e.value!==d.value&&(e.value=d.value)}),(0,l.onCleanup)(()=>{Q?.(),Q=null,$=null,ue()}),l.html`
       <slot></slot>
       <ore-input
         class="trigger"
         ref=${g}
         label="${()=>e.label.value??``}"
-        placeholder="${z}"
+        placeholder="${V}"
         label-placement="${()=>e[`label-placement`].value??`inset`}"
         color="${()=>e.color?.value??void 0}"
         size="${()=>e.size?.value??void 0}"
@@ -17,7 +17,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         ?fullwidth="${()=>e.fullwidth.value?!0:void 0}"
         ?success="${()=>e.success.value}"
         name="${()=>e.name.value??``}"
-        @click="${e=>{le.handleClick(e)}}"
+        @click="${e=>{se.handleClick(e)}}"
         part="wrapper">
         <div slot="prefix" class="chips-row">
           <!-- Keep chip list diffing isolated so input node identity stays stable. -->
@@ -25,13 +25,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             ${()=>(D()?C.value:[]).map(t=>l.html`
                   <ore-chip
                     value=${t}
-                    label=${F.value.find(e=>e.value===t)?.label??t}
+                    label=${L.value.find(e=>e.value===t)?.label??t}
                     mode="removable"
                     variant="flat"
                     size="sm"
                     color="${e.color}"
-                    @remove=${se}>
-                    ${F.value.find(e=>e.value===t)?.label??t}
+                    @remove=${ae}>
+                    ${L.value.find(e=>e.value===t)?.label??t}
                   </ore-chip>
                 `)}
           </span>
@@ -43,8 +43,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             type="button"
             aria-label="Clear"
             tabindex="-1"
-            ?hidden=${()=>!ie()}
-            @click="${de}">
+            ?hidden=${()=>!re()}
+            @click="${le}">
             <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
           </button>
           <span class="combobox-suffix-end">
@@ -75,12 +75,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           id="${()=>`${S}-listbox`}"
           style="${()=>E.value&&y.value.length>0?`height:${y.value.length*36}px;`:``}"
           aria-label="${()=>e.label.value||e.placeholder.value||`Options`}"
-          ref=${e=>{pe(e)}}>
-          ${()=>E.value?ae()?l.html`
+          ref=${e=>{de(e)}}>
+          ${()=>E.value?ie()?l.html`
                 <div class="dropdown-loading">Loading...</div>
-              `:y.value.length===0?R.value?l.html`
+              `:y.value.length===0?B.value?l.html`
                   <button type="button" class="no-results-create" ?data-focused=${()=>T.value===-1}>
-                    ${R.value}
+                    ${B.value}
                   </button>
                 `:l.html`
                 <div class="no-results" role="presentation">No results found</div>
@@ -91,11 +91,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                   id="${`${S}-opt-${t}`}"
                   data-option-index="${t}"
                   data-option-value="${e.value}"
-                  aria-selected="${()=>String(D()?C.value.includes(e.value):j.value===e.value)}"
+                  aria-selected="${()=>String(D()?C.value.includes(e.value):M.value===e.value)}"
                   aria-disabled="${String(e.disabled)}"
                   style="${`position:absolute;top:0;left:0;right:0;transform:translateY(${t*36}px);`}"
                   ?data-focused=${()=>T.value===t}
-                  ?data-selected=${()=>D()?C.value.includes(e.value):j.value===e.value}
+                  ?data-selected=${()=>D()?C.value.includes(e.value):M.value===e.value}
                   ?data-disabled=${e.disabled}>
                   <span>${e.label}</span>
                   <span class="option-check" aria-hidden="true">