aero-slider 1.0.0-beta.2 → 1.0.0-beta.4

package/README.md

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