@mantine-vue/carousel 2.4.0 → 3.1.0

package/cjs/index.cjs

@@ -21,142 +21,93 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
+let _mantine_vue_core = require("@mantine-vue/core");
 let vue = require("vue");
 let embla_carousel_vue = require("embla-carousel-vue");
 embla_carousel_vue = __toESM(embla_carousel_vue);
 let _mantine_vue_hooks = require("@mantine-vue/hooks");
-let _mantine_vue_core = require("@mantine-vue/core");
 //#region src/Carousel.context.ts
 var [provideCarouselContext, useCarouselContext] = (0, _mantine_vue_core.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 = (0, vue.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 () => (0, vue.h)(_mantine_vue_core.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) => (0, _mantine_vue_core.filterProps)({
+	"--carousel-slide-gap": (0, _mantine_vue_core.getSpacing)((0, _mantine_vue_core.getBaseValue)(props.slideGap)),
+	"--carousel-slide-size": (0, _mantine_vue_core.rem)((0, _mantine_vue_core.getBaseValue)(props.slideSize))
 });
-var CarouselSlide = Object.assign((0, _mantine_vue_core.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__ */ (0, vue.defineComponent)({
+	name: "CarouselContainerVariables",
+	__name: "CarouselContainerVariables",
+	props: {
+		selector: {},
+		slideSize: {},
+		slideGap: {}
 	},
-	slideGap: {
-		type: [
-			String,
-			Number,
-			Object
-		],
-		default: void 0
-	}
-};
-var CarouselVariables = (0, vue.defineComponent)({
-	name: "CarouselVariables",
-	props: sharedProps,
-	setup(props) {
-		const theme = (0, _mantine_vue_core.useMantineTheme)();
-		return () => {
-			const baseStyles = (0, _mantine_vue_core.filterProps)({
-				"--carousel-slide-gap": (0, _mantine_vue_core.getSpacing)((0, _mantine_vue_core.getBaseValue)(props.slideGap)),
-				"--carousel-slide-size": (0, _mantine_vue_core.rem)((0, _mantine_vue_core.getBaseValue)(props.slideSize))
-			});
-			const queries = (0, _mantine_vue_core.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"] = (0, _mantine_vue_core.getSpacing)(props.slideGap[breakpoint]);
-				if (isObject(props.slideSize) && props.slideSize[breakpoint] !== void 0) acc[breakpoint]["--carousel-slide-size"] = (0, _mantine_vue_core.rem)(props.slideSize[breakpoint]);
-				return acc;
+	setup(__props) {
+		const props = __props;
+		const styles = (0, vue.computed)(() => getBaseStyles(props));
+		const container = (0, vue.computed)(() => {
+			const getBreakpoints = (value) => isObject(value) ? (0, _mantine_vue_core.keys)(value).filter((key) => key !== "base") : [];
+			return [...new Set([...getBreakpoints(props.slideGap), ...getBreakpoints(props.slideSize)])].sort((a, b) => (0, _mantine_vue_core.px)(a) - (0, _mantine_vue_core.px)(b)).reduce((result, breakpoint) => {
+				const values = {};
+				if (isObject(props.slideGap) && props.slideGap[breakpoint] !== void 0) values["--carousel-slide-gap"] = (0, _mantine_vue_core.getSpacing)(props.slideGap[breakpoint]);
+				if (isObject(props.slideSize) && props.slideSize[breakpoint] !== void 0) values["--carousel-slide-size"] = (0, _mantine_vue_core.rem)(props.slideSize[breakpoint]);
+				result[`carousel (min-width: ${breakpoint})`] = values;
+				return result;
 			}, {});
-			const media = (0, _mantine_vue_core.getSortedBreakpoints)(theme.value.breakpoints).reduce((acc, item) => {
-				if ((0, _mantine_vue_core.keys)(queries[item.breakpoint] ?? {}).length > 0) acc[`(min-width: ${theme.value.breakpoints[item.breakpoint]})`] = queries[item.breakpoint];
-				return acc;
-			}, {});
-			return (0, vue.h)(_mantine_vue_core.InlineStyles, {
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.InlineStyles), {
 				selector: props.selector,
-				styles: baseStyles,
-				media
-			});
+				styles: styles.value,
+				container: container.value
+			}, null, 8, [
+				"selector",
+				"styles",
+				"container"
+			]);
 		};
 	}
 });
-function getBreakpoints(values) {
-	return isObject(values) ? (0, _mantine_vue_core.keys)(values).filter((breakpoint) => breakpoint !== "base") : [];
-}
-function sortBreakpoints(breakpoints) {
-	return breakpoints.sort((a, b) => (0, _mantine_vue_core.px)(a) - (0, _mantine_vue_core.px)(b));
-}
-var CarouselContainerVariables = (0, vue.defineComponent)({
-	name: "CarouselContainerVariables",
-	props: sharedProps,
-	setup(props) {
-		return () => {
-			const baseStyles = (0, _mantine_vue_core.filterProps)({
-				"--carousel-slide-gap": (0, _mantine_vue_core.getSpacing)((0, _mantine_vue_core.getBaseValue)(props.slideGap)),
-				"--carousel-slide-size": (0, _mantine_vue_core.rem)((0, _mantine_vue_core.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"] = (0, _mantine_vue_core.getSpacing)(props.slideGap[breakpoint]);
-				if (isObject(props.slideSize) && props.slideSize[breakpoint] !== void 0) acc[key]["--carousel-slide-size"] = (0, _mantine_vue_core.rem)(props.slideSize[breakpoint]);
-				return acc;
+//#endregion
+//#region src/components/CarouselVariables/CarouselVariables.vue
+var CarouselVariables_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "CarouselVariables",
+	__name: "CarouselVariables",
+	props: {
+		selector: {},
+		slideSize: {},
+		slideGap: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const theme = (0, _mantine_vue_core.useMantineTheme)();
+		const styles = (0, vue.computed)(() => getBaseStyles(props));
+		const media = (0, vue.computed)(() => {
+			const queries = (0, _mantine_vue_core.keys)(theme.value.breakpoints).reduce((result, breakpoint) => {
+				const values = {};
+				if (isObject(props.slideGap) && props.slideGap[breakpoint] !== void 0) values["--carousel-slide-gap"] = (0, _mantine_vue_core.getSpacing)(props.slideGap[breakpoint]);
+				if (isObject(props.slideSize) && props.slideSize[breakpoint] !== void 0) values["--carousel-slide-size"] = (0, _mantine_vue_core.rem)(props.slideSize[breakpoint]);
+				result[breakpoint] = values;
+				return result;
+			}, {});
+			return (0, _mantine_vue_core.getSortedBreakpoints)(theme.value.breakpoints).reduce((result, item) => {
+				if ((0, _mantine_vue_core.keys)(queries[item.breakpoint] ?? {}).length) result[`(min-width: ${theme.value.breakpoints[item.breakpoint]})`] = queries[item.breakpoint];
+				return result;
 			}, {});
-			return (0, vue.h)(_mantine_vue_core.InlineStyles, {
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.InlineStyles), {
 				selector: props.selector,
-				styles: baseStyles,
-				container
-			});
+				styles: styles.value,
+				media: media.value
+			}, null, 8, [
+				"selector",
+				"styles",
+				"media"
+			]);
 		};
 	}
 });
@@ -177,200 +128,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 = (0, _mantine_vue_core.createVarsResolver)((_, { height, controlSize, controlsOffset }) => ({ root: {
 	"--carousel-height": (0, _mantine_vue_core.rem)(height),
 	"--carousel-control-size": (0, _mantine_vue_core.rem)(controlSize),
 	"--carousel-controls-offset": (0, _mantine_vue_core.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 !== vue.Comment).length;
-}
-var CarouselBaseComponent = (0, vue.defineComponent)({
+//#endregion
+//#region src/components/Carousel/Carousel.vue
+var Carousel_default = /* @__PURE__ */ (0, vue.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 = (0, _mantine_vue_core.useProps)("Carousel", defaultProps, rawProps);
+	emits: [
+		"next-slide",
+		"previous-slide",
+		"slide-change",
+		"embla-api-ready"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = (0, _mantine_vue_core.useProps)("Carousel", null, __props);
+		const emit = __emit;
+		const attrs = (0, vue.useAttrs)();
+		const slots = (0, vue.useSlots)();
 		const getStyles = (0, _mantine_vue_core.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 = (0, _mantine_vue_hooks.useId)(props.id);
-		const responsiveClassName = useRandomClassName();
+		const id = (0, _mantine_vue_hooks.useId)(props.id);
+		const responsiveClassName = `__mantine-vue-carousel-${Math.random().toString(36).slice(2, 9)}`;
 		const { dir } = (0, _mantine_vue_core.useDirection)();
+		const defaultEmblaOptions = {
+			align: "center",
+			loop: false,
+			slidesToScroll: 1,
+			dragFree: false,
+			inViewThreshold: 0,
+			skipSnaps: false,
+			containScroll: "trimSnaps"
+		};
 		const [emblaNode, embla] = (0, embla_carousel_vue.default)((0, vue.computed)(() => ({
 			axis: props.orientation === "horizontal" ? "x" : "y",
 			direction: props.orientation === "horizontal" ? dir.value : void 0,
@@ -381,81 +240,136 @@ var CarouselBaseComponent = (0, vue.defineComponent)({
 		const selected = (0, vue.ref)(0);
 		const slidesCount = (0, vue.ref)(0);
 		const slotSlideCount = (0, vue.ref)(0);
-		const handleScroll = (index) => {
+		const canScrollPrev = (0, vue.computed)(() => selected.value >= 0 && embla.value?.canScrollPrev() || false);
+		const canScrollNext = (0, vue.computed)(() => selected.value >= 0 && embla.value?.canScrollNext() || false);
+		const variablesProps = (0, vue.computed)(() => ({
+			selector: `.${responsiveClassName}`,
+			slideSize: props.slideSize,
+			slideGap: props.slideGap
+		}));
+		function countRealSlides(nodes) {
+			return nodes.filter((node) => node.type !== vue.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);
-			}
-		};
-		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();
+				scrollTo((embla.value?.scrollSnapList().length ?? 1) - 1);
 			}
-			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();
 			}
-		};
-		(0, vue.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;
+		(0, vue.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 });
 		(0, vue.watch)([slotSlideCount, () => props.emblaOptions?.slidesToScroll], ([childrenCount]) => {
 			const instance = embla.value;
@@ -470,110 +384,125 @@ var CarouselBaseComponent = (0, vue.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) => (0, vue.h)(_mantine_vue_core.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" ? (0, vue.h)(CarouselContainerVariables, variablesProps) : (0, vue.h)(CarouselVariables, variablesProps), (0, vue.h)(_mantine_vue_core.Box, {
+		const rootElement = (0, vue.ref)(null);
+		const setRootRef = (node) => {
+			rootElement.value = node;
+			(0, _mantine_vue_hooks.assignRef)(props.rootRef, node);
+		};
+		__expose({
+			embla,
+			rootElement
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [(0, vue.unref)(props).type === "container" ? ((0, vue.openBlock)(), (0, vue.createBlock)(CarouselContainerVariables_default, (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, variablesProps.value)), null, 16)) : ((0, vue.openBlock)(), (0, vue.createBlock)(CarouselVariables_default, (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, variablesProps.value)), null, 16)), (0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ rootRef: setRootRef }, {
 				role: "region",
 				"aria-roledescription": "carousel",
-				...attrs,
-				...getStyles("root", { className: responsiveClassName }),
-				id: _id.value,
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(getStyles)("root", { className: responsiveClassName })
+			}, {
+				id: (0, vue.unref)(id),
 				mod: [{
-					orientation: props.orientation,
-					"include-gap-in-size": props.includeGapInSize
-				}, props.mod],
-				onKeydownCapture: handleKeydown
-			}, () => [
-				(0, vue.h)(_mantine_vue_core.VisuallyHidden, {
-					role: "status",
-					"aria-live": "polite",
-					"aria-atomic": "true"
-				}, () => slidesCount.value > 0 ? `Slide ${selected.value + 1} of ${slidesCount.value}` : ""),
-				props.withControls && (0, vue.h)("div", {
-					...getStyles("controls"),
-					"data-orientation": props.orientation
-				}, [(0, vue.h)(_mantine_vue_core.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
-					}),
-					onClick: (event) => {
-						handlePrevious();
-						props.previousControlProps?.onClick?.(event);
-					}
-				}, () => typeof props.previousControlIcon !== "undefined" ? props.previousControlIcon : (0, vue.h)(_mantine_vue_core.AccordionChevron, { style: { transform: `rotate(${getChevronRotation({
-					dir: dir.value,
-					orientation: props.orientation,
-					direction: "previous"
-				})}deg)` } })), (0, vue.h)(_mantine_vue_core.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
+					orientation: (0, vue.unref)(props).orientation,
+					"include-gap-in-size": (0, vue.unref)(props).includeGapInSize
+				}, (0, vue.unref)(props).mod],
+				onKeydownCapture: keydown
+			}), {
+				default: (0, vue.withCtx)(() => [
+					(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.VisuallyHidden), {
+						role: "status",
+						"aria-live": "polite",
+						"aria-atomic": "true"
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(slidesCount.value > 0 ? `Slide ${selected.value + 1} of ${slidesCount.value}` : ""), 1)]),
+						_: 1
 					}),
-					...props.nextControlProps,
-					onClick: (event) => {
-						handleNext();
-						props.nextControlProps?.onClick?.(event);
-					}
-				}, () => typeof props.nextControlIcon !== "undefined" ? props.nextControlIcon : (0, vue.h)(_mantine_vue_core.AccordionChevron, { style: { transform: `rotate(${getChevronRotation({
-					dir: dir.value,
-					orientation: props.orientation,
-					direction: "next"
-				})}deg)` } }))]),
-				(0, vue.h)("div", {
-					...getStyles("viewport"),
-					ref: emblaNode,
-					"data-type": props.type
-				}, [(0, vue.h)("div", {
-					...getStyles("container", { className: responsiveClassName }),
-					"data-orientation": props.orientation
-				}, defaultSlot)]),
-				props.withIndicators && (0, vue.h)("div", {
-					...getStyles("indicators"),
-					role: "tablist",
-					"aria-label": "Slides",
-					"data-orientation": props.orientation
-				}, indicators)
-			])];
+					(0, vue.unref)(props).withControls ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(getStyles)("controls"), { "data-orientation": (0, vue.unref)(props).orientation }), [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.normalizeProps)((0, vue.guardReactiveProps)(previousAttrs())), {
+						default: (0, vue.withCtx)(() => [(0, vue.unref)(props).previousControlIcon !== void 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderPreviousIcon), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.AccordionChevron), {
+							key: 1,
+							style: (0, vue.normalizeStyle)({ transform: `rotate(${(0, vue.unref)(getChevronRotation)({
+								dir: (0, vue.unref)(dir),
+								orientation: (0, vue.unref)(props).orientation,
+								direction: "previous"
+							})}deg)` })
+						}, null, 8, ["style"]))]),
+						_: 1
+					}, 16), (0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.normalizeProps)((0, vue.guardReactiveProps)(nextAttrs())), {
+						default: (0, vue.withCtx)(() => [(0, vue.unref)(props).nextControlIcon !== void 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderNextIcon), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.AccordionChevron), {
+							key: 1,
+							style: (0, vue.normalizeStyle)({ transform: `rotate(${(0, vue.unref)(getChevronRotation)({
+								dir: (0, vue.unref)(dir),
+								orientation: (0, vue.unref)(props).orientation,
+								direction: "next"
+							})}deg)` })
+						}, null, 8, ["style"]))]),
+						_: 1
+					}, 16)], 16, _hoisted_1)) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createElementVNode)("div", (0, vue.mergeProps)({
+						ref_key: "emblaNode",
+						ref: emblaNode
+					}, (0, vue.unref)(getStyles)("viewport"), { "data-type": (0, vue.unref)(props).type }), [(0, vue.createElementVNode)("div", (0, vue.mergeProps)((0, vue.unref)(getStyles)("container", { className: responsiveClassName }), { "data-orientation": (0, vue.unref)(props).orientation }), [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderSlides)))], 16, _hoisted_3)], 16, _hoisted_2),
+					(0, vue.unref)(props).withIndicators ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: 1 }, (0, vue.unref)(getStyles)("indicators"), {
+						role: "tablist",
+						"aria-label": "Slides",
+						"data-orientation": (0, vue.unref)(props).orientation
+					}), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(slidesCount.value, (index) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)({ key: index - 1 }, { ref_for: true }, indicatorAttrs(index - 1)), null, 16);
+					}), 128))], 16, _hoisted_4)) : (0, vue.createCommentVNode)("", true)
+				]),
+				_: 1
+			}, 16, ["id", "mod"])], 64);
+		};
+	}
+});
+//#endregion
+//#region src/components/CarouselSlide/CarouselSlide.vue
+var CarouselSlide_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "CarouselSlide",
+	inheritAttrs: false,
+	__name: "CarouselSlide",
+	props: {
+		rootRef: { type: [Object, Function] },
+		classNames: {},
+		styles: {},
+		mod: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = (0, vue.useAttrs)();
+		const context = useCarouselContext();
+		const rootElement = (0, vue.ref)(null);
+		const setRootRef = (node) => {
+			rootElement.value = node;
+			(0, _mantine_vue_hooks.assignRef)(props.rootRef, node);
+		};
+		__expose({ rootElement });
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ rootRef: setRootRef }, {
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(context).getStyles("slide", {
+					className: (0, vue.unref)(attrs).class,
+					style: (0, vue.unref)(attrs).style,
+					classNames: props.classNames,
+					styles: props.styles
+				})
+			}, {
+				mod: [{ orientation: (0, vue.unref)(context).orientation }, props.mod],
+				role: "group",
+				"aria-roledescription": "slide",
+				"aria-label": "Carousel slide"
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["mod"]);
 		};
 	}
 });
-var Carousel = Object.assign((0, _mantine_vue_core.withBoxProps)(CarouselBaseComponent), {
+//#endregion
+//#region src/components/CarouselSlide/index.ts
+var CarouselSlide = (0, _mantine_vue_core.factory)(CarouselSlide_default, { classes: Carousel_module_default });
+//#endregion
+//#region src/components/Carousel/index.ts
+var Carousel = (0, _mantine_vue_core.factory)(Carousel_default, {
 	classes: Carousel_module_default,
 	varsResolver,
 	Slide: CarouselSlide