@vielzeug/refine 1.1.3 → 1.3.0

package/dist/card.js

@@ -3,71 +3,72 @@ import { frostVariantMixin as t } from "./styles/mixins/variants.css.js";
 import { surfaceMixins as n } from "./styles/index.js";
 import { disablableBundle as r, loadableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
 import { createInteraction as o } from "./headless/keyboard.js";
-import s from "./content/card/card.css?inline.js";
-import { define as c, html as l, prop as u } from "@vielzeug/ore";
-import { computed as d } from "@vielzeug/ripple";
+import s from "./content/card/card.css.js";
+import { bind as c, define as l, getHost as u, html as d, prop as f, useEmit as p, useSlots as m, watchEffect as h } from "@vielzeug/ore";
+import { computed as g } from "@vielzeug/ripple";
 //#region src/content/card/card.ts
-var f = "button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]";
-function p(e, t) {
+var _ = "button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]";
+function v(e, t) {
 	for (let n of t.composedPath()) if (n instanceof HTMLElement) {
 		if (n === e) return !1;
-		if (n.matches(f) || n.closest(f)) return !0;
+		if (n.matches(_) || n.closest(_)) return !0;
 	}
 	return !1;
 }
-var m = "ore-card";
-c(m, {
+var y = "ore-card";
+l(y, {
 	props: {
 		...a,
 		...r,
 		...i,
-		elevation: u.number(),
-		interactive: u.bool(!1),
-		orientation: u.string(),
-		padding: u.string(),
-		variant: u.string()
+		elevation: f.number(),
+		interactive: f.bool(!1),
+		orientation: f.string(),
+		padding: f.string(),
+		variant: f.string()
 	},
-	setup(e, { bind: t, el: n, emit: r, slots: i, watch: a }) {
-		t({ attr: {
+	setup(e) {
+		let t = u(), n = p(), r = m(), i = h;
+		c({ attr: {
 			ariaBusy: () => e.loading.value ? "true" : "false",
 			ariaDisabled: () => e.interactive.value ? String(e.disabled.value) : null,
 			role: () => e.interactive.value ? "button" : null
-		} }), a(() => {
-			e.interactive.value ? n.setAttribute("tabindex", e.disabled.value ? "-1" : "0") : n.removeAttribute("tabindex");
+		} }), i(() => {
+			e.interactive.value ? t.setAttribute("tabindex", e.disabled.value ? "-1" : "0") : t.removeAttribute("tabindex");
 		});
-		let s = o({
-			disabled: d(() => !e.interactive.value || !!e.disabled.value),
+		let a = o({
+			disabled: g(() => !e.interactive.value || !!e.disabled.value),
 			onPress: (e, t) => {
-				r("activate", {
+				n("activate", {
 					originalEvent: e,
 					trigger: t
 				});
 			}
-		}), c = (t) => {
-			!e.interactive.value || e.disabled.value || p(n, t) || s.handleClick(t);
-		}, u = (e) => {
-			s.handleKeydown(e);
+		}), s = (n) => {
+			!e.interactive.value || e.disabled.value || v(t, n) || a.handleClick(n);
+		}, l = (e) => {
+			a.handleKeydown(e);
 		};
-		return t({ on: {
-			click: (e) => c(e),
-			keydown: (e) => u(e)
-		} }), l`
+		return c({ on: {
+			click: (e) => s(e),
+			keydown: (e) => l(e)
+		} }), d`
       <div class="card" part="card">
         <div class="loading-bar" part="loading-bar"></div>
-        <div class="card-media" part="media" ?hidden="${() => !i.has("media").value}">
+        <div class="card-media" part="media" ?hidden="${() => !r.has("media").value}">
           <slot name="media"></slot>
         </div>
         <div class="card-body" part="body">
-          <div class="card-header" part="header" ?hidden="${() => !i.has("header").value}">
+          <div class="card-header" part="header" ?hidden="${() => !r.has("header").value}">
             <slot name="header"></slot>
           </div>
-          <div class="card-content" part="content" ?hidden="${() => !i.has().value}">
+          <div class="card-content" part="content" ?hidden="${() => !r.has().value}">
             <slot></slot>
           </div>
-          <div class="card-footer" part="footer" ?hidden="${() => !i.has("footer").value}">
+          <div class="card-footer" part="footer" ?hidden="${() => !r.has("footer").value}">
             <slot name="footer"></slot>
           </div>
-          <div class="card-actions" part="actions" ?hidden="${() => !i.has("actions").value}">
+          <div class="card-actions" part="actions" ?hidden="${() => !r.has("actions").value}">
             <slot name="actions"></slot>
           </div>
         </div>
@@ -82,6 +83,6 @@ c(m, {
 	]
 });
 //#endregion
-export { m as CARD_TAG };
+export { y as CARD_TAG };
 
 //# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\n\nimport { createInteraction } from '../../headless';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport { frostVariantMixin, reducedMotionMixin, surfaceMixins } from '../../styles';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || !!node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps, OreCardEvents>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'glass' | 'frost'>(),\n  },\n\n  setup(props, { bind, el, emit, slots, watch }) {\n    bind({\n      attr: {\n        ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n        ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [...surfaceMixins, frostVariantMixin('.card'), reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;;AAUA,IAAM,IACJ;AAEF,SAAS,EAA0B,GAAmB,GAAuB;CAC3E,KAAK,IAAM,KAAQ,EAAM,aAAa,GAC9B,iBAAgB,aAEtB;MAAI,MAAS,GAAM,OAAO;EAE1B,IAAI,EAAK,QAAQ,CAA+B,KAAO,EAAK,QAAQ,CAA+B,GACjG,OAAO;CAHiB;CAO5B,OAAO;AACT;AAyEA,IAAa,IAAW;AACxB,EAAoC,GAAU;CAC5C,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,WAAW,EAAK,OAAuB;EACvC,aAAa,EAAK,KAAK,EAAK;EAC5B,aAAa,EAAK,OAAqB;EACvC,SAAS,EAAK,OAAoB;EAClC,SAAS,EAAK,OAA6C;CAC7D;CAEA,MAAM,GAAO,EAAE,SAAM,OAAI,SAAM,UAAO,YAAS;EAS7C,AARA,EAAK,EACH,MAAM;GACJ,gBAAiB,EAAM,QAAQ,QAAQ,SAAS;GAChD,oBAAqB,EAAM,YAAY,QAAQ,OAAO,EAAM,SAAS,KAAK,IAAI;GAC9E,YAAa,EAAM,YAAY,QAAQ,WAAW;EACpD,EACF,CAAC,GAED,QAAY;GACV,AAAI,EAAM,YAAY,QACpB,EAAG,aAAa,YAAY,EAAM,SAAS,QAAQ,OAAO,GAAG,IAE7D,EAAG,gBAAgB,UAAU;EAEjC,CAAC;EAMD,IAAM,IAAe,EAAkB;GACrC,UAAU,QAAe,CAAC,EAAM,YAAY,SAAS,EAAQ,EAAM,SAAS,KAAM;GAClF,UAAU,GAAe,MAAY;IACnC,EAAK,YAAY;KAAE;KAAe;IAAQ,CAAC;GAC7C;EACF,CAAC,GAEK,KAAe,MAAkB;GACjC,CAAC,EAAM,YAAY,SAAS,EAAM,SAAS,SAE3C,EAA0B,GAAI,CAAC,KAEnC,EAAa,YAAY,CAAC;EAC5B,GAEM,KAAiB,MAAqB;GAC1C,EAAa,cAAc,CAAC;EAC9B;EAaA,OAXA,EAAK,EACH,IAAI;GACF,QAAQ,MAAkB,EAAY,CAAC;GACvC,UAAU,MAAqB,EAAc,CAAC;EAChD,EACF,CAAC,GAMM,CAAI;;;8DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;kEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;kEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;CAM9F;CAEA,QAAQ;EAAC,GAAG;EAAe,EAAkB,OAAO;EAAG;EAAoB;CAAe;AAC5F,CAAC"}
+{"version":3,"file":"card.js","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\n\nimport { createInteraction } from '../../headless';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport { frostVariantMixin, reducedMotionMixin, surfaceMixins } from '../../styles';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || !!node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'glass' | 'frost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCardEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n        ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [...surfaceMixins, frostVariantMixin('.card'), reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;;AAUA,IAAM,IACJ;AAEF,SAAS,EAA0B,GAAmB,GAAuB;CAC3E,KAAK,IAAM,KAAQ,EAAM,aAAa,GAC9B,iBAAgB,aAEtB;MAAI,MAAS,GAAM,OAAO;EAE1B,IAAI,EAAK,QAAQ,CAA+B,KAAO,EAAK,QAAQ,CAA+B,GACjG,OAAO;CAHiB;CAO5B,OAAO;AACT;AAyEA,IAAa,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,WAAW,EAAK,OAAuB;EACvC,aAAa,EAAK,KAAK,EAAK;EAC5B,aAAa,EAAK,OAAqB;EACvC,SAAS,EAAK,OAAoB;EAClC,SAAS,EAAK,OAA6C;CAC7D;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAuB,GAC9B,IAAQ,EAAS,GACjB,IAAQ;EAUd,AARA,EAAK,EACH,MAAM;GACJ,gBAAiB,EAAM,QAAQ,QAAQ,SAAS;GAChD,oBAAqB,EAAM,YAAY,QAAQ,OAAO,EAAM,SAAS,KAAK,IAAI;GAC9E,YAAa,EAAM,YAAY,QAAQ,WAAW;EACpD,EACF,CAAC,GAED,QAAY;GACV,AAAI,EAAM,YAAY,QACpB,EAAG,aAAa,YAAY,EAAM,SAAS,QAAQ,OAAO,GAAG,IAE7D,EAAG,gBAAgB,UAAU;EAEjC,CAAC;EAMD,IAAM,IAAe,EAAkB;GACrC,UAAU,QAAe,CAAC,EAAM,YAAY,SAAS,EAAQ,EAAM,SAAS,KAAM;GAClF,UAAU,GAAe,MAAY;IACnC,EAAK,YAAY;KAAE;KAAe;IAAQ,CAAC;GAC7C;EACF,CAAC,GAEK,KAAe,MAAkB;GACjC,CAAC,EAAM,YAAY,SAAS,EAAM,SAAS,SAE3C,EAA0B,GAAI,CAAC,KAEnC,EAAa,YAAY,CAAC;EAC5B,GAEM,KAAiB,MAAqB;GAC1C,EAAa,cAAc,CAAC;EAC9B;EAaA,OAXA,EAAK,EACH,IAAI;GACF,QAAQ,MAAkB,EAAY,CAAC;GACvC,UAAU,MAAqB,EAAc,CAAC;EAChD,EACF,CAAC,GAMM,CAAI;;;8DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;kEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;kEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;CAM9F;CAEA,QAAQ;EAAC,GAAG;EAAe,EAAkB,OAAO;EAAG;EAAoB;CAAe;AAC5F,CAAC"}

package/dist/carousel.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./_dev.cjs"),t=require("./headless/swipe.cjs"),n=require("./headless/announcer.cjs"),r=require("./content/carousel/carousel.css?inline.cjs"),i=require("./content/carousel/carousel-slide.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=`ore-carousel`,c=(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)})},l=(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`)})},u=(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)})},d=(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`)})};(0,a.define)(s,{props:{autoplay:a.prop.bool(!1),"autoplay-interval":a.prop.number(5e3),color:a.prop.string(),label:a.prop.string(`Carousel`),loop:a.prop.bool(!0),"marquee-duration":a.prop.number(10),orientation:a.prop.string(`horizontal`),"show-controls":a.prop.bool(!0),"show-indicators":a.prop.bool(!0),"slide-index":a.prop.number(0),variant:a.prop.string(`default`)},setup(r,{bind:i,el:s,emit:f,onMounted:p}){let m=(0,o.signal)(r[`slide-index`].value??0),h=(0,o.computed)(()=>r.variant.value===`marquee`),g=null,_=Array.from(s.querySelectorAll(`:scope > ore-carousel-slide`)),v=(0,o.signal)(_.length),y=()=>{_=Array.from(s.querySelectorAll(`:scope > ore-carousel-slide`)),v.value=_.length},b=(0,o.computed)(()=>r.orientation.value!==`vertical`),x=(0,o.computed)(()=>r.loop.value!==!1),S=(0,o.computed)(()=>r[`show-controls`].value!==!1),C=(0,o.computed)(()=>r[`show-indicators`].value!==!1),w=(0,o.computed)(()=>x.value||m.value>0),T=(0,o.computed)(()=>x.value||m.value<v.value-1),E=null,D=(e,t=!0)=>{let r=v.value;if(r===0)return;let i=x.value?(e%r+r)%r:Math.max(0,Math.min(e,r-1));i!==m.value&&(m.value=i,s.setAttribute(`slide-index`,String(i)),f(`change`,{index:i}),E?.seekTo(i,_),t&&n.announce(_[i]?.getAttribute(`aria-label`)??`Slide ${i+1} of ${r}`))},O=()=>D(m.value-1),k=()=>D(m.value+1);(0,o.watch)(r[`slide-index`],e=>{typeof e==`number`&&e!==m.value&&D(e,!1)});let A=()=>{let e=r.variant.value??`default`,t=r.orientation.value??`horizontal`;_.forEach(n=>{n.setAttribute(`data-variant`,e),n.setAttribute(`data-orientation`,t)})};(0,o.watch)((0,o.computed)(()=>({orientation:r.orientation.value,variant:r.variant.value})),A,{immediate:!0});let j={default:c,fade:c,filmstrip:l,gallery:u,marquee:d},M=()=>{let e=r.variant.value??`default`;j[e](_,m.value)};(0,o.watch)(m,M,{immediate:!0});let N=()=>{g===null&&(g=setInterval(k,r[`autoplay-interval`].value??5e3))},P=()=>{g!==null&&(clearInterval(g),g=null)};(0,o.watch)((0,o.computed)(()=>({enabled:r.autoplay.value,interval:r[`autoplay-interval`].value})),({enabled:e})=>{P(),e&&N()});let F=e=>{let t=b.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(v.value-1))},I=t.createSwipeControl({axis:()=>b.value?`x`:`y`,onCommit:e=>{e.distance<0?k():O()},threshold:()=>48});i({attr:{"aria-label":()=>r.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>r.orientation.value??`horizontal`,role:()=>`region`,style:()=>`touch-action:${b.value?`pan-y`:`pan-x`}`,variant:()=>r.variant.value??`default`},on:{focusin:()=>{P()},focusout:()=>{r.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)},pointerenter:()=>{P()},pointerleave:()=>{r.autoplay.value&&N()},pointermove:e=>I.handlePointerMove(e),pointerup:e=>I.handlePointerUp(e)}});let L=t=>{let n=r.orientation.value??`horizontal`,i=n!==`vertical`;h.value&&r.loop.value===!1&&e.warn(`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 a=_.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`),x.value||t.style.setProperty(`animation-iteration-count`,`1`);let o=!1,c=()=>{o=!0,t.style.setProperty(`animation-play-state`,`paused`)},l=()=>{o=!1,t.style.removeProperty(`animation-play-state`)};s.addEventListener(`mouseenter`,c),s.addEventListener(`mouseleave`,l);let u=null;return{cleanup:()=>{u!==null&&clearTimeout(u),u=null,a.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`),s.removeEventListener(`mouseenter`,c),s.removeEventListener(`mouseleave`,l)},seekTo:(e,n)=>{let a=n[e];if(!a)return;let c=i?a.offsetLeft:a.offsetTop,l=i?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`),o||t.style.removeProperty(`animation-play-state`);return}let p=parseFloat(getComputedStyle(s).getPropertyValue(`--carousel-transition-duration`)||`0.35`)*1e3||350,m=i?`translateX(-${c}px)`:`translateY(-${c}px)`;t.getBoundingClientRect();let h=getComputedStyle(t).transform.match(/matrix\(([^)]+)\)/)?.[1].split(`,`).map(Number),g=i?h?.[4]??0:h?.[5]??0,_=i?`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`),o&&t.style.setProperty(`animation-play-state`,`paused`)},p)})}}};p(()=>{let e=s.shadowRoot,t=e.querySelector(`.track`),n=e.querySelector(`slot`),i=()=>{y(),A(),M(),h.value&&(E?.cleanup(),E=L(t))};return n.addEventListener(`slotchange`,i),(0,o.watch)((0,o.computed)(()=>({duration:r[`marquee-duration`].value,isMarquee:h.value,loop:r.loop.value,orientation:r.orientation.value})),({isMarquee:e})=>{E?.cleanup(),E=e?L(t):null},{immediate:!0}),r.autoplay.value&&N(),()=>{P(),I.dispose(),n.removeEventListener(`slotchange`,i),E?.cleanup()}});let R=e=>{(s.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},z=(e,t)=>{let n=v.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),R(r)},B=()=>S.value?a.html`<div class="controls" part="controls">
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./_dev.cjs"),t=require("./headless/swipe.cjs"),n=require("./headless/announcer.cjs"),r=require("./content/carousel/carousel.css.cjs"),i=require("./content/carousel/carousel-slide.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=`ore-carousel`,c=(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)})},l=(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`)})},u=(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)})},d=(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`)})};(0,a.define)(s,{props:{autoplay:a.prop.bool(!1),"autoplay-interval":a.prop.number(5e3),color:a.prop.string(),label:a.prop.string(`Carousel`),loop:a.prop.bool(!0),"marquee-duration":a.prop.number(10),orientation:a.prop.string(`horizontal`),"show-controls":a.prop.bool(!0),"show-indicators":a.prop.bool(!0),"slide-index":a.prop.number(0),variant:a.prop.string(`default`)},setup(r){let i=(0,a.getHost)(),s=(0,a.useEmit)(),f=(0,o.signal)(r[`slide-index`].value??0),p=(0,o.computed)(()=>r.variant.value===`marquee`),m=null,h=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),g=(0,o.signal)(h.length),_=()=>{h=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),g.value=h.length},v=(0,o.computed)(()=>r.orientation.value!==`vertical`),y=(0,o.computed)(()=>r.loop.value!==!1),b=(0,o.computed)(()=>r[`show-controls`].value!==!1),x=(0,o.computed)(()=>r[`show-indicators`].value!==!1),S=(0,o.computed)(()=>y.value||f.value>0),C=(0,o.computed)(()=>y.value||f.value<g.value-1),w=null,T=(e,t=!0)=>{let r=g.value;if(r===0)return;let a=y.value?(e%r+r)%r:Math.max(0,Math.min(e,r-1));a!==f.value&&(f.value=a,i.setAttribute(`slide-index`,String(a)),s(`change`,{index:a}),w?.seekTo(a,h),t&&n.announce(h[a]?.getAttribute(`aria-label`)??`Slide ${a+1} of ${r}`))},E=()=>T(f.value-1),D=()=>T(f.value+1);(0,o.watch)(r[`slide-index`],e=>{typeof e==`number`&&e!==f.value&&T(e,!1)});let O=()=>{let e=r.variant.value??`default`,t=r.orientation.value??`horizontal`;h.forEach(n=>{n.setAttribute(`data-variant`,e),n.setAttribute(`data-orientation`,t)})};(0,o.watch)((0,o.computed)(()=>({orientation:r.orientation.value,variant:r.variant.value})),O,{immediate:!0});let k={default:c,fade:c,filmstrip:l,gallery:u,marquee:d},A=()=>{let e=r.variant.value??`default`;k[e](h,f.value)};(0,o.watch)(f,A,{immediate:!0});let j=()=>{m===null&&(m=setInterval(D,r[`autoplay-interval`].value??5e3))},M=()=>{m!==null&&(clearInterval(m),m=null)};(0,o.watch)((0,o.computed)(()=>({enabled:r.autoplay.value,interval:r[`autoplay-interval`].value})),({enabled:e})=>{M(),e&&j()});let N=e=>{let t=v.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),E()):e.key===r?(e.preventDefault(),D()):e.key===`Home`?(e.preventDefault(),T(0)):e.key===`End`&&(e.preventDefault(),T(g.value-1))},P=t.createSwipeControl({axis:()=>v.value?`x`:`y`,onCommit:e=>{e.distance<0?D():E()},threshold:()=>48});(0,a.bind)({attr:{"aria-label":()=>r.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>r.orientation.value??`horizontal`,role:()=>`region`,style:()=>`touch-action:${v.value?`pan-y`:`pan-x`}`,variant:()=>r.variant.value??`default`},on:{focusin:()=>{M()},focusout:()=>{r.autoplay.value&&j()},keydown:N,pointercancel:e=>P.handlePointerCancel(e),pointerdown:e=>{e.composedPath().some(e=>e instanceof HTMLElement&&(e.tagName===`BUTTON`||e.tagName===`ORE-BUTTON`||e.tagName===`ORE-PROGRESS`))||P.handlePointerDown(e)},pointerenter:()=>{M()},pointerleave:()=>{r.autoplay.value&&j()},pointermove:e=>P.handlePointerMove(e),pointerup:e=>P.handlePointerUp(e)}});let F=t=>{let n=r.orientation.value??`horizontal`,a=n!==`vertical`;p.value&&r.loop.value===!1&&e.warn(`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=h.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`),y.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)})}}};(0,a.onMounted)(()=>{let e=i.shadowRoot,t=e.querySelector(`.track`),n=e.querySelector(`slot`),a=()=>{_(),O(),A(),p.value&&(w?.cleanup(),w=F(t))};return n.addEventListener(`slotchange`,a),(0,o.watch)((0,o.computed)(()=>({duration:r[`marquee-duration`].value,isMarquee:p.value,loop:r.loop.value,orientation:r.orientation.value})),({isMarquee:e})=>{w?.cleanup(),w=e?F(t):null},{immediate:!0}),r.autoplay.value&&j(),()=>{M(),P.dispose(),n.removeEventListener(`slotchange`,a),w?.cleanup()}});let I=e=>{(i.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},L=(e,t)=>{let n=g.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(),T(r),I(r)},R=()=>b.value?a.html`<div class="controls" part="controls">
             <ore-button
               class="nav-btn prev-btn"
               part="prev-btn"
@@ -7,10 +7,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               rounded
               icon-only
               aria-label="Previous slide"
-              :disabled=${()=>w.value?void 0:!0}
-              @click=${e=>{e.stopPropagation(),O()}}>
+              :disabled=${()=>S.value?void 0:!0}
+              @click=${e=>{e.stopPropagation(),E()}}>
               <ore-icon
-                :name=${()=>b.value?`chevron-left`:`chevron-up`}
+                :name=${()=>v.value?`chevron-left`:`chevron-up`}
                 size="16"
                 stroke-width="2"
                 aria-hidden="true"></ore-icon>
@@ -23,10 +23,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               rounded
               icon-only
               aria-label="Next slide"
-              :disabled=${()=>T.value?void 0:!0}
-              @click=${e=>{e.stopPropagation(),k()}}>
+              :disabled=${()=>C.value?void 0:!0}
+              @click=${e=>{e.stopPropagation(),D()}}>
               <ore-icon
-                :name=${()=>b.value?`chevron-right`:`chevron-down`}
+                :name=${()=>v.value?`chevron-right`:`chevron-down`}
                 size="16"
                 stroke-width="2"
                 aria-hidden="true"></ore-icon>
@@ -36,26 +36,26 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <slot></slot>
       </div>
 
-      ${()=>C.value&&v.value>1&&!h.value?a.html`<div class="indicators" part="indicators" role="tablist" aria-label="Slide indicators">
-              ${()=>Array.from({length:v.value},(e,t)=>a.html`<button
+      ${()=>x.value&&g.value>1&&!p.value?a.html`<div class="indicators" part="indicators" role="tablist" aria-label="Slide indicators">
+              ${()=>Array.from({length:g.value},(e,t)=>a.html`<button
                       type="button"
                       role="tab"
                       data-index="${t}"
-                      :class=${()=>`indicator${!h.value&&t===m.value?` indicator-active`:``}`}
-                      :aria-selected=${()=>String(!h.value&&t===m.value)}
-                      :tabindex=${()=>!h.value&&t===m.value?`0`:`-1`}
+                      :class=${()=>`indicator${!p.value&&t===f.value?` indicator-active`:``}`}
+                      :aria-selected=${()=>String(!p.value&&t===f.value)}
+                      :tabindex=${()=>!p.value&&t===f.value?`0`:`-1`}
                       aria-label="${`Go to slide ${t+1}`}"
-                      @click=${()=>D(t)}
-                      @keydown=${e=>z(e,t)}>
+                      @click=${()=>T(t)}
+                      @keydown=${e=>L(e,t)}>
                       <ore-progress
                         aria-hidden="true"
                         tabindex="-1"
                         :color=${()=>r.color.value}
-                        :type=${()=>b.value?`linear`:`vertical`}
-                        :value=${()=>!h.value&&t===m.value?100:0}
-                        :style=${()=>{let e=b.value?`carousel-fill`:`carousel-fill-v`;return`--carousel-timeout:${r[`autoplay-interval`].value??5e3};--carousel-animation-name:${!h.value&&t===m.value&&r.autoplay.value?e:`none`}`}}></ore-progress>
+                        :type=${()=>v.value?`linear`:`vertical`}
+                        :value=${()=>!p.value&&t===f.value?100:0}
+                        :style=${()=>{let e=v.value?`carousel-fill`:`carousel-fill-v`;return`--carousel-timeout:${r[`autoplay-interval`].value??5e3};--carousel-animation-name:${!p.value&&t===f.value&&r.autoplay.value?e:`none`}`}}></ore-progress>
                     </button>`)}
-              ${B}
-            </div>`:a.html`${B}`}
+              ${R}
+            </div>`:a.html`${R}`}
     `},styles:[r.default]}),exports.CAROUSEL_SLIDE_TAG=i.CAROUSEL_SLIDE_TAG,exports.CAROUSEL_TAG=s;
 //# sourceMappingURL=carousel.cjs.map

package/dist/carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.cjs","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { define, html, prop } 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, OreCarouselEvents>(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, { bind, el, emit, onMounted }) {\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.cjs","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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"}