@evermade/overflow-slider 3.3.1 → 4.1.0

package/dist/plugins/autoplay/index.min.js

@@ -0,0 +1 @@
+function e(e){return t=>{var n,o,l,a,i,r,s,u,d,c,v,p,m,y,f;const h={delayInMs:null!==(n=null==e?void 0:e.delayInMs)&&void 0!==n?n:5e3,texts:{play:null!==(l=null===(o=null==e?void 0:e.texts)||void 0===o?void 0:o.play)&&void 0!==l?l:"Play",pause:null!==(i=null===(a=null==e?void 0:e.texts)||void 0===a?void 0:a.pause)&&void 0!==i?i:"Pause"},icons:{play:null!==(s=null===(r=null==e?void 0:e.icons)||void 0===r?void 0:r.play)&&void 0!==s?s:'<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/></svg>',pause:null!==(d=null===(u=null==e?void 0:e.icons)||void 0===u?void 0:u.pause)&&void 0!==d?d:'<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5"/></svg>'},container:null!==(c=null==e?void 0:e.container)&&void 0!==c?c:null,classNames:{autoplayButton:null!==(p=null===(v=null==e?void 0:e.classNames)||void 0===v?void 0:v.autoplayButton)&&void 0!==p?p:"overflow-slider__autoplay"},movementType:null!==(m=null==e?void 0:e.movementType)&&void 0!==m?m:"view",stopOnHover:null===(y=null==e?void 0:e.stopOnHover)||void 0===y||y,loop:null===(f=null==e?void 0:e.loop)||void 0===f||f};let g=null,w=null,I=0,x=!1;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;const M=(()=>{var e;const n=document.createElement("button");n.type="button",n.className=h.classNames.autoplayButton,E(n),n.style.setProperty("--autoplay-delay-progress","0"),h.container?h.container.appendChild(n):null===(e=t.container.parentElement)||void 0===e||e.insertBefore(n,t.container),n.addEventListener("click",()=>{g?(x=!0,C()):(x=!1,T())});const o=["focusin"];h.stopOnHover&&o.push("mouseenter");const l=["focusout"];return h.stopOnHover&&l.push("mouseleave"),o.forEach(e=>t.container.addEventListener(e,()=>{g&&C()})),l.forEach(e=>t.container.addEventListener(e,()=>{g||x||T()})),n})();function b(){if("view"===h.movementType){t.getScrollLeft()+t.getInclusiveClientWidth()>=t.getInclusiveScrollWidth()?h.loop?t.moveToSlide(0):(C(),M.style.setProperty("--autoplay-delay-progress","0")):t.moveToDirection("next")}else{const e=(t.activeSlideIdx+1)%t.details.slideCount;t.canMoveToSlide(e)?t.moveToSlide(e):h.loop?t.moveToSlide(0):(C(),M.style.setProperty("--autoplay-delay-progress","0"))}I=performance.now(),null!==w&&cancelAnimationFrame(w),A()}function A(){const e=performance.now(),t=Math.min((e-I)/h.delayInMs*100,100);M.style.setProperty("--autoplay-delay-progress",`${Math.round(t)}`),t<100&&(w=requestAnimationFrame(A))}function T(){g&&clearInterval(g),w&&cancelAnimationFrame(w),function(e){e.setAttribute("aria-pressed","true"),e.setAttribute("aria-label",h.texts.pause);const t=document.createRange().createContextualFragment(h.icons.pause);e.innerHTML="",e.appendChild(t)}(M),I=performance.now(),A(),g=window.setInterval(b,h.delayInMs)}function C(e=!1){g&&clearInterval(g),w&&cancelAnimationFrame(w),g=w=null,e&&(x=!0),E(M)}function E(e){e.setAttribute("aria-pressed","false"),e.setAttribute("aria-label",h.texts.play);const t=document.createRange().createContextualFragment(h.icons.play);e.innerHTML="",e.appendChild(t),e.style.setProperty("--autoplay-delay-progress","0")}T(),new IntersectionObserver(e=>{for(const t of e)!t.isIntersecting&&g?C():!t.isIntersecting||g||x||T()},{threshold:0}).observe(t.container)}}export{e as default};

package/dist/plugins/classnames/index.d.ts

@@ -0,0 +1,14 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type ClassnameOptions = {
+    classNames: {
+        visible: string;
+        partlyVisible: string;
+        hidden: string;
+    };
+    freezeStateOnVisible: boolean;
+};
+declare function ClassNamesPlugin(args?: DeepPartial<ClassnameOptions>): (slider: Slider) => void;
+
+export { ClassNamesPlugin as default };
+export type { ClassnameOptions };

package/dist/plugins/classnames/index.esm.js

@@ -0,0 +1,108 @@
+const DEFAULT_CLASS_NAMES = {
+    visible: 'is-visible',
+    partlyVisible: 'is-partly-visible',
+    hidden: 'is-hidden',
+};
+function ClassNamesPlugin(args) {
+    return (slider) => {
+        var _a, _b;
+        const providedClassNames = (_a = args === null || args === void 0 ? void 0 : args.classNames) !== null && _a !== void 0 ? _a : args === null || args === void 0 ? void 0 : args.classnames;
+        const options = {
+            classNames: Object.assign(Object.assign({}, DEFAULT_CLASS_NAMES), providedClassNames !== null && providedClassNames !== void 0 ? providedClassNames : {}),
+            freezeStateOnVisible: (_b = args === null || args === void 0 ? void 0 : args.freezeStateOnVisible) !== null && _b !== void 0 ? _b : false,
+        };
+        const slideStates = new WeakMap();
+        const uniqueClassNames = Array.from(new Set(Object.values(options.classNames).filter((className) => Boolean(className))));
+        const getTargetBounds = () => {
+            const sliderRect = slider.container.getBoundingClientRect();
+            const sliderWidth = sliderRect.width;
+            if (!sliderWidth) {
+                return { targetStart: sliderRect.left, targetEnd: sliderRect.right };
+            }
+            let targetWidth = 0;
+            if (typeof slider.options.targetWidth === 'function') {
+                try {
+                    targetWidth = slider.options.targetWidth(slider);
+                }
+                catch (error) {
+                    targetWidth = 0;
+                }
+            }
+            if (!Number.isFinite(targetWidth) || targetWidth <= 0) {
+                targetWidth = sliderWidth;
+            }
+            const effectiveTargetWidth = Math.min(targetWidth, sliderWidth);
+            const offset = (sliderWidth - effectiveTargetWidth) / 2;
+            const clampedOffset = Math.max(offset, 0);
+            return {
+                targetStart: sliderRect.left + clampedOffset,
+                targetEnd: sliderRect.right - clampedOffset,
+            };
+        };
+        const update = () => {
+            const { targetStart, targetEnd } = getTargetBounds();
+            console.log('targetStart:', targetStart, 'targetEnd:', targetEnd);
+            slider.slides.forEach((slide) => {
+                const slideRect = slide.getBoundingClientRect();
+                const slideLeft = slideRect.left;
+                const slideRight = slideRect.right;
+                const tolerance = 2;
+                const overlapsTarget = (slideRight - tolerance) > targetStart && (slideLeft + tolerance) < targetEnd;
+                const fullyInsideTarget = (slideLeft + tolerance) >= targetStart && (slideRight - tolerance) <= targetEnd;
+                let nextState = 'hidden';
+                if (overlapsTarget) {
+                    nextState = fullyInsideTarget ? 'visible' : 'partlyVisible';
+                }
+                const prevState = slideStates.get(slide);
+                // If freezeStateOnVisible is enabled and slide was previously visible, keep it frozen
+                if (options.freezeStateOnVisible && prevState === 'visible') {
+                    return;
+                }
+                if (prevState === nextState) {
+                    return;
+                }
+                const nextClass = options.classNames[nextState];
+                if (prevState) {
+                    const prevClass = options.classNames[prevState];
+                    if (prevClass !== nextClass && prevClass) {
+                        slide.classList.remove(prevClass);
+                    }
+                }
+                else {
+                    uniqueClassNames.forEach((className) => {
+                        if (className !== nextClass) {
+                            slide.classList.remove(className);
+                        }
+                    });
+                }
+                if (nextClass && !slide.classList.contains(nextClass)) {
+                    slide.classList.add(nextClass);
+                }
+                slideStates.set(slide, nextState);
+            });
+        };
+        slider.on('created', update);
+        slider.on('pluginsLoaded', update);
+        slider.on('fullWidthPluginUpdate', update);
+        slider.on('contentsChanged', update);
+        slider.on('containerSizeChanged', update);
+        slider.on('detailsChanged', update);
+        slider.on('scrollEnd', update);
+        slider.on('scrollStart', update);
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => update());
+        });
+        let requestId = 0;
+        const debouncedUpdate = () => {
+            if (requestId) {
+                window.cancelAnimationFrame(requestId);
+            }
+            requestId = window.requestAnimationFrame(() => {
+                update();
+            });
+        };
+        slider.on('scroll', debouncedUpdate);
+    };
+}
+
+export { ClassNamesPlugin as default };

