@moni-labs/moni-ui 0.3.0 → 0.3.1

package/custom-elements.json

@@ -2,18 +2,6 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "scripts/add-headers.js",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "scripts/build.js",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "dist/index.js",
@@ -412,6 +400,18 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "scripts/add-headers.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "scripts/build.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/index.ts",
@@ -872,12 +872,6 @@
       "declarations": [],
       "exports": []
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/actions/index.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "dist/components/index.js",
@@ -1455,7 +1449,7 @@
         {
           "kind": "variable",
           "name": "MoniCarousel",
-          "default": "class MoniCarousel extends MoniElement { constructor() { super(...arguments); this.items = []; this.layout = 'multi-browse'; this.auto = true; this.largeWidth = 220; this.mediumWidth = 96; this.smallWidth = 48; this.gap = 8; this.padding = 16; this.borderRadius = 28; this.showAll = false; this.showAllText = 'Show all'; this.headerText = ''; this.hideNav = false; this._containerWidth = 0; this._slottedItems = []; this._hasSlottedShowAll = false; this._resizeObserver = null; this._isDown = false; this._startX = 0; this._scrollLeftStart = 0; this._velocity = 0; this._lastTime = 0; this._lastX = 0; this._draggedDistance = 0; this._rafId = null; this._isMobile = false; // Scroll interpolation state this._tickerTarget = 0; this._tickerCurrent = 0; this._isTicking = false; // quickSetter caches — avoid gsap.set() overhead per frame this._cardSetX = []; this._cardSetWidth = []; this._imgSetX = []; this._titleSetOpacity = []; /** * RAF-gated version of updateLayout for scroll events. * Prevents multiple layout recalculations per frame. */ this._tick = () => { const dt = gsap.ticker.deltaRatio(); // Smoother lerp on mobile to avoid abrupt changes (\"brusco\") const ease = this._isMobile ? 0.08 : 0.15; this._tickerCurrent += (this._tickerTarget - this._tickerCurrent) * ease * dt; if (Math.abs(this._tickerTarget - this._tickerCurrent) < 0.0005) { this._tickerCurrent = this._tickerTarget; gsap.ticker.remove(this._tick); this._isTicking = false; } this._applyLayout(this._tickerCurrent); }; this._scheduleLayout = () => { if (!this._scrollContainer) return; this._tickerTarget = this._scrollContainer.scrollLeft / this.itemSize; if (!this._isTicking) { this._isTicking = true; gsap.ticker.add(this._tick); } }; this.updateLayout = (instant = false) => { if (!this._scrollContainer || !this._cards || this._cards.length === 0) return; // Rebuild quickSetters if card count changed (e.g. after items update) if (this._cardSetX.length !== this._cards.length) { this._buildQuickSetters(); } this._tickerTarget = this._scrollContainer.scrollLeft / this.itemSize; if (instant || (!this._isTicking && this._tickerCurrent === 0)) { this._tickerCurrent = this._tickerTarget; this._applyLayout(this._tickerCurrent); } else { if (!this._isTicking) { this._isTicking = true; gsap.ticker.add(this._tick); } } }; } get effectiveItems() { return this.items && this.items.length > 0 ? this.items : this._slottedItems; } static { this.styles = [ sharedStyles, css ` :host { display: block; width: 100%; user-select: none; -webkit-user-select: none; } .carousel-container { position: relative; width: 100%; display: flex; flex-direction: column; gap: 12px; } .carousel-header { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 var(--carousel-padding, 16px); } .carousel-header h3 { margin: 0; font-family: var(--font-title, serif); font-size: 1.5rem; font-weight: 500; color: var(--on-surface); } .show-all-link { color: var(--primary); font-weight: 500; font-size: 0.875rem; text-decoration: none; cursor: pointer; transition: opacity var(--speed2); } .show-all-link:hover { opacity: 0.8; text-decoration: underline; } .carousel-viewport { position: relative; width: 100%; overflow: hidden; } .scroll-container { width: 100%; height: 296px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; } .scroll-container:active { cursor: grabbing; } .scroll-container::-webkit-scrollbar { display: none; } .snap-track { display: flex; width: calc(var(--carousel-track-width, 0px) + var(--carousel-right-padding, 128px)); gap: var(--carousel-gap, 8px); padding: 8px 0 8px var(--carousel-padding, 16px); height: 100%; pointer-events: none; } .snap-item { flex: 0 0 var(--carousel-snap-width, 220px); height: 100%; scroll-snap-align: start; pointer-events: none; } .visual-track { position: absolute; left: 0; top: 8px; width: 0; height: 280px; overflow: visible; pointer-events: none; } .card { position: absolute; top: 0; height: 280px; border-radius: var(--carousel-border-radius, 28px); overflow: hidden; background-color: var(--surface-container-high); pointer-events: auto; box-shadow: var(--elevate1); will-change: transform; cursor: pointer; transition: box-shadow var(--speed2); } .card:hover { box-shadow: var(--elevate2); } .card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.7) 100%); pointer-events: none; z-index: 1; } .img-parallax-container { width: 100%; height: 100%; position: relative; overflow: hidden; } .card img { width: calc(100% + 50px); height: 100%; object-fit: cover; position: absolute; left: -25px; pointer-events: none; user-select: none; -webkit-user-drag: none; will-change: transform; } .card-title { position: absolute; bottom: 20px; left: 20px; right: 20px; color: #ffffff; margin: 0; font-size: 1.1rem; font-weight: 500; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; } /* Arrow navigation overlays */ .nav-button { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 48px; height: 48px; border-radius: 50%; background-color: var(--surface-container-highest); color: var(--on-surface); border: none; box-shadow: var(--elevate2); display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--speed2), background-color var(--speed2); } .nav-button:hover { background-color: var(--primary-container); color: var(--on-primary-container); } .nav-button.prev { left: 24px; } .nav-button.next { right: 24px; } .carousel-viewport:hover .nav-button.visible { opacity: 1; pointer-events: auto; } @media (max-width: 600px) { .nav-button { display: none !important; } } /* Utility icon style inside shadow dom */ .material-symbols { font-family: var(--font-icon); font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; } ` ]; } connectedCallback() { super.connectedCallback(); if (typeof ResizeObserver !== 'undefined') { this._resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) { this._containerWidth = entry.contentRect.width; this.updateLayout(true); // Synchronous update for instant resizing! this.requestUpdate(); } }); this._resizeObserver.observe(this); } // Detect mobile for parallax toggle if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') { const mql = window.matchMedia('(max-width: 600px)'); this._isMobile = mql.matches; const handler = (e) => { this._isMobile = e.matches; }; mql.addEventListener('change', handler); // Store for cleanup this.__mqlCleanup = () => mql.removeEventListener('change', handler); } } disconnectedCallback() { if (this._resizeObserver) { this._resizeObserver.disconnect(); } // Cancel any pending RAF or ticker if (this._rafId !== null) { cancelAnimationFrame(this._rafId); this._rafId = null; } gsap.ticker.remove(this._tick); this._isTicking = false; // Clean up matchMedia listener if (this.__mqlCleanup) { this.__mqlCleanup(); delete this.__mqlCleanup; } super.disconnectedCallback(); } firstUpdated() { const defaultSlot = this.shadowRoot?.querySelector('slot:not([name])'); if (defaultSlot) { this._handleSlotChange({ target: defaultSlot }); } const showAllSlot = this.shadowRoot?.querySelector('slot[name=\"show-all\"]'); if (showAllSlot) { this._handleShowAllSlotChange({ target: showAllSlot }); } this._buildQuickSetters(); this.updateLayout(true); } updated(changedProperties) { super.updated(changedProperties); if (changedProperties.has('layout') || changedProperties.has('largeWidth') || changedProperties.has('mediumWidth') || changedProperties.has('smallWidth') || changedProperties.has('gap') || changedProperties.has('padding') || changedProperties.has('items') || changedProperties.has('hideNav') || changedProperties.has('_containerWidth') || changedProperties.has('_slottedItems') || changedProperties.has('_hasSlottedShowAll')) { if (changedProperties.has('layout') && this._scrollContainer) { this._scrollContainer.scrollLeft = 0; this._scrollContainer.style.scrollSnapType = this.layout === 'uncontained' ? 'none' : 'x mandatory'; } this.updateLayout(true); } } get computedLayout() { const W_c = this._containerWidth || this.getBoundingClientRect().width || 360; const gap = this.gap; const padding = this.padding; const W_a = W_c - 2 * padding; let L = this.largeWidth; let M = this.mediumWidth; let S = this.smallWidth; let N = 1; if (this.auto) { if (this.layout === 'uncontained') { // Fits as many L items as possible, letting them bleed off the right edge. // We target large width around 260px. L = Math.min(W_a, 260); } else if (this.layout === 'hero') { // Hero has N large items and 1 small peeking item. // W_a = N * L + S + N * gap S = 48; N = Math.max(1, Math.floor((W_a - S) / (250 + gap))); L = (W_a - S - N * gap) / N; if (L < 150) { N = 1; L = W_a - S - gap; } } else { // multi-browse: N large items, 1 medium, 1 small // W_a = N * L + M + S + (N + 1) * gap S = 48; let bestN = 1; let bestL = 220; let bestDiff = Infinity; for (let n = 1; n <= 10; n++) { const l = (W_a - S - (n + 1) * gap) / (n + 0.45); if (l >= 140 && l <= 340) { const diff = Math.abs(l - 220); if (diff < bestDiff) { bestDiff = diff; bestN = n; bestL = l; } } } if (bestDiff === Infinity) { N = 1; L = (W_a - S - 2 * gap) / 1.45; } else { N = bestN; L = bestL; } M = 0.45 * L; } } else { // Non-auto/manual sizing mode L = this.largeWidth; M = this.mediumWidth; S = this.smallWidth; if (this.layout === 'hero') { N = 1; } else if (this.layout === 'uncontained') { N = Math.max(1, Math.floor(W_a / (L + gap))); } else { N = 1; } } return { L, M, S, N }; } get itemSize() { return this.computedLayout.L + this.gap; } _getCardLayout(p) { const { L, M, S, N } = this.computedLayout; const gap = this.gap; const padding = this.padding; let width = L; let x = padding; let opacity = 1; if (this.layout === 'uncontained') { width = L; x = padding + p * (L + gap); opacity = 1; } else if (this.layout === 'hero') { const X_N = padding + N * (L + gap); const X_M1 = padding - gap - S; if (p <= -1) { width = S; x = X_M1 + (p - -1) * (S + gap); opacity = 0; } else if (p <= 0) { width = gsap.utils.interpolate(S, L, p + 1); x = gsap.utils.interpolate(X_M1, padding, p + 1); opacity = gsap.utils.interpolate(0, 1, p + 1); } else if (p <= N - 1) { width = L; x = padding + p * (L + gap); opacity = 1; } else if (p <= N) { const u = p - (N - 1); const X_last = padding + (N - 1) * (L + gap); width = gsap.utils.interpolate(L, S, u); x = gsap.utils.interpolate(X_last, X_N, u); opacity = gsap.utils.interpolate(1, 0, u); } else { width = S; x = X_N + (p - N) * (S + gap); opacity = 0; } } else { // multi-browse const X_N = padding + N * (L + gap); const X_N1 = X_N + M + gap; const X_M1 = padding - gap - S; if (p <= -1) { width = S; x = X_M1 + (p - -1) * (S + gap); opacity = 0; } else if (p <= 0) { width = gsap.utils.interpolate(S, L, p + 1); x = gsap.utils.interpolate(X_M1, padding, p + 1); opacity = gsap.utils.interpolate(0, 1, p + 1); } else if (p <= N - 1) { width = L; x = padding + p * (L + gap); opacity = 1; } else if (p <= N) { const u = p - (N - 1); const X_last = padding + (N - 1) * (L + gap); width = gsap.utils.interpolate(L, M, u); x = gsap.utils.interpolate(X_last, X_N, u); opacity = gsap.utils.interpolate(1, 0, u); } else if (p <= N + 1) { const u = p - N; width = gsap.utils.interpolate(M, S, u); x = gsap.utils.interpolate(X_N, X_N1, u); opacity = 0; } else { width = S; x = X_N1 + (p - (N + 1)) * (S + gap); opacity = 0; } } return { width, x, opacity }; } /** * Rebuild quickSetter caches after cards change. * quickSetter avoids gsap.set() overhead for properties updated every frame. */ _buildQuickSetters() { if (!this._cards || this._cards.length === 0) return; this._cardSetX = []; this._cardSetWidth = []; this._imgSetX = []; this._titleSetOpacity = []; this._cards.forEach((card) => { this._cardSetX.push(gsap.quickSetter(card, 'x', 'px')); this._cardSetWidth.push(gsap.quickSetter(card, 'width', 'px')); const img = card.querySelector('img'); this._imgSetX.push(img ? gsap.quickSetter(img, 'x', 'px') : (() => { })); const title = card.querySelector('.card-title'); this._titleSetOpacity.push(title ? gsap.quickSetter(title, 'opacity') : (() => { })); }); } _applyLayout(t) { const isMobile = this._isMobile; const cardCount = this._cards.length; for (let i = 0; i < cardCount; i++) { const p = i - t; const layout = this._getCardLayout(p); // Use quickSetters — ~3x faster than gsap.set() per call this._cardSetX[i](layout.x); this._cardSetWidth[i](layout.width); // Skip parallax on mobile to save per-frame work if (!isMobile) { const clampedP = Math.max(-1, Math.min(1, p)); this._imgSetX[i](clampedP * -25); } this._titleSetOpacity[i](layout.opacity); } } _handleMouseDown(e) { gsap.killTweensOf(this._scrollContainer); this._isDown = true; this._draggedDistance = 0; this._scrollContainer.style.scrollBehavior = 'auto'; this._scrollContainer.style.scrollSnapType = 'none'; this._startX = e.pageX - this._scrollContainer.offsetLeft; this._scrollLeftStart = this._scrollContainer.scrollLeft; this._velocity = 0; this._lastX = e.pageX; this._lastTime = performance.now(); } _handleMouseMove(e) { if (!this._isDown) return; e.preventDefault(); const currentX = e.pageX; const x = currentX - this._scrollContainer.offsetLeft; this._scrollContainer.scrollLeft = this._scrollLeftStart + (this._startX - x) * 1.25; const currentTime = performance.now(); const dt = currentTime - this._lastTime; if (dt > 0) { this._velocity = (currentX - this._lastX) / dt; } this._draggedDistance += Math.abs(currentX - this._lastX); this._lastX = currentX; this._lastTime = currentTime; } _handleMouseUp() { if (!this._isDown) return; this._isDown = false; const currentTime = performance.now(); if (currentTime - this._lastTime > 100) { this._velocity = 0; } // Dynamic momentum: stronger swipes have a much higher multiplier const momentumMultiplier = 350 + Math.abs(this._velocity) * 300; const projectedScrollLeft = this._scrollContainer.scrollLeft - this._velocity * momentumMultiplier; if (this.layout !== 'uncontained') { this._scrollContainer.style.scrollSnapType = 'none'; let targetIndex = Math.round(projectedScrollLeft / this.itemSize); targetIndex = Math.max(0, Math.min(this.effectiveItems.length - 1, targetIndex)); const snapPoint = targetIndex * this.itemSize; // Dynamic duration: longer distance = more time, max 0.85s for faster feeling const currentIndex = Math.round(this._scrollContainer.scrollLeft / this.itemSize); const cardsSkipped = Math.abs(targetIndex - currentIndex); const duration = Math.min(0.85, 0.25 + cardsSkipped * 0.04); this._scrollContainer.style.scrollBehavior = 'auto'; gsap.to(this._scrollContainer, { scrollLeft: snapPoint, duration: duration, ease: 'power3.out', onComplete: () => { if (!this._isDown && this._scrollContainer) { this._scrollContainer.style.scrollSnapType = 'x mandatory'; } } }); } } _handleTouchStart(e) { gsap.killTweensOf(this._scrollContainer); this._isDown = true; this._draggedDistance = 0; this._scrollContainer.style.scrollBehavior = 'auto'; this._scrollContainer.style.scrollSnapType = 'none'; const touch = e.touches[0]; this._startX = touch.pageX - this._scrollContainer.offsetLeft; this._scrollLeftStart = this._scrollContainer.scrollLeft; this._velocity = 0; this._lastX = touch.pageX; this._lastTime = performance.now(); } _handleTouchMove(e) { if (!this._isDown) return; const touch = e.touches[0]; const currentX = touch.pageX; const x = currentX - this._scrollContainer.offsetLeft; this._scrollContainer.scrollLeft = this._scrollLeftStart + (this._startX - x); const currentTime = performance.now(); const dt = currentTime - this._lastTime; if (dt > 0) { this._velocity = (currentX - this._lastX) / dt; } this._draggedDistance += Math.abs(currentX - this._lastX); this._lastX = currentX; this._lastTime = currentTime; } _handleTouchEnd() { this._handleMouseUp(); } _handleWheel(e) { // Solo interceptar scroll vertical puro (rueda de mouse típica) if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) { const maxScroll = this._scrollContainer.scrollWidth - this._scrollContainer.clientWidth; const currentScroll = this._scrollContainer.scrollLeft; // Comprobar si estamos en los bordes para permitir el scroll natural de la página const isAtStart = currentScroll <= 0; const isAtEnd = currentScroll >= maxScroll - 1; // Margen de 1px por redondeos decimales if ((e.deltaY < 0 && isAtStart) || (e.deltaY > 0 && isAtEnd)) { return; // Dejar que la página haga scroll vertical } e.preventDefault(); // Prevenir el scroll de la página // Desactivar el snap momentáneamente para que el movimiento de rueda sea fluido this._scrollContainer.style.scrollSnapType = 'none'; // Multiplicador si el deltaMode no es pixel (0) let delta = e.deltaY; if (e.deltaMode === 1) delta *= 40; // Líneas else if (e.deltaMode === 2) delta *= 800; // Páginas this._scrollContainer.scrollLeft += delta; // Restablecer el snap después de un pequeño retraso if (this._wheelTimeout) clearTimeout(this._wheelTimeout); this._wheelTimeout = setTimeout(() => { if (this.layout !== 'uncontained') { this._scrollContainer.style.scrollSnapType = 'x mandatory'; } }, 150); } } _handleCardClick(e, item, index) { if (this._draggedDistance > 8) { e.preventDefault(); e.stopPropagation(); return; } this.dispatchEvent(new CustomEvent('item-click', { detail: { item, index }, bubbles: true, composed: true })); } _scrollPrevious() { const target = Math.max(0, this._scrollContainer.scrollLeft - this.itemSize); this._scrollContainer.style.scrollBehavior = 'smooth'; this._scrollContainer.scrollTo({ left: target, behavior: 'smooth' }); } _scrollNext() { const maxScroll = this._scrollContainer.scrollWidth - this._scrollContainer.clientWidth; const target = Math.min(maxScroll, this._scrollContainer.scrollLeft + this.itemSize); this._scrollContainer.style.scrollBehavior = 'smooth'; this._scrollContainer.scrollTo({ left: target, behavior: 'smooth' }); } _handleShowAllClick(e) { const target = e.target; if (target.tagName.toLowerCase() === 'a' && target.getAttribute('href') === '#') { e.preventDefault(); } this.dispatchEvent(new CustomEvent('show-all-click', { bubbles: true, composed: true })); } _handleShowAllSlotChange(e) { const slot = e.target; let nodes = typeof slot.assignedElements === 'function' ? slot.assignedElements({ flatten: true }) : []; if (nodes.length === 0) { nodes = slot.assignedNodes().filter(n => n.nodeType === 1); } if (nodes.length === 0) { nodes = Array.from(this.querySelectorAll('[slot=\"show-all\"]')); // Fallback for JSDOM } this._hasSlottedShowAll = nodes.length > 0; } _handleSlotChange(e) { const slot = e.target; let nodes = typeof slot.assignedElements === 'function' ? slot.assignedElements({ flatten: true }) : []; if (nodes.length === 0) { nodes = slot.assignedNodes().filter(n => n.nodeType === 1); } if (nodes.length === 0) { nodes = Array.from(this.children).filter(child => child.getAttribute('slot') !== 'show-all'); // Fallback for JSDOM, ignore show-all slot } const items = []; for (const node of nodes) { if (node.tagName.toLowerCase() === 'img') { const img = node; items.push({ title: img.getAttribute('title') || img.getAttribute('alt') || '', img: img.src }); } else if (node.tagName.toLowerCase() === 'a') { const anchor = node; const img = anchor.querySelector('img'); if (img) { items.push({ title: img.getAttribute('title') || img.getAttribute('alt') || anchor.getAttribute('title') || '', img: img.src, href: anchor.href, target: anchor.target }); } } } this._slottedItems = items; // Check if slotted show-all button presence changed const hasSlottedShowAll = !!this.querySelector('[slot=\"show-all\"]'); if (hasSlottedShowAll !== this._hasSlottedShowAll) { this._hasSlottedShowAll = hasSlottedShowAll; } void this.updateComplete.then(() => { this.updateLayout(true); }); } render() { const { L, M, S } = this.computedLayout; const hasItems = this.effectiveItems && this.effectiveItems.length > 0; const hasSlottedShowAll = this._hasSlottedShowAll || !!this.querySelector('[slot=\"show-all\"]'); const showHeader = this.headerText || this.showAll || hasSlottedShowAll; let rightPadding = 128; if (this.layout === 'hero') { rightPadding = S + this.gap; } else if (this.layout === 'uncontained') { rightPadding = 16; } else { rightPadding = M + S + 2 * this.gap; } // Ensure the scroll track is long enough to allow the last item to scroll to the start (p = 0 focus). // Safety margin of 400px avoids fractional rounding/zoom-scale snapping blockages in Firefox. const W_c = this._containerWidth || this.getBoundingClientRect().width || 360; const minRightPaddingNeeded = W_c - L - this.padding + 400; if (rightPadding < minRightPaddingNeeded) { rightPadding = minRightPaddingNeeded; } const trackWidth = hasItems ? this.effectiveItems.length * L + (this.effectiveItems.length - 1) * this.gap : 0; const isScrollable = hasItems && this._scrollContainer && (this._scrollContainer.scrollWidth > this._scrollContainer.clientWidth); const showPrevArrow = isScrollable && this._scrollContainer.scrollLeft > 5; const showNextArrow = isScrollable && (this._scrollContainer.scrollWidth - this._scrollContainer.scrollLeft - this._scrollContainer.clientWidth > 5); return html ` <div class=\"carousel-container\" style=\" --carousel-snap-width: ${L}px; --carousel-gap: ${this.gap}px; --carousel-padding: ${this.padding}px; --carousel-right-padding: ${rightPadding}px; --carousel-border-radius: ${this.borderRadius}px; --carousel-track-width: ${trackWidth}px; \"> <slot @slotchange=${this._handleSlotChange} style=\"display: none;\"></slot> ${showHeader ? html ` <div class=\"carousel-header\"> ${this.headerText ? html `<h3>${this.headerText}</h3>` : ''} <slot name=\"show-all\" @slotchange=${this._handleShowAllSlotChange} @click=${this._handleShowAllClick}> ${this.showAll ? html ` <a href=\"#\" class=\"show-all-link\"> ${this.showAllText} </a> ` : ''} </slot> </div> ` : ''} <div class=\"carousel-viewport\"> ${!this.hideNav ? html ` <button class=\"nav-button prev ${showPrevArrow ? 'visible' : ''}\" @click=${this._scrollPrevious} aria-label=\"Previous items\" > <span class=\"material-symbols\">chevron_left</span> </button> ` : ''} <div class=\"scroll-container\" @scroll=${this._scheduleLayout} @mousedown=${this._handleMouseDown} @mousemove=${this._handleMouseMove} @mouseup=${this._handleMouseUp} @mouseleave=${this._handleMouseUp} @touchstart=${this._handleTouchStart} @touchmove=${this._handleTouchMove} @touchend=${this._handleTouchEnd} @wheel=${this._handleWheel} > <div class=\"snap-track\"> ${hasItems ? this.effectiveItems.map(() => html `<div class=\"snap-item\"></div>`) : ''} </div> <div class=\"visual-track\"> ${hasItems ? this.effectiveItems.map((item, idx) => html ` <div class=\"card\" @click=${(e) => this._handleCardClick(e, item, idx)} > ${item.href ? html ` <a href=\"${item.href}\" target=\"${item.target || '_self'}\" style=\"text-decoration:none; color:inherit;\"> <div class=\"img-parallax-container\"> <img src=\"${item.img}\" alt=\"${item.title}\" draggable=\"false\" /> </div> <h2 class=\"card-title\">${item.title}</h2> </a> ` : html ` <div class=\"img-parallax-container\"> <img src=\"${item.img}\" alt=\"${item.title}\" draggable=\"false\" /> </div> <h2 class=\"card-title\">${item.title}</h2> `} </div> `) : ''} </div> </div> ${!this.hideNav ? html ` <button class=\"nav-button next ${showNextArrow ? 'visible' : ''}\" @click=${this._scrollNext} aria-label=\"Next items\" > <span class=\"material-symbols\">chevron_right</span> </button> ` : ''} </div> </div> `; } }",
+          "default": "class MoniCarousel extends MoniElement { constructor() { super(...arguments); this.items = []; this.layout = 'multi-browse'; this.auto = true; this.largeWidth = 220; this.mediumWidth = 96; this.smallWidth = 48; this.gap = 8; this.padding = 16; this.borderRadius = 28; this.showAll = false; this.showAllText = 'Show all'; this.headerText = ''; this.hideNav = false; this.infinite = false; this.autoplay = false; this.autoplayInterval = 3000; this._containerWidth = 0; this._slottedItems = []; this._hasSlottedShowAll = false; this._resizeObserver = null; this._isDown = false; this._startX = 0; this._scrollLeftStart = 0; this._velocity = 0; this._lastTime = 0; this._lastX = 0; this._draggedDistance = 0; this._rafId = null; this._isMobile = false; // Scroll interpolation state this._tickerTarget = 0; this._tickerCurrent = 0; this._isTicking = false; // Infinite & Autoplay state this._infiniteInitialized = false; this._autoplayTimer = null; // quickSetter caches — avoid gsap.set() overhead per frame this._cardSetX = []; this._cardSetWidth = []; this._imgSetX = []; this._titleSetOpacity = []; /** * RAF-gated version of updateLayout for scroll events. * Prevents multiple layout recalculations per frame. */ this._tick = () => { const dt = gsap.ticker.deltaRatio(); // Smoother lerp on mobile to avoid abrupt changes (\"brusco\") const ease = this._isMobile ? 0.08 : 0.15; this._tickerCurrent += (this._tickerTarget - this._tickerCurrent) * ease * dt; if (Math.abs(this._tickerTarget - this._tickerCurrent) < 0.0005) { this._tickerCurrent = this._tickerTarget; gsap.ticker.remove(this._tick); this._isTicking = false; this._checkInfiniteWrap(); } this._applyLayout(this._tickerCurrent); }; this._scheduleLayout = () => { if (!this._scrollContainer) return; this._tickerTarget = this._scrollContainer.scrollLeft / this.itemSize; if (!this._isTicking) { this._isTicking = true; gsap.ticker.add(this._tick); } }; this.updateLayout = (instant = false) => { if (!this._scrollContainer || !this._cards || this._cards.length === 0) return; // Rebuild quickSetters if card count changed (e.g. after items update) if (this._cardSetX.length !== this._cards.length) { this._buildQuickSetters(); } if (this.infinite && !this._infiniteInitialized && this.effectiveItems.length > 0) { const C = this.effectiveItems.length; const V = C * this._visualCardsMultiplier; const K = this._snapSetsCount; const centerSetIndex = Math.floor(K / 2); // Wait for the browser to render the new items so scrollWidth is updated // A double-rAF or setTimeout ensures the layout engine has processed the new snap-items requestAnimationFrame(() => { setTimeout(() => { if (this._scrollContainer) { // Force layout calculation this._scrollContainer.scrollWidth; this._scrollContainer.scrollLeft = centerSetIndex * V * this.itemSize; // If the browser still clamped it, it means it's not ready. // But with setTimeout it should be fully ready. // Force the visual ticker to match instantly to avoid an animation zoom from 0 this._tickerTarget = this._scrollContainer.scrollLeft / this.itemSize; this._tickerCurrent = this._tickerTarget; this._applyLayout(this._tickerCurrent); } }, 20); }); this._infiniteInitialized = true; } this._tickerTarget = this._scrollContainer.scrollLeft / this.itemSize; if (instant || (!this._isTicking && this._tickerCurrent === 0)) { this._tickerCurrent = this._tickerTarget; this._applyLayout(this._tickerCurrent); } else { if (!this._isTicking) { this._isTicking = true; gsap.ticker.add(this._tick); } } }; } get effectiveItems() { return this.items && this.items.length > 0 ? this.items : this._slottedItems; } static { this.styles = [ sharedStyles, css ` :host { display: block; width: 100%; user-select: none; -webkit-user-select: none; } .carousel-container { position: relative; width: 100%; display: flex; flex-direction: column; gap: 12px; } .carousel-header { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 var(--carousel-padding, 16px); } .carousel-header h3 { margin: 0; font-family: var(--font-title, serif); font-size: 1.5rem; font-weight: 500; color: var(--on-surface); } .show-all-link { color: var(--primary); font-weight: 500; font-size: 0.875rem; text-decoration: none; cursor: pointer; transition: opacity var(--speed2); } .show-all-link:hover { opacity: 0.8; text-decoration: underline; } .carousel-viewport { position: relative; width: 100%; overflow: hidden; } .scroll-container { width: 100%; height: 296px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; } .scroll-container:active { cursor: grabbing; } .scroll-container::-webkit-scrollbar { display: none; } .snap-track { display: flex; width: calc(var(--carousel-track-width, 0px) + var(--carousel-right-padding, 128px)); gap: var(--carousel-gap, 8px); padding: 8px 0 8px var(--carousel-padding, 16px); height: 100%; pointer-events: none; } .snap-item { flex: 0 0 var(--carousel-snap-width, 220px); height: 100%; scroll-snap-align: start; pointer-events: none; } .visual-track { position: absolute; left: 0; top: 8px; width: 0; height: 280px; overflow: visible; pointer-events: none; } .card { position: absolute; top: 0; height: 280px; border-radius: var(--carousel-border-radius, 28px); overflow: hidden; background-color: var(--surface-container-high); pointer-events: auto; box-shadow: var(--elevate1); will-change: transform; cursor: pointer; transition: box-shadow var(--speed2); } .card:hover { box-shadow: var(--elevate2); } .card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.7) 100%); pointer-events: none; z-index: 1; } .img-parallax-container { width: 100%; height: 100%; position: relative; overflow: hidden; } .card img { width: calc(100% + 50px); height: 100%; object-fit: cover; position: absolute; left: -25px; pointer-events: none; user-select: none; -webkit-user-drag: none; will-change: transform; } .card-title { position: absolute; bottom: 20px; left: 20px; right: 20px; color: #ffffff; margin: 0; font-size: 1.1rem; font-weight: 500; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; } /* Arrow navigation overlays */ .nav-button { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 48px; height: 48px; border-radius: 50%; background-color: var(--surface-container-highest); color: var(--on-surface); border: none; box-shadow: var(--elevate2); display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--speed2), background-color var(--speed2); } .nav-button:hover { background-color: var(--primary-container); color: var(--on-primary-container); } .nav-button.prev { left: 24px; } .nav-button.next { right: 24px; } .carousel-viewport:hover .nav-button.visible { opacity: 1; pointer-events: auto; } @media (max-width: 600px) { .nav-button { display: none !important; } } /* Utility icon style inside shadow dom */ .material-symbols { font-family: var(--font-icon); font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; } ` ]; } connectedCallback() { super.connectedCallback(); if (typeof ResizeObserver !== 'undefined') { this._resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) { this._containerWidth = entry.contentRect.width; this.updateLayout(true); // Synchronous update for instant resizing! this.requestUpdate(); } }); this._resizeObserver.observe(this); } // Detect mobile for parallax toggle if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') { const mql = window.matchMedia('(max-width: 600px)'); this._isMobile = mql.matches; const handler = (e) => { this._isMobile = e.matches; }; mql.addEventListener('change', handler); // Store for cleanup this.__mqlCleanup = () => mql.removeEventListener('change', handler); } } disconnectedCallback() { if (this._resizeObserver) { this._resizeObserver.disconnect(); } // Cancel any pending RAF or ticker if (this._rafId !== null) { cancelAnimationFrame(this._rafId); this._rafId = null; } gsap.ticker.remove(this._tick); this._isTicking = false; // Clean up matchMedia listener if (this.__mqlCleanup) { this.__mqlCleanup(); delete this.__mqlCleanup; } super.disconnectedCallback(); } firstUpdated() { const defaultSlot = this.shadowRoot?.querySelector('slot:not([name])'); if (defaultSlot) { this._handleSlotChange({ target: defaultSlot }); } const showAllSlot = this.shadowRoot?.querySelector('slot[name=\"show-all\"]'); if (showAllSlot) { this._handleShowAllSlotChange({ target: showAllSlot }); } this._buildQuickSetters(); this.updateLayout(true); if (this.autoplay) { this._startAutoplay(); } } updated(changedProperties) { super.updated(changedProperties); if (changedProperties.has('layout') || changedProperties.has('largeWidth') || changedProperties.has('mediumWidth') || changedProperties.has('smallWidth') || changedProperties.has('gap') || changedProperties.has('padding') || changedProperties.has('items') || changedProperties.has('hideNav') || changedProperties.has('infinite') || changedProperties.has('autoplay') || changedProperties.has('autoplayInterval') || changedProperties.has('_containerWidth') || changedProperties.has('_slottedItems') || changedProperties.has('_hasSlottedShowAll')) { if (changedProperties.has('infinite') || changedProperties.has('items') || changedProperties.has('_slottedItems')) { this._infiniteInitialized = false; } if (changedProperties.has('layout') && this._scrollContainer) { this._scrollContainer.scrollLeft = 0; this._infiniteInitialized = false; this._scrollContainer.style.scrollSnapType = this.layout === 'uncontained' ? 'none' : 'x mandatory'; } this.updateLayout(true); if (changedProperties.has('autoplay') || changedProperties.has('autoplayInterval') || changedProperties.has('items') || changedProperties.has('_slottedItems')) { if (this.autoplay) { this._startAutoplay(); } else { this._stopAutoplay(); } } } } get computedLayout() { const W_c = this._containerWidth || this.getBoundingClientRect().width || 360; const gap = this.gap; const padding = this.padding; const W_a = W_c - 2 * padding; let L = this.largeWidth; let M = this.mediumWidth; let S = this.smallWidth; let N = 1; if (this.auto) { if (this.layout === 'uncontained') { // Fits as many L items as possible, letting them bleed off the right edge. // We target large width around 260px. L = Math.min(W_a, 260); } else if (this.layout === 'hero') { // Hero has N large items and 1 small peeking item. // W_a = N * L + S + N * gap S = 48; N = Math.max(1, Math.floor((W_a - S) / (250 + gap))); L = (W_a - S - N * gap) / N; if (L < 150) { N = 1; L = W_a - S - gap; } } else { // multi-browse: N large items, 1 medium, 1 small // W_a = N * L + M + S + (N + 1) * gap S = 48; let bestN = 1; let bestL = 220; let bestDiff = Infinity; for (let n = 1; n <= 10; n++) { const l = (W_a - S - (n + 1) * gap) / (n + 0.45); if (l >= 140 && l <= 340) { const diff = Math.abs(l - 220); if (diff < bestDiff) { bestDiff = diff; bestN = n; bestL = l; } } } if (bestDiff === Infinity) { N = 1; L = (W_a - S - 2 * gap) / 1.45; } else { N = bestN; L = bestL; } M = 0.45 * L; } } else { // Non-auto/manual sizing mode L = this.largeWidth; M = this.mediumWidth; S = this.smallWidth; if (this.layout === 'hero') { N = 1; } else if (this.layout === 'uncontained') { N = Math.max(1, Math.floor(W_a / (L + gap))); } else { N = 1; } } return { L, M, S, N }; } get itemSize() { return this.computedLayout.L + this.gap; } _getCardLayout(p) { const { L, M, S, N } = this.computedLayout; const gap = this.gap; const padding = this.padding; let width = L; let x = padding; let opacity = 1; if (this.layout === 'uncontained') { width = L; x = padding + p * (L + gap); opacity = 1; } else if (this.layout === 'hero') { const X_N = padding + N * (L + gap); const X_M1 = padding - gap - S; if (p <= -1) { width = S; x = X_M1 + (p - -1) * (S + gap); opacity = 0; } else if (p <= 0) { width = gsap.utils.interpolate(S, L, p + 1); x = gsap.utils.interpolate(X_M1, padding, p + 1); opacity = gsap.utils.interpolate(0, 1, p + 1); } else if (p <= N - 1) { width = L; x = padding + p * (L + gap); opacity = 1; } else if (p <= N) { const u = p - (N - 1); const X_last = padding + (N - 1) * (L + gap); width = gsap.utils.interpolate(L, S, u); x = gsap.utils.interpolate(X_last, X_N, u); opacity = gsap.utils.interpolate(1, 0, u); } else { width = S; x = X_N + (p - N) * (S + gap); opacity = 0; } } else { // multi-browse const X_N = padding + N * (L + gap); const X_N1 = X_N + M + gap; const X_M1 = padding - gap - S; if (p <= -1) { width = S; x = X_M1 + (p - -1) * (S + gap); opacity = 0; } else if (p <= 0) { width = gsap.utils.interpolate(S, L, p + 1); x = gsap.utils.interpolate(X_M1, padding, p + 1); opacity = gsap.utils.interpolate(0, 1, p + 1); } else if (p <= N - 1) { width = L; x = padding + p * (L + gap); opacity = 1; } else if (p <= N) { const u = p - (N - 1); const X_last = padding + (N - 1) * (L + gap); width = gsap.utils.interpolate(L, M, u); x = gsap.utils.interpolate(X_last, X_N, u); opacity = gsap.utils.interpolate(1, 0, u); } else if (p <= N + 1) { const u = p - N; width = gsap.utils.interpolate(M, S, u); x = gsap.utils.interpolate(X_N, X_N1, u); opacity = 0; } else { width = S; x = X_N1 + (p - (N + 1)) * (S + gap); opacity = 0; } } return { width, x, opacity }; } /** * Rebuild quickSetter caches after cards change. * quickSetter avoids gsap.set() overhead for properties updated every frame. */ _buildQuickSetters() { if (!this._cards || this._cards.length === 0) return; this._cardSetX = []; this._cardSetWidth = []; this._imgSetX = []; this._titleSetOpacity = []; this._cards.forEach((card) => { this._cardSetX.push(gsap.quickSetter(card, 'x', 'px')); this._cardSetWidth.push(gsap.quickSetter(card, 'width', 'px')); const img = card.querySelector('img'); this._imgSetX.push(img ? gsap.quickSetter(img, 'x', 'px') : (() => { })); const title = card.querySelector('.card-title'); this._titleSetOpacity.push(title ? gsap.quickSetter(title, 'opacity') : (() => { })); }); } _applyLayout(t) { const isMobile = this._isMobile; const cardCount = this._cards.length; for (let i = 0; i < cardCount; i++) { let p = i - t; if (this.infinite) { // Modulo wrap so the cards perfectly loop around the center p = i - (t % cardCount); if (p > cardCount / 2) p -= cardCount; if (p < -cardCount / 2) p += cardCount; } // Optimization: if the card is far off-screen, hide it to save rendering work if (p < -15 || p > 15) { this._cardSetX[i](-9999); this._titleSetOpacity[i](0); continue; } const layout = this._getCardLayout(p); // Use quickSetters — ~3x faster than gsap.set() per call this._cardSetX[i](layout.x); this._cardSetWidth[i](layout.width); // Skip parallax on mobile to save per-frame work if (!isMobile) { const clampedP = Math.max(-1, Math.min(1, p)); this._imgSetX[i](clampedP * -25); } this._titleSetOpacity[i](layout.opacity); } } get _visualCardsMultiplier() { if (!this.infinite || this.effectiveItems.length === 0) return 1; const C = this.effectiveItems.length; // We need at least ~15 cards to fill the screen seamlessly for small datasets return Math.max(1, Math.ceil(15 / C)); } get _snapSetsCount() { if (!this.infinite || this.effectiveItems.length === 0) return 1; const C = this.effectiveItems.length; const V = C * this._visualCardsMultiplier; // We want enough snap items so the user NEVER reaches the end in a single fast swipe. // A total of ~1000 items is extremely cheap as empty divs, and provides a massive buffer. let K = Math.ceil(1000 / V); if (K % 2 === 0) K += 1; // Keep it odd for a perfect center return Math.max(3, K); } get _snapItemsCount() { if (this.infinite) { const C = this.effectiveItems.length; const V_mult = this._visualCardsMultiplier; const K = this._snapSetsCount; return K * (C * V_mult); } return this.effectiveItems.length; } _checkInfiniteWrap() { if (!this.infinite || this.effectiveItems.length === 0 || !this._scrollContainer) return; const C = this.effectiveItems.length; const V = C * this._visualCardsMultiplier; const K = this._snapSetsCount; const centerSetIndex = Math.floor(K / 2); // The scroll track is divided into K sets, each containing V items. const setWidth = V * this.itemSize; const currentScroll = this._scrollContainer.scrollLeft; const currentSet = Math.floor(currentScroll / setWidth); if (currentSet !== centerSetIndex) { const delta = (centerSetIndex - currentSet) * setWidth; const oldSnap = this._scrollContainer.style.scrollSnapType; const oldBehavior = this._scrollContainer.style.scrollBehavior; // Temporarily disable snap and smooth behavior so the wrap is instantaneous this._scrollContainer.style.scrollSnapType = 'none'; this._scrollContainer.style.scrollBehavior = 'auto'; this._scrollContainer.scrollLeft += delta; // INSTANTLY update the GSAP visual ticker so it doesn't animate the jump this._tickerTarget = this._scrollContainer.scrollLeft / this.itemSize; this._tickerCurrent = this._tickerTarget; this._applyLayout(this._tickerCurrent); // Restore original scroll behavior this._scrollContainer.style.scrollBehavior = oldBehavior; if (this._isDown) { this._scrollLeftStart += delta; } if (oldSnap && oldSnap !== 'none') { // Re-enable snap on the next frame to avoid jumping requestAnimationFrame(() => { if (this._scrollContainer && !this._isDown) { this._scrollContainer.style.scrollSnapType = oldSnap; } }); } } } _startAutoplay() { this._stopAutoplay(); if (this.autoplay && this.effectiveItems.length > 0) { this._autoplayTimer = setInterval(() => { // We removed _isInteracting to make autoplay more robust. It only pauses on active drag. if (!this._isDown) { this._scrollNext(); } }, this.autoplayInterval); } } _stopAutoplay() { if (this._autoplayTimer) { clearInterval(this._autoplayTimer); this._autoplayTimer = null; } } _handleMouseEnter() { } _handleMouseLeave() { this._handleMouseUp(); } _handleMouseDown(e) { gsap.killTweensOf(this._scrollContainer); this._checkInfiniteWrap(); this._isDown = true; this._draggedDistance = 0; this._scrollContainer.style.scrollBehavior = 'auto'; this._scrollContainer.style.scrollSnapType = 'none'; this._startX = e.pageX - this._scrollContainer.offsetLeft; this._scrollLeftStart = this._scrollContainer.scrollLeft; this._velocity = 0; this._lastX = e.pageX; this._lastTime = performance.now(); } _handleMouseMove(e) { if (!this._isDown) return; e.preventDefault(); const currentX = e.pageX; const x = currentX - this._scrollContainer.offsetLeft; this._scrollContainer.scrollLeft = this._scrollLeftStart + (this._startX - x) * 1.25; const currentTime = performance.now(); const dt = currentTime - this._lastTime; if (dt > 0) { this._velocity = (currentX - this._lastX) / dt; } this._draggedDistance += Math.abs(currentX - this._lastX); this._lastX = currentX; this._lastTime = currentTime; } _handleMouseUp() { if (!this._isDown) return; this._isDown = false; const currentTime = performance.now(); if (currentTime - this._lastTime > 100) { this._velocity = 0; } // Dynamic momentum: stronger swipes have a much higher multiplier const momentumMultiplier = 350 + Math.abs(this._velocity) * 300; let projectedScrollLeft = this._scrollContainer.scrollLeft - this._velocity * momentumMultiplier; // Cap momentum throw to prevent hitting infinite wrap edges on fast swipes const maxThrowDist = 15 * this.itemSize; if (projectedScrollLeft < this._scrollContainer.scrollLeft - maxThrowDist) { projectedScrollLeft = this._scrollContainer.scrollLeft - maxThrowDist; } else if (projectedScrollLeft > this._scrollContainer.scrollLeft + maxThrowDist) { projectedScrollLeft = this._scrollContainer.scrollLeft + maxThrowDist; } if (this.layout !== 'uncontained') { this._scrollContainer.style.scrollSnapType = 'none'; let targetIndex = Math.round(projectedScrollLeft / this.itemSize); const maxIndex = this.effectiveItems.length > 0 ? this._snapItemsCount - 1 : 0; targetIndex = Math.max(0, Math.min(maxIndex, targetIndex)); const snapPoint = targetIndex * this.itemSize; // Dynamic duration: longer distance = more time, max 0.85s for faster feeling const currentIndex = Math.round(this._scrollContainer.scrollLeft / this.itemSize); const cardsSkipped = Math.abs(targetIndex - currentIndex); const duration = Math.min(0.85, 0.25 + cardsSkipped * 0.04); this._scrollContainer.style.scrollBehavior = 'auto'; gsap.to(this._scrollContainer, { scrollLeft: snapPoint, duration: duration, ease: 'power3.out', onComplete: () => { if (!this._isDown && this._scrollContainer) { this._scrollContainer.style.scrollSnapType = 'x mandatory'; } } }); } } _handleTouchStart(e) { gsap.killTweensOf(this._scrollContainer); this._checkInfiniteWrap(); this._isDown = true; this._draggedDistance = 0; this._scrollContainer.style.scrollBehavior = 'auto'; this._scrollContainer.style.scrollSnapType = 'none'; const touch = e.touches[0]; this._startX = touch.pageX - this._scrollContainer.offsetLeft; this._scrollLeftStart = this._scrollContainer.scrollLeft; this._velocity = 0; this._lastX = touch.pageX; this._lastTime = performance.now(); } _handleTouchMove(e) { if (!this._isDown) return; const touch = e.touches[0]; const currentX = touch.pageX; const x = currentX - this._scrollContainer.offsetLeft; this._scrollContainer.scrollLeft = this._scrollLeftStart + (this._startX - x); const currentTime = performance.now(); const dt = currentTime - this._lastTime; if (dt > 0) { this._velocity = (currentX - this._lastX) / dt; } this._draggedDistance += Math.abs(currentX - this._lastX); this._lastX = currentX; this._lastTime = currentTime; } _handleTouchEnd() { this._handleMouseUp(); } _handleWheel(e) { // Solo interceptar scroll vertical puro (rueda de mouse típica) if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) { const maxScroll = this._scrollContainer.scrollWidth - this._scrollContainer.clientWidth; const currentScroll = this._scrollContainer.scrollLeft; // Comprobar si estamos en los bordes para permitir el scroll natural de la página const isAtStart = currentScroll <= 0; const isAtEnd = currentScroll >= maxScroll - 1; // Margen de 1px por redondeos decimales if ((e.deltaY < 0 && isAtStart) || (e.deltaY > 0 && isAtEnd)) { return; // Dejar que la página haga scroll vertical } e.preventDefault(); // Prevenir el scroll de la página // Desactivar el snap momentáneamente para que el movimiento de rueda sea fluido this._scrollContainer.style.scrollSnapType = 'none'; // Multiplicador si el deltaMode no es pixel (0) let delta = e.deltaY; if (e.deltaMode === 1) delta *= 40; // Líneas else if (e.deltaMode === 2) delta *= 800; // Páginas this._scrollContainer.scrollLeft += delta; // Restablecer el snap después de un pequeño retraso if (this._wheelTimeout) clearTimeout(this._wheelTimeout); this._wheelTimeout = setTimeout(() => { if (this.layout !== 'uncontained' && !this._isDown) { this._scrollContainer.style.scrollSnapType = 'x mandatory'; } }, 150); } } _handleCardClick(e, item, index) { if (this._draggedDistance > 8) { e.preventDefault(); e.stopPropagation(); return; } const originalIndex = index % this.effectiveItems.length; this.dispatchEvent(new CustomEvent('item-click', { detail: { item, index: originalIndex }, bubbles: true, composed: true })); } _scrollPrevious() { const target = this._scrollContainer.scrollLeft - this.itemSize; this._scrollContainer.style.scrollBehavior = 'smooth'; this._scrollContainer.scrollTo({ left: target, behavior: 'smooth' }); } _scrollNext() { const target = this._scrollContainer.scrollLeft + this.itemSize; this._scrollContainer.style.scrollBehavior = 'smooth'; this._scrollContainer.scrollTo({ left: target, behavior: 'smooth' }); } _handleShowAllClick(e) { const target = e.target; if (target.tagName.toLowerCase() === 'a' && target.getAttribute('href') === '#') { e.preventDefault(); } this.dispatchEvent(new CustomEvent('show-all-click', { bubbles: true, composed: true })); } _handleShowAllSlotChange(e) { const slot = e.target; let nodes = typeof slot.assignedElements === 'function' ? slot.assignedElements({ flatten: true }) : []; if (nodes.length === 0) { nodes = slot.assignedNodes().filter(n => n.nodeType === 1); } if (nodes.length === 0) { nodes = Array.from(this.querySelectorAll('[slot=\"show-all\"]')); // Fallback for JSDOM } this._hasSlottedShowAll = nodes.length > 0; } _handleSlotChange(e) { const slot = e.target; let nodes = typeof slot.assignedElements === 'function' ? slot.assignedElements({ flatten: true }) : []; if (nodes.length === 0) { nodes = slot.assignedNodes().filter(n => n.nodeType === 1); } if (nodes.length === 0) { nodes = Array.from(this.children).filter(child => child.getAttribute('slot') !== 'show-all'); // Fallback for JSDOM, ignore show-all slot } const items = []; for (const node of nodes) { if (node.tagName.toLowerCase() === 'img') { const img = node; items.push({ title: img.getAttribute('title') || img.getAttribute('alt') || '', img: img.src }); } else if (node.tagName.toLowerCase() === 'a') { const anchor = node; const img = anchor.querySelector('img'); if (img) { items.push({ title: img.getAttribute('title') || img.getAttribute('alt') || anchor.getAttribute('title') || '', img: img.src, href: anchor.href, target: anchor.target }); } } } this._slottedItems = items; // Check if slotted show-all button presence changed const hasSlottedShowAll = !!this.querySelector('[slot=\"show-all\"]'); if (hasSlottedShowAll !== this._hasSlottedShowAll) { this._hasSlottedShowAll = hasSlottedShowAll; } void this.updateComplete.then(() => { this.updateLayout(true); }); } render() { const { L, M, S } = this.computedLayout; const hasItems = this.effectiveItems && this.effectiveItems.length > 0; const hasSlottedShowAll = this._hasSlottedShowAll || !!this.querySelector('[slot=\"show-all\"]'); const showHeader = this.headerText || this.showAll || hasSlottedShowAll; let rightPadding = 128; if (this.layout === 'hero') { rightPadding = S + this.gap; } else if (this.layout === 'uncontained') { rightPadding = 16; } else { rightPadding = M + S + 2 * this.gap; } // Ensure the scroll track is long enough to allow the last item to scroll to the start (p = 0 focus). // Safety margin of 400px avoids fractional rounding/zoom-scale snapping blockages in Firefox. const W_c = this._containerWidth || this.getBoundingClientRect().width || 360; const minRightPaddingNeeded = W_c - L - this.padding + 400; if (rightPadding < minRightPaddingNeeded) { rightPadding = minRightPaddingNeeded; } let snapItemsCount = hasItems ? this._snapItemsCount : 0; let visualItems = this.effectiveItems; if (this.infinite && hasItems) { const V_mult = this._visualCardsMultiplier; visualItems = []; for (let i = 0; i < V_mult; i++) { visualItems = visualItems.concat(this.effectiveItems); } } const trackWidth = hasItems ? snapItemsCount * L + (snapItemsCount - 1) * this.gap : 0; const isScrollable = hasItems && this._scrollContainer && (this._scrollContainer.scrollWidth > this._scrollContainer.clientWidth); const showPrevArrow = this.infinite || (isScrollable && this._scrollContainer.scrollLeft > 5); const showNextArrow = this.infinite || (isScrollable && (this._scrollContainer.scrollWidth - this._scrollContainer.scrollLeft - this._scrollContainer.clientWidth > 5)); return html ` <div class=\"carousel-container\" style=\" --carousel-snap-width: ${L}px; --carousel-gap: ${this.gap}px; --carousel-padding: ${this.padding}px; --carousel-right-padding: ${rightPadding}px; --carousel-border-radius: ${this.borderRadius}px; --carousel-track-width: ${trackWidth}px; \"> <slot @slotchange=${this._handleSlotChange} style=\"display: none;\"></slot> ${showHeader ? html ` <div class=\"carousel-header\"> ${this.headerText ? html `<h3>${this.headerText}</h3>` : ''} <slot name=\"show-all\" @slotchange=${this._handleShowAllSlotChange} @click=${this._handleShowAllClick}> ${this.showAll ? html ` <a href=\"#\" class=\"show-all-link\"> ${this.showAllText} </a> ` : ''} </slot> </div> ` : ''} <div class=\"carousel-viewport\"> ${!this.hideNav ? html ` <button class=\"nav-button prev ${showPrevArrow ? 'visible' : ''}\" @click=${this._scrollPrevious} aria-label=\"Previous items\" > <span class=\"material-symbols\">chevron_left</span> </button> ` : ''} <div class=\"scroll-container\" @scroll=${this._scheduleLayout} @mousedown=${this._handleMouseDown} @mousemove=${this._handleMouseMove} @mouseup=${this._handleMouseUp} @mouseenter=${this._handleMouseEnter} @mouseleave=${this._handleMouseLeave} @touchstart=${this._handleTouchStart} @touchmove=${this._handleTouchMove} @touchend=${this._handleTouchEnd} @wheel=${this._handleWheel} > <div class=\"snap-track\"> ${hasItems ? Array.from({ length: snapItemsCount }).map(() => html `<div class=\"snap-item\"></div>`) : ''} </div> <div class=\"visual-track\"> ${hasItems ? visualItems.map((item, idx) => html ` <div class=\"card\" @click=${(e) => this._handleCardClick(e, item, idx)} > ${item.href ? html ` <a href=\"${item.href}\" target=\"${item.target || '_self'}\" style=\"text-decoration:none; color:inherit;\" draggable=\"false\"> <div class=\"img-parallax-container\"> <img src=\"${item.img}\" alt=\"${item.title}\" draggable=\"false\" loading=\"lazy\" /> </div> <h2 class=\"card-title\">${item.title}</h2> </a> ` : html ` <div class=\"img-parallax-container\"> <img src=\"${item.img}\" alt=\"${item.title}\" draggable=\"false\" loading=\"lazy\" /> </div> <h2 class=\"card-title\">${item.title}</h2> `} </div> `) : ''} </div> </div> ${!this.hideNav ? html ` <button class=\"nav-button next ${showNextArrow ? 'visible' : ''}\" @click=${this._scrollNext} aria-label=\"Next items\" > <span class=\"material-symbols\">chevron_right</span> </button> ` : ''} </div> </div> `; } }",
           "description": "Material Design 3 Expressive Carousel component.\n\nCarousels display a collection of related items in a scrollable, horizontal list.\nThey allow users to quickly browse through items like images, cards, or products.\n\n**M3 spec reference:** `m3-docs/components/carousel/specs.md`\n\n**Layout variants:**\n- `multi-browse` (default) — Shows a mix of large, medium, and small (peeking)\n  items. Best for exploring a large number of items.\n- `hero` — Focuses on one large primary item while showing a sliver of the\n  next item. Best for featuring important content.\n- `uncontained` — Standard layout where all items have the same width and\n  bleed off the edges of the container.\n\n**Animation & Gestures:**\nThis component uses GSAP for smooth drag, flick, and snap animations,\nmirroring the high-fidelity M3 Expressive motion specs. It handles touch\ngestures for mobile and mouse-drag for desktop.\n\n**Auto-sizing (`auto` mode):**\nWhen `auto=true` (default), the carousel measures its own width and\ndynamically calculates the optimal sizes for large, medium, and small items\nbased on the active `layout` to ensure they fit perfectly without awkward gaps\nor clipping at the edges."
         }
       ],
