aero-slider 1.0.0-beta.1 → 1.0.0-beta.3

package/README.md

@@ -1,6 +1,6 @@
 # Aero Slider
 
-A lightweight (~6KB), CSS-first slider library for the modern web.
+A lightweight (~6.5KB), CSS-first slider library for the modern web.
 
 - **CSS-First Architecture** — Layout via custom properties, responsive via media queries
 - **Native Scroll Snapping** — Hardware-accelerated, smooth scrolling
@@ -13,6 +13,8 @@ A lightweight (~6KB), CSS-first slider library for the modern web.
 
 ## Installation
 
+### Package manager (recommended)
+
 ```bash
 bun add aero-slider
 ```
@@ -30,6 +32,26 @@ import { createSlider } from "aero-slider";
 import "aero-slider/slider.css";
 ```
 
+### Global script (no bundler)
+
+Add the JavaScript and CSS files. Use `type="module"` so the script assigns `AeroSlider` to `window`:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/aero-slider/dist/aero-slider.min.css" />
+<script type="module" src="https://unpkg.com/aero-slider/dist/aero-slider.min.js"></script>
+```
+
+Or download from the [releases](https://github.com/Negative-Space-Dev/aero-slider/releases) page. This creates a global `AeroSlider` object:
+
+```js
+const slider = AeroSlider.createSlider(document.getElementById("my-slider"), { loop: true });
+
+// With thumbnails:
+const main = AeroSlider.createSlider(mainEl);
+const thumbs = AeroSlider.createSlider(thumbsEl);
+const teardown = AeroSlider.syncThumbnails(main, thumbs);
+```
+
 ## Contributing
 
 See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, working on the doc site, and publishing.

package/dist/aero-slider.d.ts

@@ -3,6 +3,8 @@ interface SliderConfig {
     autoplay?: boolean;
     autoplayInterval?: number;
     draggable?: boolean;
+    /** Keep currentIndex as the centered slide when possible (clamps at ends without loop). */
+    centered?: boolean;
     /** Maximum number of pagination dots to show. Beyond this, edge indicators are used. */
     maxDots?: number;
     noDrag?: string;
@@ -39,6 +41,10 @@ declare global {
 
 declare function createSlider(container: HTMLElement, userConfig?: SliderConfig): SliderInstance;
 
+interface SyncThumbnailsOptions {
+    /** Loop mode for the thumbnail slider. Defaults to true for backward compatibility. */
+    loop?: boolean;
+}
 /**
  * Syncs a primary slider with a thumbnail slider. Clicking a thumbnail navigates
  * the primary to that slide. When the primary changes (drag, arrows, etc.), the
@@ -48,6 +54,15 @@ declare function createSlider(container: HTMLElement, userConfig?: SliderConfig)
  * Both sliders must have the same number of slides. Call the returned function
  * to teardown and remove all listeners.
  */
-declare function syncThumbnails(primary: SliderInstance, thumbnail: SliderInstance): () => void;
+declare function syncThumbnails(primary: SliderInstance, thumbnail: SliderInstance, options?: SyncThumbnailsOptions): () => void;
+
+declare global {
+    interface Window {
+        AeroSlider?: {
+            createSlider: typeof createSlider;
+            syncThumbnails: typeof syncThumbnails;
+        };
+    }
+}
 
-export { type SliderConfig, type SliderEvent, type SliderEventCallback, type SliderEventData, type SliderInstance, createSlider, syncThumbnails };
+export { type SliderConfig, type SliderEvent, type SliderEventCallback, type SliderEventData, type SliderInstance, type SyncThumbnailsOptions, createSlider, syncThumbnails };

package/dist/aero-slider.min.css

@@ -0,0 +1 @@
+.aero-slider{position:relative;width:100%;min-width:0;min-height:0;display:flex;flex-direction:column;--slide-aspect: 5 / 3;--slides-per-view: 1;--slide-gap: 0px}.aero-slider[data-aero-defer-visibility]:not(.aero-slider--ready) .aero-slider__track:before{content:"";flex:0 0 max(0px,calc(50% - (100% - var(--slide-gap, 0px) * (var(--slides-per-view, 1) - 1)) / (2 * var(--slides-per-view, 1)) - var(--slide-gap, 0px)));scroll-snap-align:none}.aero-slider[data-aero-defer-visibility]:not(.aero-slider--ready) .aero-slider__track>*{scroll-snap-align:center}.aero-slider__viewport{position:relative;width:100%;min-width:0;min-height:0;overflow:hidden;contain:paint}.aero-slider__track{min-height:0;display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;min-width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;touch-action:manipulation;overscroll-behavior-x:contain;overflow-anchor:none;gap:var(--slide-gap, 0px);cursor:grab;transform:translateZ(0);backface-visibility:hidden;scrollbar-width:none;-ms-overflow-style:none}.aero-slider__track::-webkit-scrollbar{display:none}.aero-slider__track:focus{outline:none}.aero-slider__track:focus-visible{outline:2px solid currentColor;outline-offset:2px}.aero-slider__slide,.aero-slider__track>*{flex:0 0 calc((100% - var(--slide-gap, 0px) * (var(--slides-per-view, 1) - 1)) / var(--slides-per-view, 1));flex-shrink:0;flex-grow:0;scroll-snap-align:start;aspect-ratio:var(--slide-aspect, 16 / 9);display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;contain:layout style paint;overflow:hidden;content-visibility:auto;contain-intrinsic-size:auto 100%}.aero-slider__slide>*,.aero-slider__track>*>*{flex:1;min-width:0;min-height:0}.aero-slider--dragging{user-select:none}.aero-slider--dragging .aero-slider__track{cursor:grabbing;scroll-snap-type:none}.aero-slider__nav--prev,.aero-slider__nav--next{touch-action:manipulation}.aero-slider__pagination{display:flex;flex-wrap:nowrap;gap:8px;flex-shrink:0;justify-content:center;align-items:center;padding:12px 0 16px;min-height:44px;box-sizing:border-box}.aero-slider__dot{touch-action:manipulation;cursor:pointer;flex-shrink:0;transition:transform .2s ease-out,opacity .2s ease-out}.aero-slider__pagination--windowed{width:calc(var(--pagination-width) + 12px);max-width:calc(100% + 12px);margin-left:auto;margin-right:auto;overflow:hidden;justify-content:flex-start;padding-left:6px;padding-right:6px;box-sizing:border-box}.aero-slider__pagination-track{display:flex;gap:inherit;align-items:center;transform:translate(var(--track-offset, 0));transition:transform .3s cubic-bezier(.4,0,.2,1)}.aero-slider__dot--hidden{transform:scale(.4);opacity:0}.aero-slider__dot--edge{transform:scale(.6)}.aero-slider__dot--near-edge{transform:scale(.8)}.aero-slider--rtl .aero-slider__track{direction:rtl}.aero-slider--vertical .aero-slider__viewport{aspect-ratio:var(--slide-aspect, 5 / 3);overflow:hidden}.aero-slider--vertical .aero-slider__track{flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-x:initial;overscroll-behavior-y:contain;min-width:initial;height:100%;min-height:100%}.aero-slider--vertical .aero-slider__slide,.aero-slider--vertical .aero-slider__track>*{flex:0 0 calc((100% - var(--slide-gap, 0px) * (var(--slides-per-view, 1) - 1)) / var(--slides-per-view, 1));aspect-ratio:initial;width:100%}

package/dist/aero-slider.min.js

@@ -0,0 +1 @@
+var Ee={loop:!1,autoplay:!1,autoplayInterval:5e3,draggable:!0,centered:!0,maxDots:0,noDrag:"",perMove:0,direction:"ltr"},ee={slidesPerView:1,gap:0,aspectRatio:"16 / 9"},be=5,fe=.3,le=80,he=250,Le=300,pe=100,Te=250,j="data-aero-slider-index",q="data-aero-slider-clone";function Ae(e,m,a,c={}){let o=c.debounceMs??100,S=c.maxWaitMs??250,n="",p=null,h=null;function s(){let b=getComputedStyle(e);return m.map(I=>b.getPropertyValue(I).trim()).join("\0")}function t(){p!==null&&(clearTimeout(p),p=null),h=null;let b=s();b!==n&&(n=b,a())}function T(){let b=Date.now();if(h===null&&(h=b),b-h>=S){t();return}p!==null&&clearTimeout(p),p=setTimeout(t,o)}return n=s(),window.addEventListener("resize",T),()=>{window.removeEventListener("resize",T),p!==null&&(clearTimeout(p),p=null)}}var Ke=50,$e=2,Me=3;function Ie(e){let{track:m,state:a}=e,c=null,o=Me;function S(){let y=Math.ceil(e.config.slidesPerView)+$e;return Math.max(Me,Math.ceil(y/e.slideCount))}function n(){return o*e.slideCount*a.slideWidthPx}function p(){return(o+1)*e.slideCount*a.slideWidthPx}function h(y){a.isProgrammaticScroll=!0,m.style.scrollBehavior="auto",m.style.scrollSnapType="none",e.setScrollPos(y),requestAnimationFrame(()=>{requestAnimationFrame(()=>{m.style.scrollBehavior="",m.style.scrollSnapType="",a.isProgrammaticScroll=!1})})}function s(){if(!a.loopModeActive)return;let y=a.slideWidthPx;if(y===0)return;let l=e.slideCount*y,d=n(),u=p(),f=e.getScrollPos(),g=2;if(f<d-g||f>=u+g){for(;f<d;)f+=l;for(;f>=u;)f-=l;h(f)}}function t(){c!==null&&clearTimeout(c),c=setTimeout(()=>{c=null,s()},Ke)}function T(){c!==null&&(clearTimeout(c),c=null)}function b(){let y=a.slideWidthPx;if(y===0)return a.currentIndex;let l=e.isVertical()?m.clientHeight:m.clientWidth;if(e.isFractionalView()){let f=y-e.config.gap,g=e.getScrollPos()+l/2,E=n();return(Math.round((g-E-f/2)/y)%e.slideCount+e.slideCount)%e.slideCount}let d=e.getScrollPos()-n();return(Math.round(d/y)%e.slideCount+e.slideCount)%e.slideCount}function I(y){if(!e.isLoopEnabled()){a.loopModeActive&&C(y);return}o=S(),m.querySelectorAll(`[${q}]`).forEach(u=>u.remove());let{slides:l,slideCount:d}=e;for(let u=0;u<o;u++)for(let f=d-1;f>=0;f--){let g=l[f].cloneNode(!0);g.setAttribute(q,""),g.removeAttribute(j),m.prepend(g)}for(let u=0;u<o;u++)for(let f=0;f<d;f++){let g=l[f].cloneNode(!0);g.setAttribute(q,""),g.removeAttribute(j),m.append(g)}a.loopModeActive=!0,e.applySnapAlignment(),requestAnimationFrame(()=>{e.recalcSlideMetrics();let u=e.normalizeIndex(y);a.currentIndex=u;let f=m.querySelector(`[${j}="${u}"]`);if(!f)return;a.isProgrammaticScroll=!0,m.style.scrollBehavior="auto",m.style.scrollSnapType="none";let g=e.isFractionalView()?"center":"start",E=e.isVertical()?e.isFractionalView()?"center":"start":"nearest";f.scrollIntoView({behavior:"instant",inline:g,block:E}),requestAnimationFrame(()=>{requestAnimationFrame(()=>{m.style.scrollBehavior="",m.style.scrollSnapType="",a.isProgrammaticScroll=!1})})})}function C(y){T(),m.querySelectorAll(`[${q}]`).forEach(l=>l.remove()),a.loopModeActive=!1,e.recalcSlideMetrics(),a.currentIndex=Math.max(0,Math.min(y,e.getMaxIndex())),h(e.getScrollPosForIndex(a.currentIndex))}return{getLoopRealStart:n,getLoopRealEnd:p,getLoopIndexFromScroll:b,instantScrollTo:h,teleportIfNeeded:s,scheduleTeleport:t,setupLoopTrack:I,teardownLoopTrack:C,cancelTeleport:T}}function Ce(e,m,a,c,o){let{container:S,track:n,state:p}=e,h=!1,s=!1;function t(l){return e.isVertical()?l.clientY:l.clientX}function T(){return e.config.direction==="rtl"?-1:1}function b(l){if(l.button!==0||l.pointerType==="touch"||e.config.noDrag&&l.target.closest(e.config.noDrag))return;s=!1;let d=T(),u=t(l),f=e.getScrollPos(),g=f,E=null,w=0,L=u,x=performance.now(),k=!1,H=p.currentIndex;function V(){E=null,e.setScrollPos(g)}function Z(R){let P=t(R);if(!k){if(Math.abs(P-u)<be)return;k=!0,s=!0,n.setPointerCapture(R.pointerId),p.isDragging=!0,p.suppressSettleEmit=!1,n.style.scrollBehavior="auto",n.style.scrollSnapType="none",S.classList.add("aero-slider--dragging"),e.emit("dragStart",{index:H}),c()}R.preventDefault(),g=f+(u-P)*d,E===null&&(E=requestAnimationFrame(V));let D=performance.now(),F=D-x;if(F>0){if(F<100){let B=(L-P)*d/F;w=fe*B+(1-fe)*w}else w*=.5;L=P,x=D}}function O(){if(n.removeEventListener("pointermove",Z),n.removeEventListener("pointerup",O),n.removeEventListener("pointercancel",O),!k)return;p.isDragging=!1,S.classList.remove("aero-slider--dragging"),E!==null&&(cancelAnimationFrame(E),E=null,e.setScrollPos(g));let R=performance.now()-x;R>50&&(w*=Math.max(0,1-R/200));let P=e.getSlideSize();if(n.style.scrollBehavior="",P>0)if(p.loopModeActive){m.teleportIfNeeded();let D=m.getLoopRealStart(),F=e.getScrollPos(),B=e.isVertical()?n.clientHeight:n.clientWidth,Y,z;if(e.isFractionalView()){let K=P-e.config.gap,W=F+w*le+B/2;Y=Math.round((W-D-K/2)/P),z=D+Y*P+K/2-B/2}else{let W=F-D+w*le;Y=Math.round(W/P),z=D+Y*P}p.isProgrammaticScroll=!0,p.suppressSettleEmit=!0,e.scrollToPos(z,"smooth"),m.scheduleTeleport();let J=e.normalizeIndex(Y);J!==p.currentIndex&&(p.currentIndex=J,e.emit("slideChange",{index:p.currentIndex}),e.refreshPagination(),e.refreshNavState())}else{let D=e.getScrollPos()+w*le,F=e.getIndexFromScrollPos(D);a(F)}e.emit("dragEnd",{index:p.currentIndex,fromIndex:H}),e.config.autoplay&&o()}n.addEventListener("pointermove",Z),n.addEventListener("pointerup",O),n.addEventListener("pointercancel",O)}function I(l){s&&(l.preventDefault(),l.stopPropagation(),s=!1)}function C(l){l.preventDefault()}function y(l){l!==h&&(l?(n.addEventListener("pointerdown",b),n.addEventListener("click",I,{capture:!0}),n.addEventListener("dragstart",C),h=!0):(n.removeEventListener("pointerdown",b),n.removeEventListener("click",I,{capture:!0}),n.removeEventListener("dragstart",C),h=!1))}return{setEnabled:y,isActive:()=>h}}function xe(e,m,a){let c=null,o=null,S=a,n=m;function p(){c&&(c.removeEventListener("click",S),c=null),o&&(o.removeEventListener("click",n),o=null)}function h(){p(),c=e.container.querySelector(".aero-slider__nav--prev"),o=e.container.querySelector(".aero-slider__nav--next");let t=e.config.direction==="rtl";S=t?m:a,n=t?a:m,c&&c.addEventListener("click",S),o&&o.addEventListener("click",n),s()}function s(){let t=e.getMaxIndex(),T=t>0,b=e.config.direction==="rtl",I=!T||!e.isLoopEnabled()&&e.state.currentIndex===0,C=!T||!e.isLoopEnabled()&&e.state.currentIndex>=t;c&&(c.disabled=b?C:I),o&&(o.disabled=b?I:C)}return{build:h,clear:p,refresh:s}}function _e(e,m){let a=null,c=null,o=null,S=[],n=!1,p=10,h=8;function s(l){let d=l.target.closest(".aero-slider__dot");if(!d||!a)return;let u=d.getAttribute("data-slide-index");u!==null&&m(Number(u))}function t(){if(a){a.removeEventListener("click",s),c?.remove(),c=null,o&&(o.style.display="");let l=a.querySelectorAll(".aero-slider__dot");for(let d=1;d<l.length;d++)l[d]?.remove();a.querySelectorAll(".aero-slider__pagination-label").forEach(d=>d.remove()),a=null}o=null,S=[],n=!1}function T(){return e.isLoopEnabled()?e.slideCount:e.getMaxIndex()+1}function b(){if(a=e.container.querySelector(".aero-slider__pagination"),!a||(o=a.querySelector(".aero-slider__dot"),!o))return;o.style.display==="none"&&(o.style.display=""),o.style.transform="",o.style.opacity="",o.offsetWidth;let d=getComputedStyle(o);p=parseFloat(d.width)||10;let u=getComputedStyle(a);h=parseInt(u.gap)||8,a.setAttribute("role","tablist"),a.addEventListener("click",s);let f=T(),g=e.config.maxDots;n=g>0&&f>g,c?.remove();let E=a.querySelectorAll(".aero-slider__dot");for(let L=1;L<E.length;L++)E[L]?.remove();if(a.querySelectorAll(".aero-slider__pagination-label").forEach(L=>L.remove()),n){a.classList.add("aero-slider__pagination--windowed");let L=g*p+(g-1)*h;a.style.setProperty("--pagination-width",`${L}px`),c=document.createElement("div"),c.className="aero-slider__pagination-track",o.style.display="none";for(let x=0;x<f;x++){let k=o.cloneNode(!0);k.style.display="",c.appendChild(k)}a.appendChild(c)}else{a.classList.remove("aero-slider__pagination--windowed"),a.style.removeProperty("--pagination-width"),o.style.display="";for(let L=1;L<f;L++){let x=o.cloneNode(!0);a.appendChild(x)}}S=Array.from((n&&c?c:a).querySelectorAll(".aero-slider__dot")),S.forEach((L,x)=>{L.setAttribute("role","tab"),L.setAttribute("data-slide-index",String(x)),L.setAttribute("aria-label",`Go to slide ${x+1}`)}),y()}function I(l,d,u,f){if(l<0||l>=d)return"aero-slider__dot--hidden";let g=l===0,E=l===d-1,w=l===1,L=l===d-2;return g&&!u?"aero-slider__dot--edge":w&&!u?"aero-slider__dot--near-edge":E&&!f?"aero-slider__dot--edge":L&&!f?"aero-slider__dot--near-edge":null}function C(l){l.classList.remove("aero-slider__dot--hidden","aero-slider__dot--edge","aero-slider__dot--near-edge")}function y(){let l=T(),d=e.state.currentIndex,u=e.config.maxDots;if(n&&u>0&&c){let f=Math.floor(u/2),g=p+h,E=d-f;E=Math.max(0,Math.min(E,l-u)),c.style.setProperty("--track-offset",`${-E*g}px`);let w=E===0,L=E>=l-u;S.forEach((x,k)=>{let H=k===d;x.classList.toggle("aero-slider__dot--active",H),x.setAttribute("aria-selected",String(H)),C(x);let V=I(k-E,u,w,L);V&&x.classList.add(V)})}else S.forEach((f,g)=>{let E=g===d;f.classList.toggle("aero-slider__dot--active",E),f.setAttribute("aria-selected",String(E)),C(f)})}return{build:b,clear:t,refresh:y}}function we(e,m,a){let c=!1;function o(n){let p=e.config.direction;p==="ttb"?n.key==="ArrowUp"?(n.preventDefault(),a()):n.key==="ArrowDown"&&(n.preventDefault(),m()):p==="rtl"?n.key==="ArrowRight"?(n.preventDefault(),a()):n.key==="ArrowLeft"&&(n.preventDefault(),m()):n.key==="ArrowLeft"?(n.preventDefault(),a()):n.key==="ArrowRight"&&(n.preventDefault(),m())}function S(n){n!==c&&(n?(e.container.setAttribute("tabindex","0"),e.container.addEventListener("keydown",o),c=!0):(e.container.removeAttribute("tabindex"),e.container.removeEventListener("keydown",o),c=!1))}return{setEnabled:S}}function Pe(e,m){let a=null,c=!1,o=null;function S(){e.config.autoplay&&(n(),a=setInterval(()=>{if(!e.state.loopModeActive&&e.state.currentIndex>=e.getMaxIndex()){n();return}m()},e.config.autoplayInterval),e.emit("autoplayStart",{index:e.state.currentIndex}))}function n(){a!==null&&(clearInterval(a),a=null,e.emit("autoplayStop",{index:e.state.currentIndex}))}function p(){n()}function h(){e.config.autoplay&&S()}function s(){o!==null&&(clearTimeout(o),o=null),n()}function t(){e.config.autoplay&&(o=setTimeout(()=>{o=null,e.config.autoplay&&S()},1e3))}function T(b){b!==c&&(b?(e.container.addEventListener("mouseenter",p),e.container.addEventListener("mouseleave",h),e.track.addEventListener("touchstart",s,{passive:!0}),e.track.addEventListener("touchend",t,{passive:!0}),e.track.addEventListener("touchcancel",t,{passive:!0}),c=!0):(e.container.removeEventListener("mouseenter",p),e.container.removeEventListener("mouseleave",h),e.track.removeEventListener("touchstart",s),e.track.removeEventListener("touchend",t),e.track.removeEventListener("touchcancel",t),o!==null&&(clearTimeout(o),o=null),c=!1))}return{start:S,pause:n,setHoverPause:T}}function De(e,m={}){let a=e,c=e.querySelector(".aero-slider__track");if(!c)throw new Error("aero-slider: missing .aero-slider__track");let o=c,S=Array.from(o.children).filter(r=>!r.hasAttribute(q)),n=S.length;if(n===0)throw new Error("aero-slider: no slides found");S.forEach((r,i)=>r.setAttribute(j,String(i)));function p(r,i){if(!r||r==="0"||r==="0px")return i;let v=document.createElement("div");v.style.position="absolute",v.style.visibility="hidden",v.style.width=r,e.appendChild(v);let M=v.offsetWidth;return e.removeChild(v),M||i}function h(){let r=getComputedStyle(e),i=parseFloat(r.getPropertyValue("--slides-per-view")?.trim()||"")||ee.slidesPerView,v=r.getPropertyValue("--slide-gap")?.trim()||"0px",M=p(v,ee.gap),A=r.getPropertyValue("--slide-aspect")?.trim()||ee.aspectRatio;return{slidesPerView:i,gap:M,aspectRatio:A}}let s={...Ee,...m,...ee},t={currentIndex:0,isDragging:!1,isDestroyed:!1,loopModeActive:!1,isProgrammaticScroll:!1,suppressSettleEmit:!1,slideWidthPx:0},T=new Map,b=null,I=null,C=null,y=null,l=null;function d(r,i){T.get(r)?.forEach(v=>v(i))}function u(){return s.direction==="ttb"}function f(){return g()?Math.max(0,n-1):Math.max(0,Math.floor(n-s.slidesPerView))}function g(){return s.centered||s.slidesPerView%1!==0}function E(){return s.loop&&f()>0}function w(){return s.perMove>0?s.perMove:1}function L(r){let i=f();return E()?(Math.trunc(r)%n+n)%n:Math.max(0,Math.min(r,i))}function x(){return s.direction==="rtl"?-o.scrollLeft:s.direction==="ttb"?o.scrollTop:o.scrollLeft}function k(r){s.direction==="rtl"?o.scrollLeft=-r:s.direction==="ttb"?o.scrollTop=r:o.scrollLeft=r}function H(r,i="auto"){s.direction==="ttb"?o.scrollTo({top:r,behavior:i}):s.direction==="rtl"?o.scrollTo({left:-r,behavior:i}):o.scrollTo({left:r,behavior:i})}function V(){return u()?o.clientHeight:o.clientWidth}function Z(){return u()?o.scrollHeight:o.scrollWidth}function O(){if(t.slideWidthPx>0)return t.slideWidthPx;let r=S[0];if(!r)return 0;let i=r.getBoundingClientRect();return t.slideWidthPx=(u()?i.height:i.width)+s.gap,t.slideWidthPx}function R(){t.slideWidthPx=0,O()}function P(){Object.assign(s,h())}function D(r){let i=O();if(i===0)return 0;if(!g())return r*i;let v=V(),M=i-s.gap;if(t.loopModeActive)return r*i+M/2-v/2;let A=f();return r<=0?0:r>=A?Z()-V():r*i+M/2-v/2}function F(r){let i=O();if(i===0)return t.currentIndex;let v=t.loopModeActive?n-1:f(),M=Z()-V();if(!g()){let ie=Math.round(r/i);return Math.max(0,Math.min(ie,v))}if(M<=0||r<=1)return 0;if(r>=M-1)return v;let A=V(),G=i-s.gap,oe=r+A/2,ne=Math.round((oe-G/2)/i);return Math.max(0,Math.min(ne,v))}function B(){let r=Array.from(o.children);if(!g()){for(let i of r)i.style.scrollSnapAlign="";return}if(t.loopModeActive){for(let i of r)i.style.scrollSnapAlign="center";return}for(let i of r)i.style.scrollSnapAlign="center"}function Y(){e.classList.remove("aero-slider--rtl","aero-slider--vertical"),e.removeAttribute("dir"),s.direction==="rtl"?(e.setAttribute("dir","rtl"),e.classList.add("aero-slider--rtl")):s.direction==="ttb"&&e.classList.add("aero-slider--vertical")}let z=new Set;function J(){let r=new Set,i=Math.ceil(s.slidesPerView);for(let v=0;v<i;v++){let M=t.currentIndex+v;if(t.loopModeActive)M=(M%n+n)%n;else if(M>=n)break;r.add(M)}return r}function K(){let r=J();for(let i of z)r.has(i)||d("hidden",{index:i});for(let i of r)z.has(i)||d("visible",{index:i});z.clear();for(let i of r)z.add(i)}let W={container:e,track:o,get slides(){return S},get slideCount(){return n},get config(){return s},state:t,listeners:T,emit:d,getSlideSize:O,recalcSlideMetrics:R,normalizeIndex:L,getMaxIndex:f,getEffectivePerMove:w,isLoopEnabled:E,isFractionalView:g,isVertical:u,getScrollPos:x,setScrollPos:k,scrollToPos:H,getScrollPosForIndex:D,getIndexFromScrollPos:F,refreshPagination:()=>N.refresh(),refreshNavState:()=>$.refresh(),applySnapAlignment:B},_=Ie(W),$=xe(W,re,de),N=_e(W,Q),se=we(W,re,de),U=Pe(W,re),ae=Ce(W,_,Q,U.pause,U.start);function te(){if(t.isDragging||t.isProgrammaticScroll)return;let r=t.loopModeActive?_.getLoopIndexFromScroll():F(x());r!==t.currentIndex&&(t.currentIndex=r,d("slideChange",{index:t.currentIndex}),N.refresh(),$.refresh(),K())}function Re(){if(I=null,t.isProgrammaticScroll=!1,X===null&&(o.style.scrollSnapType=""),t.suppressSettleEmit){t.suppressSettleEmit=!1,N.refresh(),$.refresh();return}te()}function me(){t.loopModeActive&&_.scheduleTeleport(),I!==null&&clearTimeout(I),I=setTimeout(Re,he),b===null&&(b=requestAnimationFrame(()=>{b=null,te()}))}let X=null;function ve(){t.isDragging||(t.suppressSettleEmit=!1,o.style.scrollSnapType="none",X!==null&&clearTimeout(X),X=setTimeout(()=>{X=null,o.style.scrollSnapType=""},Le))}function ge(){if(R(),t.loopModeActive){let r=O();if(r>0){let i=_.getLoopRealStart(),v=i+t.currentIndex*r;if(g()){let M=V(),A=r-s.gap;v=i+t.currentIndex*r+A/2-M/2}k(v)}}else k(D(t.currentIndex))}function Se(){t.isDestroyed||(y===null&&(o.style.scrollSnapType="none",t.isProgrammaticScroll=!0),l===null&&(l=requestAnimationFrame(()=>{l=null,t.isDestroyed||ge()})),y!==null&&clearTimeout(y),y=setTimeout(()=>{y=null,!t.isDestroyed&&(ge(),t.isProgrammaticScroll=!1,o.style.scrollSnapType="")},pe))}let Ve=["--slides-per-view","--slide-gap","--slide-aspect"];function Oe(){C?.(),C=Ae(e,Ve,()=>{t.isDestroyed||(d("resize",{index:t.currentIndex}),ye(),d("resized",{index:t.currentIndex}))},{debounceMs:pe,maxWaitMs:Te})}function re(){t.isDestroyed||Q(L(t.currentIndex+w()))}function de(){t.isDestroyed||Q(L(t.currentIndex-w()))}function Q(r){if(t.isDestroyed)return;let i=L(r),v=O();if(v!==0){if(i!==t.currentIndex&&(t.currentIndex=i,d("slideChange",{index:t.currentIndex}),N.refresh(),$.refresh(),K()),t.suppressSettleEmit=!0,t.loopModeActive){_.cancelTeleport(),t.isProgrammaticScroll=!0;let M=_.getLoopIndexFromScroll(),A=(i-M+n)%n,G=A-n,oe=Math.abs(G)<A?G:A;if(oe===0){let ne=_.getLoopRealStart(),ie=ne+i*v;if(g()){let Ue=V(),Ye=v-s.gap;ie=ne+i*v+Ye/2-Ue/2}H(ie,"smooth"),_.scheduleTeleport();return}H(x()+oe*v,"smooth"),_.scheduleTeleport();return}t.isProgrammaticScroll=!0,H(D(i),"smooth")}}function ye(r){let i=s;if(s={...s,...h(),...r??{}},i.direction!==s.direction&&Y(),P(),R(),ae.setEnabled(s.draggable),se.setEnabled(!0),U.setHoverPause(s.autoplay),(i.slidesPerView!==s.slidesPerView||i.loop!==s.loop||i.maxDots!==s.maxDots||i.perMove!==s.perMove)&&(N.clear(),N.build()),(i.autoplay!==s.autoplay||i.autoplayInterval!==s.autoplayInterval||i.loop!==s.loop)&&(s.autoplay?U.start():U.pause()),i.loop!==s.loop?E()?_.setupLoopTrack(t.currentIndex):_.teardownLoopTrack(t.currentIndex):t.loopModeActive&&i.slidesPerView!==s.slidesPerView&&_.setupLoopTrack(t.currentIndex),B(),!t.loopModeActive){let v=L(t.currentIndex);t.currentIndex=v,H(D(v))}te(),N.refresh(),$.refresh(),K()}function ce(){if(!t.isDestroyed&&(t.loopModeActive&&_.teardownLoopTrack(t.currentIndex),S=Array.from(o.children).filter(r=>!r.hasAttribute(q)),n=S.length,n!==0)){if(S.forEach((r,i)=>{r.setAttribute(j,String(i)),r.classList.add("aero-slider__slide")}),P(),R(),E()&&_.setupLoopTrack(t.currentIndex),B(),!t.loopModeActive){let r=L(t.currentIndex);t.currentIndex=r,H(D(r))}N.clear(),N.build(),$.build(),te(),K()}}function Fe(r,i){if(t.isDestroyed)return;let v=Array.isArray(r)?r:[r];t.loopModeActive&&_.teardownLoopTrack(t.currentIndex);let M=Array.from(o.children).filter(A=>!A.hasAttribute(q));if(i!==void 0&&i<M.length){let A=M[i]??null;for(let G of v)o.insertBefore(G,A)}else for(let A of v)o.appendChild(A);ce()}function Ne(r){if(t.isDestroyed)return;let i=Array.isArray(r)?r:[r];t.loopModeActive&&_.teardownLoopTrack(t.currentIndex);let v=Array.from(o.children).filter(A=>!A.hasAttribute(q)),M=[...i].sort((A,G)=>G-A);for(let A of M)A>=0&&A<v.length&&v[A].remove();ce()}function ze(r,i){T.has(r)||T.set(r,new Set),T.get(r).add(i)}function We(r,i){T.get(r)?.delete(i)}function qe(){t.isDestroyed||(d("destroy",{index:t.currentIndex}),t.isDestroyed=!0,U.pause(),t.loopModeActive&&_.teardownLoopTrack(t.currentIndex),_.cancelTeleport(),t.isProgrammaticScroll=!1,C?.(),C=null,window.removeEventListener("resize",Se),y!==null&&(clearTimeout(y),y=null),l!==null&&(cancelAnimationFrame(l),l=null),o.removeEventListener("scroll",me),o.removeEventListener("wheel",ve),X!==null&&clearTimeout(X),I!==null&&clearTimeout(I),ae.setEnabled(!1),se.setEnabled(!1),U.setHoverPause(!1),b!==null&&cancelAnimationFrame(b),$.clear(),N.clear(),e.removeAttribute("aria-roledescription"),e.removeAttribute("dir"),e.classList.remove("aero-slider--dragging","aero-slider--rtl","aero-slider--vertical","aero-slider--ready"),e.removeAttribute("data-aero-defer-visibility"),a.aeroSlider===ue&&delete a.aeroSlider,T.clear())}e.removeAttribute("data-aero-defer-visibility"),P(),e.classList.add("aero-slider"),e.setAttribute("aria-roledescription","carousel"),o.classList.add("aero-slider__track");for(let r of S)r.classList.add("aero-slider__slide");Y(),P(),R(),B(),o.addEventListener("scroll",me,{passive:!0}),o.addEventListener("wheel",ve,{passive:!0}),window.addEventListener("resize",Se),E()?_.setupLoopTrack(0):k(0),Oe(),ae.setEnabled(s.draggable),se.setEnabled(!0),U.setHoverPause(s.autoplay),$.build(),N.build(),s.autoplay&&U.start();let Be=J();for(let r of Be)z.add(r);for(let r of z)d("visible",{index:r});let ue={get element(){return e},next:re,prev:de,goTo:Q,destroy:qe,update:ye,refresh:ce,add:Fe,remove:Ne,on:ze,off:We,get currentIndex(){return t.currentIndex},get slideCount(){return n}};return a.aeroSlider=ue,e.classList.add("aero-slider--ready"),d("ready",{index:t.currentIndex}),ue}var ke="aero-slider__thumb--active";function Ge(e,m,a){e.querySelectorAll(":scope > *").forEach(o=>{let S=a(o);o.classList.toggle(ke,S===m)})}function He(e,m,a){let c=m.element.querySelector(".aero-slider__track");if(!c)return()=>{};let o=c,S=a?.loop??!0;m.update({draggable:!1,loop:S});let n=Array.from(o.children).filter(l=>l.hasAttribute("data-aero-slider-index"));n.sort((l,d)=>Number(l.getAttribute("data-aero-slider-index"))-Number(d.getAttribute("data-aero-slider-index")));let p=n.length,h=Array.from(o.children).indexOf(n[0]??o),s=[];function t(l){let d=l.getAttribute("data-aero-slider-index");if(d!==null)return Number(d);let u=Array.from(o.children).indexOf(l);return u<h?u%p:(u-h-p)%p}let T=e.currentIndex;function b(l){T=l,Ge(o,T,t)}function I(l){b(l),m.goTo(l),e.goTo(l)}function C(l){b(l),m.goTo(l)}Array.from(o.children).forEach(l=>{let d=l,u=()=>{let f=t(d);I(f)};d.addEventListener("click",u),d.style.cursor="pointer",s.push({el:d,fn:u})});let y=l=>{l.index!==T&&C(l.index)};return e.on("slideChange",y),C(e.currentIndex),()=>{s.forEach(({el:l,fn:d})=>l.removeEventListener("click",d)),o.querySelectorAll(":scope > *").forEach(l=>l.classList.remove(ke)),e.off("slideChange",y)}}typeof window<"u"&&(window.AeroSlider={createSlider:De,syncThumbnails:He});export{De as createSlider,He as syncThumbnails};

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "aero-slider",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "A lightweight, CSS-first slider library for the modern web",
   "type": "module",
   "workspaces": [
     "site"
   ],
-  "main": "./dist/aero-slider.js",
-  "module": "./dist/aero-slider.js",
+  "main": "./dist/aero-slider.min.js",
+  "module": "./dist/aero-slider.min.js",
   "types": "./dist/aero-slider.d.ts",
   "exports": {
     ".": {
       "types": "./dist/aero-slider.d.ts",
-      "import": "./dist/aero-slider.js",
-      "default": "./dist/aero-slider.js"
+      "import": "./dist/aero-slider.min.js",
+      "default": "./dist/aero-slider.min.js"
     },
-    "./slider.css": "./dist/aero-slider.css"
+    "./slider.css": "./dist/aero-slider.min.css"
   },
   "files": [
     "dist"
@@ -33,6 +33,7 @@
   },
   "devDependencies": {
     "@types/bun": "latest",
+    "esbuild": "^0.27.3",
     "prettier": "^3.4.2",
     "tsup": "^8.5.1",
     "typescript": "^5"

package/dist/aero-slider.css

@@ -1,221 +0,0 @@
-/* === Container === */
-.aero-slider {
-  position: relative;
-  width: 100%;
-  min-width: 0; /* allow shrinking in flex/grid parents */
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  --slide-aspect: 5 / 3;
-  --slides-per-view: 1;
-  --slide-gap: 0px;
-}
-
-/* Loop spacer: reserves space for prepended clones so the active slide
-   renders in its final centered position before JS initializes.
-   Add data-aero-defer-visibility to the slider in HTML; JS removes
-   the attribute at init, deactivating the spacer once clones are in place. */
-.aero-slider[data-aero-defer-visibility]:not(.aero-slider--ready) .aero-slider__track::before {
-  content: "";
-  flex: 0 0 max(
-    0px,
-    calc(
-      50%
-      - (100% - var(--slide-gap, 0px) * (var(--slides-per-view, 1) - 1))
-        / (2 * var(--slides-per-view, 1))
-      - var(--slide-gap, 0px)
-    )
-  );
-  scroll-snap-align: none;
-}
-
-.aero-slider[data-aero-defer-visibility]:not(.aero-slider--ready) .aero-slider__track > * {
-  scroll-snap-align: center;
-}
-
-/* Viewport clips the track; pagination sits below in normal flow */
-.aero-slider__viewport {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  contain: paint;
-}
-
-/* === Track === */
-.aero-slider__track {
-  min-height: 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  width: 100%;
-  min-width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-snap-type: x mandatory;
-  touch-action: manipulation;
-  overscroll-behavior-x: contain;
-  overflow-anchor: none;
-  gap: var(--slide-gap, 0px);
-  cursor: grab;
-
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.aero-slider__track::-webkit-scrollbar {
-  display: none;
-}
-
-.aero-slider__track:focus {
-  outline: none;
-}
-.aero-slider__track:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-/* === Slides === */
-.aero-slider__slide,
-.aero-slider__track > * {
-  flex: 0 0
-    calc(
-      (100% - var(--slide-gap, 0px) * (var(--slides-per-view, 1) - 1)) / var(--slides-per-view, 1)
-    );
-  flex-shrink: 0;
-  flex-grow: 0;
-  scroll-snap-align: start;
-  aspect-ratio: var(--slide-aspect, 16 / 9);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  min-height: 0;
-  contain: paint;
-  overflow: hidden;
-}
-
-.aero-slider__slide > *,
-.aero-slider__track > * > * {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
-
-.aero-slider__slide img,
-.aero-slider__track > * img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  pointer-events: none;
-}
-
-/* === Dragging State === */
-.aero-slider--dragging {
-  user-select: none;
-}
-
-.aero-slider--dragging .aero-slider__track {
-  cursor: grabbing;
-  scroll-snap-type: none;
-}
-
-/* === Navigation === */
-.aero-slider__nav--prev,
-.aero-slider__nav--next {
-  touch-action: manipulation;
-}
-
-/* === Pagination === */
-.aero-slider__pagination {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 8px;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  padding: 12px 0 16px;
-  min-height: 44px;
-  box-sizing: border-box;
-}
-
-.aero-slider__dot {
-  touch-action: manipulation;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition:
-    transform 0.2s ease-out,
-    opacity 0.2s ease-out;
-}
-
-/* iOS-style windowed pagination */
-.aero-slider__pagination--windowed {
-  width: var(--pagination-width);
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  overflow: hidden;
-  justify-content: flex-start;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.aero-slider__pagination-track {
-  display: flex;
-  gap: inherit;
-  align-items: center;
-  transform: translateX(var(--track-offset, 0));
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Dot scale states for windowed pagination (CSS-driven, not inline styles) */
-.aero-slider__dot--hidden {
-  transform: scale(0.4);
-  opacity: 0;
-}
-
-.aero-slider__dot--edge {
-  transform: scale(0.6);
-}
-
-.aero-slider__dot--near-edge {
-  transform: scale(0.8);
-}
-
-/* === RTL === */
-.aero-slider--rtl .aero-slider__track {
-  direction: rtl;
-}
-
-/* === Vertical (ttb) === */
-/* Viewport height derives from width via --slide-aspect (same as horizontal). */
-.aero-slider--vertical .aero-slider__viewport {
-  aspect-ratio: var(--slide-aspect, 5 / 3);
-  overflow: hidden;
-}
-
-.aero-slider--vertical .aero-slider__track {
-  flex-direction: column;
-  overflow-x: hidden;
-  overflow-y: auto;
-  scroll-snap-type: y mandatory;
-  overscroll-behavior-x: initial;
-  overscroll-behavior-y: contain;
-  min-width: initial;
-  height: 100%;
-  min-height: 100%;
-}
-
-.aero-slider--vertical .aero-slider__slide,
-.aero-slider--vertical .aero-slider__track > * {
-  flex: 0 0
-    calc(
-      (100% - var(--slide-gap, 0px) * (var(--slides-per-view, 1) - 1)) / var(--slides-per-view, 1)
-    );
-  aspect-ratio: initial;
-  width: 100%;
-}

package/dist/aero-slider.js

@@ -1 +0,0 @@
-var he={loop:!1,autoplay:!1,autoplayInterval:5e3,draggable:!0,maxDots:0,noDrag:"",perMove:0,direction:"ltr"},J={slidesPerView:1,gap:0,aspectRatio:"16 / 9"},ue=.3,ie=80,Te=150,be=300,fe=100,Le=250,$="data-aero-slider-index",z="data-aero-slider-clone";function ye(e,v,s,a={}){let r=a.debounceMs??100,m=a.maxWaitMs??250,n="",d=null,l=null;function t(){let y=getComputedStyle(e);return v.map(h=>y.getPropertyValue(h).trim()).join("\0")}function p(){d!==null&&(clearTimeout(d),d=null),l=null;let y=t();y!==n&&(n=y,s())}function M(){let y=Date.now();if(l===null&&(l=y),y-l>=m){p();return}d!==null&&clearTimeout(d),d=setTimeout(p,r)}return n=t(),window.addEventListener("resize",M),()=>{window.removeEventListener("resize",M),d!==null&&(clearTimeout(d),d=null)}}var Ue=50,qe=2,Me=3;function Ae(e){let{track:v,state:s}=e,a=null,r=Me;function m(){let g=Math.ceil(e.config.slidesPerView)+qe;return Math.max(Me,Math.ceil(g/e.slideCount))}function n(){return r*e.slideCount*s.slideWidthPx}function d(){return(r+1)*e.slideCount*s.slideWidthPx}function l(g){v.style.scrollBehavior="auto",e.setScrollPos(g),requestAnimationFrame(()=>{v.style.scrollBehavior=""})}function t(){if(!s.loopModeActive)return;let g=s.slideWidthPx;if(g===0)return;let c=e.slideCount*g,S=n(),L=d(),f=e.getScrollPos(),T=2;if(f<S-T||f>=L+T){for(;f<S;)f+=c;for(;f>=L;)f-=c;l(f)}}function p(){a!==null&&clearTimeout(a),a=setTimeout(()=>{a=null,t()},Ue)}function M(){a!==null&&(clearTimeout(a),a=null)}function y(){let g=s.slideWidthPx;if(g===0)return s.currentIndex;let c=e.isVertical()?v.clientHeight:v.clientWidth;if(e.isFractionalView()){let f=g-e.config.gap,T=e.getScrollPos()+c/2,C=n();return(Math.round((T-C-f/2)/g)%e.slideCount+e.slideCount)%e.slideCount}let S=e.getScrollPos()-n();return(Math.round(S/g)%e.slideCount+e.slideCount)%e.slideCount}function h(g){if(!e.isLoopEnabled()){s.loopModeActive&&u(g);return}r=m(),v.querySelectorAll(`[${z}]`).forEach(I=>I.remove());let{slides:c,slideCount:S}=e;for(let I=0;I<r;I++)for(let E=S-1;E>=0;E--){let A=c[E].cloneNode(!0);A.setAttribute(z,""),A.removeAttribute($),v.prepend(A)}for(let I=0;I<r;I++)for(let E=0;E<S;E++){let A=c[E].cloneNode(!0);A.setAttribute(z,""),A.removeAttribute($),v.append(A)}s.loopModeActive=!0,e.recalcSlideMetrics(),e.applySnapAlignment();let L=e.normalizeIndex(g);s.currentIndex=L;let f=s.slideWidthPx,T=r*e.slideCount*f,C=T+L*f;if(e.isFractionalView()){let I=e.isVertical()?v.clientHeight:v.clientWidth,E=f-e.config.gap;C=T+L*f+E/2-I/2}l(C)}function u(g){M(),v.querySelectorAll(`[${z}]`).forEach(c=>c.remove()),s.loopModeActive=!1,e.recalcSlideMetrics(),s.currentIndex=Math.max(0,Math.min(g,e.getMaxIndex())),l(e.getScrollPosForIndex(s.currentIndex))}return{getLoopRealStart:n,getLoopRealEnd:d,getLoopIndexFromScroll:y,instantScrollTo:l,teleportIfNeeded:t,scheduleTeleport:p,setupLoopTrack:h,teardownLoopTrack:u,cancelTeleport:M}}function Ce(e,v,s,a,r){let{container:m,track:n,state:d}=e,l=!1;function t(u){return e.isVertical()?u.clientY:u.clientX}function p(){return e.config.direction==="rtl"?-1:1}function M(u){if(u.button!==0||u.pointerType==="touch"||e.config.noDrag&&u.target.closest(e.config.noDrag))return;n.setPointerCapture(u.pointerId),d.isDragging=!0;let g=p(),c=t(u),S=e.getScrollPos(),L=S,f=null,T=0,C=c,I=performance.now();function E(){f=null,e.setScrollPos(L)}n.style.scrollBehavior="auto",n.style.scrollSnapType="none",m.classList.add("aero-slider--dragging");let A=d.currentIndex;e.emit("dragStart",{index:A}),a();function D(V){if(!d.isDragging)return;V.preventDefault();let P=t(V);L=S+(c-P)*g,f===null&&(f=requestAnimationFrame(E));let R=performance.now(),k=R-I;if(k>0){if(k<100){let N=(C-P)*g/k;T=ue*N+(1-ue)*T}else T*=.5;C=P,I=R}}function H(){if(!d.isDragging)return;d.isDragging=!1,m.classList.remove("aero-slider--dragging"),f!==null&&(cancelAnimationFrame(f),f=null,e.setScrollPos(L));let V=performance.now()-I;V>50&&(T*=Math.max(0,1-V/200));let P=e.getSlideSize();if(n.style.scrollBehavior="",P>0)if(d.loopModeActive){v.teleportIfNeeded();let R=v.getLoopRealStart(),k=e.getScrollPos(),N=e.isVertical()?n.clientHeight:n.clientWidth,B,U;if(e.isFractionalView()){let O=P-e.config.gap,X=k+T*ie+N/2;B=Math.round((X-R-O/2)/P),U=R+B*P+O/2-N/2}else{let X=k-R+T*ie;B=Math.round(X/P),U=R+B*P}d.isProgrammaticScroll=!0,e.scrollToPos(U,"smooth"),v.scheduleTeleport();let G=e.normalizeIndex(B);G!==d.currentIndex&&(d.currentIndex=G,e.emit("slideChange",{index:d.currentIndex}),e.refreshPagination(),e.refreshNavState())}else{let R=e.getScrollPos()+T*ie,k=e.getIndexFromScrollPos(R);s(k)}e.emit("dragEnd",{index:d.currentIndex,fromIndex:A}),n.removeEventListener("pointermove",D),n.removeEventListener("pointerup",H),n.removeEventListener("pointercancel",H),e.config.autoplay&&r()}n.addEventListener("pointermove",D),n.addEventListener("pointerup",H),n.addEventListener("pointercancel",H)}function y(u){u.preventDefault()}function h(u){u!==l&&(u?(n.addEventListener("pointerdown",M),n.addEventListener("dragstart",y),l=!0):(n.removeEventListener("pointerdown",M),n.removeEventListener("dragstart",y),l=!1))}return{setEnabled:h,isActive:()=>l}}function Ie(e,v,s){let a=null,r=null,m=s,n=v;function d(){a&&(a.removeEventListener("click",m),a=null),r&&(r.removeEventListener("click",n),r=null)}function l(){d(),a=e.container.querySelector(".aero-slider__nav--prev"),r=e.container.querySelector(".aero-slider__nav--next");let p=e.config.direction==="rtl";m=p?v:s,n=p?s:v,a&&a.addEventListener("click",m),r&&r.addEventListener("click",n),t()}function t(){let p=e.getMaxIndex(),M=p>0,y=e.config.direction==="rtl",h=!M||!e.isLoopEnabled()&&e.state.currentIndex===0,u=!M||!e.isLoopEnabled()&&e.state.currentIndex>=p;a&&(a.disabled=y?u:h),r&&(r.disabled=y?h:u)}return{build:l,clear:d,refresh:t}}function _e(e,v){let s=null,a=null,r=null,m=[],n=!1,d=10,l=8;function t(c){let S=c.target.closest(".aero-slider__dot");if(!S||!s)return;let L=S.getAttribute("data-slide-index");L!==null&&v(Number(L))}function p(){if(s){s.removeEventListener("click",t),a?.remove(),a=null,r&&(r.style.display="");let c=s.querySelectorAll(".aero-slider__dot");for(let S=1;S<c.length;S++)c[S]?.remove();s.querySelectorAll(".aero-slider__pagination-label").forEach(S=>S.remove()),s=null}r=null,m=[],n=!1}function M(){return e.isLoopEnabled()?e.slideCount:e.getMaxIndex()+1}function y(){if(s=e.container.querySelector(".aero-slider__pagination"),!s||(r=s.querySelector(".aero-slider__dot"),!r))return;r.style.display==="none"&&(r.style.display=""),r.style.transform="",r.style.opacity="",r.offsetWidth;let S=getComputedStyle(r);d=parseFloat(S.width)||10;let L=getComputedStyle(s);l=parseInt(L.gap)||8,s.setAttribute("role","tablist"),s.addEventListener("click",t);let f=M(),T=e.config.maxDots;n=T>0&&f>T,a?.remove();let C=s.querySelectorAll(".aero-slider__dot");for(let E=1;E<C.length;E++)C[E]?.remove();if(s.querySelectorAll(".aero-slider__pagination-label").forEach(E=>E.remove()),n){s.classList.add("aero-slider__pagination--windowed");let E=T*d+(T-1)*l;s.style.setProperty("--pagination-width",`${E}px`),a=document.createElement("div"),a.className="aero-slider__pagination-track",r.style.display="none";for(let A=0;A<f;A++){let D=r.cloneNode(!0);D.style.display="",a.appendChild(D)}s.appendChild(a)}else{s.classList.remove("aero-slider__pagination--windowed"),s.style.removeProperty("--pagination-width"),r.style.display="";for(let E=1;E<f;E++){let A=r.cloneNode(!0);s.appendChild(A)}}m=Array.from((n&&a?a:s).querySelectorAll(".aero-slider__dot")),m.forEach((E,A)=>{E.setAttribute("role","tab"),E.setAttribute("data-slide-index",String(A)),E.setAttribute("aria-label",`Go to slide ${A+1}`)}),g()}function h(c,S,L,f){if(c<0||c>=S)return"aero-slider__dot--hidden";let T=c===0,C=c===S-1,I=c===1,E=c===S-2;return T&&!L?"aero-slider__dot--edge":I&&!L?"aero-slider__dot--near-edge":C&&!f?"aero-slider__dot--edge":E&&!f?"aero-slider__dot--near-edge":null}function u(c){c.classList.remove("aero-slider__dot--hidden","aero-slider__dot--edge","aero-slider__dot--near-edge")}function g(){let c=M(),S=e.state.currentIndex,L=e.config.maxDots;if(n&&L>0&&a){let f=Math.floor(L/2),T=d+l,C=S-f;C=Math.max(0,Math.min(C,c-L)),a.style.setProperty("--track-offset",`${-C*T}px`);let I=C===0,E=C>=c-L;m.forEach((A,D)=>{let H=D===S;A.classList.toggle("aero-slider__dot--active",H),A.setAttribute("aria-selected",String(H)),u(A);let V=h(D-C,L,I,E);V&&A.classList.add(V)})}else m.forEach((f,T)=>{let C=T===S;f.classList.toggle("aero-slider__dot--active",C),f.setAttribute("aria-selected",String(C)),u(f)})}return{build:y,clear:p,refresh:g}}function xe(e,v,s){let a=!1;function r(n){let d=e.config.direction;d==="ttb"?n.key==="ArrowUp"?(n.preventDefault(),s()):n.key==="ArrowDown"&&(n.preventDefault(),v()):d==="rtl"?n.key==="ArrowRight"?(n.preventDefault(),s()):n.key==="ArrowLeft"&&(n.preventDefault(),v()):n.key==="ArrowLeft"?(n.preventDefault(),s()):n.key==="ArrowRight"&&(n.preventDefault(),v())}function m(n){n!==a&&(n?(e.container.setAttribute("tabindex","0"),e.container.addEventListener("keydown",r),a=!0):(e.container.removeAttribute("tabindex"),e.container.removeEventListener("keydown",r),a=!1))}return{setEnabled:m}}function we(e,v){let s=null,a=!1,r=null;function m(){e.config.autoplay&&(n(),s=setInterval(()=>{if(!e.state.loopModeActive&&e.state.currentIndex>=e.getMaxIndex()){n();return}v()},e.config.autoplayInterval),e.emit("autoplayStart",{index:e.state.currentIndex}))}function n(){s!==null&&(clearInterval(s),s=null,e.emit("autoplayStop",{index:e.state.currentIndex}))}function d(){n()}function l(){e.config.autoplay&&m()}function t(){r!==null&&(clearTimeout(r),r=null),n()}function p(){e.config.autoplay&&(r=setTimeout(()=>{r=null,e.config.autoplay&&m()},1e3))}function M(y){y!==a&&(y?(e.container.addEventListener("mouseenter",d),e.container.addEventListener("mouseleave",l),e.track.addEventListener("touchstart",t,{passive:!0}),e.track.addEventListener("touchend",p,{passive:!0}),e.track.addEventListener("touchcancel",p,{passive:!0}),a=!0):(e.container.removeEventListener("mouseenter",d),e.container.removeEventListener("mouseleave",l),e.track.removeEventListener("touchstart",t),e.track.removeEventListener("touchend",p),e.track.removeEventListener("touchcancel",p),r!==null&&(clearTimeout(r),r=null),a=!1))}return{start:m,pause:n,setHoverPause:M}}function Ye(e,v={}){let s=e,a=e.querySelector(".aero-slider__track");if(!a)throw new Error("aero-slider: missing .aero-slider__track");let r=a,m=Array.from(r.children).filter(o=>!o.hasAttribute(z)),n=m.length;if(n===0)throw new Error("aero-slider: no slides found");m.forEach((o,i)=>o.setAttribute($,String(i)));function d(){let o=getComputedStyle(e),i=parseFloat(o.getPropertyValue("--slides-per-view")?.trim()||"")||J.slidesPerView,b=o.getPropertyValue("--slide-gap")?.trim()||"0px",x=parseFloat(b)||J.gap,_=o.getPropertyValue("--slide-aspect")?.trim()||J.aspectRatio;return{slidesPerView:i,gap:x,aspectRatio:_}}let l={...he,...v,...J},t={currentIndex:0,isDragging:!1,isDestroyed:!1,loopModeActive:!1,isProgrammaticScroll:!1,slideWidthPx:0},p=new Map,M=null,y=null,h=null,u=null,g=null;function c(o,i){p.get(o)?.forEach(b=>b(i))}function S(){return l.direction==="ttb"}function L(){return l.slidesPerView%1!==0?Math.max(0,n-1):Math.max(0,Math.floor(n-l.slidesPerView))}function f(){return l.slidesPerView%1!==0}function T(){return l.loop&&L()>0}function C(){return l.perMove>0?l.perMove:1}function I(o){let i=L();return T()?(Math.trunc(o)%n+n)%n:Math.max(0,Math.min(o,i))}function E(){return l.direction==="rtl"?-r.scrollLeft:l.direction==="ttb"?r.scrollTop:r.scrollLeft}function A(o){l.direction==="rtl"?r.scrollLeft=-o:l.direction==="ttb"?r.scrollTop=o:r.scrollLeft=o}function D(o,i="auto"){l.direction==="ttb"?r.scrollTo({top:o,behavior:i}):l.direction==="rtl"?r.scrollTo({left:-o,behavior:i}):r.scrollTo({left:o,behavior:i})}function H(){return S()?r.clientHeight:r.clientWidth}function V(){return S()?r.scrollHeight:r.scrollWidth}function P(){if(t.slideWidthPx>0)return t.slideWidthPx;let o=m[0];if(!o)return 0;let i=o.getBoundingClientRect();return t.slideWidthPx=(S()?i.height:i.width)+l.gap,t.slideWidthPx}function R(){t.slideWidthPx=0,P()}function k(){Object.assign(l,d())}function N(o){let i=P();if(i===0)return 0;if(!f())return o*i;let b=H(),x=i-l.gap;if(t.loopModeActive)return o*i+x/2-b/2;let _=L();return o<=0?0:o>=_?V()-H():o*i+x/2-b/2}function B(o){let i=P();if(i===0)return t.currentIndex;let b=t.loopModeActive?n-1:L(),x=V()-H();if(!f()){let ne=Math.round(o/i);return Math.max(0,Math.min(ne,b))}if(x<=0||o<=1)return 0;if(o>=x-1)return b;let _=H(),q=i-l.gap,re=o+_/2,oe=Math.round((re-q/2)/i);return Math.max(0,Math.min(oe,b))}function U(){let o=Array.from(r.children);if(!f()){for(let i of o)i.style.scrollSnapAlign="";return}if(t.loopModeActive){for(let i of o)i.style.scrollSnapAlign="center";return}for(let i of o)i.style.scrollSnapAlign="center"}function G(){e.classList.remove("aero-slider--rtl","aero-slider--vertical"),e.removeAttribute("dir"),l.direction==="rtl"?(e.setAttribute("dir","rtl"),e.classList.add("aero-slider--rtl")):l.direction==="ttb"&&e.classList.add("aero-slider--vertical")}let O=new Set;function X(){let o=new Set,i=Math.ceil(l.slidesPerView);for(let b=0;b<i;b++){let x=t.currentIndex+b;if(t.loopModeActive)x=(x%n+n)%n;else if(x>=n)break;o.add(x)}return o}function Q(){let o=X();for(let i of O)o.has(i)||c("hidden",{index:i});for(let i of o)O.has(i)||c("visible",{index:i});O.clear();for(let i of o)O.add(i)}let j={container:e,track:r,get slides(){return m},get slideCount(){return n},get config(){return l},state:t,listeners:p,emit:c,getSlideSize:P,recalcSlideMetrics:R,normalizeIndex:I,getMaxIndex:L,getEffectivePerMove:C,isLoopEnabled:T,isFractionalView:f,isVertical:S,getScrollPos:E,setScrollPos:A,scrollToPos:D,getScrollPosForIndex:N,getIndexFromScrollPos:B,refreshPagination:()=>F.refresh(),refreshNavState:()=>Y.refresh(),applySnapAlignment:U},w=Ae(j),Y=Ie(j,te,ae),F=_e(j,Z),le=xe(j,te,ae),W=we(j,te),se=Ce(j,w,Z,W.pause,W.start);function ee(){if(t.isDragging||t.isProgrammaticScroll)return;let o=t.loopModeActive?w.getLoopIndexFromScroll():B(E());o!==t.currentIndex&&(t.currentIndex=o,c("slideChange",{index:t.currentIndex}),F.refresh(),Y.refresh(),Q())}function De(){y=null,t.isProgrammaticScroll=!1,K===null&&(r.style.scrollSnapType=""),ee()}function pe(){t.loopModeActive&&w.scheduleTeleport(),y!==null&&clearTimeout(y),y=setTimeout(De,Te),M===null&&(M=requestAnimationFrame(()=>{M=null,ee()}))}let K=null;function ve(){t.isDragging||(r.style.scrollSnapType="none",K!==null&&clearTimeout(K),K=setTimeout(()=>{K=null,r.style.scrollSnapType=""},be))}function ge(){if(R(),t.loopModeActive){let o=P();if(o>0){let i=w.getLoopRealStart(),b=i+t.currentIndex*o;if(f()){let x=H(),_=o-l.gap;b=i+t.currentIndex*o+_/2-x/2}A(b)}}else A(N(t.currentIndex))}function Se(){t.isDestroyed||(u===null&&(r.style.scrollSnapType="none",t.isProgrammaticScroll=!0),g===null&&(g=requestAnimationFrame(()=>{g=null,t.isDestroyed||ge()})),u!==null&&clearTimeout(u),u=setTimeout(()=>{u=null,!t.isDestroyed&&(ge(),t.isProgrammaticScroll=!1,r.style.scrollSnapType="")},fe))}let Re=["--slides-per-view","--slide-gap","--slide-aspect"];function He(){h?.(),h=ye(e,Re,()=>{t.isDestroyed||(c("resize",{index:t.currentIndex}),Ee(),c("resized",{index:t.currentIndex}))},{debounceMs:fe,maxWaitMs:Le})}function te(){t.isDestroyed||Z(I(t.currentIndex+C()))}function ae(){t.isDestroyed||Z(I(t.currentIndex-C()))}function Z(o){if(t.isDestroyed)return;let i=I(o),b=P();if(b!==0){if(i!==t.currentIndex&&(t.currentIndex=i,c("slideChange",{index:t.currentIndex}),F.refresh(),Y.refresh(),Q()),t.loopModeActive){w.cancelTeleport(),t.isProgrammaticScroll=!0;let x=w.getLoopIndexFromScroll(),_=(i-x+n)%n,q=_-n,re=Math.abs(q)<_?q:_;if(re===0){let oe=w.getLoopRealStart(),ne=oe+i*b;if(f()){let We=H(),Be=b-l.gap;ne=oe+i*b+Be/2-We/2}D(ne,"smooth"),w.scheduleTeleport();return}D(E()+re*b,"smooth"),w.scheduleTeleport();return}t.isProgrammaticScroll=!0,D(N(i),"smooth")}}function Ee(o){let i=l;if(l={...l,...d(),...o??{}},i.direction!==l.direction&&G(),k(),R(),se.setEnabled(l.draggable),le.setEnabled(!0),W.setHoverPause(l.autoplay),(i.slidesPerView!==l.slidesPerView||i.loop!==l.loop||i.maxDots!==l.maxDots||i.perMove!==l.perMove)&&(F.clear(),F.build()),(i.autoplay!==l.autoplay||i.autoplayInterval!==l.autoplayInterval||i.loop!==l.loop)&&(l.autoplay?W.start():W.pause()),i.loop!==l.loop?T()?w.setupLoopTrack(t.currentIndex):w.teardownLoopTrack(t.currentIndex):t.loopModeActive&&i.slidesPerView!==l.slidesPerView&&w.setupLoopTrack(t.currentIndex),U(),!t.loopModeActive){let b=I(t.currentIndex);t.currentIndex=b,D(N(b))}ee(),F.refresh(),Y.refresh(),Q()}function de(){if(!t.isDestroyed&&(t.loopModeActive&&w.teardownLoopTrack(t.currentIndex),m=Array.from(r.children).filter(o=>!o.hasAttribute(z)),n=m.length,n!==0)){if(m.forEach((o,i)=>{o.setAttribute($,String(i)),o.classList.add("aero-slider__slide")}),k(),R(),T()&&w.setupLoopTrack(t.currentIndex),U(),!t.loopModeActive){let o=I(t.currentIndex);t.currentIndex=o,D(N(o))}F.clear(),F.build(),Y.build(),ee(),Q()}}function ke(o,i){if(t.isDestroyed)return;let b=Array.isArray(o)?o:[o];t.loopModeActive&&w.teardownLoopTrack(t.currentIndex);let x=Array.from(r.children).filter(_=>!_.hasAttribute(z));if(i!==void 0&&i<x.length){let _=x[i]??null;for(let q of b)r.insertBefore(q,_)}else for(let _ of b)r.appendChild(_);de()}function Ve(o){if(t.isDestroyed)return;let i=Array.isArray(o)?o:[o];t.loopModeActive&&w.teardownLoopTrack(t.currentIndex);let b=Array.from(r.children).filter(_=>!_.hasAttribute(z)),x=[...i].sort((_,q)=>q-_);for(let _ of x)_>=0&&_<b.length&&b[_].remove();de()}function Ne(o,i){p.has(o)||p.set(o,new Set),p.get(o).add(i)}function Oe(o,i){p.get(o)?.delete(i)}function Fe(){t.isDestroyed||(c("destroy",{index:t.currentIndex}),t.isDestroyed=!0,W.pause(),t.loopModeActive&&w.teardownLoopTrack(t.currentIndex),w.cancelTeleport(),t.isProgrammaticScroll=!1,h?.(),h=null,window.removeEventListener("resize",Se),u!==null&&(clearTimeout(u),u=null),g!==null&&(cancelAnimationFrame(g),g=null),r.removeEventListener("scroll",pe),r.removeEventListener("wheel",ve),K!==null&&clearTimeout(K),y!==null&&clearTimeout(y),se.setEnabled(!1),le.setEnabled(!1),W.setHoverPause(!1),M!==null&&cancelAnimationFrame(M),Y.clear(),F.clear(),e.removeAttribute("aria-roledescription"),e.removeAttribute("dir"),e.classList.remove("aero-slider--dragging","aero-slider--rtl","aero-slider--vertical","aero-slider--ready"),e.removeAttribute("data-aero-defer-visibility"),s.aeroSlider===ce&&delete s.aeroSlider,p.clear())}e.removeAttribute("data-aero-defer-visibility"),k(),e.classList.add("aero-slider"),e.setAttribute("aria-roledescription","carousel"),r.classList.add("aero-slider__track");for(let o of m)o.classList.add("aero-slider__slide");G(),k(),R(),U(),r.addEventListener("scroll",pe,{passive:!0}),r.addEventListener("wheel",ve,{passive:!0}),window.addEventListener("resize",Se),T()?w.setupLoopTrack(0):A(0),He(),se.setEnabled(l.draggable),le.setEnabled(!0),W.setHoverPause(l.autoplay),Y.build(),F.build(),l.autoplay&&W.start();let ze=X();for(let o of ze)O.add(o);for(let o of O)c("visible",{index:o});let ce={get element(){return e},next:te,prev:ae,goTo:Z,destroy:Fe,update:Ee,refresh:de,add:ke,remove:Ve,on:Ne,off:Oe,get currentIndex(){return t.currentIndex},get slideCount(){return n}};return s.aeroSlider=ce,e.classList.add("aero-slider--ready"),c("ready",{index:t.currentIndex}),ce}var Pe="aero-slider__thumb--active";function me(e,v,s){e.querySelectorAll(":scope > *").forEach(r=>{let m=s(r);r.classList.toggle(Pe,m===v)})}function Ke(e,v,s){let a=v[s];if(!a)return;let r=e.getBoundingClientRect(),m=a.getBoundingClientRect(),n=a.offsetLeft+m.width/2,d=r.width/2,l=n-d,t=e.scrollWidth-e.clientWidth,p=Math.max(0,Math.min(l,t));e.scrollTo({left:p,behavior:"smooth"})}function Xe(e,v){let s=v.element.querySelector(".aero-slider__track");if(!s)return()=>{};let a=s;v.update({draggable:!1,loop:!0});let r=Array.from(a.children).filter(h=>h.hasAttribute("data-aero-slider-index"));r.sort((h,u)=>Number(h.getAttribute("data-aero-slider-index"))-Number(u.getAttribute("data-aero-slider-index")));let m=r.length,n=Array.from(a.children).indexOf(r[0]??a),d=[];function l(h){let u=h.getAttribute("data-aero-slider-index");if(u!==null)return Number(u);let g=Array.from(a.children).indexOf(h);return g<n?g%m:(g-n-m)%m}let t=null,p=null;Array.from(a.children).forEach(h=>{let u=h,g=()=>{let c=l(u);t=c,me(a,c,l),e.goTo(c)};u.addEventListener("click",g),u.style.cursor="pointer",d.push({el:u,fn:g})});let M=null,y=h=>{if(t!==null){h.index===t?(p!==null&&clearTimeout(p),p=setTimeout(()=>{p=null,t=null},200)):p!==null&&(clearTimeout(p),p=null);return}M!==null&&clearTimeout(M),M=setTimeout(()=>{M=null,me(a,h.index,l),v.goTo(h.index)},50)};return e.on("slideChange",y),me(a,e.currentIndex,l),Ke(a,r,e.currentIndex),()=>{M!==null&&clearTimeout(M),p!==null&&clearTimeout(p),t=null,d.forEach(({el:h,fn:u})=>h.removeEventListener("click",u)),a.querySelectorAll(":scope > *").forEach(h=>h.classList.remove(Pe)),e.off("slideChange",y)}}export{Ye as createSlider,Xe as syncThumbnails};