package/dist/plugins/classnames/index.min.js

@@ -0,0 +1 @@
+const t={visible:"is-visible",partlyVisible:"is-partly-visible",hidden:"is-hidden"};function e(e){return n=>{var i,s;const a=null!==(i=null==e?void 0:e.classNames)&&void 0!==i?i:null==e?void 0:e.classnames,l={classNames:Object.assign(Object.assign({},t),null!=a?a:{}),freezeStateOnVisible:null!==(s=null==e?void 0:e.freezeStateOnVisible)&&void 0!==s&&s},r=new WeakMap,o=Array.from(new Set(Object.values(l.classNames).filter(t=>Boolean(t)))),c=()=>{const{targetStart:t,targetEnd:e}=(()=>{const t=n.container.getBoundingClientRect(),e=t.width;if(!e)return{targetStart:t.left,targetEnd:t.right};let i=0;if("function"==typeof n.options.targetWidth)try{i=n.options.targetWidth(n)}catch(t){i=0}(!Number.isFinite(i)||i<=0)&&(i=e);const s=(e-Math.min(i,e))/2,a=Math.max(s,0);return{targetStart:t.left+a,targetEnd:t.right-a}})();console.log("targetStart:",t,"targetEnd:",e),n.slides.forEach(n=>{const i=n.getBoundingClientRect(),s=i.left,a=i.right;let c="hidden";a-2>t&&s+2<e&&(c=s+2>=t&&a-2<=e?"visible":"partlyVisible");const d=r.get(n);if(l.freezeStateOnVisible&&"visible"===d)return;if(d===c)return;const g=l.classNames[c];if(d){const t=l.classNames[d];t!==g&&t&&n.classList.remove(t)}else o.forEach(t=>{t!==g&&n.classList.remove(t)});g&&!n.classList.contains(g)&&n.classList.add(g),r.set(n,c)})};n.on("created",c),n.on("pluginsLoaded",c),n.on("fullWidthPluginUpdate",c),n.on("contentsChanged",c),n.on("containerSizeChanged",c),n.on("detailsChanged",c),n.on("scrollEnd",c),n.on("scrollStart",c),requestAnimationFrame(()=>{requestAnimationFrame(()=>c())});let d=0;n.on("scroll",()=>{d&&window.cancelAnimationFrame(d),d=window.requestAnimationFrame(()=>{c()})})}}export{e as default};

package/dist/plugins/core/index.d.ts

