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

package/dist/js/carousel.js

@@ -1,11 +1,11 @@
 (function() {
-	function h(t, e) {
+	function c(t, e) {
 		t === "" || t.length === 0 || (typeof t == "string" ? e.classList.add(t) : e.classList.add(...t));
 	}
-	function l(t, e) {
+	function m(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,
@@ -26,10 +26,10 @@
 			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: []
@@ -69,7 +69,7 @@
 		if (r && !s.status) throw s.errors[0];
 		return s;
 	}
-	function b(t, { shouldThrow: e = !0 } = {}) {
+	function I(t, { shouldThrow: e = !0 } = {}) {
 		const r = {
 			status: !0,
 			errors: []
@@ -92,7 +92,7 @@
 		if (e && !r.status) throw r.errors[0];
 		return r;
 	}
-	function c(t, { shouldThrow: e = !0 } = {}) {
+	function d(t, { shouldThrow: e = !0 } = {}) {
 		const r = {
 			status: !0,
 			errors: []
@@ -107,7 +107,7 @@
 				else throw new TypeError(`${s} must be a string or an array of strings. "${i}" given.`);
 				else {
 					const o = {};
-					o[s] = t[s], b(o);
+					o[s] = t[s], I(o);
 				}
 			} catch (i) {
 				r.status = !1, r.errors.push(i);
@@ -118,7 +118,7 @@
 		if (e && !r.status) throw r.errors[0];
 		return r;
 	}
-	function O(t, { shouldThrow: e = !0 } = {}) {
+	function x(t, { shouldThrow: e = !0 } = {}) {
 		const r = {
 			status: !0,
 			errors: []
@@ -141,7 +141,7 @@
 		if (e && !r.status) throw r.errors[0];
 		return r;
 	}
-	function A(t, { shouldThrow: e = !0 } = {}) {
+	function D(t, { shouldThrow: e = !0 } = {}) {
 		const r = {
 			status: !0,
 			errors: []
@@ -165,13 +165,13 @@
 		if (e && !r.status) throw r.errors[0];
 		return r;
 	}
-	function T(t, e, { shouldThrow: r = !0 } = {}) {
+	function S(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.`);
@@ -185,7 +185,7 @@
 		if (r && !s.status) throw s.errors[0];
 		return s;
 	}
-	function M(t, e, { shouldThrow: r = !0 } = {}) {
+	function L(t, e, { shouldThrow: r = !0 } = {}) {
 		const s = {
 			status: !0,
 			errors: []
@@ -198,7 +198,7 @@
 		if (r && !s.status) throw s.errors[0];
 		return s;
 	}
-	function x(t, { shouldThrow: e = !0 } = {}) {
+	function z(t, { shouldThrow: e = !0 } = {}) {
 		const r = {
 			status: !0,
 			errors: []
@@ -211,7 +211,7 @@
 		if (e && !r.status) throw r.errors[0];
 		return r;
 	}
-	var g = class D {
+	var g = class A {
 		_scope;
 		_type = "_default";
 		_storage = {};
@@ -221,7 +221,7 @@
 		}
 		initialize() {
 			try {
-				!this._crush && typeof window[this.scope] < "u" && (u(D, { 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(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);
 			} catch {} finally {
 				window[this.scope] = this;
 			}
@@ -271,7 +271,7 @@
 		dispose() {
 			delete this._storage, delete this;
 		}
-	}, S = class {
+	}, C = class {
 		_dom = {};
 		_rootDOMElement = "";
 		_protectedDOMElements = [];
@@ -316,7 +316,7 @@
 				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);
+				c(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(), m(this.initializeClass, this.rootDOMElement), this._initialized = !0, this._dispatchEvent("postinitialize", this.rootDOMElement);
 			} catch (t) {
 				console.error(t);
 			}
@@ -361,19 +361,19 @@
 			return this._classes.initialize;
 		}
 		set initializeClass(t) {
-			c({ initializeClass: t }), this._classes.initialize !== t && (this._classes.initialize = t);
+			d({ initializeClass: t }), this._classes.initialize !== t && (this._classes.initialize = t);
 		}
 		get focusState() {
 			return this._focusState;
 		}
 		set focusState(t) {
-			O({ focusState: t }), this._focusState !== t && (this._focusState = t);
+			x({ focusState: t }), this._focusState !== t && (this._focusState = t);
 		}
 		get currentEvent() {
 			return this._currentEvent;
 		}
 		set currentEvent(t) {
-			A({ currentEvent: t }), this._currentEvent !== t && (this._currentEvent = t);
+			D({ currentEvent: t }), this._currentEvent !== t && (this._currentEvent = t);
 		}
 		get shouldFocus() {
 			let t = !1;
@@ -414,25 +414,25 @@
 		}
 		_validate() {
 			this._dispatchEvent("prevalidate", this.rootDOMElement);
-			const t = x(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, C) => {
-					s[`${o}Element[${C}]`] = n;
+				for (const o of Object.keys(this._dom)) Array.isArray(this._dom[o]) ? this._dom[o].forEach((n, f) => {
+					s[`${o}Element[${f}]`] = 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 = b(s, { shouldThrow: !1 });
+				const i = I(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 = d(s, { shouldThrow: !1 });
 				i.status || (this._errors = [...this._errors, ...i.errors], this._valid = !1);
 			}
 			if (Object.keys(this._durations).length > 0) {
@@ -469,7 +469,7 @@
 		_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;
 		}
@@ -489,14 +489,14 @@
 		_handleKeydown() {}
 		_handleKeyup() {}
 		_store() {
-			this._shouldStore && (u(g, { storage: window.GrauplStorage }, { shouldThrow: !1 }).status || new g({ 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(g, { 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
 			});
@@ -531,7 +531,7 @@
 			});
 		}
 		_dispatchEvent(t, e) {
-			M(t, this), u(HTMLElement, { element: e }), e.dispatchEvent(this.events[t]);
+			L(t, this), h(HTMLElement, { element: e }), e.dispatchEvent(this.events[t]);
 		}
 		_addEventListener(t, e, r, s = {}) {
 			e.addEventListener(t, r, s), this._listeners.push({
@@ -562,77 +562,96 @@
 		dispose() {
 			this._clearIntervals(), this._clearTimeouts(), this._removeEventListeners(), this._unstore(), delete this;
 		}
-	}, L = class extends S {
+	}, E = class extends C {
+		_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: f = !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, f && this.initialize();
+		}
+		activate({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+			requestAnimationFrame(() => {
+				c(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(() => {
+					c(this.elements.parent.activeClass, this.dom.tab), this.dom.tab.setAttribute("aria-selected", !0);
+				});
+			});
+		}
+		deactivate() {
+			requestAnimationFrame(() => {
+				m(this.elements.parent.activeClass, this.dom.carouselItem), this.dom.carouselItem.setAttribute("inert", !0), requestAnimationFrame(() => {
+					this.dom.tab && (m(this.elements.parent.activeClass, this.dom.tab), this.dom.tab.setAttribute("aria-selected", !1));
+				});
+			});
+		}
+	}, P = class extends C {
 		_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: C = ".autoplay", nextSelector: V = ".next", previousSelector: P = ".previous", activeClass: K = "active", previousClass: F = "previous", nextClass: q = "next", playClass: G = "play", pauseClass: N = "pause", autoplay: H = !0, transitionDelay: R = 1e4, transitionDuration: U = 500, playText: J = "Play", pauseText: Z = "Pause", prefix: B = "graupl-", key: W = null, initializeClass: X = "initializing", initialize: Y = !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: f = ".autoplay", nextSelector: K = ".next", previousSelector: F = ".previous", activeClass: N = "active", playClass: q = "play", pauseClass: G = "pause", autoplay: H = !0, transitionDelay: R = 1e4, playText: U = "Play", pauseText: J = "Pause", itemsPerPage: B = 1, loop: Z = !0, prefix: W = "graupl-", key: X = null, initializeClass: Y = "initializing", initialize: tt = !1 }) {
 			super({
-				prefix: B,
-				key: W,
-				initializeClass: X
-			}), 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 = V, this._selectors.previous = P, this._classes.active = K || "", this._classes.previous = F || "", this._classes.next = q || "", this._classes.play = G || "", this._classes.pause = N || "", this._autoplay = H, this._delays.transition = R, this._durations.transition = U, this._playText = J || "", this._pauseText = Z || "", this._addEventListener("grauplComponentInitialize", this.rootDOMElement, () => {
-				this._handleAutoplay(), this.dom.carouselItems.forEach((y) => {
-					y.setAttribute("inert", "true");
-				}), this.activateFirstItem();
+				prefix: W,
+				key: X,
+				initializeClass: Y
+			}), 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 = f, this._selectors.next = K, this._selectors.previous = F, this._elements.carouselItems = [], this._classes.active = N || "", this._classes.play = q || "", this._classes.pause = G || "", this._autoplay = H, this._itemsPerPage = B, this._loop = Z, this._delays.transition = R, this._playText = U || "", this._pauseText = J || "", this._addEventListener("grauplComponentInitialize", this.rootDOMElement, () => {
+				this._handleAutoplay(), this.loop && this._handleLoop(), this._handleIntersection(), this.activateFirstItem({ scrollOptions: { behavior: "instant" } });
 			}), this._addEventListener("grauplComponentValidate", this.rootDOMElement, () => {
-				const y = a("boolean", { autoplay: this._autoplay }, { shouldThrow: !1 });
-				y.status || (this._errors = [...this._errors, ...y.errors], this._valid = !1);
-				const $ = a("string", {
+				const $ = a("boolean", {
+					autoplay: this._autoplay,
+					loop: this._loop
+				}, { shouldThrow: !1 });
+				$.status || (this._errors = [...this._errors, ...$.errors], this._valid = !1);
+				const M = a("string", {
 					playText: this._playText,
 					pauseText: this._pauseText
 				}, { shouldThrow: !1 });
-				$.status || (this._errors = [...this._errors, ...$.errors], this._valid = !1);
-			}), Y && this.initialize();
+				M.status || (this._errors = [...this._errors, ...M.errors], this._valid = !1);
+				const O = a("number", { itemsPerPage: this._itemsPerPage }, { shouldThrow: !1 });
+				O.status || (this._errors = [...this._errors, ...O.errors], this._valid = !1);
+			}), tt && 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);
+			d({ 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);
+			d({ 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);
+			d({ 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;
@@ -640,18 +659,18 @@
 		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;
 		}
@@ -664,12 +683,22 @@
 		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}`;
@@ -678,15 +707,36 @@
 			}), this._id = this.dom.carousel.id;
 		}
 		_setAriaAttributes() {
-			!T("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) => {
-				T("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);
+			!S("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 ? (c(this.pauseClass, this.dom.autoplay), m(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)) : (c(this.playClass, this.dom.autoplay), m(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, () => {
@@ -696,15 +746,15 @@
 			});
 		}
 		_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)));
 				});
 			});
 		}
@@ -718,19 +768,19 @@
 		_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;
 					}
 				});
@@ -738,83 +788,154 @@
 		}
 		_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);