@@ -3054,6 +3048,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/actions/index.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/index.ts",
@@ -4858,6 +4858,30 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "infinite",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "autoplay",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "autoplayInterval",
+              "type": {
+                "text": "number"
+              },
+              "default": "3000"
+            },
             {
               "kind": "field",
               "name": "_containerWidth",
@@ -5026,6 +5050,24 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_infiniteInitialized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_autoplayTimer",
+              "type": {
+                "text": "any"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "_cardSetX",
@@ -5144,6 +5186,49 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "_visualCardsMultiplier",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_snapSetsCount",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_snapItemsCount",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_checkInfiniteWrap",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_startAutoplay",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_stopAutoplay",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleMouseEnter",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleMouseLeave",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "_handleMouseDown",

package/dist/components/moni-carousel.d.ts

@@ -89,6 +89,9 @@ export declare class MoniCarousel extends MoniElement {
     showAllText: string;
     headerText: string;
     hideNav: boolean;
+    infinite: boolean;
+    autoplay: boolean;
+    autoplayInterval: number;
     private _containerWidth;
     private _slottedItems;
     private _hasSlottedShowAll;
@@ -108,6 +111,8 @@ export declare class MoniCarousel extends MoniElement {
     private _tickerTarget;
     private _tickerCurrent;
     private _isTicking;
+    private _infiniteInitialized;
+    private _autoplayTimer;
     private _cardSetX;
     private _cardSetWidth;
     private _imgSetX;
@@ -138,6 +143,14 @@ export declare class MoniCarousel extends MoniElement {
     private _scheduleLayout;
     updateLayout: (instant?: boolean) => void;
     private _applyLayout;
+    private get _visualCardsMultiplier();
+    private get _snapSetsCount();
+    private get _snapItemsCount();
+    private _checkInfiniteWrap;
+    private _startAutoplay;
+    private _stopAutoplay;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
     private _handleMouseDown;
     private _handleMouseMove;
     private _handleMouseUp;

package/dist/components/moni-carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-carousel.d.ts","sourceRoot":"","sources":["../../src/components/moni-carousel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;GAEG;AACH,MAAM,WAAW,YAAY;IAC5B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,qBACa,YAAa,SAAQ,WAAW;IACjB,KAAK,EAAE,YAAY,EAAE,CAAM;IACzB,MAAM,EAAE,cAAc,GAAG,MAAM,GAAG,aAAa,CAAkB;IAClD,IAAI,UAAQ;IACF,UAAU,SAAO;IAChB,WAAW,SAAM;IAClB,UAAU,SAAM;IAC1C,GAAG,SAAK;IACR,OAAO,SAAM;IACe,YAAY,SAAM;IACtB,OAAO,UAAS;IAC1B,WAAW,SAAc;IAC3B,UAAU,SAAM;IACJ,OAAO,UAAS;IAE3D,OAAO,CAAC,eAAe,CAAK;IAC5B,OAAO,CAAC,aAAa,CAAsB;IAC3C,OAAO,CAAC,kBAAkB,CAAS;IAE5C,IAAI,cAAc,IAAI,YAAY,EAAE,CAEnC;IAE2B,OAAO,CAAC,gBAAgB,CAAkB;IACnD,OAAO,CAAC,MAAM,CAA8B;IAE/D,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAmC;IACnD,OAAO,CAAC,gBAAgB,CAAmC;IAE3D,OAAgB,MAAM,4BAiOpB;IAEO,iBAAiB;IAwBjB,oBAAoB;IAoBpB,YAAY;IAaZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAwBpD,IAAI,cAAc;;;;;MAwEjB;IAED,IAAI,QAAQ,WAEX;IAED,OAAO,CAAC,cAAc;IA+EtB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAwB1B;;;OAGG;IACH,OAAO,CAAC,KAAK,CAaX;IAEF,OAAO,CAAC,eAAe,CAOrB;IAEF,YAAY,GAAI,iBAAe,UAmB7B;IAEF,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,cAAc;IAwCtB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,iBAAiB;IA4ChB,MAAM;CAqIf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}
+{"version":3,"file":"moni-carousel.d.ts","sourceRoot":"","sources":["../../src/components/moni-carousel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;GAEG;AACH,MAAM,WAAW,YAAY;IAC5B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,qBACa,YAAa,SAAQ,WAAW;IACjB,KAAK,EAAE,YAAY,EAAE,CAAM;IACzB,MAAM,EAAE,cAAc,GAAG,MAAM,GAAG,aAAa,CAAkB;IAClD,IAAI,UAAQ;IACF,UAAU,SAAO;IAChB,WAAW,SAAM;IAClB,UAAU,SAAM;IAC1C,GAAG,SAAK;IACR,OAAO,SAAM;IACe,YAAY,SAAM;IACtB,OAAO,UAAS;IAC1B,WAAW,SAAc;IAC3B,UAAU,SAAM;IACJ,OAAO,UAAS;IACxB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACD,gBAAgB,SAAQ;IAE3E,OAAO,CAAC,eAAe,CAAK;IAC5B,OAAO,CAAC,aAAa,CAAsB;IAC3C,OAAO,CAAC,kBAAkB,CAAS;IAE5C,IAAI,cAAc,IAAI,YAAY,EAAE,CAEnC;IAE2B,OAAO,CAAC,gBAAgB,CAAkB;IACnD,OAAO,CAAC,MAAM,CAA8B;IAE/D,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,oBAAoB,CAAS;IACrC,OAAO,CAAC,cAAc,CAAa;IAGnC,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAmC;IACnD,OAAO,CAAC,gBAAgB,CAAmC;IAE3D,OAAgB,MAAM,4BAiOpB;IAEO,iBAAiB;IAwBjB,oBAAoB;IAoBpB,YAAY;IAiBZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAwCpD,IAAI,cAAc;;;;;MAwEjB;IAED,IAAI,QAAQ,WAEX;IAED,OAAO,CAAC,cAAc;IA+EtB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAwB1B;;;OAGG;IACH,OAAO,CAAC,KAAK,CAcX;IAEF,OAAO,CAAC,eAAe,CAOrB;IAEF,YAAY,GAAI,iBAAe,UA+C7B;IAEF,OAAO,CAAC,YAAY;IAmCpB,OAAO,KAAK,sBAAsB,GAKjC;IAED,OAAO,KAAK,cAAc,GASzB;IAED,OAAO,KAAK,eAAe,GAQ1B;IAED,OAAO,CAAC,kBAAkB;IAiD1B,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,iBAAiB;IAGzB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,cAAc;IAiDtB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,iBAAiB;IA4ChB,MAAM;CAkJf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}

package/dist/components/moni-carousel.js

@@ -87,6 +87,9 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
         this.showAllText = 'Show all';
         this.headerText = '';
         this.hideNav = false;
+        this.infinite = false;
+        this.autoplay = false;
+        this.autoplayInterval = 3000;
         this._containerWidth = 0;
         this._slottedItems = [];
         this._hasSlottedShowAll = false;
@@ -104,6 +107,9 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
         this._tickerTarget = 0;
         this._tickerCurrent = 0;
         this._isTicking = false;
+        // Infinite & Autoplay state
+        this._infiniteInitialized = false;
+        this._autoplayTimer = null;
         // quickSetter caches — avoid gsap.set() overhead per frame
         this._cardSetX = [];
         this._cardSetWidth = [];
@@ -122,6 +128,7 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
                 this._tickerCurrent = this._tickerTarget;
                 gsap.ticker.remove(this._tick);
                 this._isTicking = false;
+                this._checkInfiniteWrap();
             }
             this._applyLayout(this._tickerCurrent);
         };
@@ -141,6 +148,30 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
             if (this._cardSetX.length !== this._cards.length) {
                 this._buildQuickSetters();
             }
+            if (this.infinite && !this._infiniteInitialized && this.effectiveItems.length > 0) {
+                const C = this.effectiveItems.length;
+                const V = C * this._visualCardsMultiplier;
+                const K = this._snapSetsCount;
+                const centerSetIndex = Math.floor(K / 2);
+                // Wait for the browser to render the new items so scrollWidth is updated
+                // A double-rAF or setTimeout ensures the layout engine has processed the new snap-items
+                requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        if (this._scrollContainer) {
+                            // Force layout calculation
+                            this._scrollContainer.scrollWidth;
+                            this._scrollContainer.scrollLeft = centerSetIndex * V * this.itemSize;
+                            // If the browser still clamped it, it means it's not ready. 
+                            // But with setTimeout it should be fully ready.
+                            // Force the visual ticker to match instantly to avoid an animation zoom from 0
+                            this._tickerTarget = this._scrollContainer.scrollLeft / this.itemSize;
+                            this._tickerCurrent = this._tickerTarget;
+                            this._applyLayout(this._tickerCurrent);
+                        }
+                    }, 20);
+                });
+                this._infiniteInitialized = true;
+            }
             this._tickerTarget = this._scrollContainer.scrollLeft / this.itemSize;
             if (instant || (!this._isTicking && this._tickerCurrent === 0)) {
                 this._tickerCurrent = this._tickerTarget;
@@ -434,6 +465,9 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
         }
         this._buildQuickSetters();
         this.updateLayout(true);