@@ -0,0 +1,76 @@
+type Slider<O = {}, C = {}, H extends string = string> = {
+    container: HTMLElement;
+    slides: HTMLElement[];
+    emit: (name: H | SliderHooks) => void;
+    moveToDirection: (direction: 'prev' | 'next') => void;
+    moveToSlideInDirection: (direction: 'prev' | 'next') => void;
+    snapToClosestSlide: (direction: 'prev' | 'next') => void;
+    moveToSlide: (index: number) => void;
+    canMoveToSlide: (index: number) => boolean;
+    getInclusiveScrollWidth: () => number;
+    getInclusiveClientWidth: () => number;
+    getScrollLeft: () => number;
+    setScrollLeft: (value: number) => void;
+    setActiveSlideIdx: () => void;
+    on: (name: H | SliderHooks, cb: SliderCallback) => void;
+    options: SliderOptions;
+    details: SliderDetails;
+    activeSlideIdx: number;
+} & C;
+type SliderCallback<O = {}, C = {}, H extends string = string> = (props: Slider<O, C, H>) => void;
+/**
+ * Recursively makes all properties of T optional.
+ * @see https://www.typescriptlang.org/docs/handbook/utility-types.html#mapped-types
+ */
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+type SliderOptions = {
+    scrollBehavior: string;
+    scrollStrategy: string;
+    slidesSelector: string;
+    emulateScrollSnap: boolean;
+    emulateScrollSnapMaxThreshold?: number;
+    cssVariableContainer: HTMLElement;
+    rtl: boolean;
+    targetWidth?: (slider: Slider) => number;
+    [key: string]: unknown;
+};
+type SliderOptionArgs = {
+    scrollBehavior?: 'smooth' | 'auto';
+    scrollStrategy?: 'fullSlide' | 'partialSlide';
+    slidesSelector?: string;
+    emulateScrollSnap?: boolean;
+    emulateScrollSnapMaxThreshold?: number;
+    cssVariableContainer?: HTMLElement;
+    rtl?: boolean;
+    targetWidth?: (slider: Slider) => number;
+    [key: string]: unknown;
+};
+type SliderDetails = {
+    hasOverflow: boolean;
+    slideCount: number;
+    containerWidth: number;
+    containerHeight: number;
+    scrollableAreaWidth: number;
+    amountOfPages: number;
+    currentPage: number;
+};
+type SliderHooks = HOOK_CREATED | HOOK_CONTENTS_CHANGED | HOOK_DETAILS_CHANGED | HOOK_CONTAINER_SIZE_CHANGED | HOOK_ACTIVE_SLIDE_CHANGED | HOOK_SCROLL_START | HOOK_SCROLL | HOOK_SCROLL_END | HOOK_NATIVE_SCROLL_START | HOOK_NATIVE_SCROLL | HOOK_NATIVE_SCROLL_END | HOOK_PROGRAMMATIC_SCROLL_START | HOOK_PROGRAMMATIC_SCROLL | HOOK_PROGRAMMATIC_SCROLL_END;
+type HOOK_CREATED = 'created';
+type HOOK_DETAILS_CHANGED = 'detailsChanged';
+type HOOK_CONTENTS_CHANGED = 'contentsChanged';
+type HOOK_CONTAINER_SIZE_CHANGED = 'containerSizeChanged';
+type HOOK_ACTIVE_SLIDE_CHANGED = 'activeSlideChanged';
+type HOOK_SCROLL_START = 'scrollStart';
+type HOOK_SCROLL = 'scroll';
+type HOOK_SCROLL_END = 'scrollEnd';
+type HOOK_NATIVE_SCROLL_START = 'nativeScrollStart';
+type HOOK_NATIVE_SCROLL = 'nativeScroll';
+type HOOK_NATIVE_SCROLL_END = 'nativeScrollEnd';
+type HOOK_PROGRAMMATIC_SCROLL_START = 'programmaticScrollStart';
+type HOOK_PROGRAMMATIC_SCROLL = 'programmaticScroll';
+type HOOK_PROGRAMMATIC_SCROLL_END = 'programmaticScrollEnd';
+type SliderPlugin = (slider: Slider) => void;
+
+export type { DeepPartial, HOOK_ACTIVE_SLIDE_CHANGED, HOOK_CONTAINER_SIZE_CHANGED, HOOK_CONTENTS_CHANGED, HOOK_CREATED, HOOK_DETAILS_CHANGED, HOOK_NATIVE_SCROLL, HOOK_NATIVE_SCROLL_END, HOOK_NATIVE_SCROLL_START, HOOK_PROGRAMMATIC_SCROLL, HOOK_PROGRAMMATIC_SCROLL_END, HOOK_PROGRAMMATIC_SCROLL_START, HOOK_SCROLL, HOOK_SCROLL_END, HOOK_SCROLL_START, Slider, SliderCallback, SliderDetails, SliderHooks, SliderOptionArgs, SliderOptions, SliderPlugin };

package/dist/plugins/core/index.d2.ts

@@ -0,0 +1,23 @@
+import { SliderOptionArgs, SliderPlugin, SliderCallback, SliderOptions, SliderDetails } from './index.js';
+
+declare function OverflowSlider(container: HTMLElement, options?: SliderOptionArgs, plugins?: SliderPlugin[]): {
+    container: HTMLElement;
+    slides: HTMLElement[];
+    emit: (name: string) => void;
+    moveToDirection: (direction: "prev" | "next") => void;
+    moveToSlideInDirection: (direction: "prev" | "next") => void;
+    snapToClosestSlide: (direction: "prev" | "next") => void;
+    moveToSlide: (index: number) => void;
+    canMoveToSlide: (index: number) => boolean;
+    getInclusiveScrollWidth: () => number;
+    getInclusiveClientWidth: () => number;
+    getScrollLeft: () => number;
+    setScrollLeft: (value: number) => void;
+    setActiveSlideIdx: () => void;
+    on: (name: string, cb: SliderCallback) => void;
+    options: SliderOptions;
+    details: SliderDetails;
+    activeSlideIdx: number;
+} | undefined;
+
+export { OverflowSlider as default };

package/dist/plugins/dots/index.d.ts

@@ -0,0 +1,16 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type DotsOptions = {
+    texts: {
+        dotDescription: string;
+    };
+    classNames: {
+        dotsContainer: string;
+        dotsItem: string;
+    };
+    container: HTMLElement | null;
+};
+declare function DotsPlugin(args?: DeepPartial<DotsOptions>): (slider: Slider) => void;
+
+export { DotsPlugin as default };
+export type { DotsOptions };

package/dist/plugins/dots/index.min.js

