@mantine-vue/carousel 3.0.0 → 3.1.0

package/esm/index.mjs

@@ -1,138 +1,89 @@
-import { Comment, computed, defineComponent, h, ref, watch } from "vue";
+import { AccordionChevron, Box, InlineStyles, UnstyledButton, VisuallyHidden, createSafeContext, createVarsResolver, factory, filterProps, getBaseValue, getSortedBreakpoints, getSpacing, keys, px, rem, useDirection, useMantineTheme, useProps, useStyles } from "@mantine-vue/core";
+import { Comment, Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useSlots, watch, withCtx } from "vue";
 import emblaCarouselVue from "embla-carousel-vue";
-import { useId } from "@mantine-vue/hooks";
-import { AccordionChevron, Box, InlineStyles, UnstyledButton, VisuallyHidden, createSafeContext, createVarsResolver, filterProps, getBaseValue, getSortedBreakpoints, getSpacing, keys, px, rem, useDirection, useMantineTheme, useProps, useStyles, withBoxProps } from "@mantine-vue/core";
+import { assignRef, useId } from "@mantine-vue/hooks";
 //#region src/Carousel.context.ts
 var [provideCarouselContext, useCarouselContext] = createSafeContext("Carousel component was not found in tree");
-var Carousel_module_default = {
-	root: "_root_avx3r_1",
-	viewport: "_viewport_avx3r_6",
-	container: "_container_avx3r_15",
-	controls: "_controls_avx3r_35",
-	control: "_control_avx3r_35",
-	indicators: "_indicators_avx3r_87",
-	indicator: "_indicator_avx3r_87",
-	slide: "_slide_avx3r_135"
-};
 //#endregion