+        if (this.autoplay) {
+            this._startAutoplay();
+        }
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -445,15 +479,30 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
             changedProperties.has('padding') ||
             changedProperties.has('items') ||
             changedProperties.has('hideNav') ||
+            changedProperties.has('infinite') ||
+            changedProperties.has('autoplay') ||
+            changedProperties.has('autoplayInterval') ||
             changedProperties.has('_containerWidth') ||
             changedProperties.has('_slottedItems') ||
             changedProperties.has('_hasSlottedShowAll')) {
+            if (changedProperties.has('infinite') || changedProperties.has('items') || changedProperties.has('_slottedItems')) {
+                this._infiniteInitialized = false;
+            }
             if (changedProperties.has('layout') && this._scrollContainer) {
                 this._scrollContainer.scrollLeft = 0;
+                this._infiniteInitialized = false;
                 this._scrollContainer.style.scrollSnapType =
                     this.layout === 'uncontained' ? 'none' : 'x mandatory';
             }
             this.updateLayout(true);
+            if (changedProperties.has('autoplay') || changedProperties.has('autoplayInterval') || changedProperties.has('items') || changedProperties.has('_slottedItems')) {
+                if (this.autoplay) {
+                    this._startAutoplay();
+                }
+                else {
+                    this._stopAutoplay();
+                }
+            }
         }
     }
     get computedLayout() {
@@ -639,7 +688,21 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
         const isMobile = this._isMobile;
         const cardCount = this._cards.length;
         for (let i = 0; i < cardCount; i++) {
-            const p = i - t;
+            let p = i - t;
+            if (this.infinite) {
+                // Modulo wrap so the cards perfectly loop around the center
+                p = i - (t % cardCount);
+                if (p > cardCount / 2)
+                    p -= cardCount;
+                if (p < -cardCount / 2)
+                    p += cardCount;
+            }
+            // Optimization: if the card is far off-screen, hide it to save rendering work
+            if (p < -15 || p > 15) {
+                this._cardSetX[i](-9999);
+                this._titleSetOpacity[i](0);
+                continue;
+            }
             const layout = this._getCardLayout(p);
             // Use quickSetters — ~3x faster than gsap.set() per call
             this._cardSetX[i](layout.x);
@@ -652,8 +715,97 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
             this._titleSetOpacity[i](layout.opacity);
         }
     }