@@ -1 +1 @@
-const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return o=>{var i,s;const a={texts:Object.assign(Object.assign({},t),(null==n?void 0:n.texts)||[]),classNames:Object.assign(Object.assign({},e),(null==n?void 0:n.classNames)||[]),container:null!==(i=null==n?void 0:n.container)&&void 0!==i?i:null},r=document.createElement("div");r.classList.add(a.classNames.dotsContainer);let d=null;const l=()=>{r.setAttribute("data-has-content",o.details.hasOverflow.toString()),r.innerHTML="";const t=document.createElement("ul"),e=o.details.slideCount,n=o.activeSlideIdx;if(!(e<=1)){for(let o=0;o<e;o++){const i=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",a.classNames.dotsItem),s.setAttribute("aria-label",a.texts.dotDescription.replace("%d",(o+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(o===n).toString()),s.setAttribute("data-item",(o+1).toString()),i.appendChild(s),t.appendChild(i),s.addEventListener("click",(()=>c(o+1))),s.addEventListener("focus",(()=>d=o+1)),s.addEventListener("keydown",(t=>{var n;const o=r.querySelector('[aria-pressed="true"]');if(!o)return;const i=parseInt(null!==(n=o.getAttribute("data-item"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=i-1;if(t>0){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}if("ArrowRight"===t.key){const t=i+1;if(t<=e){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}}))}if(r.appendChild(t),d){const t=r.querySelector(`[data-item="${d}"]`);t&&t.focus()}}},c=t=>{o.moveToSlide(t-1)};l(),a.container?a.container.appendChild(r):null===(s=o.container.parentNode)||void 0===s||s.insertBefore(r,o.container.nextSibling),o.on("scrollEnd",l),o.on("contentsChanged",l),o.on("containerSizeChanged",l)}}export{n as default};
+const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return o=>{var i,s;const a={texts:Object.assign(Object.assign({},t),(null==n?void 0:n.texts)||[]),classNames:Object.assign(Object.assign({},e),(null==n?void 0:n.classNames)||[]),container:null!==(i=null==n?void 0:n.container)&&void 0!==i?i:null},r=document.createElement("div");r.classList.add(a.classNames.dotsContainer);let d=null;const l=()=>{r.setAttribute("data-has-content",o.details.hasOverflow.toString()),r.innerHTML="";const t=document.createElement("ul"),e=o.details.slideCount,n=o.activeSlideIdx;if(!(e<=1)){for(let o=0;o<e;o++){const i=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",a.classNames.dotsItem),s.setAttribute("aria-label",a.texts.dotDescription.replace("%d",(o+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(o===n).toString()),s.setAttribute("data-item",(o+1).toString()),i.appendChild(s),t.appendChild(i),s.addEventListener("click",()=>c(o+1)),s.addEventListener("focus",()=>d=o+1),s.addEventListener("keydown",t=>{var n;const o=r.querySelector('[aria-pressed="true"]');if(!o)return;const i=parseInt(null!==(n=o.getAttribute("data-item"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=i-1;if(t>0){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}if("ArrowRight"===t.key){const t=i+1;if(t<=e){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}})}if(r.appendChild(t),d){const t=r.querySelector(`[data-item="${d}"]`);t&&t.focus()}}},c=t=>{o.moveToSlide(t-1)};l(),a.container?a.container.appendChild(r):null===(s=o.container.parentNode)||void 0===s||s.insertBefore(r,o.container.nextSibling),o.on("scrollEnd",l),o.on("contentsChanged",l),o.on("containerSizeChanged",l)}}export{n as default};

package/dist/plugins/drag-scrolling/index.d.ts

@@ -0,0 +1,9 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type DragScrollingOptions = {
+    draggedDistanceThatPreventsClick: number;
+};
+declare function DragScrollingPlugin(args?: DeepPartial<DragScrollingOptions>): (slider: Slider) => void;
+
+export { DragScrollingPlugin as default };
+export type { DragScrollingOptions };

package/dist/plugins/drag-scrolling/index.esm.js

@@ -22,7 +22,7 @@ function DragScrollingPlugin(args) {
                 return;
             }
             isMouseDown = true;
-            startX = e.pageX - slider.container.offsetLeft;
+            startX = e.pageX - slider.container.getBoundingClientRect().left;
             scrollLeft = slider.container.scrollLeft;
             // change cursor to grabbing
             slider.container.style.cursor = 'grabbing';
@@ -45,7 +45,7 @@ function DragScrollingPlugin(args) {
                 programmaticScrollStarted = true;
                 slider.emit('programmaticScrollStart');
             }
-            const x = e.pageX - slider.container.offsetLeft;
+            const x = e.pageX - slider.container.getBoundingClientRect().left;
             const walk = (x - startX);
             const newScrollLeft = scrollLeft - walk;
             mayNeedToSnap = true;

package/dist/plugins/drag-scrolling/index.min.js

@@ -1 +1 @@
-function e(e){var t;const o=null!==(t=null==e?void 0:e.draggedDistanceThatPreventsClick)&&void 0!==t?t:20;return e=>{let t=!1,n=0,r=0,a=!1,l=!1,s=!1;e.container.setAttribute("data-has-drag-scrolling","true");if(window.addEventListener("mousedown",(o=>{l=!1,e.details.hasOverflow&&e.container.contains(o.target)&&(t=!0,n=o.pageX-e.container.offsetLeft,r=e.container.scrollLeft,e.container.style.cursor="grabbing",e.container.style.scrollBehavior="auto",o.preventDefault(),o.stopPropagation())})),window.addEventListener("mousemove",(i=>{if(!e.details.hasOverflow)return void(l=!1);if(!t)return void(l=!1);i.preventDefault(),l||(l=!0,e.emit("programmaticScrollStart"));const c=i.pageX-e.container.offsetLeft-n,d=r-c;s=!0,Math.floor(e.container.scrollLeft)!==Math.floor(d)&&(a=e.container.scrollLeft<d),e.container.scrollLeft=d;const f=Math.abs(c),u=e.container.querySelectorAll(e.options.slidesSelector),v=f>o?"none":"";u.forEach((e=>{e.style.pointerEvents=v}))})),window.addEventListener("mouseup",(()=>{e.details.hasOverflow?(t=!1,e.container.style.cursor="",setTimeout((()=>{l=!1,e.container.style.scrollBehavior="";e.container.querySelectorAll(e.options.slidesSelector).forEach((e=>{e.style.pointerEvents=""}))}),50)):l=!1})),e.options.emulateScrollSnap){const o=()=>{s&&!t&&(s=!1,e.snapToClosestSlide(a?"next":"prev"))};e.on("programmaticScrollEnd",o),window.addEventListener("mouseup",o)}}}export{e as default};
+function e(e){var t;const o=null!==(t=null==e?void 0:e.draggedDistanceThatPreventsClick)&&void 0!==t?t:20;return e=>{let t=!1,n=0,r=0,a=!1,l=!1,i=!1;e.container.setAttribute("data-has-drag-scrolling","true");if(window.addEventListener("mousedown",o=>{l=!1,e.details.hasOverflow&&e.container.contains(o.target)&&(t=!0,n=o.pageX-e.container.getBoundingClientRect().left,r=e.container.scrollLeft,e.container.style.cursor="grabbing",e.container.style.scrollBehavior="auto",o.preventDefault(),o.stopPropagation())}),window.addEventListener("mousemove",s=>{if(!e.details.hasOverflow)return void(l=!1);if(!t)return void(l=!1);s.preventDefault(),l||(l=!0,e.emit("programmaticScrollStart"));const c=s.pageX-e.container.getBoundingClientRect().left-n,d=r-c;i=!0,Math.floor(e.container.scrollLeft)!==Math.floor(d)&&(a=e.container.scrollLeft<d),e.container.scrollLeft=d;const u=Math.abs(c),v=e.container.querySelectorAll(e.options.slidesSelector),f=u>o?"none":"";v.forEach(e=>{e.style.pointerEvents=f})}),window.addEventListener("mouseup",()=>{e.details.hasOverflow?(t=!1,e.container.style.cursor="",setTimeout(()=>{l=!1,e.container.style.scrollBehavior="";e.container.querySelectorAll(e.options.slidesSelector).forEach(e=>{e.style.pointerEvents=""})},50)):l=!1}),e.options.emulateScrollSnap){const o=()=>{i&&!t&&(i=!1,e.snapToClosestSlide(a?"next":"prev"))};e.on("programmaticScrollEnd",o),window.addEventListener("mouseup",o)}}}export{e as default};

package/dist/plugins/fade/index.d.ts

@@ -0,0 +1,16 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type FadeOptions = {
+    classNames: {
+        fadeItem: string;
+        fadeItemStart: string;
+        fadeItemEnd: string;
+    };
+    container: HTMLElement | null;
+    containerStart: HTMLElement | null;
+    containerEnd: HTMLElement | null;
+};
+declare function FadePlugin(args?: DeepPartial<FadeOptions>): (slider: Slider) => void;
+
+export { FadePlugin as default };
+export type { FadeOptions };

package/dist/plugins/fade/index.min.js

@@ -1 +1 @@
-function t(t){return e=>{var n,a,o;const i={classNames:{fadeItem:"overflow-slider-fade",fadeItemStart:"overflow-slider-fade--start",fadeItemEnd:"overflow-slider-fade--end"},container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null,containerStart:null!==(a=null==t?void 0:t.containerStart)&&void 0!==a?a:null,containerEnd:null!==(o=null==t?void 0:t.containerEnd)&&void 0!==o?o:null},l=document.createElement("div");l.classList.add(i.classNames.fadeItem,i.classNames.fadeItemStart),l.setAttribute("aria-hidden","true"),l.setAttribute("tabindex","-1");const r=document.createElement("div");r.classList.add(i.classNames.fadeItem,i.classNames.fadeItemEnd),r.setAttribute("aria-hidden","true"),r.setAttribute("tabindex","-1"),i.containerStart?i.containerStart.appendChild(l):i.container&&i.container.appendChild(l),i.containerEnd?i.containerEnd.appendChild(r):i.container&&i.container.appendChild(r);const d=()=>{l.setAttribute("data-has-fade",(e.getScrollLeft()>l.offsetWidth).toString()),l.style.opacity=(()=>{const t=e.getScrollLeft();return Math.floor(t)<=Math.floor(l.offsetWidth)?t/Math.max(l.offsetWidth,1):1})().toString(),r.setAttribute("data-has-fade",(Math.floor(e.getScrollLeft())<Math.floor(e.getInclusiveScrollWidth()-e.getInclusiveClientWidth()-r.offsetWidth)).toString()),r.style.opacity=(()=>{const t=e.getScrollLeft(),n=e.getInclusiveScrollWidth()-e.getInclusiveClientWidth()-r.offsetWidth;return Math.floor(t)>=Math.floor(n)?(n-t)/Math.max(r.offsetWidth,1)+1:1})().toString()};d(),e.on("created",d),e.on("contentsChanged",d),e.on("containerSizeChanged",d),e.on("scrollEnd",d),e.on("scrollStart",d);let s=0;e.on("scroll",(()=>{s&&window.cancelAnimationFrame(s),s=window.requestAnimationFrame((()=>{d()}))}))}}export{t as default};
+function t(t){return e=>{var n,a,o;const i={classNames:{fadeItem:"overflow-slider-fade",fadeItemStart:"overflow-slider-fade--start",fadeItemEnd:"overflow-slider-fade--end"},container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null,containerStart:null!==(a=null==t?void 0:t.containerStart)&&void 0!==a?a:null,containerEnd:null!==(o=null==t?void 0:t.containerEnd)&&void 0!==o?o:null},l=document.createElement("div");l.classList.add(i.classNames.fadeItem,i.classNames.fadeItemStart),l.setAttribute("aria-hidden","true"),l.setAttribute("tabindex","-1");const r=document.createElement("div");r.classList.add(i.classNames.fadeItem,i.classNames.fadeItemEnd),r.setAttribute("aria-hidden","true"),r.setAttribute("tabindex","-1"),i.containerStart?i.containerStart.appendChild(l):i.container&&i.container.appendChild(l),i.containerEnd?i.containerEnd.appendChild(r):i.container&&i.container.appendChild(r);const d=()=>{l.setAttribute("data-has-fade",(e.getScrollLeft()>l.offsetWidth).toString()),l.style.opacity=(()=>{const t=e.getScrollLeft();return Math.floor(t)<=Math.floor(l.offsetWidth)?t/Math.max(l.offsetWidth,1):1})().toString(),r.setAttribute("data-has-fade",(Math.floor(e.getScrollLeft())<Math.floor(e.getInclusiveScrollWidth()-e.getInclusiveClientWidth()-r.offsetWidth)).toString()),r.style.opacity=(()=>{const t=e.getScrollLeft(),n=e.getInclusiveScrollWidth()-e.getInclusiveClientWidth()-r.offsetWidth;return Math.floor(t)>=Math.floor(n)?(n-t)/Math.max(r.offsetWidth,1)+1:1})().toString()};d(),e.on("created",d),e.on("contentsChanged",d),e.on("containerSizeChanged",d),e.on("scrollEnd",d),e.on("scrollStart",d);let s=0;e.on("scroll",()=>{s&&window.cancelAnimationFrame(s),s=window.requestAnimationFrame(()=>{d()})})}}export{t as default};

package/dist/plugins/full-width/index.d.ts

@@ -0,0 +1,11 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type FullWidthOptions = {
+    targetWidth?: (slider: Slider) => number;
+    addMarginBefore: boolean;
+    addMarginAfter: boolean;
+};
+declare function FullWidthPlugin(args?: DeepPartial<FullWidthOptions>): (slider: Slider) => void;
+
+export { FullWidthPlugin as default };
+export type { FullWidthOptions };

package/dist/plugins/full-width/index.esm.js

@@ -1,31 +1,59 @@
 const DEFAULT_TARGET_WIDTH = (slider) => { var _a, _b; return (_b = (_a = slider.container.parentElement) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : window.innerWidth; };
 function FullWidthPlugin(args) {
     return (slider) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const options = {
-            targetWidth: (_a = args === null || args === void 0 ? void 0 : args.targetWidth) !== null && _a !== void 0 ? _a : DEFAULT_TARGET_WIDTH,
+            targetWidth: (_a = args === null || args === void 0 ? void 0 : args.targetWidth) !== null && _a !== void 0 ? _a : undefined,
             addMarginBefore: (_b = args === null || args === void 0 ? void 0 : args.addMarginBefore) !== null && _b !== void 0 ? _b : true,
             addMarginAfter: (_c = args === null || args === void 0 ? void 0 : args.addMarginAfter) !== null && _c !== void 0 ? _c : true,
         };
+        if (typeof slider.options.targetWidth !== 'function') {
+            slider.options.targetWidth = (_d = options.targetWidth) !== null && _d !== void 0 ? _d : DEFAULT_TARGET_WIDTH;
+        }
+        const resolveTargetWidth = () => {
+            var _a;
+            if (typeof slider.options.targetWidth === 'function') {
+                return slider.options.targetWidth;
+            }
+            return (_a = options.targetWidth) !== null && _a !== void 0 ? _a : DEFAULT_TARGET_WIDTH;
+        };
         const update = () => {
             const slides = slider.container.querySelectorAll(slider.options.slidesSelector);
             if (!slides.length) {
                 return;
             }
+            const targetWidthFn = resolveTargetWidth();
+            const rawMargin = (window.innerWidth - targetWidthFn(slider)) / 2;
+            const marginAmount = Math.max(0, Math.floor(rawMargin));
+            const marginValue = marginAmount ? `${marginAmount}px` : '';
+            slides.forEach((slide) => {
+                const element = slide;
+                element.style.marginInlineStart = '';
+                element.style.marginInlineEnd = '';
+            });
             const firstSlide = slides[0];
             const lastSlide = slides[slides.length - 1];
-            const marginAmount = Math.floor((window.innerWidth - options.targetWidth(slider)) / 2);
             if (options.addMarginBefore) {
-                firstSlide.style.marginInlineStart = `${marginAmount}px`;
+                firstSlide.style.marginInlineStart = marginValue;
+                slider.container.style.setProperty('scroll-padding-inline-start', marginValue || '0px');
+            }
+            else {
+                slider.container.style.removeProperty('scroll-padding-inline-start');
             }
             if (options.addMarginAfter) {
-                lastSlide.style.marginInlineEnd = `${marginAmount}px`;
+                lastSlide.style.marginInlineEnd = marginValue;
+                slider.container.style.setProperty('scroll-padding-inline-end', marginValue || '0px');
+            }
+            else {
+                slider.container.style.removeProperty('scroll-padding-inline-end');
             }
-            slider.container.setAttribute('data-full-width-offset', marginAmount.toString());
-            setCSS();
+            slider.container.setAttribute('data-full-width-offset', `${marginAmount}`);
+            setCSS(targetWidthFn);
+            slider.emit('fullWidthPluginUpdate');
         };
-        const setCSS = () => {
-            slider.container.style.setProperty('--slider-container-target-width', `${options.targetWidth(slider)}px`);
+        const setCSS = (targetWidthFn) => {
+            const width = targetWidthFn(slider);
+            slider.options.cssVariableContainer.style.setProperty('--slider-container-target-width', `${width}px`);
         };
         update();
         slider.on('contentsChanged', update);

package/dist/plugins/full-width/index.min.js

@@ -1 +1 @@
-const t=t=>{var n,e;return null!==(e=null===(n=t.container.parentElement)||void 0===n?void 0:n.offsetWidth)&&void 0!==e?e:window.innerWidth};function n(n){return e=>{var i,r,d;const o={targetWidth:null!==(i=null==n?void 0:n.targetWidth)&&void 0!==i?i:t,addMarginBefore:null===(r=null==n?void 0:n.addMarginBefore)||void 0===r||r,addMarginAfter:null===(d=null==n?void 0:n.addMarginAfter)||void 0===d||d},a=()=>{const t=e.container.querySelectorAll(e.options.slidesSelector);if(!t.length)return;const n=t[0],i=t[t.length-1],r=Math.floor((window.innerWidth-o.targetWidth(e))/2);o.addMarginBefore&&(n.style.marginInlineStart=`${r}px`),o.addMarginAfter&&(i.style.marginInlineEnd=`${r}px`),e.container.setAttribute("data-full-width-offset",r.toString()),l()},l=()=>{e.container.style.setProperty("--slider-container-target-width",`${o.targetWidth(e)}px`)};a(),e.on("contentsChanged",a),e.on("containerSizeChanged",a),window.addEventListener("resize",a)}}export{n as default};
+const t=t=>{var n,e;return null!==(e=null===(n=t.container.parentElement)||void 0===n?void 0:n.offsetWidth)&&void 0!==e?e:window.innerWidth};function n(n){return e=>{var i,r,o,d;const l={targetWidth:null!==(i=null==n?void 0:n.targetWidth)&&void 0!==i?i:void 0,addMarginBefore:null===(r=null==n?void 0:n.addMarginBefore)||void 0===r||r,addMarginAfter:null===(o=null==n?void 0:n.addMarginAfter)||void 0===o||o};"function"!=typeof e.options.targetWidth&&(e.options.targetWidth=null!==(d=l.targetWidth)&&void 0!==d?d:t);const a=()=>{const n=e.container.querySelectorAll(e.options.slidesSelector);if(!n.length)return;const i=(()=>{var n;return"function"==typeof e.options.targetWidth?e.options.targetWidth:null!==(n=l.targetWidth)&&void 0!==n?n:t})(),r=(window.innerWidth-i(e))/2,o=Math.max(0,Math.floor(r)),d=o?`${o}px`:"";n.forEach(t=>{const n=t;n.style.marginInlineStart="",n.style.marginInlineEnd=""});const a=n[0],c=n[n.length-1];l.addMarginBefore?(a.style.marginInlineStart=d,e.container.style.setProperty("scroll-padding-inline-start",d||"0px")):e.container.style.removeProperty("scroll-padding-inline-start"),l.addMarginAfter?(c.style.marginInlineEnd=d,e.container.style.setProperty("scroll-padding-inline-end",d||"0px")):e.container.style.removeProperty("scroll-padding-inline-end"),e.container.setAttribute("data-full-width-offset",`${o}`),s(i),e.emit("fullWidthPluginUpdate")},s=t=>{const n=t(e);e.options.cssVariableContainer.style.setProperty("--slider-container-target-width",`${n}px`)};a(),e.on("contentsChanged",a),e.on("containerSizeChanged",a),window.addEventListener("resize",a)}}export{n as default};

package/dist/plugins/infinite-scroll/index.d.ts

@@ -0,0 +1,25 @@
+import { SliderPlugin } from '../core/index.js';
+
+/**
+ * Infinite‐scroll plugin
+ *
+ * Experimental work-in-progress not available for public use yet.
+ */
+
+/**
+ * @typedef {Object} InfiniteScrollOptions
+ * @property {number} [lookAheadCount=1] Number of slides to look ahead when deciding to reparent.
+ */
+/**
+ * Creates an infinite scroll plugin for a slider that re-parents multiple slides
+ * before hitting the container edge, to avoid blank space and keep the same
+ * active slide visible.
+ *
+ * @param {InfiniteScrollOptions} [options] Plugin configuration.
+ * @returns {SliderPlugin} The configured slider plugin.
+ */
+declare function InfiniteScrollPlugin(options?: {
+    lookAheadCount?: number;
+}): SliderPlugin;
+
+export { InfiniteScrollPlugin as default };

package/dist/plugins/infinite-scroll/index.esm.js

@@ -0,0 +1,75 @@
+/**
+ * @typedef {Object} InfiniteScrollOptions
+ * @property {number} [lookAheadCount=1] Number of slides to look ahead when deciding to reparent.
+ */
+/**
+ * Creates an infinite scroll plugin for a slider that re-parents multiple slides
+ * before hitting the container edge, to avoid blank space and keep the same
+ * active slide visible.
+ *
+ * @param {InfiniteScrollOptions} [options] Plugin configuration.
+ * @returns {SliderPlugin} The configured slider plugin.
+ */
+function InfiniteScrollPlugin(options = {}) {
+    const { lookAheadCount = 1 } = options;
+    return (slider) => {
+        const { container, options: sliderOpts } = slider;
+        /**
+         * Sum widths of the first or last N slides for lookahead.
+         *
+         * @param {HTMLElement[]} slides List of slide elements.
+         * @param {boolean} fromEnd If true, sum last N; otherwise, first N.
+         * @returns {number} Total pixel width of N slides.
+         */
+        function getLookAheadWidth(slides, fromEnd) {
+            const slice = fromEnd
+                ? slides.slice(-lookAheadCount)
+                : slides.slice(0, lookAheadCount);
+            return slice.reduce((total, slide) => total + slide.offsetWidth, 0);
+        }
+        /**
+         * Handler for slider.scrollEnd event that re-parents slides
+         * and retains the active slide element by recalculating its
+         * new index after DOM shifts.
+         */
+        function onScroll() {
+            const activeSlideIdx = slider.activeSlideIdx;
+            const scrollLeft = slider.getScrollLeft();
+            const viewportWidth = slider.getInclusiveClientWidth();
+            const totalWidth = slider.getInclusiveScrollWidth();
+            // Grab current slide elements
+            let slides = Array.from(container.querySelectorAll(sliderOpts.slidesSelector));
+            if (slides.length === 0)
+                return;
+            // Store reference to currently active slide element
+            const activeSlideEl = slides[activeSlideIdx];
+            const aheadRight = getLookAheadWidth(slides, false);
+            const aheadLeft = getLookAheadWidth(slides, true);
+            // 🐆 Tip: Batch DOM reads/writes inside requestAnimationFrame to avoid thrashing.
+            if (scrollLeft + viewportWidth >= totalWidth - aheadRight) {
+                for (let i = 0; i < lookAheadCount && slides.length; i++) {
+                    container.append(slides.shift());
+                }
+            }
+            else if (scrollLeft <= aheadLeft) {
+                for (let i = 0; i < lookAheadCount && slides.length; i++) {
+                    container.prepend(slides.pop());
+                }
+            }
+            slider.setActiveSlideIdx();
+            // Re-query slides after DOM mutation
+            slides = Array.from(container.querySelectorAll(sliderOpts.slidesSelector));
+            const newIndex = slides.indexOf(activeSlideEl);
+            slides[newIndex];
+            if (newIndex >= 0 && slider.canMoveToSlide(newIndex)) {
+                slider.moveToSlide(newIndex);
+            }
+            else {
+                slider.snapToClosestSlide('next');
+            }
+        }
+        slider.on('scrollEnd', onScroll);
+    };
+}
+
+export { InfiniteScrollPlugin as default };

package/dist/plugins/infinite-scroll/index.min.js

@@ -0,0 +1 @@
+function e(e={}){const{lookAheadCount:t=1}=e;return e=>{const{container:l,options:o}=e;function n(e,l){return(l?e.slice(-t):e.slice(0,t)).reduce((e,t)=>e+t.offsetWidth,0)}e.on("scrollEnd",function(){const i=e.activeSlideIdx,r=e.getScrollLeft(),c=e.getInclusiveClientWidth(),s=e.getInclusiveScrollWidth();let d=Array.from(l.querySelectorAll(o.slidesSelector));if(0===d.length)return;const f=d[i],u=n(d,!1),S=n(d,!0);if(r+c>=s-u)for(let e=0;e<t&&d.length;e++)l.append(d.shift());else if(r<=S)for(let e=0;e<t&&d.length;e++)l.prepend(d.pop());e.setActiveSlideIdx(),d=Array.from(l.querySelectorAll(o.slidesSelector));const a=d.indexOf(f);d[a],a>=0&&e.canMoveToSlide(a)?e.moveToSlide(a):e.snapToClosestSlide("next")})}}export{e as default};

package/dist/plugins/scroll-indicator/index.d.ts

@@ -0,0 +1,14 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type ScrollIndicatorOptions = {
+    classNames: {
+        scrollIndicator: string;
+        scrollIndicatorBar: string;
+        scrollIndicatorButton: string;
+    };
+    container: HTMLElement | null;
+};
+declare function ScrollIndicatorPlugin(args?: DeepPartial<ScrollIndicatorOptions>): (slider: Slider) => void;
+
+export { ScrollIndicatorPlugin as default };
+export type { ScrollIndicatorOptions };

package/dist/plugins/scroll-indicator/index.esm.js

@@ -84,11 +84,13 @@ function ScrollIndicatorPlugin(args) {
             const scrollbarButtonWidth = scrollbarButton.offsetWidth;
             const scrollbarButtonLeft = getScrollbarButtonLeftOffset();
             const scrollbarButtonRight = scrollbarButtonLeft + scrollbarButtonWidth;
-            const clickX = e.pageX - Math.abs(scrollbarContainer.offsetLeft);
+            const clickX = e.pageX - scrollbarContainer.getBoundingClientRect().left;
             if (Math.floor(clickX) < Math.floor(scrollbarButtonLeft)) {
+                console.log('move left');
                 slider.moveToDirection(slider.options.rtl ? 'next' : 'prev');
             }
             else if (Math.floor(clickX) > Math.floor(scrollbarButtonRight)) {
+                console.log('move right');
                 slider.moveToDirection(slider.options.rtl ? 'prev' : 'next');
             }
         });

package/dist/plugins/scroll-indicator/index.min.js

@@ -1 +1 @@
-const t={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};function e(e){return o=>{var r,n,i;const a={classNames:Object.assign(Object.assign({},t),(null==e?void 0:e.classNames)||[]),container:null!==(r=null==e?void 0:e.container)&&void 0!==r?r:null},s=document.createElement("div");s.setAttribute("class",a.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(n=o.container.getAttribute("id"))&&void 0!==n?n:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const l=document.createElement("div");l.setAttribute("class",a.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",a.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),l.appendChild(c),s.appendChild(l);const d=()=>{s.setAttribute("data-has-overflow",o.details.hasOverflow.toString())};d();const u=()=>{const t=c.offsetWidth/o.details.containerWidth,e=o.getScrollLeft()*t;return o.options.rtl?l.offsetWidth-c.offsetWidth-e:e};let f=0;const v=()=>{f&&window.cancelAnimationFrame(f),f=window.requestAnimationFrame((()=>{const t=o.details.containerWidth/o.container.scrollWidth*100,e=u();c.style.width=`${t}%`,c.style.transform=`translateX(${e}px)`;const r=o.getScrollLeft()/(o.getInclusiveScrollWidth()-o.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(r)?0:r).toString())}))};a.container?a.container.appendChild(s):null===(i=o.container.parentNode)||void 0===i||i.insertBefore(s,o.container.nextSibling),v(),o.on("scroll",v),o.on("contentsChanged",v),o.on("containerSizeChanged",v),o.on("detailsChanged",d),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?o.moveToDirection("prev"):"ArrowRight"===t.key&&o.moveToDirection("next")}));let b=!1,h=0,m=o.getScrollLeft();s.addEventListener("click",(t=>{if(t.target==c)return;const e=c.offsetWidth,r=u(),n=r+e,i=t.pageX-Math.abs(s.offsetLeft);Math.floor(i)<Math.floor(r)?o.moveToDirection(o.options.rtl?"next":"prev"):Math.floor(i)>Math.floor(n)&&o.moveToDirection(o.options.rtl?"prev":"next")}));const g=t=>{b=!0;const e=t.pageX||t.touches[0].pageX;h=e-s.offsetLeft,m=o.getScrollLeft(),c.style.cursor="grabbing",c.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()},p=t=>{if(!b)return;t.preventDefault();const e=(t.pageX||t.touches[0].pageX)-s.offsetLeft,r=o.details.scrollableAreaWidth/s.offsetWidth,n=(e-h)*r,i=o.options.rtl?m-n:m+n;o.setScrollLeft(i)},w=()=>{b=!1,c.style.cursor="",c.setAttribute("data-is-grabbed","false")};c.addEventListener("mousedown",g),c.addEventListener("touchstart",g),window.addEventListener("mousemove",p),window.addEventListener("touchmove",p,{passive:!1}),window.addEventListener("mouseup",w),window.addEventListener("touchend",w)}}export{e as default};
+const t={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};function e(e){return o=>{var n,r,i;const a={classNames:Object.assign(Object.assign({},t),(null==e?void 0:e.classNames)||[]),container:null!==(n=null==e?void 0:e.container)&&void 0!==n?n:null},s=document.createElement("div");s.setAttribute("class",a.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(r=o.container.getAttribute("id"))&&void 0!==r?r:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const l=document.createElement("div");l.setAttribute("class",a.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",a.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),l.appendChild(c),s.appendChild(l);const d=()=>{s.setAttribute("data-has-overflow",o.details.hasOverflow.toString())};d();const u=()=>{const t=c.offsetWidth/o.details.containerWidth,e=o.getScrollLeft()*t;return o.options.rtl?l.offsetWidth-c.offsetWidth-e:e};let f=0;const v=()=>{f&&window.cancelAnimationFrame(f),f=window.requestAnimationFrame(()=>{const t=o.details.containerWidth/o.container.scrollWidth*100,e=u();c.style.width=`${t}%`,c.style.transform=`translateX(${e}px)`;const n=o.getScrollLeft()/(o.getInclusiveScrollWidth()-o.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(n)?0:n).toString())})};a.container?a.container.appendChild(s):null===(i=o.container.parentNode)||void 0===i||i.insertBefore(s,o.container.nextSibling),v(),o.on("scroll",v),o.on("contentsChanged",v),o.on("containerSizeChanged",v),o.on("detailsChanged",d),s.addEventListener("keydown",t=>{"ArrowLeft"===t.key?o.moveToDirection("prev"):"ArrowRight"===t.key&&o.moveToDirection("next")});let b=!1,h=0,g=o.getScrollLeft();s.addEventListener("click",t=>{if(t.target==c)return;const e=c.offsetWidth,n=u(),r=n+e,i=t.pageX-s.getBoundingClientRect().left;Math.floor(i)<Math.floor(n)?(console.log("move left"),o.moveToDirection(o.options.rtl?"next":"prev")):Math.floor(i)>Math.floor(r)&&(console.log("move right"),o.moveToDirection(o.options.rtl?"prev":"next"))});const m=t=>{b=!0;const e=t.pageX||t.touches[0].pageX;h=e-s.offsetLeft,g=o.getScrollLeft(),c.style.cursor="grabbing",c.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()},p=t=>{if(!b)return;t.preventDefault();const e=(t.pageX||t.touches[0].pageX)-s.offsetLeft,n=o.details.scrollableAreaWidth/s.offsetWidth,r=(e-h)*n,i=o.options.rtl?g-r:g+r;o.setScrollLeft(i)},w=()=>{b=!1,c.style.cursor="",c.setAttribute("data-is-grabbed","false")};c.addEventListener("mousedown",m),c.addEventListener("touchstart",m),window.addEventListener("mousemove",p),window.addEventListener("touchmove",p,{passive:!1}),window.addEventListener("mouseup",w),window.addEventListener("touchend",w)}}export{e as default};

package/dist/plugins/skip-links/index.d.ts

@@ -0,0 +1,17 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type SkipLinkOptions = {
+    texts: {
+        skipList: string;
+    };
+    classNames: {
+        skipLink: string;
+        skipLinkTarget: string;
+    };
+    containerBefore: HTMLElement | null;
+    containerAfter: HTMLElement | null;
+};
+declare function SkipLinksPlugin(args?: DeepPartial<SkipLinkOptions>): (slider: Slider) => void;
+
+export { SkipLinksPlugin as default };
+export type { SkipLinkOptions };

package/dist/plugins/skip-links/index.esm.js

@@ -1,4 +1,10 @@
-import { generateId } from '../../core/utils.esm.js';
+function generateId(prefix, i = 1) {
+    const id = `${prefix}-${i}`;
+    if (document.getElementById(id)) {
+        return generateId(prefix, i + 1);
+    }
+    return id;
+}
 
 const DEFAULT_TEXTS = {
     skipList: 'Skip list'

package/dist/plugins/skip-links/index.min.js

@@ -1 +1 @@
-import{generateId as e}from"../../core/utils.min.js";const t={skipList:"Skip list"},n={skipLink:"screen-reader-text",skipLinkTarget:"overflow-slider__skip-link-target"};function i(i){return r=>{var o,s,a,l,c,d;const u={texts:Object.assign(Object.assign({},t),(null==i?void 0:i.texts)||[]),classNames:Object.assign(Object.assign({},n),(null==i?void 0:i.classNames)||[]),containerBefore:null!==(o=null==i?void 0:i.containerAfter)&&void 0!==o?o:null,containerAfter:null!==(s=null==i?void 0:i.containerAfter)&&void 0!==s?s:null},f=e("overflow-slider-skip"),p=document.createElement("a");p.setAttribute("href",`#${f}`),p.textContent=u.texts.skipList,p.classList.add(u.classNames.skipLink);const v=document.createElement("div");v.setAttribute("id",f),v.setAttribute("tabindex","-1"),u.containerBefore?null===(a=u.containerBefore.parentNode)||void 0===a||a.insertBefore(p,u.containerBefore):null===(l=r.container.parentNode)||void 0===l||l.insertBefore(p,r.container),u.containerAfter?null===(c=u.containerAfter.parentNode)||void 0===c||c.insertBefore(v,u.containerAfter.nextSibling):null===(d=r.container.parentNode)||void 0===d||d.insertBefore(v,r.container.nextSibling)}}export{i as default};
+function e(t,n=1){const i=`${t}-${n}`;return document.getElementById(i)?e(t,n+1):i}const t={skipList:"Skip list"},n={skipLink:"screen-reader-text",skipLinkTarget:"overflow-slider__skip-link-target"};function i(i){return r=>{var o,s,a,l,c,d;const u={texts:Object.assign(Object.assign({},t),(null==i?void 0:i.texts)||[]),classNames:Object.assign(Object.assign({},n),(null==i?void 0:i.classNames)||[]),containerBefore:null!==(o=null==i?void 0:i.containerAfter)&&void 0!==o?o:null,containerAfter:null!==(s=null==i?void 0:i.containerAfter)&&void 0!==s?s:null},f=e("overflow-slider-skip"),v=document.createElement("a");v.setAttribute("href",`#${f}`),v.textContent=u.texts.skipList,v.classList.add(u.classNames.skipLink);const p=document.createElement("div");p.setAttribute("id",f),p.setAttribute("tabindex","-1"),u.containerBefore?null===(a=u.containerBefore.parentNode)||void 0===a||a.insertBefore(v,u.containerBefore):null===(l=r.container.parentNode)||void 0===l||l.insertBefore(v,r.container),u.containerAfter?null===(c=u.containerAfter.parentNode)||void 0===c||c.insertBefore(p,u.containerAfter.nextSibling):null===(d=r.container.parentNode)||void 0===d||d.insertBefore(p,r.container.nextSibling)}}export{i as default};