@evermade/overflow-slider 2.0.1 → 3.0.0

package/.nvmrc

@@ -1 +1 @@
-v16.16.0
+v16.16.0

package/README.md

@@ -94,7 +94,7 @@ const slider = new OverflowSlider(
 You can import base styles from the library to get started. The base styles include basic styles for the slider and some plugins.
 
 ```scss
-@import "@evermade/overflow-slider/dist/overflow-slider.css";
+@import "@evermade/overflow-slider/style.css";
 ```
 
 You can use the CSS variables to override some values easily.
@@ -127,14 +127,28 @@ Auto-play is not supported at the moment but can probably be implemented as a pl
 
 ## To-do
 
-* Make drag scrolling snapping smooth (might be browser limitation)
-* Rethink dot amount calculation
 * Maybe split styles to separate files for plugins (but keep offering bundle as well)
 * Maybe add plugin that adds class for visible slides
 * Document all plugins and their parameters here
 
 ## Changelog
 
+### 3.0.0
+
+* Breaking: Change dot plugin to calculate dots based on slides instead of container width "pages"
+* Add: FadePlugin to hint that there are more slides to scroll to
+* Add: Scroll snap emulation method
+* Add: Scroll snap emulation for DragScrollingPlugin
+* Add: Hooks for different types of scrolling (any, native, programmatic)
+* Add: Hooks for different states of scrolling (start, scroll, end) for above types
+* Refactor: Scroll snapping exceptions to be handled by the core slider
+* Fix: Enhance performance by hooking some plugins only when scrolling has ended
+* Fix: Full width alignment to take into account the container offset
+
+### 2.0.2
+
+* Fix: Import style.css from correct path
+
 ### 2.0.1
 
 * Fix: Smooth scrolling for moveToSlide method

package/dist/core/overflow-slider.esm.js

@@ -10,6 +10,8 @@ function OverflowSlider(container, options, plugins) {
             scrollBehavior: "smooth",
             scrollStrategy: "fullSlide",
             slidesSelector: ":scope > *",
+            emulateScrollSnap: false,
+            emulateScrollSnapMaxThreshold: 64,
         };
         const sliderOptions = Object.assign(Object.assign({}, defaults), options);
         // disable smooth scrolling if user prefers reduced motion

package/dist/core/overflow-slider.min.js

@@ -1 +1 @@
-import e from"./slider.min.js";function o(o,r,t){try{if(!(o instanceof Element))throw new Error("Container must be HTML element, found "+typeof o);const s={scrollBehavior:"smooth",scrollStrategy:"fullSlide",slidesSelector:":scope > *"},n=Object.assign(Object.assign({},s),r);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(n.scrollBehavior="auto"),e(o,n,t)}catch(e){console.error(e)}}export{o as default};
+import e from"./slider.min.js";function o(o,r,t){try{if(!(o instanceof Element))throw new Error("Container must be HTML element, found "+typeof o);const l={scrollBehavior:"smooth",scrollStrategy:"fullSlide",slidesSelector:":scope > *",emulateScrollSnap:!1,emulateScrollSnapMaxThreshold:64},s=Object.assign(Object.assign({},l),r);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(s.scrollBehavior="auto"),e(o,s,t)}catch(e){console.error(e)}}export{o as default};

package/dist/core/slider.esm.js

@@ -69,7 +69,87 @@ function Slider(container, options, plugins) {
         const resizeObserver = new ResizeObserver(() => slider.emit('containerSizeChanged'));
         resizeObserver.observe(slider.container);
         // scroll event with debouncing
-        slider.container.addEventListener('scroll', () => slider.emit('scroll'));
+        let scrollTimeout;
+        let nativeScrollTimeout;
+        let programmaticScrollTimeout;
+        let scrollLeft = slider.container.scrollLeft;
+        let nativeScrollLeft = slider.container.scrollLeft;
+        let programmaticScrollLeft = slider.container.scrollLeft;
+        let isScrolling = false;
+        let isUserScrolling = false;
+        let isProgrammaticScrolling = false;
+        // any scroll
+        slider.container.addEventListener('scroll', () => {
+            const newScrollLeft = slider.container.scrollLeft;
+            if (scrollLeft !== newScrollLeft) {
+                if (!isScrolling) {
+                    isScrolling = true;
+                    slider.emit('scrollStart');
+                }
+                scrollLeft = newScrollLeft;
+                clearTimeout(scrollTimeout);
+                scrollTimeout = setTimeout(() => {
+                    isScrolling = false;
+                    slider.emit('scrollEnd');
+                }, 50);
+                slider.emit('scroll');
+            }
+            // keep up nativeScrolling to take into account scroll-snap
+            if (isUserScrolling) {
+                nativeScrollHandler();
+            }
+        });
+        // user initted scroll (touchmove, mouse wheel, etc.)
+        const nativeScrollHandler = () => {
+            const newScrollLeft = slider.container.scrollLeft;
+            if (nativeScrollLeft !== newScrollLeft && !isProgrammaticScrolling) {
+                if (!isUserScrolling) {
+                    slider.emit('nativeScrollStart');
+                    isUserScrolling = true;
+                }
+                slider.emit('nativeScroll');
+                nativeScrollLeft = newScrollLeft;
+                clearTimeout(nativeScrollTimeout);
+                nativeScrollTimeout = setTimeout(() => {
+                    isUserScrolling = false;
+                    slider.emit('nativeScrollEnd');
+                    // update programmaticScrollLeft to match nativeScrollLeft
+                    // this prevents programmaticScroll triggering with no real change to scrollLeft
+                    programmaticScrollLeft = nativeScrollLeft;
+                }, 50);
+            }
+        };
+        slider.container.addEventListener('touchmove', nativeScrollHandler);
+        slider.container.addEventListener('mousewheel', nativeScrollHandler);
+        slider.container.addEventListener('wheel', nativeScrollHandler);
+        // programmatic scroll (scrollTo, etc.)
+        slider.on('programmaticScrollStart', () => {
+            isProgrammaticScrolling = true;
+        });
+        slider.container.addEventListener('scroll', () => {
+            const newScrollLeft = slider.container.scrollLeft;
+            if (programmaticScrollLeft !== newScrollLeft && !isUserScrolling && isProgrammaticScrolling) {
+                programmaticScrollLeft = newScrollLeft;
+                clearTimeout(programmaticScrollTimeout);
+                programmaticScrollTimeout = setTimeout(() => {
+                    isProgrammaticScrolling = false;
+                    slider.emit('programmaticScrollEnd');
+                    // update nativeScrollLeft to match programmaticScrollLeft
+                    // this prevents nativeScroll triggering with no real change to scrollLeft
+                    nativeScrollLeft = programmaticScrollLeft;
+                }, 50);
+                slider.emit('programmaticScroll');
+            }
+        });
+        // Fix issues on scroll snapping not working on programmatic scroll (it's not smooth)
+        // by disabling scroll snap if scrolling is programmatic
+        slider.on('programmaticScrollStart', () => {
+            slider.container.style.scrollSnapType = 'none';
+        });
+        // restore scroll snap if user scroll starts
+        slider.on('nativeScrollStart', () => {
+            slider.container.style.scrollSnapType = '';
+        });
         // Listen for mouse down and touch start events on the document
         // This handles both mouse clicks and touch interactions
         let wasInteractedWith = false;
@@ -123,18 +203,14 @@ function Slider(container, options, plugins) {
         else if (slideStart === 0) {
             scrollTarget = 0;
         }
+        else {
+            scrollTarget = slideStart;
+        }
         if (scrollTarget !== null) {
-            slider.container.style.scrollSnapType = 'none';
-            // seems like in order for scroll behavior: smooth to work, we need to wait a bit to disable scrollSnapType
             setTimeout((scrollTarget) => {
+                slider.emit('programmaticScrollStart');
                 slider.container.scrollTo({ left: scrollTarget, behavior: behavior });
             }, 50, scrollTarget);
-            setTimeout(() => {
-                // leave snapping off to fix issues with slide moving back on focus
-                if (behavior == 'smooth') {
-                    slider.container.style.scrollSnapType = '';
-                }
-            }, 500);
         }
     }
     function setActiveSlideIdx() {
@@ -171,6 +247,14 @@ function Slider(container, options, plugins) {
         }
         return gapSize;
     }
+    function getLeftOffset() {
+        let offset = 0;
+        const fullWidthOffset = slider.container.getAttribute('data-full-width-offset');
+        if (fullWidthOffset) {
+            offset = parseInt(fullWidthOffset);
+        }
+        return offset;
+    }
     function moveToDirection(direction = "prev") {
         const scrollStrategy = slider.options.scrollStrategy;
         const scrollLeft = slider.container.scrollLeft;
@@ -231,10 +315,75 @@ function Slider(container, options, plugins) {
                 }
             }
         }
+        // add left offset
+        const offsettedTargetScrollPosition = targetScrollPosition - getLeftOffset();
+        if (offsettedTargetScrollPosition >= 0) {
+            targetScrollPosition = offsettedTargetScrollPosition;
+        }
+        slider.emit('programmaticScrollStart');
         slider.container.style.scrollBehavior = slider.options.scrollBehavior;
         slider.container.scrollLeft = targetScrollPosition;
         setTimeout(() => slider.container.style.scrollBehavior = '', 50);
     }