+    get _visualCardsMultiplier() {
+        if (!this.infinite || this.effectiveItems.length === 0)
+            return 1;
+        const C = this.effectiveItems.length;
+        // We need at least ~15 cards to fill the screen seamlessly for small datasets
+        return Math.max(1, Math.ceil(15 / C));
+    }
+    get _snapSetsCount() {
+        if (!this.infinite || this.effectiveItems.length === 0)
+            return 1;
+        const C = this.effectiveItems.length;
+        const V = C * this._visualCardsMultiplier;
+        // We want enough snap items so the user NEVER reaches the end in a single fast swipe.
+        // A total of ~1000 items is extremely cheap as empty divs, and provides a massive buffer.
+        let K = Math.ceil(1000 / V);
+        if (K % 2 === 0)
+            K += 1; // Keep it odd for a perfect center
+        return Math.max(3, K);
+    }
+    get _snapItemsCount() {
+        if (this.infinite) {
+            const C = this.effectiveItems.length;
+            const V_mult = this._visualCardsMultiplier;
+            const K = this._snapSetsCount;
+            return K * (C * V_mult);
+        }
+        return this.effectiveItems.length;
+    }
+    _checkInfiniteWrap() {
+        if (!this.infinite || this.effectiveItems.length === 0 || !this._scrollContainer)
+            return;
+        const C = this.effectiveItems.length;
+        const V = C * this._visualCardsMultiplier;
+        const K = this._snapSetsCount;
+        const centerSetIndex = Math.floor(K / 2);
+        // The scroll track is divided into K sets, each containing V items.
+        const setWidth = V * this.itemSize;
+        const currentScroll = this._scrollContainer.scrollLeft;
+        const currentSet = Math.floor(currentScroll / setWidth);
+        if (currentSet !== centerSetIndex) {
+            const delta = (centerSetIndex - currentSet) * setWidth;
+            const oldSnap = this._scrollContainer.style.scrollSnapType;
+            const oldBehavior = this._scrollContainer.style.scrollBehavior;
+            // Temporarily disable snap and smooth behavior so the wrap is instantaneous
+            this._scrollContainer.style.scrollSnapType = 'none';
+            this._scrollContainer.style.scrollBehavior = 'auto';
+            this._scrollContainer.scrollLeft += delta;
+            // INSTANTLY update the GSAP visual ticker so it doesn't animate the jump
+            this._tickerTarget = this._scrollContainer.scrollLeft / this.itemSize;
+            this._tickerCurrent = this._tickerTarget;
+            this._applyLayout(this._tickerCurrent);
+            // Restore original scroll behavior
+            this._scrollContainer.style.scrollBehavior = oldBehavior;
+            if (this._isDown) {
+                this._scrollLeftStart += delta;
+            }
+            if (oldSnap && oldSnap !== 'none') {
+                // Re-enable snap on the next frame to avoid jumping
+                requestAnimationFrame(() => {
+                    if (this._scrollContainer && !this._isDown) {
+                        this._scrollContainer.style.scrollSnapType = oldSnap;
+                    }
+                });
+            }
+        }
+    }
+    _startAutoplay() {
+        this._stopAutoplay();
+        if (this.autoplay && this.effectiveItems.length > 0) {
+            this._autoplayTimer = setInterval(() => {
+                // We removed _isInteracting to make autoplay more robust. It only pauses on active drag.
+                if (!this._isDown) {
+                    this._scrollNext();
+                }
+            }, this.autoplayInterval);
+        }
+    }
+    _stopAutoplay() {
+        if (this._autoplayTimer) {
+            clearInterval(this._autoplayTimer);
+            this._autoplayTimer = null;
+        }
+    }
+    _handleMouseEnter() {
+    }
+    _handleMouseLeave() {
+        this._handleMouseUp();
+    }
     _handleMouseDown(e) {
         gsap.killTweensOf(this._scrollContainer);
+        this._checkInfiniteWrap();
         this._isDown = true;
         this._draggedDistance = 0;
         this._scrollContainer.style.scrollBehavior = 'auto';
@@ -690,11 +842,20 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
         }
         // Dynamic momentum: stronger swipes have a much higher multiplier
         const momentumMultiplier = 350 + Math.abs(this._velocity) * 300;