+			});
+		}
+		activateCurrentItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+			this.currentCarouselItem.activate({
+				scroll: t,
+				scrollOptions: e
+			});
 		}
-		deactivateCurrentItem() {
-			l(this.activeClass, this.currentCarouselItem), this.currentCarouselItem.setAttribute("inert", !0), this.currentCarouselTab && (this.currentCarouselTab.setAttribute("aria-selected", !1), l(this.activeClass, this.currentCarouselTab));
+		deactivateCurrentItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+			this.currentCarouselItem.deactivate({
+				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);
-				});
+		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 I = /[\11\12\14\15\40]+/, E = "data-once", j = document;
+	const T = /[\11\12\14\15\40]+/, v = "data-once", j = document;
 	function w(t, e, r) {
-		return t[`${e}Attribute`](E, r);
+		return t[`${e}Attribute`](v, r);
 	}
-	function m(t) {
+	function _(t) {
 		if (typeof t != "string") throw new TypeError("once ID must be a string");
-		if (t === "" || I.test(t)) throw new RangeError("once ID must not be empty or contain spaces");
-		return `[${E}~="${t}"]`;
+		if (t === "" || T.test(t)) throw new RangeError("once ID must not be empty or contain spaces");
+		return `[${v}~="${t}"]`;
 	}
-	function z(t) {
+	function Q(t) {
 		if (!(t instanceof Element)) throw new TypeError("The element must be an instance of Element");
 		return !0;
 	}
-	function f(t, e = j) {
+	function p(t, e = j) {
 		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]);
@@ -822,28 +943,28 @@
 		else throw new TypeError("Selector must not be empty");
 		return Array.prototype.slice.call(r);
 	}
-	function v(t, e, r) {
+	function b(t, e, r) {
 		return e.filter((s) => {
-			const i = z(s) && s.matches(t);
+			const i = Q(s) && s.matches(t);
 			return i && r && r(s), i;
 		});
 	}
 	function k(t, { add: e, remove: r }) {
 		const s = [];
-		w(t, "has") && w(t, "get").trim().split(I).forEach((o) => {
+		w(t, "has") && w(t, "get").trim().split(T).forEach((o) => {
 			s.indexOf(o) < 0 && o !== r && s.push(o);
 		}), e && s.push(e);
 		const i = s.join(" ");
 		w(t, i === "" ? "remove" : "set", i);
 	}
-	function p(t, e, r) {
-		return v(`:not(${m(t)})`, f(e, r), (s) => k(s, { add: t }));
+	function y(t, e, r) {
+		return b(`:not(${_(t)})`, p(e, r), (s) => k(s, { add: t }));
 	}
-	p.remove = (t, e, r) => v(m(t), f(e, r), (s) => k(s, { remove: t })), p.filter = (t, e, r) => v(m(t), f(e, r)), p.find = (t, e) => f(t ? m(t) : `[${E}]`, e);
-	const Q = (t = {}, e = document, r = ".carousel") => {
-		p("graupl-carousel-generator", r, e).forEach((s) => {
+	y.remove = (t, e, r) => b(_(t), p(e, r), (s) => k(s, { remove: t })), y.filter = (t, e, r) => b(_(t), p(e, r)), y.find = (t, e) => p(t ? _(t) : `[${v}]`, e);
+	const V = (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 L({
+			new P({
 				carouselElement: s,
 				initialize: !0,
 				...t,
@@ -852,7 +973,7 @@
 		});
 	};
 	document.addEventListener("DOMContentLoaded", () => {
-		Q();
+		V();
 	});
 })();