-//#region src/CarouselSlide.ts
-var CarouselSlideBaseComponent = defineComponent({
-	name: "CarouselSlide",
-	inheritAttrs: false,
-	props: {
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		mod: {
-			type: [Object, Array],
-			default: void 0
-		}
-	},
-	setup(props, { attrs, slots }) {
-		const ctx = useCarouselContext();
-		return () => h(Box, {
-			mod: [{ orientation: ctx.orientation }, props.mod],
-			role: "group",
-			"aria-roledescription": "slide",
-			"aria-label": "Carousel slide",
-			...attrs,
-			...ctx.getStyles("slide", {
-				className: attrs.class,
-				style: attrs.style,
-				classNames: props.classNames,
-				styles: props.styles
-			})
-		}, slots);
-	}
+//#region src/components/CarouselVariables/CarouselVariables.utils.ts
+var isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var getBaseStyles = (props) => filterProps({
+	"--carousel-slide-gap": getSpacing(getBaseValue(props.slideGap)),
+	"--carousel-slide-size": rem(getBaseValue(props.slideSize))
 });
-var CarouselSlide = Object.assign(withBoxProps(CarouselSlideBaseComponent), { classes: Carousel_module_default });
 //#endregion
-//#region src/CarouselVariables.ts
-function isObject(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-var sharedProps = {
-	selector: {
-		type: String,
-		required: true
-	},
-	slideSize: {
-		type: [
-			String,
-			Number,
-			Object
-		],
-		default: void 0
+//#region src/components/CarouselVariables/CarouselContainerVariables.vue
+var CarouselContainerVariables_default = /* @__PURE__ */ defineComponent({
+	name: "CarouselContainerVariables",
+	__name: "CarouselContainerVariables",
+	props: {
+		selector: {},
+		slideSize: {},
+		slideGap: {}
 	},
-	slideGap: {
-		type: [
-			String,
-			Number,
-			Object
-		],
-		default: void 0
-	}
-};
-var CarouselVariables = defineComponent({
-	name: "CarouselVariables",
-	props: sharedProps,
-	setup(props) {
-		const theme = useMantineTheme();
-		return () => {
-			const baseStyles = filterProps({
-				"--carousel-slide-gap": getSpacing(getBaseValue(props.slideGap)),
-				"--carousel-slide-size": rem(getBaseValue(props.slideSize))
-			});
-			const queries = keys(theme.value.breakpoints).reduce((acc, breakpoint) => {
-				acc[breakpoint] = acc[breakpoint] ?? {};
-				if (isObject(props.slideGap) && props.slideGap[breakpoint] !== void 0) acc[breakpoint]["--carousel-slide-gap"] = getSpacing(props.slideGap[breakpoint]);
-				if (isObject(props.slideSize) && props.slideSize[breakpoint] !== void 0) acc[breakpoint]["--carousel-slide-size"] = rem(props.slideSize[breakpoint]);
-				return acc;
-			}, {});
-			const media = getSortedBreakpoints(theme.value.breakpoints).reduce((acc, item) => {
-				if (keys(queries[item.breakpoint] ?? {}).length > 0) acc[`(min-width: ${theme.value.breakpoints[item.breakpoint]})`] = queries[item.breakpoint];
-				return acc;
+	setup(__props) {
+		const props = __props;
+		const styles = computed(() => getBaseStyles(props));
+		const container = computed(() => {
+			const getBreakpoints = (value) => isObject(value) ? keys(value).filter((key) => key !== "base") : [];
+			return [...new Set([...getBreakpoints(props.slideGap), ...getBreakpoints(props.slideSize)])].sort((a, b) => px(a) - px(b)).reduce((result, breakpoint) => {
+				const values = {};
+				if (isObject(props.slideGap) && props.slideGap[breakpoint] !== void 0) values["--carousel-slide-gap"] = getSpacing(props.slideGap[breakpoint]);
+				if (isObject(props.slideSize) && props.slideSize[breakpoint] !== void 0) values["--carousel-slide-size"] = rem(props.slideSize[breakpoint]);
+				result[`carousel (min-width: ${breakpoint})`] = values;
+				return result;
 			}, {});
-			return h(InlineStyles, {
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(InlineStyles), {
 				selector: props.selector,
-				styles: baseStyles,
-				media
-			});
+				styles: styles.value,
+				container: container.value
+			}, null, 8, [
+				"selector",
+				"styles",
+				"container"
+			]);
 		};
 	}
 });
-function getBreakpoints(values) {
-	return isObject(values) ? keys(values).filter((breakpoint) => breakpoint !== "base") : [];
-}
-function sortBreakpoints(breakpoints) {
-	return breakpoints.sort((a, b) => px(a) - px(b));
-}
-var CarouselContainerVariables = defineComponent({
-	name: "CarouselContainerVariables",
-	props: sharedProps,
-	setup(props) {
-		return () => {
-			const baseStyles = filterProps({
-				"--carousel-slide-gap": getSpacing(getBaseValue(props.slideGap)),
-				"--carousel-slide-size": rem(getBaseValue(props.slideSize))
-			});
-			const container = sortBreakpoints(Array.from(new Set([...getBreakpoints(props.slideGap), ...getBreakpoints(props.slideSize)]))).reduce((acc, breakpoint) => {
-				const key = `carousel (min-width: ${breakpoint})`;
-				acc[key] = {};
-				if (isObject(props.slideGap) && props.slideGap[breakpoint] !== void 0) acc[key]["--carousel-slide-gap"] = getSpacing(props.slideGap[breakpoint]);
-				if (isObject(props.slideSize) && props.slideSize[breakpoint] !== void 0) acc[key]["--carousel-slide-size"] = rem(props.slideSize[breakpoint]);
-				return acc;
+//#endregion
+//#region src/components/CarouselVariables/CarouselVariables.vue
+var CarouselVariables_default = /* @__PURE__ */ defineComponent({
+	name: "CarouselVariables",
+	__name: "CarouselVariables",
+	props: {
+		selector: {},
+		slideSize: {},
+		slideGap: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const theme = useMantineTheme();
+		const styles = computed(() => getBaseStyles(props));
+		const media = computed(() => {
+			const queries = keys(theme.value.breakpoints).reduce((result, breakpoint) => {
+				const values = {};
+				if (isObject(props.slideGap) && props.slideGap[breakpoint] !== void 0) values["--carousel-slide-gap"] = getSpacing(props.slideGap[breakpoint]);
+				if (isObject(props.slideSize) && props.slideSize[breakpoint] !== void 0) values["--carousel-slide-size"] = rem(props.slideSize[breakpoint]);
+				result[breakpoint] = values;
+				return result;
 			}, {});
-			return h(InlineStyles, {
+			return getSortedBreakpoints(theme.value.breakpoints).reduce((result, item) => {
+				if (keys(queries[item.breakpoint] ?? {}).length) result[`(min-width: ${theme.value.breakpoints[item.breakpoint]})`] = queries[item.breakpoint];
+				return result;
+			}, {});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(InlineStyles), {
 				selector: props.selector,
-				styles: baseStyles,
-				container
-			});
+				styles: styles.value,
+				media: media.value
+			}, null, 8, [
+				"selector",
+				"styles",
+				"media"
+			]);
 		};
 	}
 });
@@ -153,200 +104,108 @@ function getPreviousIndicatorIndex(index, total) {
 function clamp(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
-//#endregion
-//#region src/Carousel.ts
-var defaultProps = {
-	controlSize: 26,
-	controlsOffset: "sm",
-	slideSize: "100%",
-	slideGap: 0,
-	orientation: "horizontal",
-	includeGapInSize: true,
-	initialSlide: 0,
-	withControls: true,
-	withIndicators: false,
-	withKeyboardEvents: true,
-	type: "media"
-};
-var defaultEmblaOptions = {
-	align: "center",
-	loop: false,
-	slidesToScroll: 1,
-	dragFree: false,
-	inViewThreshold: 0,
-	skipSnaps: false,
-	containScroll: "trimSnaps"
+var Carousel_module_default = {
+	root: "_root_avx3r_1",
+	viewport: "_viewport_avx3r_6",
+	container: "_container_avx3r_15",
+	controls: "_controls_avx3r_35",
+	control: "_control_avx3r_35",
+	indicators: "_indicators_avx3r_87",
+	indicator: "_indicator_avx3r_87",
+	slide: "_slide_avx3r_135"
 };
+//#endregion
+//#region src/components/Carousel/Carousel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-orientation"];
+var _hoisted_2 = ["data-type"];
+var _hoisted_3 = ["data-orientation"];
+var _hoisted_4 = ["data-orientation"];
 var varsResolver = createVarsResolver((_, { height, controlSize, controlsOffset }) => ({ root: {
 	"--carousel-height": rem(height),
 	"--carousel-control-size": rem(controlSize),
 	"--carousel-controls-offset": getSpacing(controlsOffset)
 } }));
-function useRandomClassName() {
-	return `__mantine-vue-carousel-${Math.random().toString(36).slice(2, 9)}`;
-}
-function countRealSlides(nodes) {
-	if (!nodes) return 0;
-	return nodes.filter((node) => node.type !== Comment).length;
-}
-var CarouselBaseComponent = defineComponent({
+//#endregion
+//#region src/components/Carousel/Carousel.vue
+var Carousel_default = /* @__PURE__ */ defineComponent({
 	name: "Carousel",
 	inheritAttrs: false,
+	__name: "Carousel",
 	props: {
-		emblaOptions: {
-			type: Object,
-			default: void 0
-		},
-		onNextSlide: {
-			type: Function,
-			default: void 0
-		},
-		onPreviousSlide: {
-			type: Function,
-			default: void 0
-		},
-		onSlideChange: {
-			type: Function,
-			default: void 0
-		},
-		getEmblaApi: {
-			type: Function,
-			default: void 0
-		},
-		nextControlProps: {
-			type: Object,
-			default: void 0
-		},
-		previousControlProps: {
-			type: Object,
-			default: void 0
-		},
-		controlSize: {
-			type: [String, Number],
-			default: void 0
-		},
-		controlsOffset: {
-			type: [String, Number],
-			default: void 0
-		},
-		slideSize: {
-			type: [
-				String,
-				Number,
-				Object
-			],
-			default: void 0
-		},
-		slideGap: {
-			type: [
-				String,
-				Number,
-				Object
-			],
-			default: void 0
-		},
-		orientation: {
-			type: String,
-			default: void 0
-		},
-		type: {
-			type: String,
-			default: void 0
-		},
-		height: {
-			type: [String, Number],
-			default: void 0
-		},
+		rootRef: {},
+		emblaOptions: {},
+		nextControlProps: {},
+		previousControlProps: {},
+		controlSize: { default: 26 },
+		controlsOffset: { default: "sm" },
+		slideSize: { default: "100%" },
+		slideGap: { default: 0 },
+		orientation: { default: "horizontal" },
+		type: { default: "media" },
+		height: {},
 		includeGapInSize: {
 			type: Boolean,
-			default: void 0
-		},
-		initialSlide: {
-			type: Number,
-			default: void 0
+			default: true
 		},
+		initialSlide: { default: 0 },
 		withControls: {
 			type: Boolean,
-			default: void 0
+			default: true
 		},
 		withIndicators: {
 			type: Boolean,
-			default: void 0
-		},
-		plugins: {
-			type: Array,
-			default: void 0
-		},
-		nextControlIcon: {
-			type: null,
-			default: void 0
-		},
-		previousControlIcon: {
-			type: null,
-			default: void 0
+			default: false
 		},
+		plugins: {},
+		nextControlIcon: {},
+		previousControlIcon: {},
 		withKeyboardEvents: {
 			type: Boolean,
-			default: void 0
-		},
-		getIndicatorProps: {
-			type: Function,
-			default: void 0
-		},
-		id: {
-			type: String,
-			default: void 0
-		},
-		mod: {
-			type: [Object, Array],
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
+			default: true
 		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		},
-		unstyled: {
-			type: Boolean,
-			default: false
-		}
+		getIndicatorProps: {},
+		id: {},
+		classNames: {},
+		styles: {},
+		vars: {},
+		unstyled: { type: Boolean },
+		mod: {}
 	},
-	setup(rawProps, { attrs, slots }) {
-		const props = useProps("Carousel", defaultProps, rawProps);
+	emits: [
+		"next-slide",
+		"previous-slide",
+		"slide-change",
+		"embla-api-ready"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = useProps("Carousel", null, __props);
+		const emit = __emit;
+		const attrs = useAttrs();
+		const slots = useSlots();
 		const getStyles = useStyles({
 			name: "Carousel",
 			classes: Carousel_module_default,
 			props,
-			get className() {
-				return attrs.class;
-			},
-			get style() {
-				return attrs.style;
-			},
-			get classNames() {
-				return props.classNames;
-			},
-			get styles() {
-				return props.styles;
-			},
-			get unstyled() {
-				return props.unstyled;
-			},
-			get vars() {
-				return props.vars;
-			},
+			className: attrs.class,
+			style: attrs.style,
+			classNames: props.classNames,
+			styles: props.styles,
+			unstyled: props.unstyled,
+			vars: props.vars,
 			varsResolver
 		});
-		const _id = useId(props.id);
-		const responsiveClassName = useRandomClassName();
+		const id = useId(props.id);
+		const responsiveClassName = `__mantine-vue-carousel-${Math.random().toString(36).slice(2, 9)}`;
 		const { dir } = useDirection();
+		const defaultEmblaOptions = {
+			align: "center",
+			loop: false,
+			slidesToScroll: 1,
+			dragFree: false,
+			inViewThreshold: 0,
+			skipSnaps: false,
+			containScroll: "trimSnaps"
+		};
 		const [emblaNode, embla] = emblaCarouselVue(computed(() => ({
 			axis: props.orientation === "horizontal" ? "x" : "y",
 			direction: props.orientation === "horizontal" ? dir.value : void 0,
@@ -357,81 +216,136 @@ var CarouselBaseComponent = defineComponent({
 		const selected = ref(0);
 		const slidesCount = ref(0);
 		const slotSlideCount = ref(0);
-		const handleScroll = (index) => {
+		const canScrollPrev = computed(() => selected.value >= 0 && embla.value?.canScrollPrev() || false);
+		const canScrollNext = computed(() => selected.value >= 0 && embla.value?.canScrollNext() || false);
+		const variablesProps = computed(() => ({
+			selector: `.${responsiveClassName}`,
+			slideSize: props.slideSize,
+			slideGap: props.slideGap
+		}));
+		function countRealSlides(nodes) {
+			return nodes.filter((node) => node.type !== Comment).length;
+		}
+		function renderSlides() {
+			const nodes = slots.default?.() ?? [];
+			slotSlideCount.value = countRealSlides(nodes);
+			return nodes;
+		}
+		function scrollTo(index) {
 			embla.value?.scrollTo(index);
-		};
-		const handleSelect = () => {
+		}
+		function select() {
 			const instance = embla.value;
 			if (!instance) return;
 			const slide = instance.selectedScrollSnap();
 			const changed = slide !== selected.value;
 			selected.value = slide;
-			if (changed) props.onSlideChange?.(slide);
-		};
-		const handlePrevious = () => {
+			if (changed) emit("slide-change", slide);
+		}
+		function previous() {
 			embla.value?.scrollPrev();
-			props.onPreviousSlide?.();
-		};
-		const handleNext = () => {
+			emit("previous-slide");
+		}
+		function next() {
 			embla.value?.scrollNext();
-			props.onNextSlide?.();
-		};
-		const handleKeydown = (event) => {
+			emit("next-slide");
+		}
+		function keydown(event) {
 			if (!props.withKeyboardEvents) return;
 			if (event.key === "ArrowRight") {
 				event.preventDefault();
-				handleNext();
+				next();
 			}
 			if (event.key === "ArrowLeft") {
 				event.preventDefault();
-				handlePrevious();
+				previous();
 			}
 			if (event.key === "Home") {
 				event.preventDefault();
-				embla.value?.scrollTo(0);
+				scrollTo(0);
 			}
 			if (event.key === "End") {
 				event.preventDefault();
-				embla.value?.scrollTo(embla.value.scrollSnapList().length - 1);
+				scrollTo((embla.value?.scrollSnapList().length ?? 1) - 1);
 			}
-		};
-		const handleIndicatorKeyDown = (event, index) => {
-			const isHorizontal = props.orientation === "horizontal";
-			const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
-			const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
-			const parent = event.currentTarget?.parentElement;
-			if (event.key === nextKey) {
-				event.preventDefault();
-				const nextIndex = getNextIndicatorIndex(index, slidesCount.value);
-				handleScroll(nextIndex);
-				(parent?.children[nextIndex])?.focus();
-			}
-			if (event.key === prevKey) {
-				event.preventDefault();
-				const prevIndex = getPreviousIndicatorIndex(index, slidesCount.value);
-				handleScroll(prevIndex);
-				(parent?.children[prevIndex])?.focus();
-			}
-			if (event.key === "Home") {
-				event.preventDefault();
-				handleScroll(0);
-				(parent?.children[0])?.focus();
-			}
-			if (event.key === "End") {
+		}
+		function indicatorKeydown(event, index) {
+			const nextKey = props.orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+			const previousKey = props.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+			const parent = event.currentTarget.parentElement;
+			let target = null;
+			if (event.key === nextKey) target = getNextIndicatorIndex(index, slidesCount.value);
+			if (event.key === previousKey) target = getPreviousIndicatorIndex(index, slidesCount.value);
+			if (event.key === "Home") target = 0;
+			if (event.key === "End") target = slidesCount.value - 1;
+			if (target !== null) {
 				event.preventDefault();
-				handleScroll(slidesCount.value - 1);
-				(parent?.children[slidesCount.value - 1])?.focus();
+				scrollTo(target);
+				(parent?.children[target])?.focus();
 			}
-		};
-		watch(embla, (instance, _prev, onCleanup) => {
+		}
+		function indicatorAttrs(index) {
+			return {
+				...getStyles("indicator"),
+				role: "tab",
+				"aria-label": `Go to slide ${index + 1}`,
+				"aria-selected": index === selected.value,
+				tabindex: index === selected.value ? 0 : -1,
+				"data-active": index === selected.value || void 0,
+				"data-orientation": props.orientation,
+				onClick: () => scrollTo(index),
+				onKeydown: (event) => indicatorKeydown(event, index),
+				onMousedown: (event) => event.preventDefault(),
+				...props.getIndicatorProps?.(index)
+			};
+		}
+		function previousAttrs() {
+			return {
+				"aria-controls": id.value,
+				"aria-label": "Previous slide",
+				"aria-disabled": !canScrollPrev.value,
+				"data-inactive": !canScrollPrev.value || void 0,
+				"data-type": "previous",
+				tabindex: canScrollPrev.value ? 0 : -1,
+				...props.previousControlProps,
+				...getStyles("control", {
+					className: props.previousControlProps?.className,
+					style: props.previousControlProps?.style
+				}),
+				onClick: (event) => {
+					previous();
+					props.previousControlProps?.onClick?.(event);
+				}
+			};
+		}
+		function nextAttrs() {
+			return {
+				"aria-controls": id.value,
+				"aria-label": "Next slide",
+				"aria-disabled": !canScrollNext.value,
+				"data-inactive": !canScrollNext.value || void 0,
+				"data-type": "next",
+				tabindex: canScrollNext.value ? 0 : -1,
+				...getStyles("control", {
+					className: props.nextControlProps?.className,
+					style: props.nextControlProps?.style
+				}),
+				...props.nextControlProps,
+				onClick: (event) => {
+					next();
+					props.nextControlProps?.onClick?.(event);
+				}
+			};
+		}
+		const renderPreviousIcon = () => props.previousControlIcon;
+		const renderNextIcon = () => props.nextControlIcon;
+		watch(embla, (instance, _previous, onCleanup) => {
 			if (!instance) return;
-			props.getEmblaApi?.(instance);
-			handleSelect();
+			emit("embla-api-ready", instance);
+			select();
 			slidesCount.value = instance.scrollSnapList().length;
-			instance.on("select", handleSelect);
-			onCleanup(() => {
-				instance.off("select", handleSelect);
-			});
+			instance.on("select", select);
+			onCleanup(() => instance.off("select", select));
 		}, { immediate: true });
 		watch([slotSlideCount, () => props.emblaOptions?.slidesToScroll], ([childrenCount]) => {
 			const instance = embla.value;
@@ -446,110 +360,122 @@ var CarouselBaseComponent = defineComponent({
 				return props.orientation;
 			}
 		});
-		return () => {
-			const canScrollPrev = embla.value?.canScrollPrev() || false;
-			const canScrollNext = embla.value?.canScrollNext() || false;
-			const defaultSlot = slots.default?.();
-			slotSlideCount.value = countRealSlides(defaultSlot);
-			const indicators = Array(slidesCount.value).fill(0).map((_, index) => h(UnstyledButton, {
-				...getStyles("indicator"),
-				key: index,
-				role: "tab",
-				"aria-label": `Go to slide ${index + 1}`,
-				"aria-selected": index === selected.value,
-				tabindex: index === selected.value ? 0 : -1,
-				"data-active": index === selected.value || void 0,
-				onClick: () => handleScroll(index),
-				onKeydown: (event) => handleIndicatorKeyDown(event, index),
-				"data-orientation": props.orientation,
-				onMousedown: (event) => event.preventDefault(),
-				...props.getIndicatorProps?.(index)
-			}));
-			const variablesProps = {
-				selector: `.${responsiveClassName}`,
-				slideSize: props.slideSize,
-				slideGap: props.slideGap
-			};
-			return [props.type === "container" ? h(CarouselContainerVariables, variablesProps) : h(CarouselVariables, variablesProps), h(Box, {
+		const rootElement = ref(null);
+		const setRootRef = (node) => {
+			rootElement.value = node;
+			assignRef(props.rootRef, node);
+		};
+		__expose({
+			embla,
+			rootElement
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [unref(props).type === "container" ? (openBlock(), createBlock(CarouselContainerVariables_default, normalizeProps(mergeProps({ key: 0 }, variablesProps.value)), null, 16)) : (openBlock(), createBlock(CarouselVariables_default, normalizeProps(mergeProps({ key: 1 }, variablesProps.value)), null, 16)), createVNode(unref(Box), mergeProps({ rootRef: setRootRef }, {
 				role: "region",
 				"aria-roledescription": "carousel",
-				...attrs,
-				...getStyles("root", { className: responsiveClassName }),
-				id: _id.value,
+				...unref(attrs),
+				...unref(getStyles)("root", { className: responsiveClassName })
+			}, {
+				id: unref(id),
 				mod: [{
-					orientation: props.orientation,
-					"include-gap-in-size": props.includeGapInSize
-				}, props.mod],
-				onKeydownCapture: handleKeydown
-			}, () => [
-				h(VisuallyHidden, {
-					role: "status",
-					"aria-live": "polite",
-					"aria-atomic": "true"
-				}, () => slidesCount.value > 0 ? `Slide ${selected.value + 1} of ${slidesCount.value}` : ""),
-				props.withControls && h("div", {
-					...getStyles("controls"),
-					"data-orientation": props.orientation
-				}, [h(UnstyledButton, {
-					"aria-controls": _id.value,
-					"aria-label": "Previous slide",
-					"aria-disabled": !canScrollPrev,
-					"data-inactive": !canScrollPrev || void 0,
-					"data-type": "previous",
-					tabindex: canScrollPrev ? 0 : -1,
-					...props.previousControlProps,
-					...getStyles("control", {
-						className: props.previousControlProps?.className,
-						style: props.previousControlProps?.style
+					orientation: unref(props).orientation,
+					"include-gap-in-size": unref(props).includeGapInSize
+				}, unref(props).mod],
+				onKeydownCapture: keydown
+			}), {
+				default: withCtx(() => [
+					createVNode(unref(VisuallyHidden), {
+						role: "status",
+						"aria-live": "polite",
+						"aria-atomic": "true"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(slidesCount.value > 0 ? `Slide ${selected.value + 1} of ${slidesCount.value}` : ""), 1)]),
+						_: 1
 					}),
-					onClick: (event) => {
-						handlePrevious();
-						props.previousControlProps?.onClick?.(event);
-					}
-				}, () => typeof props.previousControlIcon !== "undefined" ? props.previousControlIcon : h(AccordionChevron, { style: { transform: `rotate(${getChevronRotation({
-					dir: dir.value,
-					orientation: props.orientation,
-					direction: "previous"
-				})}deg)` } })), h(UnstyledButton, {
-					"aria-controls": _id.value,
-					"aria-label": "Next slide",
-					"aria-disabled": !canScrollNext,
-					"data-inactive": !canScrollNext || void 0,
-					"data-type": "next",
-					tabindex: canScrollNext ? 0 : -1,
-					...getStyles("control", {
-						className: props.nextControlProps?.className,
-						style: props.nextControlProps?.style
-					}),
-					...props.nextControlProps,
-					onClick: (event) => {
-						handleNext();
-						props.nextControlProps?.onClick?.(event);
-					}
-				}, () => typeof props.nextControlIcon !== "undefined" ? props.nextControlIcon : h(AccordionChevron, { style: { transform: `rotate(${getChevronRotation({
-					dir: dir.value,
-					orientation: props.orientation,
-					direction: "next"
-				})}deg)` } }))]),
-				h("div", {
-					...getStyles("viewport"),
-					ref: emblaNode,
-					"data-type": props.type
-				}, [h("div", {
-					...getStyles("container", { className: responsiveClassName }),
-					"data-orientation": props.orientation
-				}, defaultSlot)]),
-				props.withIndicators && h("div", {
-					...getStyles("indicators"),
-					role: "tablist",
-					"aria-label": "Slides",
-					"data-orientation": props.orientation
-				}, indicators)
-			])];
+					unref(props).withControls ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, unref(getStyles)("controls"), { "data-orientation": unref(props).orientation }), [createVNode(unref(UnstyledButton), normalizeProps(guardReactiveProps(previousAttrs())), {
+						default: withCtx(() => [unref(props).previousControlIcon !== void 0 ? (openBlock(), createBlock(resolveDynamicComponent(renderPreviousIcon), { key: 0 })) : (openBlock(), createBlock(unref(AccordionChevron), {
+							key: 1,
+							style: normalizeStyle({ transform: `rotate(${unref(getChevronRotation)({
+								dir: unref(dir),
+								orientation: unref(props).orientation,
+								direction: "previous"
+							})}deg)` })
+						}, null, 8, ["style"]))]),
+						_: 1
+					}, 16), createVNode(unref(UnstyledButton), normalizeProps(guardReactiveProps(nextAttrs())), {
+						default: withCtx(() => [unref(props).nextControlIcon !== void 0 ? (openBlock(), createBlock(resolveDynamicComponent(renderNextIcon), { key: 0 })) : (openBlock(), createBlock(unref(AccordionChevron), {
+							key: 1,
+							style: normalizeStyle({ transform: `rotate(${unref(getChevronRotation)({
+								dir: unref(dir),
+								orientation: unref(props).orientation,
+								direction: "next"
+							})}deg)` })
+						}, null, 8, ["style"]))]),
+						_: 1
+					}, 16)], 16, _hoisted_1)) : createCommentVNode("", true),
+					createElementVNode("div", mergeProps({
+						ref_key: "emblaNode",
+						ref: emblaNode
+					}, unref(getStyles)("viewport"), { "data-type": unref(props).type }), [createElementVNode("div", mergeProps(unref(getStyles)("container", { className: responsiveClassName }), { "data-orientation": unref(props).orientation }), [(openBlock(), createBlock(resolveDynamicComponent(renderSlides)))], 16, _hoisted_3)], 16, _hoisted_2),
+					unref(props).withIndicators ? (openBlock(), createElementBlock("div", mergeProps({ key: 1 }, unref(getStyles)("indicators"), {
+						role: "tablist",
+						"aria-label": "Slides",
+						"data-orientation": unref(props).orientation
+					}), [(openBlock(true), createElementBlock(Fragment, null, renderList(slidesCount.value, (index) => {
+						return openBlock(), createBlock(unref(UnstyledButton), mergeProps({ key: index - 1 }, { ref_for: true }, indicatorAttrs(index - 1)), null, 16);
+					}), 128))], 16, _hoisted_4)) : createCommentVNode("", true)
+				]),
+				_: 1
+			}, 16, ["id", "mod"])], 64);
 		};
 	}
 });
-var Carousel = Object.assign(withBoxProps(CarouselBaseComponent), {
+//#endregion
+//#region src/components/CarouselSlide/index.ts
+var CarouselSlide = factory(/* @__PURE__ */ defineComponent({
+	name: "CarouselSlide",
+	inheritAttrs: false,
+	__name: "CarouselSlide",
+	props: {
+		rootRef: { type: [Object, Function] },
+		classNames: {},
+		styles: {},
+		mod: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const context = useCarouselContext();
+		const rootElement = ref(null);
+		const setRootRef = (node) => {
+			rootElement.value = node;
+			assignRef(props.rootRef, node);
+		};
+		__expose({ rootElement });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), mergeProps({ rootRef: setRootRef }, {
+				...unref(attrs),
+				...unref(context).getStyles("slide", {
+					className: unref(attrs).class,
+					style: unref(attrs).style,
+					classNames: props.classNames,
+					styles: props.styles
+				})
+			}, {
+				mod: [{ orientation: unref(context).orientation }, props.mod],
+				role: "group",
+				"aria-roledescription": "slide",
+				"aria-label": "Carousel slide"
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["mod"]);
+		};
+	}
+}), { classes: Carousel_module_default });
+//#endregion
+//#region src/components/Carousel/index.ts
+var Carousel = factory(Carousel_default, {
 	classes: Carousel_module_default,
 	varsResolver,
 	Slide: CarouselSlide