-        const projectedScrollLeft = this._scrollContainer.scrollLeft - this._velocity * momentumMultiplier;
+        let projectedScrollLeft = this._scrollContainer.scrollLeft - this._velocity * momentumMultiplier;
+        // Cap momentum throw to prevent hitting infinite wrap edges on fast swipes
+        const maxThrowDist = 15 * this.itemSize;
+        if (projectedScrollLeft < this._scrollContainer.scrollLeft - maxThrowDist) {
+            projectedScrollLeft = this._scrollContainer.scrollLeft - maxThrowDist;
+        }
+        else if (projectedScrollLeft > this._scrollContainer.scrollLeft + maxThrowDist) {
+            projectedScrollLeft = this._scrollContainer.scrollLeft + maxThrowDist;
+        }
         if (this.layout !== 'uncontained') {
             this._scrollContainer.style.scrollSnapType = 'none';
             let targetIndex = Math.round(projectedScrollLeft / this.itemSize);
-            targetIndex = Math.max(0, Math.min(this.effectiveItems.length - 1, targetIndex));
+            const maxIndex = this.effectiveItems.length > 0 ? this._snapItemsCount - 1 : 0;
+            targetIndex = Math.max(0, Math.min(maxIndex, targetIndex));
             const snapPoint = targetIndex * this.itemSize;
             // Dynamic duration: longer distance = more time, max 0.85s for faster feeling
             const currentIndex = Math.round(this._scrollContainer.scrollLeft / this.itemSize);
@@ -715,6 +876,7 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
     }
     _handleTouchStart(e) {
         gsap.killTweensOf(this._scrollContainer);
+        this._checkInfiniteWrap();
         this._isDown = true;
         this._draggedDistance = 0;
         this._scrollContainer.style.scrollBehavior = 'auto';
@@ -770,7 +932,7 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
             if (this._wheelTimeout)
                 clearTimeout(this._wheelTimeout);
             this._wheelTimeout = setTimeout(() => {
-                if (this.layout !== 'uncontained') {
+                if (this.layout !== 'uncontained' && !this._isDown) {
                     this._scrollContainer.style.scrollSnapType = 'x mandatory';
                 }
             }, 150);
@@ -782,20 +944,20 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
             e.stopPropagation();
             return;
         }
+        const originalIndex = index % this.effectiveItems.length;
         this.dispatchEvent(new CustomEvent('item-click', {
-            detail: { item, index },
+            detail: { item, index: originalIndex },
             bubbles: true,
             composed: true
         }));
     }
     _scrollPrevious() {
-        const target = Math.max(0, this._scrollContainer.scrollLeft - this.itemSize);
+        const target = this._scrollContainer.scrollLeft - this.itemSize;
         this._scrollContainer.style.scrollBehavior = 'smooth';
         this._scrollContainer.scrollTo({ left: target, behavior: 'smooth' });
     }
     _scrollNext() {
-        const maxScroll = this._scrollContainer.scrollWidth - this._scrollContainer.clientWidth;
-        const target = Math.min(maxScroll, this._scrollContainer.scrollLeft + this.itemSize);
+        const target = this._scrollContainer.scrollLeft + this.itemSize;
         this._scrollContainer.style.scrollBehavior = 'smooth';
         this._scrollContainer.scrollTo({ left: target, behavior: 'smooth' });
     }
