@graupl/graupl 1.0.0-beta.45 → 1.0.0-beta.47

package/dist/js/generator/carousel.es.js

@@ -1,10 +1,10 @@
-function h(t, e) {
+function m(t, e) {
 	t === "" || t.length === 0 || (typeof t == "string" ? e.classList.add(t) : e.classList.add(...t));
 }
-function l(t, e) {
+function d(t, e) {
 	t === "" || t.length === 0 || (typeof t == "string" ? e.classList.remove(t) : e.classList.remove(...t));
 }
-function d(t) {
+function u(t) {
 	try {
 		const e = t.key || t.keyCode, r = {
 			Enter: e === "Enter" || e === 13,
@@ -25,10 +25,10 @@ function d(t) {
 		return "";
 	}
 }
-function _(t) {
+function l(t) {
 	t.preventDefault(), t.stopPropagation();
 }
-function u(t, e, { shouldThrow: r = !0 } = {}) {
+function h(t, e, { shouldThrow: r = !0 } = {}) {
 	const s = {
 		status: !0,
 		errors: []
@@ -68,7 +68,7 @@ function a(t, e, { shouldThrow: r = !0 } = {}) {
 	if (r && !s.status) throw s.errors[0];
 	return s;
 }
-function T(t, { shouldThrow: e = !0 } = {}) {
+function k(t, { shouldThrow: e = !0 } = {}) {
 	const r = {
 		status: !0,
 		errors: []
@@ -91,7 +91,7 @@ function T(t, { shouldThrow: e = !0 } = {}) {
 	if (e && !r.status) throw r.errors[0];
 	return r;
 }
-function c(t, { shouldThrow: e = !0 } = {}) {
+function f(t, { shouldThrow: e = !0 } = {}) {
 	const r = {
 		status: !0,
 		errors: []
@@ -106,7 +106,7 @@ function c(t, { shouldThrow: e = !0 } = {}) {
 			else throw new TypeError(`${s} must be a string or an array of strings. "${i}" given.`);
 			else {
 				const o = {};
-				o[s] = t[s], T(o);
+				o[s] = t[s], k(o);
 			}
 		} catch (i) {
 			r.status = !1, r.errors.push(i);
@@ -117,7 +117,7 @@ function c(t, { shouldThrow: e = !0 } = {}) {
 	if (e && !r.status) throw r.errors[0];
 	return r;
 }
-function H(t, { shouldThrow: e = !0 } = {}) {
+function R(t, { shouldThrow: e = !0 } = {}) {
 	const r = {
 		status: !0,
 		errors: []
@@ -140,7 +140,7 @@ function H(t, { shouldThrow: e = !0 } = {}) {
 	if (e && !r.status) throw r.errors[0];
 	return r;
 }
-function R(t, { shouldThrow: e = !0 } = {}) {
+function U(t, { shouldThrow: e = !0 } = {}) {
 	const r = {
 		status: !0,
 		errors: []
@@ -164,13 +164,13 @@ function R(t, { shouldThrow: e = !0 } = {}) {
 	if (e && !r.status) throw r.errors[0];
 	return r;
 }
-function I(t, e, { shouldThrow: r = !0 } = {}) {
+function J(t, e, { shouldThrow: r = !0 } = {}) {
 	const s = {
 		status: !0,
 		errors: []
 	};
 	try {
-		if (a("string", { tagName: t }, { shouldThrow: !0 }).status && u(HTMLElement, e, { shouldThrow: !0 }).status) {
+		if (a("string", { tagName: t }, { shouldThrow: !0 }).status && h(HTMLElement, e, { shouldThrow: !0 }).status) {
 			const i = t.toLowerCase();
 			for (const o in e) try {
 				if (e[o].tagName.toLowerCase() !== i) throw new TypeError(`${o} must be a <${i}> element. <${e[o].tagName.toLowerCase()}> given.`);
@@ -184,7 +184,7 @@ function I(t, e, { shouldThrow: r = !0 } = {}) {
 	if (r && !s.status) throw s.errors[0];
 	return s;
 }
-function U(t, e, { shouldThrow: r = !0 } = {}) {
+function B(t, e, { shouldThrow: r = !0 } = {}) {
 	const s = {
 		status: !0,
 		errors: []
@@ -197,7 +197,7 @@ function U(t, e, { shouldThrow: r = !0 } = {}) {
 	if (r && !s.status) throw s.errors[0];
 	return s;
 }
-function J(t, { shouldThrow: e = !0 } = {}) {
+function Z(t, { shouldThrow: e = !0 } = {}) {
 	const r = {
 		status: !0,
 		errors: []
@@ -210,7 +210,7 @@ function J(t, { shouldThrow: e = !0 } = {}) {
 	if (e && !r.status) throw r.errors[0];
 	return r;
 }
-var E = class A {
+var g = class O {
 	_scope;
 	_type = "_default";
 	_storage = {};
@@ -220,7 +220,7 @@ var E = class A {
 	}
 	initialize() {
 		try {
-			!this._crush && typeof window[this.scope] < "u" && (u(A, { storage: window[this.scope] }, { shouldThrow: !1 }).status || typeof window[this.scope].storage < "u" && typeof window[this.scope].scope < "u" && typeof window[this.scope].type < "u") && (this._storage = window[this.scope].storage);
+			!this._crush && typeof window[this.scope] < "u" && (h(O, { storage: window[this.scope] }, { shouldThrow: !1 }).status || typeof window[this.scope].storage < "u" && typeof window[this.scope].scope < "u" && typeof window[this.scope].type < "u") && (this._storage = window[this.scope].storage);
 		} catch {} finally {
 			window[this.scope] = this;
 		}
@@ -270,7 +270,7 @@ var E = class A {
 	dispose() {
 		delete this._storage, delete this;
 	}
-}, Z = class {
+}, $ = class {
 	_dom = {};
 	_rootDOMElement = "";
 	_protectedDOMElements = [];
@@ -315,7 +315,7 @@ var E = class A {
 			if (!this._validate()) throw new Error(`Graupl ${this.name}: Cannot initialize component. The following errors have been found:
  - ${this.errors.map((t) => t.message).join(`
  - `)}`);
-			h(this.initializeClass, this.rootDOMElement), this._dispatchEvent("preinitialize", this.rootDOMElement), this._generateKey(), this._setDOMElements(), this._setIds(), this._setAriaAttributes(), this._setCustomProps(), this._createChildElements(), this._handleMediaMatch(), this._handleFocus(), this._handleHover(), this._handleClick(), this._handleKeydown(), this._handleKeyup(), this._dispatchEvent("initialize", this.rootDOMElement), this._store(), l(this.initializeClass, this.rootDOMElement), this._initialized = !0, this._dispatchEvent("postinitialize", this.rootDOMElement);
+			m(this.initializeClass, this.rootDOMElement), this._dispatchEvent("preinitialize", this.rootDOMElement), this._generateKey(), this._setDOMElements(), this._setIds(), this._setAriaAttributes(), this._setCustomProps(), this._createChildElements(), this._handleMediaMatch(), this._handleFocus(), this._handleHover(), this._handleClick(), this._handleKeydown(), this._handleKeyup(), this._dispatchEvent("initialize", this.rootDOMElement), this._store(), d(this.initializeClass, this.rootDOMElement), this._initialized = !0, this._dispatchEvent("postinitialize", this.rootDOMElement);
 		} catch (t) {
 			console.error(t);
 		}
@@ -360,19 +360,19 @@ var E = class A {
 		return this._classes.initialize;
 	}
 	set initializeClass(t) {
-		c({ initializeClass: t }), this._classes.initialize !== t && (this._classes.initialize = t);
+		f({ initializeClass: t }), this._classes.initialize !== t && (this._classes.initialize = t);
 	}
 	get focusState() {
 		return this._focusState;
 	}
 	set focusState(t) {
-		H({ focusState: t }), this._focusState !== t && (this._focusState = t);
+		R({ focusState: t }), this._focusState !== t && (this._focusState = t);
 	}
 	get currentEvent() {
 		return this._currentEvent;
 	}
 	set currentEvent(t) {
-		R({ currentEvent: t }), this._currentEvent !== t && (this._currentEvent = t);
+		U({ currentEvent: t }), this._currentEvent !== t && (this._currentEvent = t);
 	}
 	get shouldFocus() {
 		let t = !1;
@@ -413,25 +413,25 @@ var E = class A {
 	}
 	_validate() {
 		this._dispatchEvent("prevalidate", this.rootDOMElement);
-		const t = J(this, { shouldThrow: !1 });
+		const t = Z(this, { shouldThrow: !1 });
 		if (t.status || (this._errors = [...this._errors, ...t.errors], this._valid = !1), Object.keys(this._dom).length > 0) {
 			const s = {};
-			for (const o of Object.keys(this._dom)) Array.isArray(this._dom[o]) ? this._dom[o].forEach((n, g) => {
-				s[`${o}Element[${g}]`] = n;
+			for (const o of Object.keys(this._dom)) Array.isArray(this._dom[o]) ? this._dom[o].forEach((n, c) => {
+				s[`${o}Element[${c}]`] = n;
 			}) : this._dom[o] !== null && (s[`${o}Element`] = this._dom[o]);
-			const i = u(HTMLElement, s, { shouldThrow: !1 });
+			const i = h(HTMLElement, s, { shouldThrow: !1 });
 			i.status || (this._errors = [...this._errors, ...i.errors], this._valid = !1);
 		}
 		if (Object.keys(this._selectors).length > 0) {
 			const s = {};
 			for (const o of Object.keys(this._selectors)) s[`${o}Selector`] = this._selectors[o];
-			const i = T(s, { shouldThrow: !1 });
+			const i = k(s, { shouldThrow: !1 });
 			i.status || (this._errors = [...this._errors, ...i.errors], this._valid = !1);
 		}
 		if (Object.keys(this._classes).length > 0) {
 			const s = {};
 			for (const o of Object.keys(this._classes)) this._classes[o] !== "" && (s[`${o}Class`] = this._classes[o]);
-			const i = c(s, { shouldThrow: !1 });
+			const i = f(s, { shouldThrow: !1 });
 			i.status || (this._errors = [...this._errors, ...i.errors], this._valid = !1);
 		}
 		if (Object.keys(this._durations).length > 0) {
@@ -468,7 +468,7 @@ var E = class A {
 	_setDOMElementType(t, { context: e, overwrite: r = !0, strict: s = !1 } = {}) {
 		if (typeof this.selectors[t] != "string") throw new Error(`Graupl ${this.name}: "${t}" is not a valid element type.`);
 		if (this._rootDOMElement === t || this._protectedDOMElements.includes(t)) throw new Error(`Graupl ${this.name}: "${t}" element cannot be set through _setDOMElementType because it is a protected element.`);
-		u(HTMLElement, { context: e });
+		h(HTMLElement, { context: e });
 		const i = Array.from(e.querySelectorAll(this.selectors[t])).filter((o) => s ? o.parentElement === e : !0);
 		Array.isArray(this._dom[t]) ? r ? this._dom[t] = i : this._dom[t] = [...this._dom[t], ...i] : this._dom[t] = i[0] || null;
 	}
@@ -488,14 +488,14 @@ var E = class A {
 	_handleKeydown() {}
 	_handleKeyup() {}
 	_store() {
-		this._shouldStore && (u(E, { storage: window.GrauplStorage }, { shouldThrow: !1 }).status || new E({ scope: "GrauplStorage" }), window.GrauplStorage.set({
+		this._shouldStore && (h(g, { storage: window.GrauplStorage }, { shouldThrow: !1 }).status || new g({ scope: "GrauplStorage" }), window.GrauplStorage.set({
 			key: this.id !== "" ? this.id : this.key,
 			type: this._storageKey,
 			data: this
 		}));
 	}
 	_unstore() {
-		this._shouldStore && u(E, { storage: window.GrauplStorage }, { shouldThrow: !1 }).status && window.GrauplStorage.clear({
+		this._shouldStore && h(g, { storage: window.GrauplStorage }, { shouldThrow: !1 }).status && window.GrauplStorage.clear({
 			key: this.id !== "" ? this.id : this.key,
 			type: this._storageKey
 		});
@@ -530,7 +530,7 @@ var E = class A {
 		});
 	}
 	_dispatchEvent(t, e) {
-		U(t, this), u(HTMLElement, { element: e }), e.dispatchEvent(this.events[t]);
+		B(t, this), h(HTMLElement, { element: e }), e.dispatchEvent(this.events[t]);
 	}
 	_addEventListener(t, e, r, s = {}) {
 		e.addEventListener(t, r, s), this._listeners.push({
@@ -561,77 +561,96 @@ var E = class A {
 	dispose() {
 		this._clearIntervals(), this._clearTimeouts(), this._removeEventListeners(), this._unstore(), delete this;
 	}
-}, B = class extends Z {
+}, E = class extends $ {
+	_rootDOMElement = "carouselItem";
+	_shouldStore = !1;
+	_storageKey = "carouselItems";
+	_name = "CarouselItem";
+	_busy = !1;
+	constructor({ carouselItemElement: t, tabElement: e = null, clone: r = null, parent: s, prefix: i = "graupl-", key: o = null, initializeClass: n = "initializing", initialize: c = !1 }) {
+		super({
+			prefix: i,
+			key: o,
+			initializeClass: n
+		}), this._dom.carouselItem = t, this._dom.tab = e, this._elements.clone = r ?? null, this._elements.parent = s, c && this.initialize();
+	}
+	activate({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		requestAnimationFrame(() => {
+			m(this.elements.parent.activeClass, this.dom.carouselItem), this.dom.carouselItem.removeAttribute("inert"), t && this.elements.parent.dom.carouselItemContainer.scrollTo({
+				left: this.dom.carouselItem.offsetLeft,
+				top: this.dom.carouselItem.offsetTop,
+				behavior: "smooth",
+				...e
+			}), this.dom.tab && requestAnimationFrame(() => {
+				m(this.elements.parent.activeClass, this.dom.tab), this.dom.tab.setAttribute("aria-selected", !0);
+			});
+		});
+	}
+	deactivate() {
+		requestAnimationFrame(() => {
+			d(this.elements.parent.activeClass, this.dom.carouselItem), this.dom.carouselItem.setAttribute("inert", !0), requestAnimationFrame(() => {
+				this.dom.tab && (d(this.elements.parent.activeClass, this.dom.tab), this.dom.tab.setAttribute("aria-selected", !1));
+			});
+		});
+	}
+}, W = class extends $ {
 	_rootDOMElement = "carousel";
 	_currentItem = 0;
 	_autoplay = !0;
 	_playText = "Play";
 	_pauseText = "Pause";
-	_currentAction = "next";
 	_storageKey = "carousels";
 	_name = "Carousel";
-	constructor({ carouselElement: t, carouselItemsSelector: e = ".carousel-item", carouselItemContainerSelector: r = ".carousel-item-container", carouselControlsSelector: s = ".carousel-control", carouselControlContainerSelector: i = ".carousel-control-container", carouselTabsSelector: o = ".carousel-tab", carouselTabContainerSelector: n = ".carousel-tab-container", autoplaySelector: g = ".autoplay", nextSelector: D = ".next", previousSelector: O = ".previous", activeClass: M = "active", previousClass: x = "previous", nextClass: S = "next", playClass: L = "play", pauseClass: j = "pause", autoplay: z = !0, transitionDelay: Q = 1e4, transitionDuration: V = 500, playText: P = "Play", pauseText: K = "Pause", prefix: F = "graupl-", key: q = null, initializeClass: G = "initializing", initialize: N = !1 }) {
+	_itemsPerPage = 1;
+	_loop = !0;
+	constructor({ carouselElement: t, carouselItemsSelector: e = ".carousel-item", carouselItemContainerSelector: r = ".carousel-item-container", carouselControlsSelector: s = ".carousel-control", carouselControlContainerSelector: i = ".carousel-control-container", carouselTabsSelector: o = ".carousel-tab", carouselTabContainerSelector: n = ".carousel-tab-container", autoplaySelector: c = ".autoplay", nextSelector: x = ".next", previousSelector: D = ".previous", activeClass: S = "active", playClass: L = "play", pauseClass: z = "pause", autoplay: P = !0, transitionDelay: j = 1e4, playText: Q = "Play", pauseText: V = "Pause", itemsPerPage: K = 1, loop: F = !0, prefix: N = "graupl-", key: q = null, initializeClass: G = "initializing", initialize: H = !1 }) {
 		super({
-			prefix: F,
+			prefix: N,
 			key: q,
 			initializeClass: G
-		}), this._dom.carousel = t, this._dom.carouselItems = [], this._dom.carouselItemContainer = null, this._dom.carouselControls = [], this._dom.carouselControlContainer = null, this._dom.carouselTabs = [], this._dom.carouselTabContainer = null, this._dom.autoplay = null, this._dom.next = null, this._dom.previous = null, this._selectors.carouselItems = e, this._selectors.carouselItemContainer = r, this._selectors.carouselControls = s, this._selectors.carouselControlContainer = i, this._selectors.carouselTabs = o, this._selectors.carouselTabContainer = n, this._selectors.autoplay = g, this._selectors.next = D, this._selectors.previous = O, this._classes.active = M || "", this._classes.previous = x || "", this._classes.next = S || "", this._classes.play = L || "", this._classes.pause = j || "", this._autoplay = z, this._delays.transition = Q, this._durations.transition = V, this._playText = P || "", this._pauseText = K || "", this._addEventListener("grauplComponentInitialize", this.rootDOMElement, () => {
-			this._handleAutoplay(), this.dom.carouselItems.forEach((m) => {
-				m.setAttribute("inert", "true");
-			}), this.activateFirstItem();
+		}), this._dom.carousel = t, this._dom.carouselItems = [], this._dom.carouselItemContainer = null, this._dom.carouselControls = [], this._dom.carouselControlContainer = null, this._dom.carouselTabs = [], this._dom.carouselTabContainer = null, this._dom.autoplay = null, this._dom.next = null, this._dom.previous = null, this._selectors.carouselItems = e, this._selectors.carouselItemContainer = r, this._selectors.carouselControls = s, this._selectors.carouselControlContainer = i, this._selectors.carouselTabs = o, this._selectors.carouselTabContainer = n, this._selectors.autoplay = c, this._selectors.next = x, this._selectors.previous = D, this._elements.carouselItems = [], this._classes.active = S || "", this._classes.play = L || "", this._classes.pause = z || "", this._autoplay = P, this._itemsPerPage = K, this._loop = F, this._delays.transition = j, this._playText = Q || "", this._pauseText = V || "", this._addEventListener("grauplComponentInitialize", this.rootDOMElement, () => {
+			this._handleAutoplay(), this.loop && this._handleLoop(), this._handleIntersection(), this.activateFirstItem({ scrollOptions: { behavior: "instant" } });
 		}), this._addEventListener("grauplComponentValidate", this.rootDOMElement, () => {
-			const m = a("boolean", { autoplay: this._autoplay }, { shouldThrow: !1 });
-			m.status || (this._errors = [...this._errors, ...m.errors], this._valid = !1);
+			const I = a("boolean", {
+				autoplay: this._autoplay,
+				loop: this._loop
+			}, { shouldThrow: !1 });
+			I.status || (this._errors = [...this._errors, ...I.errors], this._valid = !1);
 			const C = a("string", {
 				playText: this._playText,
 				pauseText: this._pauseText
 			}, { shouldThrow: !1 });
 			C.status || (this._errors = [...this._errors, ...C.errors], this._valid = !1);
-		}), N && this.initialize();
+			const T = a("number", { itemsPerPage: this._itemsPerPage }, { shouldThrow: !1 });
+			T.status || (this._errors = [...this._errors, ...T.errors], this._valid = !1);
+		}), H && this.initialize();
 	}
 	get activeClass() {
 		return this._classes.active;
 	}
 	set activeClass(t) {
-		c({ activeClass: t }), this._classes.active !== t && (this._classes.active = t);
-	}
-	get previousClass() {
-		return this._classes.previous;
-	}
-	set previousClass(t) {
-		c({ previousClass: t }), this._classes.previous !== t && (this._classes.previous = t);
-	}
-	get nextClass() {
-		return this._classes.next;
-	}
-	set nextClass(t) {
-		c({ nextClass: t }), this._classes.next !== t && (this._classes.next = t);
+		f({ activeClass: t }), this._classes.active !== t && (this._classes.active = t);
 	}
 	get playClass() {
 		return this._classes.play;
 	}
 	set playClass(t) {
-		c({ playClass: t }), this._classes.play !== t && (this._classes.play = t);
+		f({ playClass: t }), this._classes.play !== t && (this._classes.play = t);
 	}
 	get pauseClass() {
 		return this._classes.pause;
 	}
 	set pauseClass(t) {
-		c({ pauseClass: t }), this._classes.pause !== t && (this._classes.pause = t);
+		f({ pauseClass: t }), this._classes.pause !== t && (this._classes.pause = t);
 	}
 	get currentItem() {
 		return this._currentItem;
 	}
 	set currentItem(t) {
-		a("number", { currentItem: t }), t !== this.currentItem && (t < 0 ? this._currentItem = 0 : t >= this.dom.carouselItems.length ? this._currentItem = this.dom.carouselItems.length - 1 : this._currentItem = t, this._dom.carousel.querySelectorAll(this.selectors.carouselTab) && this.dom.carouselItems.forEach((e, r) => {
-			e.setAttribute("aria-selected", r === this._currentItem);
-		}));
+		a("number", { currentItem: t }), t !== this.currentItem && (t < 0 ? this._currentItem = 0 : t >= this.dom.carouselItems.length ? this._currentItem = this.dom.carouselItems.length - 1 : this._currentItem = t);
 	}
 	get currentCarouselItem() {
-		return this.dom.carouselItems[this.currentItem];
-	}
-	get currentCarouselTab() {
-		return this.dom.carouselTabs[this.currentItem];
+		return this.elements.carouselItems[this.currentItem];
 	}
 	get autoplay() {
 		return this._autoplay;
@@ -639,18 +658,18 @@ var E = class A {
 	set autoplay(t) {
 		a("boolean", { autoplay: t }), this._autoplay !== t && (this._autoplay = t);
 	}
+	get itemsPerPage() {
+		return this._itemsPerPage;
+	}
+	get loop() {
+		return this._loop;
+	}
 	get transitionDelay() {
 		return this._delays.transition;
 	}
 	set transitionDelay(t) {
 		a("number", { transitionDelay: t }), t !== this.transitionDelay && t >= 0 && (this._delays.transition = t);
 	}
-	get transitionDuration() {
-		return this._durations.transition;
-	}
-	set transitionDuration(t) {
-		a("number", { transitionDuration: t }), this._durations.transition !== t && t >= 0 && (this._durations.transition = t, this._setTransitionDuration());
-	}
 	get playText() {
 		return this._playText;
 	}
@@ -663,12 +682,22 @@ var E = class A {
 	set pauseText(t) {
 		a("string", { pauseText: t }), this._pauseText !== t && (this._pauseText = t);
 	}
-	get currentAction() {
-		return this._currentAction;
-	}
 	_setDOMElements() {
 		this._setDOMElementType("carouselItemContainer", { context: this.dom.carousel }), this._setDOMElementType("carouselControlContainer", { context: this.dom.carousel }), this._setDOMElementType("carouselTabContainer", { context: this.dom.carousel }), this.dom.carouselItemContainer && this._setDOMElementType("carouselItems", { context: this.dom.carouselItemContainer }), this.dom.carouselControlContainer && (this._setDOMElementType("carouselControls", { context: this.dom.carouselControlContainer }), this._setDOMElementType("autoplay", { context: this.dom.carouselControlContainer }), this._setDOMElementType("next", { context: this.dom.carouselControlContainer }), this._setDOMElementType("previous", { context: this.dom.carouselControlContainer })), this._dom.carouselTabContainer && this._setDOMElementType("carouselTabs", { context: this.dom.carouselTabContainer });
 	}
+	_createChildElements() {
+		this.dom.carouselItems.forEach((t, e) => {
+			const r = new E({
+				carouselItemElement: t,
+				tabElement: this.dom.carouselTabs ? this.dom.carouselTabs[e] : null,
+				parent: this,
+				prefix: this.prefix,
+				initializeClass: this.classes.initialize,
+				initialize: !0
+			});
+			this._elements.carouselItems.push(r);
+		});
+	}
 	_setIds() {
 		this.dom.carousel.id = this.dom.carousel.id || `carousel-${this.key}`, this.dom.carouselItems.forEach((t, e) => {
 			t.id = t.id || `carousel-item-${this.key}-${e}`;
@@ -677,15 +706,36 @@ var E = class A {
 		}), this._id = this.dom.carousel.id;
 	}
 	_setAriaAttributes() {
-		!I("section", { carousel: this.dom.carousel }, { shouldThrow: !1 }).status && !this.dom.carousel.getAttribute("role") !== "region" && this.dom.carousel.setAttribute("role", "group"), this._dom.carousel.setAttribute("aria-roledescription", "carousel"), this.dom.carouselTabContainer && this.dom.carouselTabContainer.setAttribute("role", "tablist"), this.dom.carouselTabs.forEach((t, e) => {
-			I("button", { tab: t }, { shouldThrow: !1 }).status || t.setAttribute("role", "button"), t.setAttribute("aria-selected", e === 0), t.setAttribute("aria-controls", this.dom.carouselItems[e].id);
+		!J("section", { carousel: this.dom.carousel }, { shouldThrow: !1 }).status && !this.dom.carousel.getAttribute("role") !== "region" && this.dom.carousel.setAttribute("role", "group"), this.dom.carouselItems.forEach((t) => {
+			t.setAttribute("inert", "true");
+		}), this.dom.carouselItemContainer && this.dom.carouselItemContainer.setAttribute("tabindex", "-1"), this._dom.carousel.setAttribute("aria-roledescription", "carousel"), this.dom.carouselTabContainer && this.dom.carouselTabContainer.setAttribute("role", "tablist"), this.dom.carouselTabs.forEach((t, e) => {
+			t.setAttribute("role", "tab"), t.setAttribute("aria-selected", e === 0), t.setAttribute("aria-controls", this.dom.carouselItems[e].id);
 		});
 	}
-	_setCustomProps() {
-		this.dom.carousel.style.setProperty(`--${this.prefix}carousel-transition-duration`, `${this.transitionDuration}ms`);
-	}
 	_handleAutoplay() {
-		this.autoplay ? (h(this.pauseClass, this.dom.autoplay), l(this.playClass, this.dom.autoplay), this.dom.autoplay.setAttribute("aria-label", this.pauseText), this.dom.carousel.setAttribute("aria-live", "off"), this._setInterval(() => this.activateNextItem(), this.transitionDelay)) : (h(this.playClass, this.dom.autoplay), l(this.pauseClass, this.dom.autoplay), this.dom.autoplay.setAttribute("aria-label", this.playText), this.dom.carousel.setAttribute("aria-live", "polite"), this._clearInterval());
+		this.autoplay ? (m(this.pauseClass, this.dom.autoplay), d(this.playClass, this.dom.autoplay), this.dom.autoplay.setAttribute("aria-label", this.pauseText), this.dom.carousel.setAttribute("aria-live", "off"), this._setInterval(() => this.activateNextItem(), this.transitionDelay)) : (m(this.playClass, this.dom.autoplay), d(this.pauseClass, this.dom.autoplay), this.dom.autoplay.setAttribute("aria-label", this.playText), this.dom.carousel.setAttribute("aria-live", "polite"), this._clearInterval());
+	}
+	_handleIntersection() {
+		const t = {
+			root: this.dom.carouselItemContainer,
+			rootMargin: "1px",
+			scrollMargin: "1px",
+			threshold: 1
+		}, e = new IntersectionObserver((r) => {
+			this.isInitialized && r.forEach((s) => {
+				if (!s.isIntersecting) return;
+				const i = this.dom.carouselItems.indexOf(s.target);
+				let o = i;
+				this.elements.carouselItems[i].elements.clone !== null && (o = this.dom.carouselItems.indexOf(this.elements.carouselItems[i].elements.clone.dom.carouselItem), (i === 0 || i === this.dom.carouselItems.length - 1) && this.dom.carouselItemContainer.scrollTo({
+					left: this.elements.carouselItems[i].elements.clone.dom.carouselItem.offsetLeft,
+					top: this.elements.carouselItems[i].elements.clone.dom.carouselItem.offsetTop,
+					behavior: "instant"
+				})), this.currentItem !== o && this.activateItem(o, { scroll: !1 });
+			});
+		}, t);
+		this.dom.carouselItems.forEach((r) => {
+			e.observe(r);
+		});
 	}
 	_handleFocus() {
 		this._addEventListener("focusin", this.dom.carousel, () => {
@@ -695,15 +745,15 @@ var E = class A {
 		});
 	}
 	_handleClick() {
-		this._addEventListener("click", this.dom.next, () => {
-			this.activateNextItem();
-		}), this._addEventListener("click", this.dom.previous, () => {
-			this.activatePreviousItem();
-		}), this._addEventListener("click", this.dom.autoplay, () => {
-			this.toggleAutoplay();
-		}), this.dom.carouselTabs.forEach((t, e) => {
-			this._addEventListener("click", t, () => {
-				this.currentItem > e ? this._currentAction = "previous" : this._currentAction = "next", this.activateItem(e);
+		this._addEventListener("click", this.dom.next, (t) => {
+			t.button === 0 && (l(t), this.currentEvent = "mouse", this.activateNextItem());
+		}), this._addEventListener("click", this.dom.previous, (t) => {
+			t.button === 0 && (l(t), this.currentEvent = "mouse", this.activatePreviousItem());
+		}), this._addEventListener("click", this.dom.autoplay, (t) => {
+			t.button === 0 && (l(t), this.currentEvent = "mouse", this.toggleAutoplay());
+		}), this.elements.carouselItems.forEach((t) => {
+			t.dom.tab && this._addEventListener("click", t.dom.tab, (e) => {
+				e.button === 0 && (l(e), this.currentEvent = "mouse", this.activateItem(this.dom.carouselItems.indexOf(t.dom.carouselItem)));
 			});
 		});
 	}
@@ -717,19 +767,19 @@ var E = class A {
 	_handleKeydown() {
 		this.dom.carouselControls.forEach((t) => {
 			this._addEventListener("keydown", t, (e) => {
-				switch (d(e)) {
+				switch (u(e)) {
 					case "Space":
 					case "Enter":
-						_(e);
+						l(e);
 						break;
 				}
 			});
-		}), this.dom.carouselTabs.forEach((t) => {
-			this._addEventListener("keydown", t, (e) => {
-				switch (d(e)) {
+		}), this.elements.carouselItems.forEach((t) => {
+			t.dom.tab && this._addEventListener("keydown", t.dom.tab, (e) => {
+				switch (u(e)) {
 					case "Space":
 					case "Enter":
-						_(e);
+						l(e);
 						break;
 				}
 			});
@@ -737,83 +787,154 @@ var E = class A {
 	}
 	_handleKeyup() {
 		this._addEventListener("keyup", this.dom.next, (t) => {
-			switch (d(t)) {
+			switch (u(t)) {
 				case "Space":
 				case "Enter":
-					this.activateNextItem(), _(t);
+					this.activateNextItem(), l(t);
 					break;
 			}
 		}), this._addEventListener("keyup", this.dom.previous, (t) => {
-			switch (d(t)) {
+			switch (u(t)) {
 				case "Space":
 				case "Enter":
-					this.activatePreviousItem(), _(t);
+					this.activatePreviousItem(), l(t);
 					break;
 			}
 		}), this._addEventListener("keyup", this.dom.autoplay, (t) => {
-			switch (d(t)) {
+			switch (u(t)) {
 				case "Space":
 				case "Enter":
-					this.toggleAutoplay(), _(t);
+					this.toggleAutoplay(), l(t);
 					break;
 			}
-		}), this.dom.carouselTabs.forEach((t, e) => {
-			this._addEventListener("keyup", t, (r) => {
-				switch (d(r)) {
+		}), this.elements.carouselItems.forEach((t) => {
+			t.dom.tab && this._addEventListener("keyup", t.dom.tab, (e) => {
+				switch (u(e)) {
 					case "Space":
 					case "Enter":
-						this.activateItem(e), _(r);
+						this.activateItem(this.dom.carouselItems.indexOf(t.dom.carouselItem)), l(e);
 						break;
 				}
 			});
 		});
 	}
-	activateCurrentItem() {
-		h(this.activeClass, this.currentCarouselItem), this.currentCarouselItem.removeAttribute("inert"), this.currentCarouselTab && (this.currentCarouselTab.setAttribute("aria-selected", !0), h(this.activeClass, this.currentCarouselTab));
+	_handleLoop() {
+		const t = /* @__PURE__ */ new Map(), e = /* @__PURE__ */ new Map(), r = this.dom.carouselItemContainer;
+		for (let s = 0; s < this.itemsPerPage; s++) t.set(this.dom.carouselItems[s], this.dom.carouselItems.indexOf(this.dom.carouselItems[s]));
+		for (let s = this.dom.carouselItems.length - this.itemsPerPage; s < this.dom.carouselItems.length; s++) e.set(this.dom.carouselItems[s], this.dom.carouselItems.indexOf(this.dom.carouselItems[s]));
+		t.forEach((s, i) => {
+			const o = i.cloneNode(!0);
+			o.setAttribute("aria-hidden", "true"), o.setAttribute("inert", "true"), o.setAttribute("id", `${i.id}-clone`), r.appendChild(o);
+			const n = new E({
+				carouselItemElement: o,
+				clone: this._elements.carouselItems[s],
+				parent: this,
+				prefix: this.prefix,
+				initializeClass: this.classes.initialize,
+				initialize: !0
+			});
+			this.dom.carouselItems.push(o), this._elements.carouselItems.push(n);
+		}), e.forEach((s, i) => {
+			const o = i.cloneNode(!0);
+			o.setAttribute("aria-hidden", "true"), o.setAttribute("inert", "true"), o.setAttribute("id", `${i.id}-clone`), r.insertBefore(o, r.firstChild);
+			const n = new E({
+				carouselItemElement: o,
+				clone: this._elements.carouselItems[s],
+				parent: this,
+				prefix: this.prefix,
+				initializeClass: this.classes.initialize,
+				initialize: !0
+			});
+			this.dom.carouselItems.unshift(o), this._elements.carouselItems.unshift(n);
+		});
 	}
-	deactivateCurrentItem() {
-		l(this.activeClass, this.currentCarouselItem), this.currentCarouselItem.setAttribute("inert", !0), this.currentCarouselTab && (this.currentCarouselTab.setAttribute("aria-selected", !1), l(this.activeClass, this.currentCarouselTab));
+	activateCurrentItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		this.currentCarouselItem.activate({
+			scroll: t,
+			scrollOptions: e
+		});
 	}
-	activateItem(t) {
-		const e = this.currentItem;
-		this.dom.carousel.dataset.grauplAction = this._currentAction, this.autoplay && this._clearInterval(), h(this.previousClass, this.currentCarouselItem), h(this.nextClass, this.dom.carouselItems[t]), requestAnimationFrame(() => {
-			this.deactivateCurrentItem(), this.currentItem = t, this.activateCurrentItem(), requestAnimationFrame(() => {
-				setTimeout(() => {
-					l(this.previousClass, this.dom.carouselItems[e]), l(this.nextClass, this.currentCarouselItem);
-				}, this.transitionDuration);
-			});
+	deactivateCurrentItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		this.currentCarouselItem.deactivate({
+			scroll: t,
+			scrollOptions: e
+		});
+	}
+	activateItem(t, { scroll: e = !0, scrollOptions: r = {} } = {}) {
+		this.autoplay && this._clearInterval(), this.deactivateCurrentItem({
+			scroll: e,
+			scrollOptions: r
+		}), this.currentItem = t, this.activateCurrentItem({
+			scroll: e,
+			scrollOptions: r
 		}), this.autoplay && this._setInterval(() => this.activateNextItem(), this.transitionDelay);
 	}
-	activateFirstItem() {
-		this.activateItem(0);
+	activateFirstItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		this.loop ? this.currentItem === this.dom.carouselItems.length - this.itemsPerPage - 1 ? this.activateNextItem({
+			scroll: t,
+			scrollOptions: e
+		}) : this.activateItem(this.itemsPerPage, {
+			scroll: t,
+			scrollOptions: e
+		}) : this.activateItem(0, {
+			scroll: t,
+			scrollOptions: e
+		});
 	}
-	activateLastItem() {
-		this.activateItem(this.dom.carouselItems.length - 1);
+	activateLastItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		this.loop ? this.currentItem === this.itemsPerPage ? this.activatePreviousItem({
+			scroll: t,
+			scrollOptions: e
+		}) : this.activateItem(this.dom.carouselItems.length - this.itemsPerPage - 1, {
+			scroll: t,
+			scrollOptions: e
+		}) : this.activateItem(this.dom.carouselItems.length - 1, {
+			scroll: t,
+			scrollOptions: e
+		});
 	}
-	activateNextItem() {
-		this._currentAction = "next", this.currentItem + 1 >= this.dom.carouselItems.length ? this.activateFirstItem() : this.activateItem(this.currentItem + 1);
+	activateNextItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		this.loop ? this.activateItem(this.currentItem + 1, {
+			scroll: t,
+			scrollOptions: e
+		}) : this.currentItem + 1 >= this.dom.carouselItems.length ? this.activateFirstItem({
+			scroll: t,
+			scrollOptions: e
+		}) : this.activateItem(this.currentItem + 1, {
+			scroll: t,
+			scrollOptions: e
+		});
 	}
-	activatePreviousItem() {
-		this._currentAction = "previous", this.currentItem - 1 < 0 ? this.activateLastItem() : this.activateItem(this.currentItem - 1);
+	activatePreviousItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		this.loop ? this.activateItem(this.currentItem - 1, {
+			scroll: t,
+			scrollOptions: e
+		}) : this.currentItem - 1 < 0 || this.loop && this.currentItem - 1 < this.itemsPerPage ? this.activateLastItem({
+			scroll: t,
+			scrollOptions: e
+		}) : this.activateItem(this.currentItem - 1, {
+			scroll: t,
+			scrollOptions: e
+		});
 	}
 	toggleAutoplay() {
 		this.autoplay = !this.autoplay, this._handleAutoplay();
 	}
 };
-const k = /[\11\12\14\15\40]+/, w = "data-once", W = document;
-function v(t, e, r) {
-	return t[`${e}Attribute`](w, r);
+const A = /[\11\12\14\15\40]+/, v = "data-once", X = document;
+function w(t, e, r) {
+	return t[`${e}Attribute`](v, r);
 }
-function f(t) {
+function _(t) {
 	if (typeof t != "string") throw new TypeError("once ID must be a string");
-	if (t === "" || k.test(t)) throw new RangeError("once ID must not be empty or contain spaces");
-	return `[${w}~="${t}"]`;
+	if (t === "" || A.test(t)) throw new RangeError("once ID must not be empty or contain spaces");
+	return `[${v}~="${t}"]`;
 }
-function X(t) {
+function Y(t) {
 	if (!(t instanceof Element)) throw new TypeError("The element must be an instance of Element");
 	return !0;
 }
-function p(t, e = W) {
+function p(t, e = X) {
 	let r = t;
 	if (t === null) r = [];
 	else if (t) if (e instanceof Document || e instanceof DocumentFragment || e instanceof Element) typeof t == "string" ? r = e.querySelectorAll(t) : t instanceof Element && (r = [t]);
@@ -823,26 +944,26 @@ function p(t, e = W) {
 }
 function b(t, e, r) {
 	return e.filter((s) => {
-		const i = X(s) && s.matches(t);
+		const i = Y(s) && s.matches(t);
 		return i && r && r(s), i;
 	});
 }
-function $(t, { add: e, remove: r }) {
+function M(t, { add: e, remove: r }) {
 	const s = [];
-	v(t, "has") && v(t, "get").trim().split(k).forEach((o) => {
+	w(t, "has") && w(t, "get").trim().split(A).forEach((o) => {
 		s.indexOf(o) < 0 && o !== r && s.push(o);
 	}), e && s.push(e);
 	const i = s.join(" ");
-	v(t, i === "" ? "remove" : "set", i);
+	w(t, i === "" ? "remove" : "set", i);
 }
 function y(t, e, r) {
-	return b(`:not(${f(t)})`, p(e, r), (s) => $(s, { add: t }));
+	return b(`:not(${_(t)})`, p(e, r), (s) => M(s, { add: t }));
 }
-y.remove = (t, e, r) => b(f(t), p(e, r), (s) => $(s, { remove: t })), y.filter = (t, e, r) => b(f(t), p(e, r)), y.find = (t, e) => p(t ? f(t) : `[${w}]`, e);
-const Y = (t = {}, e = document, r = ".carousel") => {
+y.remove = (t, e, r) => b(_(t), p(e, r), (s) => M(s, { remove: t })), y.filter = (t, e, r) => b(_(t), p(e, r)), y.find = (t, e) => p(t ? _(t) : `[${v}]`, e);
+const tt = (t = {}, e = document, r = ".carousel") => {
 	y("graupl-carousel-generator", r, e).forEach((s) => {
 		const i = s.dataset.grauplCarouselOptions ? JSON.parse(s.dataset.grauplCarouselOptions.replace(/'/g, "\"")) || {} : {};
-		new B({
+		new W({
 			carouselElement: s,
 			initialize: !0,
 			...t,
@@ -850,6 +971,6 @@ const Y = (t = {}, e = document, r = ".carousel") => {
 		});
 	});
 };
-export { Y as default };
+export { tt as default };
 
 //# sourceMappingURL=carousel.es.js.map