@feugene/granularity 0.42.0 → 0.44.0

package/dist/components/GrCarousel/chunks/GrCarousel-ByuughtI.js

@@ -0,0 +1,761 @@
+import { i as useGrComponentProp } from "../../../chunks/context-CPMRfwVr.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as useFocusWithin } from "../../../chunks/useFocusWithin-BwHE0rzm.js";
+import { useRovingFocus } from "../../../composables/useRovingFocus.js";
+import { useAnnouncer } from "../../../composables/useAnnouncer.js";
+import { t as resolveScrollOverflow } from "../../../chunks/scrollOverflow-B_kEdcol.js";
+import { useDragGesture } from "../../../composables/useDragGesture.js";
+import { a as carouselSlideBase, c as carouselToggleClass, d as carouselViewportSwipeClass, f as grCarouselControlClass, i as carouselRootBase, l as carouselTrackBase, m as grCarouselIndicatorsClass, o as carouselThumbFallbackClass, p as grCarouselIndicatorClass, r as carouselIconClass, s as carouselThumbImageClass, u as carouselViewportBase } from "../../../chunks/config-BXRmsn3t.js";
+import { t as chevron_left_default } from "../../../chunks/chevron-left-D8AUBAM7.js";
+import { t as chevron_right_default } from "../../../chunks/chevron-right-C6Z01h0X.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, markRaw, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, watch, watchEffect } from "vue";
+import '../styles.css';/**
+* Доля ширины вьюпорта, начиная с которой жест засчитывается. Работает вместе
+* с {@link SWIPE_THRESHOLD_PX} по максимуму: 60px на герое шириной 1200px —
+* это нервно, а на узкой карточке доля выродилась бы в пару пикселей.
+*/
+var SWIPE_THRESHOLD_RATIO = .15;
+/**
+* Логическое направление жеста: `1` — вперёд, `-1` — назад, `0` — не свайп.
+*
+* `dx` физический, в пикселях экрана; разворот под RTL — забота вызывающего,
+* модуль про направление письма не знает. Палец, ушедший влево, листает вперёд:
+* содержимое едет за пальцем, как в нативной прокрутке.
+*
+* Отдельным модулем, потому что в jsdom раскладки нет и через смонтированный
+* компонент ни одна ветка не проверяется — тот же довод, что у
+* {@link resolveScrollOverflow}.
+*/
+function resolveSwipeDirection(dx, dy, threshold = 60) {
+	if (Math.abs(dx) < threshold) return 0;
+	if (Math.abs(dx) < Math.abs(dy) * 1.5) return 0;
+	return dx < 0 ? 1 : -1;
+}
+/**
+* Порог жеста для ленты шириной `width`. При нулевой ширине — а в jsdom она
+* всегда нулевая — вырождается в пиксельный минимум, и жест остаётся
+* проверяемым.
+*/
+function swipeThresholdFor(width) {
+	return Math.max(60, width * SWIPE_THRESHOLD_RATIO);
+}
+/** Смещение ленты за пальцем: за краем — вязкое, иначе один в один. */
+function resistOffset(delta, atEdge) {
+	return atEdge ? delta / 4 : delta;
+}
+/**
+* Индекс, зажатый в границы ленты. Пустая лента даёт `0`: слайда с таким
+* номером нет, но отрицательный индекс уехал бы в CSS-переменную трека.
+*/
+function clampIndex(index, count) {
+	if (count <= 0) return 0;
+	if (!Number.isFinite(index)) return 0;
+	return Math.min(Math.max(Math.trunc(index), 0), count - 1);
+}
+/**
+* Шаг по ленте. Без `loop` на краю возвращает тот же индекс — вызывающий по
+* этому признаку и гасит стрелку, отдельного предиката не нужно.
+*/
+function stepIndex(index, delta, count, loop) {
+	if (count <= 0) return 0;
+	const next = clampIndex(index, count) + delta;
+	if (loop) return (next % count + count) % count;
+	return clampIndex(next, count);
+}
+/**
+* Насколько прокрутить полосу переключателей, чтобы кадр был виден.
+*
+* Считается своей арифметикой, а не `scrollIntoView`: тот прокручивает **всех**
+* предков, включая документ, — и карусель, уехавшая под сгиб, на каждом шаге
+* автопрокрутки утаскивала бы страницу обратно к себе. Здесь двигается только
+* сама полоса.
+*
+* Движение минимальное: элемент уже виден — `scrollLeft` не меняется вовсе.
+*/
+function stripScrollLeft(scrollLeft, viewport, itemStart, itemEnd, padding = 0) {
+	if (viewport <= 0) return scrollLeft;
+	if (itemStart - padding < scrollLeft) return Math.max(0, itemStart - padding);
+	if (itemEnd + padding > scrollLeft + viewport) return itemEnd + padding - viewport;
+	return scrollLeft;
+}
+//#endregion
+//#region src/components/GrCarousel/composables/useCarouselAutoplay.ts
+/**
+* Таймер автопрокрутки с паузой по остатку.
+*
+* Модель взята у `useToast` (`{ handle, remaining, startedAt }`), и `setInterval`
+* здесь не годится принципиально: паузу, сохраняющую остаток, на нём не
+* выразить — курсор, снятый за полсекунды до шага, откладывал бы шаг на полный
+* интервал.
+*
+* Композабл локальный: публичный потребовал бы записей в трёх реестрах пакета,
+* а переиспользовать его сегодня некому.
+*/
+function useCarouselAutoplay(options) {
+	let handle = null;
+	let remaining = 0;
+	let startedAt = 0;
+	const armed = ref(false);
+	function clear() {
+		if (handle !== null) {
+			clearTimeout(handle);
+			handle = null;
+		}
+		armed.value = false;
+	}
+	function arm() {
+		if (typeof window === "undefined" || remaining <= 0) return;
+		startedAt = Date.now();
+		armed.value = true;
+		handle = window.setTimeout(() => {
+			handle = null;
+			remaining = options.interval();
+			options.advance();
+			if (options.enabled() && !options.paused()) arm();
+			else clear();
+		}, remaining);
+	}
+	function pause() {
+		if (handle === null) {
+			armed.value = false;
+			return;
+		}
+		clearTimeout(handle);
+		handle = null;
+		armed.value = false;
+		remaining = Math.max(0, remaining - (Date.now() - startedAt));
+	}
+	function restart() {
+		clear();
+		remaining = options.interval();
+		if (options.enabled() && !options.paused()) arm();
+	}
+	watchEffect(() => {
+		const ms = options.interval();
+		if (!options.enabled() || options.paused() || ms <= 0) {
+			pause();
+			return;
+		}
+		if (handle !== null) return;
+		if (remaining <= 0) remaining = ms;
+		arm();
+	});
+	onScopeDispose(clear);
+	return {
+		running: computed(() => armed.value),
+		restart
+	};
+}
+//#endregion
+//#region src/components/GrCarousel/composables/useCarouselSwipe.ts
+/**
+* Что внутри слайда остаётся нажатием, а не превращается в протяжку. Ссылка и
+* кнопка в онбординг-слайде — обычный интерактив, и жест их перехватывать
+* не вправе (приём `GrToaster`).
+*/
+var INTERACTIVE_SELECTOR = "a[href], button, input, textarea, select, summary, [role=\"button\"], [contenteditable]";
+function useCarouselSwipe(options) {
+	const offset = ref(0);
+	let startX = 0;
+	let startY = 0;
+	let threshold = 0;
+	let rtl = false;
+	function reset() {
+		offset.value = 0;
+	}
+	const drag = useDragGesture({
+		disabled: options.disabled,
+		onStart: (event) => {
+			if (event.target?.closest(INTERACTIVE_SELECTOR)) return false;
+			const viewport = options.viewport();
+			if (!viewport) return false;
+			startX = event.clientX;
+			startY = event.clientY;
+			offset.value = 0;
+			threshold = swipeThresholdFor(viewport.getBoundingClientRect().width);
+			rtl = getComputedStyle(viewport).direction === "rtl";
+			options.onStart?.();
+		},
+		onMove: (event) => {
+			event.preventDefault();
+			const dx = event.clientX - startX;
+			const dy = event.clientY - startY;
+			if (Math.abs(dx) < Math.abs(dy) * 1.5) {
+				offset.value = 0;
+				return;
+			}
+			const logical = physicalToLogical(dx < 0 ? 1 : -1);
+			offset.value = resistOffset(dx, options.atEdge(logical));
+		},
+		onEnd: (event) => {
+			const direction = event ? resolveSwipeDirection(event.clientX - startX, event.clientY - startY, threshold) : 0;
+			reset();
+			if (direction !== 0) options.onSwipe(physicalToLogical(direction));
+		},
+		onCancel: reset
+	});
+	/** В RTL содержимое течёт справа налево, и палец влево листает назад. */
+	function physicalToLogical(direction) {
+		return rtl ? direction === 1 ? -1 : 1 : direction;
+	}
+	return {
+		isDragging: drag.isDragging,
+		offset,
+		start: drag.start
+	};
+}
+//#endregion
+//#region src/components/GrCarousel/grCarouselContext.ts
+var GR_CAROUSEL_CONTEXT = Symbol("GR_CAROUSEL_CONTEXT");
+//#endregion
+//#region ~icons/lucide/pause
+var _hoisted_1$3 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$2(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2"
+	}, [createElementVNode("rect", {
+		width: "5",
+		height: "18",
+		x: "14",
+		y: "3",
+		rx: "1"
+	}), createElementVNode("rect", {
+		width: "5",
+		height: "18",
+		x: "5",
+		y: "3",
+		rx: "1"
+	})], -1)])]);
+}
+var pause_default = markRaw({
+	name: "lucide-pause",
+	render: render$2
+});
+//#endregion
+//#region ~icons/lucide/play
+var _hoisted_1$2 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
+	}, null, -1)])]);
+}
+var play_default = markRaw({
+	name: "lucide-play",
+	render: render$1
+});
+//#endregion
+//#region src/components/GrCarousel/GrCarousel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = [
+	"role",
+	"aria-roledescription",
+	"aria-label",
+	"aria-labelledby"
+];
+var _hoisted_2 = ["aria-live"];
+var _hoisted_3 = ["aria-label"];
+var _hoisted_4 = ["aria-disabled", "aria-label"];
+var _hoisted_5 = ["aria-disabled", "aria-label"];
+var _hoisted_6 = [
+	"data-variant",
+	"data-overflow",
+	"aria-label"
+];
+var _hoisted_7 = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"aria-label",
+	"tabindex",
+	"onClick"
+];
+var _hoisted_8 = ["src"];
+//#endregion
+//#region src/components/GrCarousel/GrCarousel.vue
+var GrCarousel_default = /* @__PURE__ */ defineComponent({
+	__name: "GrCarousel",
+	props: {
+		modelValue: { default: void 0 },
+		autoplay: {
+			type: Boolean,
+			default: false
+		},
+		autoplayInterval: { default: 5e3 },
+		loop: {
+			type: Boolean,
+			default: true
+		},
+		indicators: { default: void 0 },
+		tone: { default: void 0 },
+		activationMode: { default: void 0 },
+		arrows: {
+			type: Boolean,
+			default: true
+		},
+		swipe: {
+			type: Boolean,
+			default: true
+		},
+		landmark: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 },
+		ariaLabelledby: { default: void 0 },
+		prevLabel: { default: void 0 },
+		nextLabel: { default: void 0 },
+		playLabel: { default: void 0 },
+		pauseLabel: { default: void 0 },
+		indicatorsLabel: { default: void 0 }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useGranularityTranslations();
+		const { announce } = useAnnouncer();
+		const resolvedIndicators = useGrComponentProp("GrCarousel", "indicators", () => props.indicators, "dots");
+		const resolvedActivation = useGrComponentProp("GrCarousel", "activationMode", () => props.activationMode, "automatic");
+		const resolvedTone = useGrComponentProp("GrCarousel", "tone", () => props.tone, "primary");
+		const rootEl = ref(null);
+		const viewportEl = ref(null);
+		const indicatorsEl = ref(null);
+		const tabRefs = ref([]);
+		const entries = ref([]);
+		const total = computed(() => entries.value.length);
+		let reorderScheduled = false;
+		/**
+		* Порядок регистрации совпадает с документом только при первом монтировании:
+		* кадр, появившийся посреди ленты позже, встал бы в конец, и переключатели
+		* разъехались бы с лентой. Пересортировка откладывается на такт — к этому
+		* моменту узлы уже в DOM.
+		*/
+		function scheduleReorder() {
+			if (reorderScheduled || typeof document === "undefined") return;
+			reorderScheduled = true;
+			nextTick(() => {
+				reorderScheduled = false;
+				entries.value = [...entries.value].sort((left, right) => {
+					const a = left.el();
+					const b = right.el();
+					if (!a || !b) return 0;
+					return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+				});
+			});
+		}
+		function register(entry) {
+			entries.value.push(entry);
+			scheduleReorder();
+			return () => {
+				const index = entries.value.findIndex((item) => item.id === entry.id);
+				if (index >= 0) entries.value.splice(index, 1);
+				scheduleReorder();
+			};
+		}
+		const internalIndex = ref(0);
+		const currentIndex = computed(() => clampIndex(props.modelValue ?? internalIndex.value, total.value));
+		function setIndex(next) {
+			const value = clampIndex(next, total.value);
+			if (value === currentIndex.value) return;
+			internalIndex.value = value;
+			emit("update:modelValue", value);
+		}
+		const showIndicators = computed(() => resolvedIndicators.value !== "none" && total.value > 1);
+		const showArrows = computed(() => props.arrows && total.value > 1);
+		const isThumbnails = computed(() => resolvedIndicators.value === "thumbnails");
+		const atStart = computed(() => !props.loop && currentIndex.value <= 0);
+		const atEnd = computed(() => !props.loop && currentIndex.value >= total.value - 1);
+		const reducedMotion = ref(false);
+		const hovered = ref(false);
+		const documentHidden = ref(false);
+		/** `null` — тумблер не трогали, и решает проп. */
+		const userIntent = ref(null);
+		const playing = computed(() => total.value > 1 && (userIntent.value ?? (props.autoplay && !reducedMotion.value)));
+		/**
+		* Живой регион читает кадр, только когда лента стоит: у движущейся карусели
+		* объявление каждого кадра превратило бы страницу в неработающую.
+		*/
+		const liveMode = computed(() => playing.value ? "off" : "polite");
+		const swipeGesture = useCarouselSwipe({
+			disabled: () => !props.swipe || total.value <= 1,
+			viewport: () => viewportEl.value,
+			atEdge: (direction) => direction === 1 ? atEnd.value : atStart.value,
+			onStart: stopAutoplay,
+			onSwipe: (direction) => {
+				commitUserNavigation(stepIndex(currentIndex.value, direction, total.value, props.loop));
+			}
+		});
+		const autoplayTimer = useCarouselAutoplay({
+			interval: () => props.autoplayInterval,
+			enabled: () => playing.value,
+			paused: () => hovered.value || documentHidden.value || swipeGesture.isDragging.value,
+			advance: () => {
+				const next = stepIndex(currentIndex.value, 1, total.value, props.loop);
+				if (next === currentIndex.value) {
+					userIntent.value = false;
+					return;
+				}
+				setIndex(next);
+			}
+		});
+		function stopAutoplay() {
+			if (!playing.value) return;
+			userIntent.value = false;
+			announce(t("gr.carousel.autoplayStopped", "Automatic slide show stopped"));
+		}
+		/**
+		* `aria-live` обязан стать `polite` **раньше**, чем поменяется содержимое:
+		* иначе мутация случится, пока регион ещё `off`, и не прозвучит вовсе.
+		*/
+		async function commitUserNavigation(next) {
+			if (playing.value) {
+				stopAutoplay();
+				await nextTick();
+			}
+			setIndex(next);
+		}
+		function toggleAutoplay() {
+			if (playing.value) {
+				stopAutoplay();
+				return;
+			}
+			userIntent.value = true;
+			autoplayTimer.restart();
+		}
+		function goTo(index) {
+			commitUserNavigation(clampIndex(index, total.value));
+		}
+		function step(delta) {
+			commitUserNavigation(stepIndex(currentIndex.value, delta, total.value, props.loop));
+		}
+		const roving = useRovingFocus({
+			items: () => entries.value.map((_, index) => index),
+			elementFor: (index) => tabRefs.value[index],
+			orientation: () => "horizontal",
+			wrap: () => true,
+			initialKey: () => total.value > 0 ? currentIndex.value : void 0,
+			beforeFocus: (index) => scrollTabIntoView(index)
+		});
+		watch(total, (count) => {
+			if (count === 0) {
+				roving.reset();
+				return;
+			}
+			const requested = props.modelValue ?? internalIndex.value;
+			const clamped = clampIndex(requested, count);
+			if (clamped !== requested) {
+				internalIndex.value = clamped;
+				emit("update:modelValue", clamped);
+			}
+		});
+		/**
+		* Прокрутка **полосы**, а не страницы.
+		*
+		* `scrollIntoView` двигает всех предков, включая документ: карусель, уехавшая
+		* под сгиб, на каждом шаге автопрокрутки утаскивала бы страницу обратно к себе.
+		* Поэтому позиция считается сама и присваивается `scrollLeft` полосы.
+		*/
+		function scrollTabIntoView(index) {
+			const strip = indicatorsEl.value;
+			const tab = tabRefs.value[index];
+			if (!strip || !tab) return;
+			const next = stripScrollLeft(strip.scrollLeft, strip.clientWidth, tab.offsetLeft, tab.offsetLeft + tab.offsetWidth);
+			if (next !== strip.scrollLeft) strip.scrollLeft = next;
+		}
+		function setTabRef(el, index) {
+			tabRefs.value[index] = el;
+		}
+		function onIndicatorKeydown(event) {
+			if (total.value === 0) return;
+			const current = roving.rovingKey.value ?? 0;
+			if ((event.key === "Enter" || event.key === " ") && resolvedActivation.value === "manual") {
+				event.preventDefault();
+				commitUserNavigation(current);
+				return;
+			}
+			if (!roving.handleNavigationKeys(event)) return;
+			if (resolvedActivation.value !== "manual") commitUserNavigation(roving.rovingKey.value ?? current);
+		}
+		function onIndicatorClick(index) {
+			roving.setActive(index);
+			commitUserNavigation(index);
+		}
+		const { onFocusIn, onFocusOut } = useFocusWithin(rootEl, { enter: stopAutoplay });
+		const stripOverflow = ref("none");
+		let resizeObserver = null;
+		let measureScheduled = false;
+		function measureOverflow() {
+			const el = indicatorsEl.value;
+			if (!el || !isThumbnails.value) {
+				stripOverflow.value = "none";
+				return;
+			}
+			stripOverflow.value = resolveScrollOverflow(el.scrollLeft, el.scrollWidth, el.clientWidth);
+		}
+		function scheduleMeasure() {
+			if (measureScheduled) return;
+			measureScheduled = true;
+			nextTick(() => {
+				measureScheduled = false;
+				measureOverflow();
+			});
+		}
+		function onVisibilityChange() {
+			documentHidden.value = document.hidden;
+		}
+		onMounted(() => {
+			reducedMotion.value = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches === true;
+			document.addEventListener("visibilitychange", onVisibilityChange);
+			scheduleMeasure();
+			if (typeof ResizeObserver === "undefined") return;
+			resizeObserver = new ResizeObserver(scheduleMeasure);
+			if (indicatorsEl.value) resizeObserver.observe(indicatorsEl.value);
+		});
+		onBeforeUnmount(() => {
+			document.removeEventListener("visibilitychange", onVisibilityChange);
+			resizeObserver?.disconnect();
+			resizeObserver = null;
+		});
+		watch([total, isThumbnails], scheduleMeasure);
+		watch(currentIndex, async (index) => {
+			await nextTick();
+			scrollTabIntoView(index);
+		});
+		function entryAt(index) {
+			return entries.value[index];
+		}
+		function positionLabelAt(index) {
+			return t("gr.carousel.slidePosition", "{index} of {total}", {
+				index: index + 1,
+				total: total.value
+			});
+		}
+		function indicatorName(index) {
+			return entryAt(index)?.label() ?? positionLabelAt(index);
+		}
+		function tabDomId(index) {
+			return `${entryAt(index)?.id ?? index}-tab`;
+		}
+		const trackStyle = computed(() => {
+			const style = {
+				"--gr-carousel-index": String(currentIndex.value),
+				"--gr-carousel-drag": `${swipeGesture.offset.value}px`
+			};
+			if (swipeGesture.isDragging.value) style.transition = "none";
+			return style;
+		});
+		provide(GR_CAROUSEL_CONTEXT, {
+			register,
+			indexOf: (id) => entries.value.findIndex((entry) => entry.id === id),
+			isCurrent: (id) => entries.value[currentIndex.value]?.id === id,
+			total,
+			slideRole: computed(() => showIndicators.value ? "tabpanel" : "group"),
+			slideRoledescription: computed(() => t("gr.carousel.slideRoledescription", "slide")),
+			tabIdFor: (id) => {
+				if (!showIndicators.value) return void 0;
+				const index = entries.value.findIndex((entry) => entry.id === id);
+				return index >= 0 ? tabDomId(index) : void 0;
+			},
+			positionLabel: (id) => {
+				const index = entries.value.findIndex((entry) => entry.id === id);
+				return positionLabelAt(index >= 0 ? index : 0);
+			}
+		});
+		if (process.env.NODE_ENV !== "production") watchEffect(() => {
+			if (!props.ariaLabel && !props.ariaLabelledby) console.warn("[granularity] GrCarousel: у карусели нет доступного имени — передайте `ariaLabel` или `ariaLabelledby`. `aria-roledescription` именем не является.");
+			if (!props.arrows && resolvedIndicators.value === "none" && total.value > 1) console.warn("[granularity] GrCarousel: `arrows: false` вместе с `indicators: \"none\"` не оставляет ни одного способа сменить кадр с клавиатуры.");
+			if (isThumbnails.value && total.value > 0 && entries.value.every((entry) => !entry.hasThumbnail() && !entry.thumbnailSrc())) console.warn("[granularity] GrCarousel: `indicators=\"thumbnails\"`, но ни один слайд не дал миниатюру — задайте проп `thumbnail` или слот `#thumbnail` у `GrCarouselSlide`.");
+		});
+		__expose({
+			/** Текущий кадр — единственный способ прочитать позицию без `v-model`. */
+			index: computed(() => currentIndex.value),
+			/** Число кадров: состав живёт в слоте, снаружи его посчитать нечем. */
+			count: total,
+			/** Идёт ли показ. Пауза под курсором его не выключает. */
+			playing: computed(() => playing.value),
+			next: () => step(1),
+			prev: () => step(-1),
+			goTo,
+			play: () => {
+				if (!playing.value) toggleAutoplay();
+			},
+			pause: stopAutoplay
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-carousel": "",
+				class: normalizeClass(unref(carouselRootBase)),
+				role: __props.landmark ? "region" : "group",
+				"aria-roledescription": unref(t)("gr.carousel.roledescription", "carousel"),
+				"aria-label": __props.ariaLabelledby ? void 0 : __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				onMouseenter: _cache[3] || (_cache[3] = ($event) => hovered.value = true),
+				onMouseleave: _cache[4] || (_cache[4] = ($event) => hovered.value = false),
+				onFocusin: _cache[5] || (_cache[5] = (...args) => unref(onFocusIn) && unref(onFocusIn)(...args)),
+				onFocusout: _cache[6] || (_cache[6] = (...args) => unref(onFocusOut) && unref(onFocusOut)(...args))
+			}, [createElementVNode("div", {
+				ref_key: "viewportEl",
+				ref: viewportEl,
+				"data-gr-carousel-viewport": "",
+				class: normalizeClass([unref(carouselViewportBase), props.swipe ? unref(carouselViewportSwipeClass) : ""]),
+				"aria-live": liveMode.value,
+				"aria-atomic": "true",
+				onPointerdown: _cache[2] || (_cache[2] = (...args) => unref(swipeGesture).start && unref(swipeGesture).start(...args))
+			}, [
+				createElementVNode("div", {
+					"data-gr-carousel-track": "",
+					class: normalizeClass(unref(carouselTrackBase)),
+					style: normalizeStyle(trackStyle.value)
+				}, [renderSlot(_ctx.$slots, "default")], 6),
+				props.autoplay && total.value > 1 ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					"data-gr-carousel-toggle": "",
+					class: normalizeClass(unref(carouselToggleClass)),
+					"aria-label": playing.value ? __props.pauseLabel ?? unref(t)("gr.carousel.pause", "Stop automatic slide show") : __props.playLabel ?? unref(t)("gr.carousel.play", "Start automatic slide show"),
+					onClick: toggleAutoplay
+				}, [(openBlock(), createBlock(resolveDynamicComponent(playing.value ? unref(pause_default) : unref(play_default)), {
+					class: normalizeClass(unref(carouselIconClass)),
+					"aria-hidden": "true"
+				}, null, 8, ["class"]))], 10, _hoisted_3)) : createCommentVNode("", true),
+				showArrows.value ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					type: "button",
+					"data-gr-carousel-prev": "",
+					class: normalizeClass(unref(grCarouselControlClass)("prev", atStart.value)),
+					"aria-disabled": atStart.value ? "true" : void 0,
+					"aria-label": __props.prevLabel ?? unref(t)("gr.carousel.previous", "Previous slide"),
+					onClick: _cache[0] || (_cache[0] = ($event) => atStart.value ? void 0 : step(-1))
+				}, [renderSlot(_ctx.$slots, "prev", { disabled: atStart.value }, () => [createVNode(unref(chevron_left_default), {
+					class: normalizeClass(unref(carouselIconClass)),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])])], 10, _hoisted_4)) : createCommentVNode("", true),
+				showArrows.value ? (openBlock(), createElementBlock("button", {
+					key: 2,
+					type: "button",
+					"data-gr-carousel-next": "",
+					class: normalizeClass(unref(grCarouselControlClass)("next", atEnd.value)),
+					"aria-disabled": atEnd.value ? "true" : void 0,
+					"aria-label": __props.nextLabel ?? unref(t)("gr.carousel.next", "Next slide"),
+					onClick: _cache[1] || (_cache[1] = ($event) => atEnd.value ? void 0 : step(1))
+				}, [renderSlot(_ctx.$slots, "next", { disabled: atEnd.value }, () => [createVNode(unref(chevron_right_default), {
+					class: normalizeClass(unref(carouselIconClass)),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])])], 10, _hoisted_5)) : createCommentVNode("", true)
+			], 42, _hoisted_2), showIndicators.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "indicatorsEl",
+				ref: indicatorsEl,
+				role: "tablist",
+				"data-gr-carousel-indicators": "",
+				"data-variant": unref(resolvedIndicators),
+				"data-overflow": stripOverflow.value,
+				class: normalizeClass(unref(grCarouselIndicatorsClass)(unref(resolvedIndicators))),
+				"aria-label": __props.indicatorsLabel ?? unref(t)("gr.carousel.indicators", "Slides"),
+				onKeydown: onIndicatorKeydown,
+				onScrollPassive: scheduleMeasure
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry, index) => {
+				return openBlock(), createElementBlock("button", {
+					id: tabDomId(index),
+					key: entry.id,
+					ref_for: true,
+					ref: (el) => setTabRef(el, index),
+					type: "button",
+					role: "tab",
+					"data-gr-carousel-indicator": "",
+					"aria-selected": index === currentIndex.value ? "true" : "false",
+					"aria-controls": entry.id,
+					"aria-label": indicatorName(index),
+					tabindex: unref(roving).tabindexFor(index),
+					class: normalizeClass(unref(grCarouselIndicatorClass)(unref(resolvedIndicators), index === currentIndex.value, unref(resolvedTone))),
+					onClick: ($event) => onIndicatorClick(index)
+				}, [isThumbnails.value && entry.hasThumbnail() ? (openBlock(), createBlock(resolveDynamicComponent(entry.thumbnail), { key: 0 })) : isThumbnails.value && entry.thumbnailSrc() ? (openBlock(), createElementBlock("img", {
+					key: 1,
+					src: entry.thumbnailSrc(),
+					alt: "",
+					loading: "lazy",
+					decoding: "async",
+					class: normalizeClass(unref(carouselThumbImageClass))
+				}, null, 10, _hoisted_8)) : isThumbnails.value ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: normalizeClass(unref(carouselThumbFallbackClass))
+				}, toDisplayString(index + 1), 3)) : createCommentVNode("", true)], 10, _hoisted_7);
+			}), 128))], 42, _hoisted_6)) : createCommentVNode("", true)], 42, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/components/GrCarousel/GrCarouselSlide.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"role",
+	"aria-roledescription",
+	"aria-labelledby",
+	"aria-label",
+	"inert"
+];
+//#endregion
+//#region src/components/GrCarousel/GrCarouselSlide.vue
+var GrCarouselSlide_default = /* @__PURE__ */ defineComponent({
+	__name: "GrCarouselSlide",
+	props: {
+		label: { default: void 0 },
+		thumbnail: { default: void 0 }
+	},
+	setup(__props) {
+		const props = __props;
+		const carousel = inject(GR_CAROUSEL_CONTEXT);
+		if (!carousel) throw new Error("GrCarouselSlide must be used inside GrCarousel");
+		const slots = useSlots();
+		const slideId = useId();
+		const rootEl = ref(null);
+		function renderThumbnail() {
+			return slots.thumbnail?.();
+		}
+		onBeforeUnmount(carousel.register({
+			id: slideId,
+			label: () => props.label,
+			thumbnailSrc: () => props.thumbnail,
+			hasThumbnail: () => Boolean(slots.thumbnail),
+			thumbnail: renderThumbnail,
+			el: () => rootEl.value
+		}));
+		const isCurrent = computed(() => carousel.isCurrent(slideId));
+		const labelledBy = computed(() => carousel.tabIdFor(slideId));
+		const accessibleName = computed(() => props.label ?? carousel.positionLabel(slideId));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(slideId),
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-carousel-slide": "",
+				class: normalizeClass(unref(carouselSlideBase)),
+				role: unref(carousel).slideRole.value,
+				"aria-roledescription": unref(carousel).slideRoledescription.value,
+				"aria-labelledby": labelledBy.value,
+				"aria-label": labelledBy.value ? void 0 : accessibleName.value,
+				inert: isCurrent.value ? void 0 : true
+			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { GrCarousel_default as n, GrCarouselSlide_default as t };