@@ -883,14 +1045,23 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
         if (rightPadding < minRightPaddingNeeded) {
             rightPadding = minRightPaddingNeeded;
         }
+        let snapItemsCount = hasItems ? this._snapItemsCount : 0;
+        let visualItems = this.effectiveItems;
+        if (this.infinite && hasItems) {
+            const V_mult = this._visualCardsMultiplier;
+            visualItems = [];
+            for (let i = 0; i < V_mult; i++) {
+                visualItems = visualItems.concat(this.effectiveItems);
+            }
+        }
         const trackWidth = hasItems
-            ? this.effectiveItems.length * L + (this.effectiveItems.length - 1) * this.gap
+            ? snapItemsCount * L + (snapItemsCount - 1) * this.gap
             : 0;
         const isScrollable = hasItems && this._scrollContainer &&
             (this._scrollContainer.scrollWidth > this._scrollContainer.clientWidth);
-        const showPrevArrow = isScrollable && this._scrollContainer.scrollLeft > 5;
-        const showNextArrow = isScrollable &&
-            (this._scrollContainer.scrollWidth - this._scrollContainer.scrollLeft - this._scrollContainer.clientWidth > 5);
+        const showPrevArrow = this.infinite || (isScrollable && this._scrollContainer.scrollLeft > 5);
+        const showNextArrow = this.infinite || (isScrollable &&
+            (this._scrollContainer.scrollWidth - this._scrollContainer.scrollLeft - this._scrollContainer.clientWidth > 5));
         return html `
 			<div class="carousel-container" style="
 				--carousel-snap-width: ${L}px;
@@ -937,34 +1108,35 @@ let MoniCarousel = class MoniCarousel extends MoniElement {
 						@mousedown=${this._handleMouseDown}
 						@mousemove=${this._handleMouseMove}
 						@mouseup=${this._handleMouseUp}
-						@mouseleave=${this._handleMouseUp}
+						@mouseenter=${this._handleMouseEnter}
+						@mouseleave=${this._handleMouseLeave}
 						@touchstart=${this._handleTouchStart}
 						@touchmove=${this._handleTouchMove}
 						@touchend=${this._handleTouchEnd}
 						@wheel=${this._handleWheel}
 					>
 						<div class="snap-track">
-							${hasItems ? this.effectiveItems.map(() => html `<div class="snap-item"></div>`) : ''}
+							${hasItems ? Array.from({ length: snapItemsCount }).map(() => html `<div class="snap-item"></div>`) : ''}
 						</div>
 						<div class="visual-track">
 							${hasItems
-            ? this.effectiveItems.map((item, idx) => html `
+            ? visualItems.map((item, idx) => html `
 											<div 
 												class="card" 
 												@click=${(e) => this._handleCardClick(e, item, idx)}
 											>
 												${item.href
                 ? html `
-															<a href="${item.href}" target="${item.target || '_self'}" style="text-decoration:none; color:inherit;">
+															<a href="${item.href}" target="${item.target || '_self'}" style="text-decoration:none; color:inherit;" draggable="false">
 																<div class="img-parallax-container">
-																	<img src="${item.img}" alt="${item.title}" draggable="false" />
+																	<img src="${item.img}" alt="${item.title}" draggable="false" loading="lazy" />
 																</div>
 																<h2 class="card-title">${item.title}</h2>
 															</a>
 														`
                 : html `
 															<div class="img-parallax-container">
-																<img src="${item.img}" alt="${item.title}" draggable="false" />
+																<img src="${item.img}" alt="${item.title}" draggable="false" loading="lazy" />
 															</div>
 															<h2 class="card-title">${item.title}</h2>
 														`}
@@ -1029,6 +1201,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'hide-nav' })
 ], MoniCarousel.prototype, "hideNav", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniCarousel.prototype, "infinite", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniCarousel.prototype, "autoplay", void 0);
+__decorate([
+    property({ type: Number, attribute: 'autoplay-interval' })
+], MoniCarousel.prototype, "autoplayInterval", void 0);
 __decorate([
     state()
 ], MoniCarousel.prototype, "_containerWidth", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moni-labs/moni-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "type": "module",
   "description": "Design system unificado para Moni — Material Design 3 Expressive, mobile-first.",

package/src/components/moni-carousel.ts

@@ -96,6 +96,9 @@ export class MoniCarousel extends MoniElement {
 	@property({ attribute: 'show-all-text' }) showAllText = 'Show all';
 	@property({ attribute: 'header-text' }) headerText = '';
 	@property({ type: Boolean, attribute: 'hide-nav' }) hideNav = false;
+	@property({ type: Boolean, reflect: true }) infinite = false;
+	@property({ type: Boolean, reflect: true }) autoplay = false;
+	@property({ type: Number, attribute: 'autoplay-interval' }) autoplayInterval = 3000;
 
 	@state() private _containerWidth = 0;
 	@state() private _slottedItems: CarouselItem[] = [];
@@ -124,6 +127,10 @@ export class MoniCarousel extends MoniElement {
 	private _tickerCurrent = 0;
 	private _isTicking = false;
 
+	// Infinite & Autoplay state
+	private _infiniteInitialized = false;
+	private _autoplayTimer: any = null;
+
 	// quickSetter caches — avoid gsap.set() overhead per frame
 	private _cardSetX: ((value: number) => void)[] = [];
 	private _cardSetWidth: ((value: number) => void)[] = [];
@@ -412,6 +419,10 @@ export class MoniCarousel extends MoniElement {
 		}
 		this._buildQuickSetters();
 		this.updateLayout(true);
+		
+		if (this.autoplay) {
+			this._startAutoplay();
+		}
 	}
 
 	override updated(changedProperties: Map<string, any>) {
@@ -425,16 +436,32 @@ export class MoniCarousel extends MoniElement {
 			changedProperties.has('padding') ||
 			changedProperties.has('items') ||
 			changedProperties.has('hideNav') ||
+			changedProperties.has('infinite') ||
+			changedProperties.has('autoplay') ||
+			changedProperties.has('autoplayInterval') ||
 			changedProperties.has('_containerWidth') ||
 			changedProperties.has('_slottedItems') ||
 			changedProperties.has('_hasSlottedShowAll')
 		) {
+			if (changedProperties.has('infinite') || changedProperties.has('items') || changedProperties.has('_slottedItems')) {
+				this._infiniteInitialized = false;
+			}
+
 			if (changedProperties.has('layout') && this._scrollContainer) {
 				this._scrollContainer.scrollLeft = 0;
+				this._infiniteInitialized = false;
 				this._scrollContainer.style.scrollSnapType =
 					this.layout === 'uncontained' ? 'none' : 'x mandatory';
 			}
 			this.updateLayout(true);
+
+			if (changedProperties.has('autoplay') || changedProperties.has('autoplayInterval') || changedProperties.has('items') || changedProperties.has('_slottedItems')) {
+				if (this.autoplay) {
+					this._startAutoplay();
+				} else {
+					this._stopAutoplay();
+				}
+			}
 		}
 	}
 
@@ -637,6 +664,7 @@ export class MoniCarousel extends MoniElement {
 			this._tickerCurrent = this._tickerTarget;
 			gsap.ticker.remove(this._tick);
 			this._isTicking = false;
+			this._checkInfiniteWrap();
 		}
 
 		this._applyLayout(this._tickerCurrent);
@@ -659,6 +687,34 @@ export class MoniCarousel extends MoniElement {
 			this._buildQuickSetters();
 		}
 
+		if (this.infinite && !this._infiniteInitialized && this.effectiveItems.length > 0) {
+			const C = this.effectiveItems.length;
+			const V = C * this._visualCardsMultiplier;
+			const K = this._snapSetsCount;
+			const centerSetIndex = Math.floor(K / 2);
+			
+			// Wait for the browser to render the new items so scrollWidth is updated
+			// A double-rAF or setTimeout ensures the layout engine has processed the new snap-items
+			requestAnimationFrame(() => {
+				setTimeout(() => {
+					if (this._scrollContainer) {
+						// Force layout calculation
+						this._scrollContainer.scrollWidth;
+						this._scrollContainer.scrollLeft = centerSetIndex * V * this.itemSize;
+						
+						// If the browser still clamped it, it means it's not ready. 
+						// But with setTimeout it should be fully ready.
+						
+						// Force the visual ticker to match instantly to avoid an animation zoom from 0
+						this._tickerTarget = this._scrollContainer.scrollLeft / this.itemSize;
+						this._tickerCurrent = this._tickerTarget;
+						this._applyLayout(this._tickerCurrent);
+					}
+				}, 20);
+			});
+			this._infiniteInitialized = true;
+		}
+
 		this._tickerTarget = this._scrollContainer.scrollLeft / this.itemSize;
 
 		if (instant || (!this._isTicking && this._tickerCurrent === 0)) {
@@ -676,7 +732,21 @@ export class MoniCarousel extends MoniElement {
 		const isMobile = this._isMobile;
 		const cardCount = this._cards.length;
 		for (let i = 0; i < cardCount; i++) {
-			const p = i - t;
+			let p = i - t;
+			if (this.infinite) {
+				// Modulo wrap so the cards perfectly loop around the center
+				p = i - (t % cardCount);
+				if (p > cardCount / 2) p -= cardCount;
+				if (p < -cardCount / 2) p += cardCount;
+			}
+
+			// Optimization: if the card is far off-screen, hide it to save rendering work
+			if (p < -15 || p > 15) {
+				this._cardSetX[i](-9999);
+				this._titleSetOpacity[i](0);
+				continue;
+			}
+
 			const layout = this._getCardLayout(p);
 
 			// Use quickSetters — ~3x faster than gsap.set() per call
@@ -693,8 +763,112 @@ export class MoniCarousel extends MoniElement {
 		}
 	}
 
+	private get _visualCardsMultiplier() {
+		if (!this.infinite || this.effectiveItems.length === 0) return 1;
+		const C = this.effectiveItems.length;
+		// We need at least ~15 cards to fill the screen seamlessly for small datasets
+		return Math.max(1, Math.ceil(15 / C));
+	}
+
+	private get _snapSetsCount() {
+		if (!this.infinite || this.effectiveItems.length === 0) return 1;
+		const C = this.effectiveItems.length;
+		const V = C * this._visualCardsMultiplier;
+		// We want enough snap items so the user NEVER reaches the end in a single fast swipe.
+		// A total of ~1000 items is extremely cheap as empty divs, and provides a massive buffer.
+		let K = Math.ceil(1000 / V);
+		if (K % 2 === 0) K += 1; // Keep it odd for a perfect center
+		return Math.max(3, K);
+	}
+
+	private get _snapItemsCount() {
+		if (this.infinite) {
+			const C = this.effectiveItems.length;
+			const V_mult = this._visualCardsMultiplier;
+			const K = this._snapSetsCount;
+			return K * (C * V_mult);
+		}
+		return this.effectiveItems.length;
+	}
+
+	private _checkInfiniteWrap() {
+		if (!this.infinite || this.effectiveItems.length === 0 || !this._scrollContainer) return;
+		
+		const C = this.effectiveItems.length;
+		const V = C * this._visualCardsMultiplier;
+		const K = this._snapSetsCount;
+		const centerSetIndex = Math.floor(K / 2);
+		
+		// The scroll track is divided into K sets, each containing V items.
+		const setWidth = V * this.itemSize;
+		
+		const currentScroll = this._scrollContainer.scrollLeft;
+		const currentSet = Math.floor(currentScroll / setWidth);
+		
+		if (currentSet !== centerSetIndex) {
+			const delta = (centerSetIndex - currentSet) * setWidth;
+			
+			const oldSnap = this._scrollContainer.style.scrollSnapType;
+			const oldBehavior = this._scrollContainer.style.scrollBehavior;
+			
+			// Temporarily disable snap and smooth behavior so the wrap is instantaneous
+			this._scrollContainer.style.scrollSnapType = 'none';
+			this._scrollContainer.style.scrollBehavior = 'auto';
+			
+			this._scrollContainer.scrollLeft += delta;
+			
+			// INSTANTLY update the GSAP visual ticker so it doesn't animate the jump
+			this._tickerTarget = this._scrollContainer.scrollLeft / this.itemSize;
+			this._tickerCurrent = this._tickerTarget;
+			this._applyLayout(this._tickerCurrent);
+			
+			// Restore original scroll behavior
+			this._scrollContainer.style.scrollBehavior = oldBehavior;
+			
+			if (this._isDown) {
+				this._scrollLeftStart += delta;
+			}
+			
+			if (oldSnap && oldSnap !== 'none') {
+				// Re-enable snap on the next frame to avoid jumping
+				requestAnimationFrame(() => {
+					if (this._scrollContainer && !this._isDown) {
+						this._scrollContainer.style.scrollSnapType = oldSnap;
+					}
+				});
+			}
+		}
+	}
+
+	private _startAutoplay() {
+		this._stopAutoplay();
+		if (this.autoplay && this.effectiveItems.length > 0) {
+			this._autoplayTimer = setInterval(() => {
+				// We removed _isInteracting to make autoplay more robust. It only pauses on active drag.
+				if (!this._isDown) {
+					this._scrollNext();
+				}
+			}, this.autoplayInterval) as unknown as number;
+		}
+	}
+
+	private _stopAutoplay() {
+		if (this._autoplayTimer) {
+			clearInterval(this._autoplayTimer);
+			this._autoplayTimer = null;
+		}
+	}
+
+	private _handleMouseEnter() {
+	}
+ 
+	private _handleMouseLeave() {
+		this._handleMouseUp();
+	}
+
 	private _handleMouseDown(e: MouseEvent) {
 		gsap.killTweensOf(this._scrollContainer);
+		this._checkInfiniteWrap();
 		this._isDown = true;
 		this._draggedDistance = 0;
 		this._scrollContainer.style.scrollBehavior = 'auto';
@@ -736,13 +910,22 @@ export class MoniCarousel extends MoniElement {
 
 		// Dynamic momentum: stronger swipes have a much higher multiplier
 		const momentumMultiplier = 350 + Math.abs(this._velocity) * 300;
-		const projectedScrollLeft = this._scrollContainer.scrollLeft - this._velocity * momentumMultiplier;
+		let projectedScrollLeft = this._scrollContainer.scrollLeft - this._velocity * momentumMultiplier;
+
+		// Cap momentum throw to prevent hitting infinite wrap edges on fast swipes
+		const maxThrowDist = 15 * this.itemSize;
+		if (projectedScrollLeft < this._scrollContainer.scrollLeft - maxThrowDist) {
+			projectedScrollLeft = this._scrollContainer.scrollLeft - maxThrowDist;
+		} else if (projectedScrollLeft > this._scrollContainer.scrollLeft + maxThrowDist) {
+			projectedScrollLeft = this._scrollContainer.scrollLeft + maxThrowDist;
+		}
 
 		if (this.layout !== 'uncontained') {
 			this._scrollContainer.style.scrollSnapType = 'none';
 
 			let targetIndex = Math.round(projectedScrollLeft / this.itemSize);
-			targetIndex = Math.max(0, Math.min(this.effectiveItems.length - 1, targetIndex));
+			const maxIndex = this.effectiveItems.length > 0 ? this._snapItemsCount - 1 : 0;
+			targetIndex = Math.max(0, Math.min(maxIndex, targetIndex));
 			const snapPoint = targetIndex * this.itemSize;
 
 			// Dynamic duration: longer distance = more time, max 0.85s for faster feeling
@@ -767,6 +950,7 @@ export class MoniCarousel extends MoniElement {
 
 	private _handleTouchStart(e: TouchEvent) {
 		gsap.killTweensOf(this._scrollContainer);
+		this._checkInfiniteWrap();
 		this._isDown = true;
 		this._draggedDistance = 0;
 		this._scrollContainer.style.scrollBehavior = 'auto';
@@ -831,7 +1015,7 @@ export class MoniCarousel extends MoniElement {
 			// Restablecer el snap después de un pequeño retraso
 			if ((this as any)._wheelTimeout) clearTimeout((this as any)._wheelTimeout);
 			(this as any)._wheelTimeout = setTimeout(() => {
-				if (this.layout !== 'uncontained') {
+				if (this.layout !== 'uncontained' && !this._isDown) {
 					this._scrollContainer.style.scrollSnapType = 'x mandatory';
 				}
 			}, 150);
@@ -845,9 +1029,10 @@ export class MoniCarousel extends MoniElement {
 			return;
 		}
 
+		const originalIndex = index % this.effectiveItems.length;
 		this.dispatchEvent(
 			new CustomEvent('item-click', {
-				detail: { item, index },
+				detail: { item, index: originalIndex },
 				bubbles: true,
 				composed: true
 			})
@@ -855,14 +1040,13 @@ export class MoniCarousel extends MoniElement {
 	}
 
 	private _scrollPrevious() {
-		const target = Math.max(0, this._scrollContainer.scrollLeft - this.itemSize);
+		const target = this._scrollContainer.scrollLeft - this.itemSize;
 		this._scrollContainer.style.scrollBehavior = 'smooth';
 		this._scrollContainer.scrollTo({ left: target, behavior: 'smooth' });
 	}
 
 	private _scrollNext() {
-		const maxScroll = this._scrollContainer.scrollWidth - this._scrollContainer.clientWidth;
-		const target = Math.min(maxScroll, this._scrollContainer.scrollLeft + this.itemSize);
+		const target = this._scrollContainer.scrollLeft + this.itemSize;
 		this._scrollContainer.style.scrollBehavior = 'smooth';
 		this._scrollContainer.scrollTo({ left: target, behavior: 'smooth' });
 	}
@@ -959,15 +1143,27 @@ export class MoniCarousel extends MoniElement {
 			rightPadding = minRightPaddingNeeded;
 		}
 
+		let snapItemsCount = hasItems ? this._snapItemsCount : 0;
+		let visualItems = this.effectiveItems;
+		
+		if (this.infinite && hasItems) {
+			const V_mult = this._visualCardsMultiplier;
+			
+			visualItems = [];
+			for (let i = 0; i < V_mult; i++) {
+				visualItems = visualItems.concat(this.effectiveItems);
+			}
+		}
+
 		const trackWidth = hasItems
-			? this.effectiveItems.length * L + (this.effectiveItems.length - 1) * this.gap
+			? snapItemsCount * L + (snapItemsCount - 1) * this.gap
 			: 0;
 
 		const isScrollable = hasItems && this._scrollContainer && 
 			(this._scrollContainer.scrollWidth > this._scrollContainer.clientWidth);
-		const showPrevArrow = isScrollable && this._scrollContainer.scrollLeft > 5;
-		const showNextArrow = isScrollable && 
-			(this._scrollContainer.scrollWidth - this._scrollContainer.scrollLeft - this._scrollContainer.clientWidth > 5);
+		const showPrevArrow = this.infinite || (isScrollable && this._scrollContainer.scrollLeft > 5);
+		const showNextArrow = this.infinite || (isScrollable && 
+			(this._scrollContainer.scrollWidth - this._scrollContainer.scrollLeft - this._scrollContainer.clientWidth > 5));
 
 		return html`
 			<div class="carousel-container" style="
@@ -1015,18 +1211,19 @@ export class MoniCarousel extends MoniElement {
 						@mousedown=${this._handleMouseDown}
 						@mousemove=${this._handleMouseMove}
 						@mouseup=${this._handleMouseUp}
-						@mouseleave=${this._handleMouseUp}
+						@mouseenter=${this._handleMouseEnter}
+						@mouseleave=${this._handleMouseLeave}
 						@touchstart=${this._handleTouchStart}
 						@touchmove=${this._handleTouchMove}
 						@touchend=${this._handleTouchEnd}
 						@wheel=${this._handleWheel}
 					>
 						<div class="snap-track">
-							${hasItems ? this.effectiveItems.map(() => html`<div class="snap-item"></div>`) : ''}
+							${hasItems ? Array.from({ length: snapItemsCount }).map(() => html`<div class="snap-item"></div>`) : ''}
 						</div>
 						<div class="visual-track">
 							${hasItems
-								? this.effectiveItems.map(
+								? visualItems.map(
 										(item, idx) => html`
 											<div 
 												class="card" 
@@ -1034,16 +1231,16 @@ export class MoniCarousel extends MoniElement {
 											>
 												${item.href
 													? html`
-															<a href="${item.href}" target="${item.target || '_self'}" style="text-decoration:none; color:inherit;">
+															<a href="${item.href}" target="${item.target || '_self'}" style="text-decoration:none; color:inherit;" draggable="false">
 																<div class="img-parallax-container">
-																	<img src="${item.img}" alt="${item.title}" draggable="false" />
+																	<img src="${item.img}" alt="${item.title}" draggable="false" loading="lazy" />
 																</div>
 																<h2 class="card-title">${item.title}</h2>
 															</a>
 														`
 													: html`
 															<div class="img-parallax-container">
-																<img src="${item.img}" alt="${item.title}" draggable="false" />
+																<img src="${item.img}" alt="${item.title}" draggable="false" loading="lazy" />
 															</div>
 															<h2 class="card-title">${item.title}</h2>
 														`}