+    function snapToClosestSlide(direction = "prev") {
+        const isMovingForward = direction === 'next';
+        const slideReference = [];
+        for (let i = 0; i < slider.slides.length; i++) {
+            const slide = slider.slides[i];
+            const slideWidth = slide.offsetWidth;
+            const slideStart = slide.offsetLeft;
+            const slideEnd = slideStart + slideWidth;
+            const slideMiddle = slideStart + slideWidth / 2;
+            const trigger = Math.min(slideMiddle, slideStart + slider.options.emulateScrollSnapMaxThreshold);
+            slideReference.push({
+                start: slideStart,
+                middle: slideMiddle,
+                end: slideEnd,
+                width: slideWidth,
+                trigger: trigger,
+                slide: slide,
+            });
+        }
+        let snapTarget = null;
+        const scrollPosition = slider.container.scrollLeft;
+        if (isMovingForward) {
+            for (let i = 0; i < slideReference.length; i++) {
+                const item = slideReference[i];
+                if (i === 0 && scrollPosition <= item.trigger) {
+                    snapTarget = 0;
+                    break;
+                }
+                if (slider.container.scrollLeft <= item.trigger) {
+                    snapTarget = item.start;
+                    break;
+                }
+            }
+        }
+        else {
+            for (let i = slideReference.length - 1; i >= 0; i--) {
+                const item = slideReference[i];
+                if (i === slideReference.length - 1 && scrollPosition >= item.trigger) {
+                    snapTarget = item.start;
+                    break;
+                }
+                if (slider.container.scrollLeft >= item.trigger) {
+                    snapTarget = item.start;
+                    break;
+                }
+            }
+        }
+        if (snapTarget !== null) {
+            const offsettedSnapTarget = snapTarget - getLeftOffset();
+            if (offsettedSnapTarget >= 0) {
+                snapTarget = offsettedSnapTarget;
+            }
+            const scrollBehavior = slider.options.scrollBehavior || 'smooth';
+            slider.container.scrollTo({
+                left: snapTarget,
+                behavior: scrollBehavior
+            });
+        }
+    }
     function on(name, cb) {
         if (!subs[name]) {
             subs[name] = [];
@@ -257,6 +406,7 @@ function Slider(container, options, plugins) {
         emit,
         moveToDirection,
         moveToSlide,
+        snapToClosestSlide,
         on,
         options,
     };

package/dist/core/slider.min.js

@@ -1 +1 @@
-import e from"./details.min.js";import{generateId as t,objectsAreEqual as n}from"./utils.min.js";function i(i,o,l){let r,s={};function a(t=!1){const i=r.details,o=e(r);r.details=o,t||n(i,o)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function c(){r.slides=Array.from(r.container.querySelectorAll(r.options.slidesSelector))}function d(){r.container.style.setProperty("--slider-container-width",`${r.details.containerWidth}px`),r.container.style.setProperty("--slider-scrollable-width",`${r.details.scrollableAreaWidth}px`),r.container.style.setProperty("--slider-slides-count",`${r.details.slideCount}`)}function f(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}function u(e,t=null){const n=t||r.options.scrollBehavior,i=e.getBoundingClientRect(),o=r.container.getBoundingClientRect(),l=r.container.offsetWidth,s=r.container.scrollLeft,a=i.left-o.left+s,c=a+i.width;let d=null;a<s?d=a:c>s+l?d=c-l:0===a&&(d=0),null!==d&&(r.container.style.scrollSnapType="none",setTimeout((e=>{r.container.scrollTo({left:e,behavior:n})}),50,d),setTimeout((()=>{"smooth"==n&&(r.container.style.scrollSnapType="")}),500))}function h(){const e=r.container.getBoundingClientRect(),t=r.container.scrollLeft,n=r.slides;let i=0;for(let o=0;o<n.length;o++){if(n[o].getBoundingClientRect().left-e.left+t+m()>t){i=o;break}}const o=r.activeSlideIdx;r.activeSlideIdx=i,o!==i&&r.emit("activeSlideChanged")}function m(){let e=0;if(r.slides.length>1){const t=r.slides[0].getBoundingClientRect();e=r.slides[1].getBoundingClientRect().left-t.right}return e}return r={emit:function(e){var t;s&&s[e]&&s[e].forEach((e=>{e(r)}));const n=null===(t=null==r?void 0:r.options)||void 0===t?void 0:t[e];"function"==typeof n&&n(r)},moveToDirection:function(e="prev"){const t=r.options.scrollStrategy,n=r.container.scrollLeft,i=r.container.getBoundingClientRect(),o=r.container.offsetWidth;let l=n;if("prev"===e?l=Math.max(0,n-r.container.offsetWidth):"next"===e&&(l=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===t){let t=null;if(t="prev"===e?Math.max(0,l-m()):Math.min(r.container.scrollWidth,l+m()),"next"===e){let e=!1;for(let o of r.slides){const r=o.getBoundingClientRect(),s=r.left-i.left+n,a=s+r.width;if(s<l&&a>l){t=s,e=!0;break}}e||(t=Math.min(l,r.container.scrollWidth-r.container.offsetWidth)),t&&t>n&&(l=t)}else{let e=!1;for(let l of r.slides){const r=l.getBoundingClientRect(),s=r.left-i.left+n,a=s+r.width;if(s<n&&a>n){t=a-o,e=!0;break}}e||(t=Math.max(0,n-o)),t&&t<n&&(l=t)}}r.container.style.scrollBehavior=r.options.scrollBehavior,r.container.scrollLeft=l,setTimeout((()=>r.container.style.scrollBehavior=""),50)},moveToSlide:function(e){const t=r.slides[e];t&&u(t)},on:function(e,t){s[e]||(s[e]=[]),s[e].push(t)},options:o},function(){r.container=i;let e=i.getAttribute("id");null===e&&(e=t("overflow-slider"),i.setAttribute("id",e)),c(),a(!0),h(),r.on("contentsChanged",(()=>{c(),a(),h()})),r.on("containerSizeChanged",(()=>a()));let n=0;if(r.on("scroll",(()=>{n&&window.cancelAnimationFrame(n),n=window.requestAnimationFrame((()=>{a(),h()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container),r.container.addEventListener("scroll",(()=>r.emit("scroll")));let e=!1;r.container.addEventListener("mousedown",(()=>{e=!0})),r.container.addEventListener("touchstart",(()=>{e=!0}),{passive:!0}),r.container.addEventListener("focusin",(t=>{if(!e){let e=t.target;for(;e.parentElement!==r.container&&e.parentElement;)e=e.parentElement;u(e,"auto")}e=!1}))}(),f(),d(),l)for(const e of l)e(r);r.on("detailsChanged",(()=>{f(),d()})),r.emit("created"),r.container.setAttribute("data-ready","true")}(),r}export{i as default};
+import t from"./details.min.js";import{generateId as e,objectsAreEqual as n}from"./utils.min.js";function o(o,i,l){let r,a={};function s(e=!1){const o=r.details,i=t(r);r.details=i,e||n(o,i)?e&&r.emit("detailsChanged"):r.emit("detailsChanged")}function c(){r.slides=Array.from(r.container.querySelectorAll(r.options.slidesSelector))}function d(){r.container.style.setProperty("--slider-container-width",`${r.details.containerWidth}px`),r.container.style.setProperty("--slider-scrollable-width",`${r.details.scrollableAreaWidth}px`),r.container.style.setProperty("--slider-slides-count",`${r.details.slideCount}`)}function f(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}function u(t,e=null){const n=e||r.options.scrollBehavior,o=t.getBoundingClientRect(),i=r.container.getBoundingClientRect(),l=r.container.offsetWidth,a=r.container.scrollLeft,s=o.left-i.left+a,c=s+o.width;let d=null;d=s<a?s:c>a+l?c-l:0===s?0:s,null!==d&&setTimeout((t=>{r.emit("programmaticScrollStart"),r.container.scrollTo({left:t,behavior:n})}),50,d)}function m(){const t=r.container.getBoundingClientRect(),e=r.container.scrollLeft,n=r.slides;let o=0;for(let i=0;i<n.length;i++){if(n[i].getBoundingClientRect().left-t.left+e+h()>e){o=i;break}}const i=r.activeSlideIdx;r.activeSlideIdx=o,i!==o&&r.emit("activeSlideChanged")}function h(){let t=0;if(r.slides.length>1){const e=r.slides[0].getBoundingClientRect();t=r.slides[1].getBoundingClientRect().left-e.right}return t}function g(){let t=0;const e=r.container.getAttribute("data-full-width-offset");return e&&(t=parseInt(e)),t}return r={emit:function(t){var e;a&&a[t]&&a[t].forEach((t=>{t(r)}));const n=null===(e=null==r?void 0:r.options)||void 0===e?void 0:e[t];"function"==typeof n&&n(r)},moveToDirection:function(t="prev"){const e=r.options.scrollStrategy,n=r.container.scrollLeft,o=r.container.getBoundingClientRect(),i=r.container.offsetWidth;let l=n;if("prev"===t?l=Math.max(0,n-r.container.offsetWidth):"next"===t&&(l=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===e){let e=null;if(e="prev"===t?Math.max(0,l-h()):Math.min(r.container.scrollWidth,l+h()),"next"===t){let t=!1;for(let i of r.slides){const r=i.getBoundingClientRect(),a=r.left-o.left+n,s=a+r.width;if(a<l&&s>l){e=a,t=!0;break}}t||(e=Math.min(l,r.container.scrollWidth-r.container.offsetWidth)),e&&e>n&&(l=e)}else{let t=!1;for(let l of r.slides){const r=l.getBoundingClientRect(),a=r.left-o.left+n,s=a+r.width;if(a<n&&s>n){e=s-i,t=!0;break}}t||(e=Math.max(0,n-i)),e&&e<n&&(l=e)}}const a=l-g();a>=0&&(l=a),r.emit("programmaticScrollStart"),r.container.style.scrollBehavior=r.options.scrollBehavior,r.container.scrollLeft=l,setTimeout((()=>r.container.style.scrollBehavior=""),50)},moveToSlide:function(t){const e=r.slides[t];e&&u(e)},snapToClosestSlide:function(t="prev"){const e="next"===t,n=[];for(let t=0;t<r.slides.length;t++){const e=r.slides[t],o=e.offsetWidth,i=e.offsetLeft,l=i+o,a=i+o/2,s=Math.min(a,i+r.options.emulateScrollSnapMaxThreshold);n.push({start:i,middle:a,end:l,width:o,trigger:s,slide:e})}let o=null;const i=r.container.scrollLeft;if(e)for(let t=0;t<n.length;t++){const e=n[t];if(0===t&&i<=e.trigger){o=0;break}if(r.container.scrollLeft<=e.trigger){o=e.start;break}}else for(let t=n.length-1;t>=0;t--){const e=n[t];if(t===n.length-1&&i>=e.trigger){o=e.start;break}if(r.container.scrollLeft>=e.trigger){o=e.start;break}}if(null!==o){const t=o-g();t>=0&&(o=t);const e=r.options.scrollBehavior||"smooth";r.container.scrollTo({left:o,behavior:e})}},on:function(t,e){a[t]||(a[t]=[]),a[t].push(e)},options:i},function(){r.container=o;let t=o.getAttribute("id");null===t&&(t=e("overflow-slider"),o.setAttribute("id",t)),c(),s(!0),m(),r.on("contentsChanged",(()=>{c(),s(),m()})),r.on("containerSizeChanged",(()=>s()));let n=0;if(r.on("scroll",(()=>{n&&window.cancelAnimationFrame(n),n=window.requestAnimationFrame((()=>{s(),m()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});let t,e,n;new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container);let o=r.container.scrollLeft,i=r.container.scrollLeft,l=r.container.scrollLeft,a=!1,s=!1,c=!1;r.container.addEventListener("scroll",(()=>{const e=r.container.scrollLeft;o!==e&&(a||(a=!0,r.emit("scrollStart")),o=e,clearTimeout(t),t=setTimeout((()=>{a=!1,r.emit("scrollEnd")}),50),r.emit("scroll")),s&&d()}));const d=()=>{const t=r.container.scrollLeft;i===t||c||(s||(r.emit("nativeScrollStart"),s=!0),r.emit("nativeScroll"),i=t,clearTimeout(e),e=setTimeout((()=>{s=!1,r.emit("nativeScrollEnd"),l=i}),50))};r.container.addEventListener("touchmove",d),r.container.addEventListener("mousewheel",d),r.container.addEventListener("wheel",d),r.on("programmaticScrollStart",(()=>{c=!0})),r.container.addEventListener("scroll",(()=>{const t=r.container.scrollLeft;l!==t&&!s&&c&&(l=t,clearTimeout(n),n=setTimeout((()=>{c=!1,r.emit("programmaticScrollEnd"),i=l}),50),r.emit("programmaticScroll"))})),r.on("programmaticScrollStart",(()=>{r.container.style.scrollSnapType="none"})),r.on("nativeScrollStart",(()=>{r.container.style.scrollSnapType=""}));let f=!1;r.container.addEventListener("mousedown",(()=>{f=!0})),r.container.addEventListener("touchstart",(()=>{f=!0}),{passive:!0}),r.container.addEventListener("focusin",(t=>{if(!f){let e=t.target;for(;e.parentElement!==r.container&&e.parentElement;)e=e.parentElement;u(e,"auto")}f=!1}))}(),f(),d(),l)for(const t of l)t(r);r.on("detailsChanged",(()=>{f(),d()})),r.emit("created"),r.container.setAttribute("data-ready","true")}(),r}export{o as default};

package/dist/overflow-slider.css

@@ -1 +1 @@
-.overflow-slider{-ms-overflow-style:none;display:grid;grid-auto-flow:column;grid-template-columns:max-content;max-width:-moz-max-content;max-width:max-content;overflow:auto;scrollbar-width:none;width:100%}.overflow-slider::-webkit-scrollbar{display:none}.overflow-slider>*{outline-offset:-2px;scroll-snap-align:start}:root{--overflow-slider-arrows-size:1.5rem;--overflow-slider-arrows-gap:.5rem;--overflow-slider-arrows-inactive-opacity:0.5}.overflow-slider__arrows{display:flex;gap:var(--overflow-slider-arrows-gap)}.overflow-slider__arrows-button{align-items:center;cursor:pointer;display:flex;outline-offset:-2px}.overflow-slider__arrows-button svg{height:var(--overflow-slider-arrows-size);width:var(--overflow-slider-arrows-size)}.overflow-slider__arrows-button[data-has-content=false]{opacity:var(--overflow-slider-arrows-inactive-opacity)}:root{--overflow-slider-dots-gap:0.5rem;--overflow-slider-dot-size:0.75rem;--overflow-slider-dot-inactive-color:rgba(0,0,0,.1);--overflow-slider-dot-active-color:rgba(0,0,0,.8)}.overflow-slider__dots{align-items:center;display:flex;justify-content:center}.overflow-slider__dots ul{display:flex;flex-wrap:wrap;gap:var(--overflow-slider-dots-gap);list-style:none;margin:0;padding:0}.overflow-slider__dots li{line-height:0;margin:0;padding:0}.overflow-slider__dot-item{background:var(--overflow-slider-dot-inactive-color);border-radius:50%;cursor:pointer;height:var(--overflow-slider-dot-size);margin:0;outline-offset:2px;padding:0;position:relative;width:var(--overflow-slider-dot-size)}.overflow-slider__dot-item:after{bottom:calc(var(--overflow-slider-dots-gap)*-1);content:"";display:block;left:calc(var(--overflow-slider-dots-gap)*-1);position:absolute;right:calc(var(--overflow-slider-dots-gap)*-1);top:calc(var(--overflow-slider-dots-gap)*-1)}.overflow-slider__dot-item:focus,.overflow-slider__dot-item:hover,.overflow-slider__dot-item[aria-pressed=true]{background:var(--overflow-slider-dot-active-color)}[data-has-drag-scrolling][data-has-overflow=true]{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}:root{--overflow-slider-scroll-indicator-button-height:4px;--overflow-slider-scroll-indicator-padding:1rem;--overflow-slider-scroll-indicator-button-color:rgba(0,0,0,.75);--overflow-slider-scroll-indicator-bar-color:rgba(0,0,0,.25)}.overflow-slider__scroll-indicator{cursor:pointer;outline:0;padding-block:var(--overflow-slider-scroll-indicator-padding);position:relative;width:100%}.overflow-slider__scroll-indicator[data-has-overflow=false]{display:none}.overflow-slider__scroll-indicator:focus-visible .overflow-slider__scroll-indicator-button{outline:2px solid;outline-offset:2px}.overflow-slider__scroll-indicator-bar{background:var(--overflow-slider-scroll-indicator-bar-color);border-radius:3px;height:2px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.overflow-slider__scroll-indicator-button{background:var(--overflow-slider-scroll-indicator-button-color);border-radius:3px;cursor:grab;height:var(--overflow-slider-scroll-indicator-button-height);left:0;position:absolute;top:calc(50% - var(--overflow-slider-scroll-indicator-button-height)/2)}.overflow-slider__scroll-indicator-button:hover,.overflow-slider__scroll-indicator-button[data-is-grabbed=true]{--overflow-slider-scroll-indicator-button-height:6px}.overflow-slider__scroll-indicator-button:after{bottom:calc(var(--overflow-slider-scroll-indicator-padding)*-1);content:"";display:block;position:absolute;top:calc(var(--overflow-slider-scroll-indicator-padding)*-1);width:100%}
+.overflow-slider{-ms-overflow-style:none;display:grid;grid-auto-flow:column;grid-template-columns:max-content;max-width:-moz-max-content;max-width:max-content;overflow:auto;position:relative;scrollbar-width:none;width:100%}.overflow-slider::-webkit-scrollbar{display:none}.overflow-slider>*{outline-offset:-2px;scroll-snap-align:start}:root{--overflow-slider-arrows-size:1.5rem;--overflow-slider-arrows-gap:.5rem;--overflow-slider-arrows-inactive-opacity:0.5}.overflow-slider__arrows{display:flex;gap:var(--overflow-slider-arrows-gap)}.overflow-slider__arrows-button{align-items:center;cursor:pointer;display:flex;outline-offset:-2px}.overflow-slider__arrows-button svg{height:var(--overflow-slider-arrows-size);width:var(--overflow-slider-arrows-size)}.overflow-slider__arrows-button[data-has-content=false]{opacity:var(--overflow-slider-arrows-inactive-opacity)}:root{--overflow-slider-dots-gap:0.5rem;--overflow-slider-dot-size:0.75rem;--overflow-slider-dot-inactive-color:rgba(0,0,0,.1);--overflow-slider-dot-active-color:rgba(0,0,0,.8)}.overflow-slider__dots{align-items:center;display:flex;justify-content:center}.overflow-slider__dots ul{display:flex;flex-wrap:wrap;gap:var(--overflow-slider-dots-gap);list-style:none;margin:0;padding:0}.overflow-slider__dots li{line-height:0;margin:0;padding:0}.overflow-slider__dot-item{background:var(--overflow-slider-dot-inactive-color);border-radius:50%;cursor:pointer;height:var(--overflow-slider-dot-size);margin:0;outline-offset:2px;padding:0;position:relative;width:var(--overflow-slider-dot-size)}.overflow-slider__dot-item:after{bottom:calc(var(--overflow-slider-dots-gap)*-1);content:"";display:block;left:calc(var(--overflow-slider-dots-gap)*-1);position:absolute;right:calc(var(--overflow-slider-dots-gap)*-1);top:calc(var(--overflow-slider-dots-gap)*-1)}.overflow-slider__dot-item:focus,.overflow-slider__dot-item:hover,.overflow-slider__dot-item[aria-pressed=true]{background:var(--overflow-slider-dot-active-color)}:root{--overflow-slider-fade-color:#fff;--overflow-slider-fade-width:3rem}.overflow-slider-fade{height:100%;pointer-events:none;position:absolute;top:0;width:var(--overflow-slider-fade-width);z-index:1}.overflow-slider-fade--start{background:linear-gradient(to right,var(--overflow-slider-fade-color) 0,transparent 100%);left:0}.overflow-slider-fade--end{background:linear-gradient(to left,var(--overflow-slider-fade-color) 0,transparent 100%);right:0}[data-has-drag-scrolling][data-has-overflow=true]{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}:root{--overflow-slider-scroll-indicator-button-height:4px;--overflow-slider-scroll-indicator-padding:1rem;--overflow-slider-scroll-indicator-button-color:rgba(0,0,0,.75);--overflow-slider-scroll-indicator-bar-color:rgba(0,0,0,.25)}.overflow-slider__scroll-indicator{cursor:pointer;outline:0;padding-block:var(--overflow-slider-scroll-indicator-padding);position:relative;width:100%}.overflow-slider__scroll-indicator[data-has-overflow=false]{display:none}.overflow-slider__scroll-indicator:focus-visible .overflow-slider__scroll-indicator-button{outline:2px solid;outline-offset:2px}.overflow-slider__scroll-indicator-bar{background:var(--overflow-slider-scroll-indicator-bar-color);border-radius:3px;height:2px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.overflow-slider__scroll-indicator-button{background:var(--overflow-slider-scroll-indicator-button-color);border-radius:3px;cursor:grab;height:var(--overflow-slider-scroll-indicator-button-height);left:0;position:absolute;top:calc(50% - var(--overflow-slider-scroll-indicator-button-height)/2)}.overflow-slider__scroll-indicator-button:hover,.overflow-slider__scroll-indicator-button[data-is-grabbed=true]{--overflow-slider-scroll-indicator-button-height:6px}.overflow-slider__scroll-indicator-button:after{bottom:calc(var(--overflow-slider-scroll-indicator-padding)*-1);content:"";display:block;position:absolute;top:calc(var(--overflow-slider-scroll-indicator-padding)*-1);width:100%}

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

@@ -20,8 +20,8 @@ function DotsPlugin(args) {
             dots.setAttribute('data-has-content', slider.details.hasOverflow.toString());
             dots.innerHTML = '';
             const dotsList = document.createElement('ul');
-            const pages = slider.details.amountOfPages;
-            const currentPage = slider.details.currentPage;
+            const pages = slider.details.slideCount;
+            const currentItem = slider.activeSlideIdx;
             if (pages <= 1) {
                 return;
             }
@@ -31,23 +31,23 @@ function DotsPlugin(args) {
                 dot.setAttribute('type', 'button');
                 dot.setAttribute('class', options.classNames.dotsItem);
                 dot.setAttribute('aria-label', options.texts.dotDescription.replace('%d', (i + 1).toString()).replace('%d', pages.toString()));
-                dot.setAttribute('aria-pressed', (i === currentPage).toString());
-                dot.setAttribute('data-page', (i + 1).toString());
+                dot.setAttribute('aria-pressed', (i === currentItem).toString());
+                dot.setAttribute('data-item', (i + 1).toString());
                 dotListItem.appendChild(dot);
                 dotsList.appendChild(dotListItem);
                 dot.addEventListener('click', () => activateDot(i + 1));
                 dot.addEventListener('focus', () => pageFocused = i + 1);
                 dot.addEventListener('keydown', (e) => {
                     var _a;
-                    const currentPageItem = dots.querySelector(`[aria-pressed="true"]`);
-                    if (!currentPageItem) {
+                    const currentItemItem = dots.querySelector(`[aria-pressed="true"]`);
+                    if (!currentItemItem) {
                         return;
                     }
-                    const currentPage = parseInt((_a = currentPageItem.getAttribute('data-page')) !== null && _a !== void 0 ? _a : '1');
+                    const currentItem = parseInt((_a = currentItemItem.getAttribute('data-item')) !== null && _a !== void 0 ? _a : '1');
                     if (e.key === 'ArrowLeft') {
-                        const previousPage = currentPage - 1;
+                        const previousPage = currentItem - 1;
                         if (previousPage > 0) {
-                            const matchingDot = dots.querySelector(`[data-page="${previousPage}"]`);
+                            const matchingDot = dots.querySelector(`[data-item="${previousPage}"]`);
                             if (matchingDot) {
                                 matchingDot.focus();
                             }
@@ -55,9 +55,9 @@ function DotsPlugin(args) {
                         }
                     }
                     if (e.key === 'ArrowRight') {
-                        const nextPage = currentPage + 1;
+                        const nextPage = currentItem + 1;
                         if (nextPage <= pages) {
-                            const matchingDot = dots.querySelector(`[data-page="${nextPage}"]`);
+                            const matchingDot = dots.querySelector(`[data-item="${nextPage}"]`);
                             if (matchingDot) {
                                 matchingDot.focus();
                             }
@@ -69,19 +69,18 @@ function DotsPlugin(args) {
             dots.appendChild(dotsList);
             // return focus to same page after rebuild
             if (pageFocused) {
-                const matchingDot = dots.querySelector(`[data-page="${pageFocused}"]`);
+                const matchingDot = dots.querySelector(`[data-item="${pageFocused}"]`);
                 if (matchingDot) {
                     matchingDot.focus();
                 }
             }
         };
-        const activateDot = (page) => {
-            const scrollTargetPosition = slider.details.containerWidth * (page - 1);
-            slider.container.style.scrollBehavior = slider.options.scrollBehavior;
-            slider.container.style.scrollSnapType = 'none';
-            slider.container.scrollLeft = scrollTargetPosition;
-            slider.container.style.scrollBehavior = '';
-            slider.container.style.scrollSnapType = '';
+        const activateDot = (item) => {
+            // const scrollTargetPosition = slider.details.containerWidth * ( page - 1 );
+            // slider.container.style.scrollBehavior = slider.options.scrollBehavior;
+            // slider.container.scrollLeft = scrollTargetPosition;
+            // slider.container.style.scrollBehavior = '';
+            slider.moveToSlide(item - 1);
         };
         buildDots();
         if (options.container) {
@@ -90,9 +89,9 @@ function DotsPlugin(args) {
         else {
             (_b = slider.container.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(dots, slider.container.nextSibling);
         }
-        slider.on('detailsChanged', () => {
-            buildDots();
-        });
+        slider.on('scrollEnd', buildDots);
+        slider.on('contentsChanged', buildDots);
+        slider.on('containerSizeChanged', buildDots);
     };
 }
 

package/dist/plugins/dots/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 a,s;const r={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!==(a=null==n?void 0:n.container)&&void 0!==a?a:null},i=document.createElement("div");i.classList.add(r.classNames.dotsContainer);let l=null;const c=()=>{i.setAttribute("data-has-content",o.details.hasOverflow.toString()),i.innerHTML="";const t=document.createElement("ul"),e=o.details.amountOfPages,n=o.details.currentPage;if(!(e<=1)){for(let o=0;o<e;o++){const a=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",r.classNames.dotsItem),s.setAttribute("aria-label",r.texts.dotDescription.replace("%d",(o+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(o===n).toString()),s.setAttribute("data-page",(o+1).toString()),a.appendChild(s),t.appendChild(a),s.addEventListener("click",(()=>d(o+1))),s.addEventListener("focus",(()=>l=o+1)),s.addEventListener("keydown",(t=>{var n;const o=i.querySelector('[aria-pressed="true"]');if(!o)return;const a=parseInt(null!==(n=o.getAttribute("data-page"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=a-1;if(t>0){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),d(t)}}if("ArrowRight"===t.key){const t=a+1;if(t<=e){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),d(t)}}}))}if(i.appendChild(t),l){const t=i.querySelector(`[data-page="${l}"]`);t&&t.focus()}}},d=t=>{const e=o.details.containerWidth*(t-1);o.container.style.scrollBehavior=o.options.scrollBehavior,o.container.style.scrollSnapType="none",o.container.scrollLeft=e,o.container.style.scrollBehavior="",o.container.style.scrollSnapType=""};c(),r.container?r.container.appendChild(i):null===(s=o.container.parentNode)||void 0===s||s.insertBefore(i,o.container.nextSibling),o.on("detailsChanged",(()=>{c()}))}}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/drag-scrolling/index.esm.js

@@ -8,9 +8,13 @@ function DragScrollingPlugin(args) {
         let isMouseDown = false;
         let startX = 0;
         let scrollLeft = 0;
+        let isMovingForward = false;
+        let programmaticScrollStarted = false;
+        let mayNeedToSnap = false;
         // add data attribute to container
         slider.container.setAttribute('data-has-drag-scrolling', 'true');
         const mouseDown = (e) => {
+            programmaticScrollStarted = false;
             if (!slider.details.hasOverflow) {
                 return;
             }
@@ -22,7 +26,6 @@ function DragScrollingPlugin(args) {
             scrollLeft = slider.container.scrollLeft;
             // change cursor to grabbing
             slider.container.style.cursor = 'grabbing';
-            slider.container.style.scrollSnapType = 'none';
             slider.container.style.scrollBehavior = 'auto';
             // prevent focus going to the slides
             e.preventDefault();
@@ -30,15 +33,26 @@ function DragScrollingPlugin(args) {
         };
         const mouseMove = (e) => {
             if (!slider.details.hasOverflow) {
+                programmaticScrollStarted = false;
                 return;
             }
             if (!isMouseDown) {
+                programmaticScrollStarted = false;
                 return;
             }
             e.preventDefault();
+            if (!programmaticScrollStarted) {
+                programmaticScrollStarted = true;
+                slider.emit('programmaticScrollStart');
+            }
             const x = e.pageX - slider.container.offsetLeft;
             const walk = (x - startX);
-            slider.container.scrollLeft = scrollLeft - walk;
+            const newScrollLeft = scrollLeft - walk;
+            mayNeedToSnap = true;
+            if (slider.container.scrollLeft !== newScrollLeft) {
+                isMovingForward = slider.container.scrollLeft < newScrollLeft;
+            }
+            slider.container.scrollLeft = newScrollLeft;
             const absWalk = Math.abs(walk);
             const slides = slider.container.querySelectorAll(slider.options.slidesSelector);
             const pointerEvents = absWalk > options.draggedDistanceThatPreventsClick ? 'none' : '';
@@ -48,12 +62,13 @@ function DragScrollingPlugin(args) {
         };
         const mouseUp = () => {
             if (!slider.details.hasOverflow) {
+                programmaticScrollStarted = false;
                 return;
             }
             isMouseDown = false;
             slider.container.style.cursor = '';
             setTimeout(() => {
-                slider.container.style.scrollSnapType = '';
+                programmaticScrollStarted = false;
                 slider.container.style.scrollBehavior = '';
                 const slides = slider.container.querySelectorAll(slider.options.slidesSelector);
                 slides.forEach((slide) => {
@@ -64,6 +79,18 @@ function DragScrollingPlugin(args) {
         window.addEventListener('mousedown', mouseDown);
         window.addEventListener('mousemove', mouseMove);
         window.addEventListener('mouseup', mouseUp);
+        // emulate scroll snapping
+        if (slider.options.emulateScrollSnap) {
+            const snap = () => {
+                if (!mayNeedToSnap || isMouseDown) {
+                    return;
+                }
+                mayNeedToSnap = false;
+                slider.snapToClosestSlide(isMovingForward ? 'next' : 'prev');
+            };
+            slider.on('programmaticScrollEnd', snap);
+            window.addEventListener('mouseup', snap);
+        }
     };
 }
 

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

@@ -1 +1 @@
-function e(e){var t;const n=null!==(t=null==e?void 0:e.draggedDistanceThatPreventsClick)&&void 0!==t?t:20;return e=>{let t=!1,o=0,r=0;e.container.setAttribute("data-has-drag-scrolling","true");window.addEventListener("mousedown",(n=>{e.details.hasOverflow&&e.container.contains(n.target)&&(t=!0,o=n.pageX-e.container.offsetLeft,r=e.container.scrollLeft,e.container.style.cursor="grabbing",e.container.style.scrollSnapType="none",e.container.style.scrollBehavior="auto",n.preventDefault(),n.stopPropagation())})),window.addEventListener("mousemove",(a=>{if(!e.details.hasOverflow)return;if(!t)return;a.preventDefault();const s=a.pageX-e.container.offsetLeft-o;e.container.scrollLeft=r-s;const l=Math.abs(s),i=e.container.querySelectorAll(e.options.slidesSelector),c=l>n?"none":"";i.forEach((e=>{e.style.pointerEvents=c}))})),window.addEventListener("mouseup",(()=>{e.details.hasOverflow&&(t=!1,e.container.style.cursor="",setTimeout((()=>{e.container.style.scrollSnapType="",e.container.style.scrollBehavior="";e.container.querySelectorAll(e.options.slidesSelector).forEach((e=>{e.style.pointerEvents=""}))}),50))}))}}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,s=!1,i=!1;e.container.setAttribute("data-has-drag-scrolling","true");if(window.addEventListener("mousedown",(o=>{s=!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",(l=>{if(!e.details.hasOverflow)return void(s=!1);if(!t)return void(s=!1);l.preventDefault(),s||(s=!0,e.emit("programmaticScrollStart"));const c=l.pageX-e.container.offsetLeft-n,d=r-c;i=!0,e.container.scrollLeft!==d&&(a=e.container.scrollLeft<d),e.container.scrollLeft=d;const u=Math.abs(c),f=e.container.querySelectorAll(e.options.slidesSelector),v=u>o?"none":"";f.forEach((e=>{e.style.pointerEvents=v}))})),window.addEventListener("mouseup",(()=>{e.details.hasOverflow?(t=!1,e.container.style.cursor="",setTimeout((()=>{s=!1,e.container.style.scrollBehavior="";e.container.querySelectorAll(e.options.slidesSelector).forEach((e=>{e.style.pointerEvents=""}))}),50)):s=!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/fade/index.esm.js

@@ -0,0 +1,81 @@
+function FadePlugin(args) {
+    return (slider) => {
+        var _a, _b, _c;
+        const options = {
+            classNames: {
+                fadeItem: 'overflow-slider-fade',
+                fadeItemStart: 'overflow-slider-fade--start',
+                fadeItemEnd: 'overflow-slider-fade--end',
+            },
+            container: (_a = args === null || args === void 0 ? void 0 : args.container) !== null && _a !== void 0 ? _a : null,
+            containerStart: (_b = args === null || args === void 0 ? void 0 : args.containerStart) !== null && _b !== void 0 ? _b : null,
+            containerEnd: (_c = args === null || args === void 0 ? void 0 : args.containerEnd) !== null && _c !== void 0 ? _c : null,
+        };
+        const fadeItemStart = document.createElement('div');
+        fadeItemStart.classList.add(options.classNames.fadeItem, options.classNames.fadeItemStart);
+        fadeItemStart.setAttribute('aria-hidden', 'true');
+        fadeItemStart.setAttribute('tabindex', '-1');
+        const fadeItemEnd = document.createElement('div');
+        fadeItemEnd.classList.add(options.classNames.fadeItem, options.classNames.fadeItemEnd);
+        fadeItemEnd.setAttribute('aria-hidden', 'true');
+        fadeItemEnd.setAttribute('tabindex', '-1');
+        if (options.containerStart) {
+            options.containerStart.appendChild(fadeItemStart);
+        }
+        else if (options.container) {
+            options.container.appendChild(fadeItemStart);
+        }
+        if (options.containerEnd) {
+            options.containerEnd.appendChild(fadeItemEnd);
+        }
+        else if (options.container) {
+            options.container.appendChild(fadeItemEnd);
+        }
+        const hasFadeAtStart = () => {
+            return slider.container.scrollLeft > fadeItemStart.offsetWidth;
+        };
+        const fadeAtStartOpacity = () => {
+            const position = slider.container.scrollLeft;
+            if (position <= fadeItemStart.offsetWidth) {
+                return position / Math.max(fadeItemStart.offsetWidth, 1);
+            }
+            return 1;
+        };
+        const hasFadeAtEnd = () => {
+            return slider.container.scrollLeft < (slider.container.scrollWidth - slider.container.clientWidth - fadeItemEnd.offsetWidth);
+        };
+        const fadeAtEndOpacity = () => {
+            const position = slider.container.scrollLeft;
+            const maxPosition = slider.container.scrollWidth - slider.container.clientWidth;
+            const maxFadePosition = maxPosition - fadeItemEnd.offsetWidth;
+            if (position >= maxFadePosition) {
+                return ((maxFadePosition - position) / Math.max(fadeItemEnd.offsetWidth, 1)) + 1;
+            }
+            return 1;
+        };
+        const update = () => {
+            fadeItemStart.setAttribute('data-has-fade', hasFadeAtStart().toString());
+            fadeItemStart.style.opacity = fadeAtStartOpacity().toString();
+            fadeItemEnd.setAttribute('data-has-fade', hasFadeAtEnd().toString());
+            fadeItemEnd.style.opacity = fadeAtEndOpacity().toString();
+        };
+        update();
+        slider.on('created', update);
+        slider.on('contentsChanged', update);
+        slider.on('containerSizeChanged', update);
+        slider.on('scrollEnd', update);
+        slider.on('scrollStart', update);
+        let requestId = 0;
+        const debouncedUpdate = () => {
+            if (requestId) {
+                window.cancelAnimationFrame(requestId);
+            }
+            requestId = window.requestAnimationFrame(() => {
+                update();
+            });
+        };
+        slider.on('scroll', debouncedUpdate);
+    };
+}
+
+export { FadePlugin as default };

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

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

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

@@ -21,6 +21,7 @@ function FullWidthPlugin(args) {
             if (options.addMarginAfter) {
                 lastSlide.style.marginRight = `${marginAmount}px`;
             }
+            slider.container.setAttribute('data-full-width-offset', marginAmount.toString());
         };
         update();
         slider.on('contentsChanged', update);

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

@@ -1 +1 @@
-const n=n=>{var t,e;return null!==(e=null===(t=n.container.parentElement)||void 0===t?void 0:t.offsetWidth)&&void 0!==e?e:window.innerWidth};function t(t){return e=>{var i,r,d;const o={targetWidth:null!==(i=null==t?void 0:t.targetWidth)&&void 0!==i?i:n,addMarginBefore:null===(r=null==t?void 0:t.addMarginBefore)||void 0===r||r,addMarginAfter:null===(d=null==t?void 0:t.addMarginAfter)||void 0===d||d},a=()=>{const n=e.container.querySelectorAll(e.options.slidesSelector);if(!n.length)return;const t=n[0],i=n[n.length-1],r=Math.floor((window.innerWidth-o.targetWidth(e))/2);o.addMarginBefore&&(t.style.marginLeft=`${r}px`),o.addMarginAfter&&(i.style.marginRight=`${r}px`)};a(),e.on("contentsChanged",a),e.on("containerSizeChanged",a)}}export{t 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;const d={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===(o=null==n?void 0:n.addMarginAfter)||void 0===o||o},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-d.targetWidth(e))/2);d.addMarginBefore&&(n.style.marginLeft=`${r}px`),d.addMarginAfter&&(i.style.marginRight=`${r}px`),e.container.setAttribute("data-full-width-offset",r.toString())};a(),e.on("contentsChanged",a),e.on("containerSizeChanged",a)}}export{n as default};