@evermade/overflow-slider 1.0.0 → 2.0.0

package/docs/dist/index.esm.js

@@ -0,0 +1 @@
+export { default as OverflowSlider } from './core/overflow-slider.esm.js';

package/docs/dist/index.min.js

@@ -0,0 +1 @@
+export{default as OverflowSlider}from"./core/overflow-slider.min.js";

package/docs/dist/overflow-slider.css

@@ -1 +1 @@
-.overflow-slider{display:grid;grid-auto-flow:column;grid-template-columns:max-content;max-width:-moz-max-content;max-width:max-content;overflow:auto;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-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;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%}

package/docs/dist/plugins/arrows/arrows/index.esm.js

@@ -0,0 +1,82 @@
+const DEFAULT_TEXTS = {
+    buttonPrevious: 'Previous items',
+    buttonNext: 'Next items',
+};
+const DEFAULT_ICONS = {
+    prev: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 3.4l-7.6 7.6 7.6 7.6 1.4-1.4-5-5h12.6v-2h-12.6l5-5z"/></svg>',
+    next: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 3.4l-1.4 1.4 5 5h-12.6v2h12.6l-5 5 1.4 1.4 7.6-7.6z"/></svg>',
+};
+const DEFAULT_CLASS_NAMES = {
+    navContainer: 'overflow-slider__arrows',
+    prevButton: 'overflow-slider__arrows-button overflow-slider__arrows-button--prev',
+    nextButton: 'overflow-slider__arrows-button overflow-slider__arrows-button--next',
+};
+function ArrowsPlugin(args) {
+    return (slider) => {
+        var _a, _b, _c, _d, _e, _f;
+        const options = {
+            texts: Object.assign(Object.assign({}, DEFAULT_TEXTS), (args === null || args === void 0 ? void 0 : args.texts) || []),
+            icons: Object.assign(Object.assign({}, DEFAULT_ICONS), (args === null || args === void 0 ? void 0 : args.icons) || []),
+            classNames: Object.assign(Object.assign({}, DEFAULT_CLASS_NAMES), (args === null || args === void 0 ? void 0 : args.classNames) || []),
+            container: (_a = args === null || args === void 0 ? void 0 : args.container) !== null && _a !== void 0 ? _a : null,
+            containerPrev: (_b = args === null || args === void 0 ? void 0 : args.containerPrev) !== null && _b !== void 0 ? _b : null,
+            containerNext: (_c = args === null || args === void 0 ? void 0 : args.containerNext) !== null && _c !== void 0 ? _c : null,
+        };
+        const nav = document.createElement('div');
+        nav.classList.add(options.classNames.navContainer);
+        const prev = document.createElement('button');
+        prev.setAttribute('class', options.classNames.prevButton);
+        prev.setAttribute('type', 'button');
+        prev.setAttribute('aria-label', options.texts.buttonPrevious);
+        prev.setAttribute('aria-controls', (_d = slider.container.getAttribute('id')) !== null && _d !== void 0 ? _d : '');
+        prev.setAttribute('data-type', 'prev');
+        prev.innerHTML = options.icons.prev;
+        prev.addEventListener('click', () => slider.moveToDirection('prev'));
+        const next = document.createElement('button');
+        next.setAttribute('class', options.classNames.nextButton);
+        next.setAttribute('type', 'button');
+        next.setAttribute('aria-label', options.texts.buttonNext);
+        next.setAttribute('aria-controls', (_e = slider.container.getAttribute('id')) !== null && _e !== void 0 ? _e : '');
+        next.setAttribute('data-type', 'next');
+        next.innerHTML = options.icons.next;
+        next.addEventListener('click', () => slider.moveToDirection('next'));
+        // insert buttons to the nav
+        nav.appendChild(prev);
+        nav.appendChild(next);
+        const update = () => {
+            const scrollLeft = slider.container.scrollLeft;
+            const scrollWidth = slider.container.scrollWidth;
+            const clientWidth = slider.container.clientWidth;
+            if (scrollLeft === 0) {
+                prev.setAttribute('data-has-content', 'false');
+            }
+            else {
+                prev.setAttribute('data-has-content', 'true');
+            }
+            if (scrollLeft + clientWidth >= scrollWidth) {
+                next.setAttribute('data-has-content', 'false');
+            }
+            else {
+                next.setAttribute('data-has-content', 'true');
+            }
+        };
+        if (options.containerNext && options.containerPrev) {
+            options.containerPrev.appendChild(prev);
+            options.containerNext.appendChild(next);
+        }
+        else {
+            if (options.container) {
+                options.container.appendChild(nav);
+            }
+            else {
+                (_f = slider.container.parentNode) === null || _f === void 0 ? void 0 : _f.insertBefore(nav, slider.container.nextSibling);
+            }
+        }
+        update();
+        slider.on('scroll', update);
+        slider.on('contentsChanged', update);
+        slider.on('containerSizeChanged', update);
+    };
+}
+
+export { ArrowsPlugin as default };

package/docs/dist/plugins/arrows/arrows/index.min.js

@@ -0,0 +1 @@
+const t={buttonPrevious:"Previous items",buttonNext:"Next items"},e={prev:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 3.4l-7.6 7.6 7.6 7.6 1.4-1.4-5-5h12.6v-2h-12.6l5-5z"/></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 3.4l-1.4 1.4 5 5h-12.6v2h12.6l-5 5 1.4 1.4 7.6-7.6z"/></svg>'},n={navContainer:"overflow-slider__arrows",prevButton:"overflow-slider__arrows-button overflow-slider__arrows-button--prev",nextButton:"overflow-slider__arrows-button overflow-slider__arrows-button--next"};function o(o){return i=>{var r,s,a,l,c,u;const d={texts:Object.assign(Object.assign({},t),(null==o?void 0:o.texts)||[]),icons:Object.assign(Object.assign({},e),(null==o?void 0:o.icons)||[]),classNames:Object.assign(Object.assign({},n),(null==o?void 0:o.classNames)||[]),container:null!==(r=null==o?void 0:o.container)&&void 0!==r?r:null,containerPrev:null!==(s=null==o?void 0:o.containerPrev)&&void 0!==s?s:null,containerNext:null!==(a=null==o?void 0:o.containerNext)&&void 0!==a?a:null},v=document.createElement("div");v.classList.add(d.classNames.navContainer);const b=document.createElement("button");b.setAttribute("class",d.classNames.prevButton),b.setAttribute("type","button"),b.setAttribute("aria-label",d.texts.buttonPrevious),b.setAttribute("aria-controls",null!==(l=i.container.getAttribute("id"))&&void 0!==l?l:""),b.setAttribute("data-type","prev"),b.innerHTML=d.icons.prev,b.addEventListener("click",(()=>i.moveToDirection("prev")));const p=document.createElement("button");p.setAttribute("class",d.classNames.nextButton),p.setAttribute("type","button"),p.setAttribute("aria-label",d.texts.buttonNext),p.setAttribute("aria-controls",null!==(c=i.container.getAttribute("id"))&&void 0!==c?c:""),p.setAttribute("data-type","next"),p.innerHTML=d.icons.next,p.addEventListener("click",(()=>i.moveToDirection("next"))),v.appendChild(b),v.appendChild(p);const x=()=>{const t=i.container.scrollLeft,e=i.container.scrollWidth,n=i.container.clientWidth;0===t?b.setAttribute("data-has-content","false"):b.setAttribute("data-has-content","true"),t+n>=e?p.setAttribute("data-has-content","false"):p.setAttribute("data-has-content","true")};d.containerNext&&d.containerPrev?(d.containerPrev.appendChild(b),d.containerNext.appendChild(p)):d.container?d.container.appendChild(v):null===(u=i.container.parentNode)||void 0===u||u.insertBefore(v,i.container.nextSibling),x(),i.on("scroll",x),i.on("contentsChanged",x),i.on("containerSizeChanged",x)}}export{o as default};

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

@@ -0,0 +1,99 @@
+const DEFAULT_TEXTS = {
+    dotDescription: 'Page %d of %d',
+};
+const DEFAULT_CLASS_NAMES = {
+    dotsContainer: 'overflow-slider__dots',
+    dotsItem: 'overflow-slider__dot-item',
+};
+function DotsPlugin(args) {
+    return (slider) => {
+        var _a, _b;
+        const options = {
+            texts: Object.assign(Object.assign({}, DEFAULT_TEXTS), (args === null || args === void 0 ? void 0 : args.texts) || []),
+            classNames: Object.assign(Object.assign({}, DEFAULT_CLASS_NAMES), (args === null || args === void 0 ? void 0 : args.classNames) || []),
+            container: (_a = args === null || args === void 0 ? void 0 : args.container) !== null && _a !== void 0 ? _a : null,
+        };
+        const dots = document.createElement('div');
+        dots.classList.add(options.classNames.dotsContainer);
+        let pageFocused = null;
+        const buildDots = () => {
+            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;
+            if (pages <= 1) {
+                return;
+            }
+            for (let i = 0; i < pages; i++) {
+                const dotListItem = document.createElement('li');
+                const dot = document.createElement('button');
+                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());
+                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) {
+                        return;
+                    }
+                    const currentPage = parseInt((_a = currentPageItem.getAttribute('data-page')) !== null && _a !== void 0 ? _a : '1');
+                    if (e.key === 'ArrowLeft') {
+                        const previousPage = currentPage - 1;
+                        if (previousPage > 0) {
+                            const matchingDot = dots.querySelector(`[data-page="${previousPage}"]`);
+                            if (matchingDot) {
+                                matchingDot.focus();
+                            }
+                            activateDot(previousPage);
+                        }
+                    }
+                    if (e.key === 'ArrowRight') {
+                        const nextPage = currentPage + 1;
+                        if (nextPage <= pages) {
+                            const matchingDot = dots.querySelector(`[data-page="${nextPage}"]`);
+                            if (matchingDot) {
+                                matchingDot.focus();
+                            }
+                            activateDot(nextPage);
+                        }
+                    }
+                });
+            }
+            dots.appendChild(dotsList);
+            // return focus to same page after rebuild
+            if (pageFocused) {
+                const matchingDot = dots.querySelector(`[data-page="${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 = '';
+        };
+        buildDots();
+        if (options.container) {
+            options.container.appendChild(dots);
+        }
+        else {
+            (_b = slider.container.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(dots, slider.container.nextSibling);
+        }
+        slider.on('detailsChanged', () => {
+            buildDots();
+        });
+    };
+}
+
+export { DotsPlugin as default };

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

@@ -0,0 +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};

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

@@ -0,0 +1,70 @@
+const DEFAULT_DRAGGED_DISTANCE_THAT_PREVENTS_CLICK = 20;
+function DragScrollingPlugin(args) {
+    var _a;
+    const options = {
+        draggedDistanceThatPreventsClick: (_a = args === null || args === void 0 ? void 0 : args.draggedDistanceThatPreventsClick) !== null && _a !== void 0 ? _a : DEFAULT_DRAGGED_DISTANCE_THAT_PREVENTS_CLICK,
+    };
+    return (slider) => {
+        let isMouseDown = false;
+        let startX = 0;
+        let scrollLeft = 0;
+        // add data attribute to container
+        slider.container.setAttribute('data-has-drag-scrolling', 'true');
+        const mouseDown = (e) => {
+            if (!slider.details.hasOverflow) {
+                return;
+            }
+            if (!slider.container.contains(e.target)) {
+                return;
+            }
+            isMouseDown = true;
+            startX = e.pageX - slider.container.offsetLeft;
+            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();
+            e.stopPropagation();
+        };
+        const mouseMove = (e) => {
+            if (!slider.details.hasOverflow) {
+                return;
+            }
+            if (!isMouseDown) {
+                return;
+            }
+            e.preventDefault();
+            const x = e.pageX - slider.container.offsetLeft;
+            const walk = (x - startX);
+            slider.container.scrollLeft = scrollLeft - walk;
+            const absWalk = Math.abs(walk);
+            const slides = slider.container.querySelectorAll(slider.options.slidesSelector);
+            const pointerEvents = absWalk > options.draggedDistanceThatPreventsClick ? 'none' : '';
+            slides.forEach((slide) => {
+                slide.style.pointerEvents = pointerEvents;
+            });
+        };
+        const mouseUp = () => {
+            if (!slider.details.hasOverflow) {
+                return;
+            }
+            isMouseDown = false;
+            slider.container.style.cursor = '';
+            setTimeout(() => {
+                slider.container.style.scrollSnapType = '';
+                slider.container.style.scrollBehavior = '';
+                const slides = slider.container.querySelectorAll(slider.options.slidesSelector);
+                slides.forEach((slide) => {
+                    slide.style.pointerEvents = '';
+                });
+            }, 50);
+        };
+        window.addEventListener('mousedown', mouseDown);
+        window.addEventListener('mousemove', mouseMove);
+        window.addEventListener('mouseup', mouseUp);
+    };
+}
+
+export { DragScrollingPlugin as default };

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

@@ -0,0 +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};

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

@@ -0,0 +1,31 @@
+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;
+        const options = {
+            targetWidth: (_a = args === null || args === void 0 ? void 0 : args.targetWidth) !== null && _a !== void 0 ? _a : DEFAULT_TARGET_WIDTH,
+            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,
+        };
+        const update = () => {
+            const slides = slider.container.querySelectorAll(slider.options.slidesSelector);
+            if (!slides.length) {
+                return;
+            }
+            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.marginLeft = `${marginAmount}px`;
+            }
+            if (options.addMarginAfter) {
+                lastSlide.style.marginRight = `${marginAmount}px`;
+            }
+        };
+        update();
+        slider.on('contentsChanged', update);
+        slider.on('containerSizeChanged', update);
+    };
+}
+
+export { FullWidthPlugin as default };

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

@@ -0,0 +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};

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

@@ -0,0 +1,133 @@
+const DEFAULT_CLASS_NAMES = {
+    scrollIndicator: 'overflow-slider__scroll-indicator',
+    scrollIndicatorBar: 'overflow-slider__scroll-indicator-bar',
+    scrollIndicatorButton: 'overflow-slider__scroll-indicator-button',
+};
+function ScrollIndicatorPlugin(args) {
+    return (slider) => {
+        var _a, _b, _c;
+        const options = {
+            classNames: Object.assign(Object.assign({}, DEFAULT_CLASS_NAMES), (args === null || args === void 0 ? void 0 : args.classNames) || []),
+            container: (_a = args === null || args === void 0 ? void 0 : args.container) !== null && _a !== void 0 ? _a : null,
+        };
+        const scrollbarContainer = document.createElement('div');
+        scrollbarContainer.setAttribute('class', options.classNames.scrollIndicator);
+        scrollbarContainer.setAttribute('tabindex', '0');
+        scrollbarContainer.setAttribute('role', 'scrollbar');
+        scrollbarContainer.setAttribute('aria-controls', (_b = slider.container.getAttribute('id')) !== null && _b !== void 0 ? _b : '');
+        scrollbarContainer.setAttribute('aria-orientation', 'horizontal');
+        scrollbarContainer.setAttribute('aria-valuemax', '100');
+        scrollbarContainer.setAttribute('aria-valuemin', '0');
+        scrollbarContainer.setAttribute('aria-valuenow', '0');
+        const scrollbar = document.createElement('div');
+        scrollbar.setAttribute('class', options.classNames.scrollIndicatorBar);
+        const scrollbarButton = document.createElement('div');
+        scrollbarButton.setAttribute('class', options.classNames.scrollIndicatorButton);
+        scrollbarButton.setAttribute('data-is-grabbed', 'false');
+        scrollbar.appendChild(scrollbarButton);
+        scrollbarContainer.appendChild(scrollbar);
+        const setDataAttributes = () => {
+            scrollbarContainer.setAttribute('data-has-overflow', slider.details.hasOverflow.toString());
+        };
+        setDataAttributes();
+        const getScrollbarButtonLeftOffset = () => {
+            const contentRatio = scrollbarButton.offsetWidth / slider.details.containerWidth;
+            return slider.container.scrollLeft * contentRatio;
+        };
+        // scrollbarbutton width and position is calculated based on the scroll position and available width
+        let requestId = 0;
+        const update = () => {
+            if (requestId) {
+                window.cancelAnimationFrame(requestId);
+            }
+            requestId = window.requestAnimationFrame(() => {
+                const scrollbarButtonWidth = (slider.details.containerWidth / slider.details.scrollableAreaWidth) * 100;
+                const scrollLeftInPortion = getScrollbarButtonLeftOffset();
+                scrollbarButton.style.width = `${scrollbarButtonWidth}%`;
+                scrollbarButton.style.transform = `translateX(${scrollLeftInPortion}px)`;
+                // aria-valuenow
+                const scrollLeft = slider.container.scrollLeft;
+                const scrollWidth = slider.container.scrollWidth;
+                const containerWidth = slider.container.offsetWidth;
+                const scrollPercentage = (scrollLeft / (scrollWidth - containerWidth)) * 100;
+                scrollbarContainer.setAttribute('aria-valuenow', Math.round(Number.isNaN(scrollPercentage) ? 0 : scrollPercentage).toString());
+            });
+        };
+        // insert to DOM
+        if (options.container) {
+            options.container.appendChild(scrollbarContainer);
+        }
+        else {
+            (_c = slider.container.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(scrollbarContainer, slider.container.nextSibling);
+        }
+        // update the scrollbar when the slider is scrolled
+        update();
+        slider.on('scroll', update);
+        slider.on('contentsChanged', update);
+        slider.on('containerSizeChanged', update);
+        slider.on('detailsChanged', setDataAttributes);
+        // handle arrow keys while focused
+        scrollbarContainer.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') {
+                slider.moveToDirection('prev');
+            }
+            else if (e.key === 'ArrowRight') {
+                slider.moveToDirection('next');
+            }
+        });
+        // handle click to before or after the scrollbar button
+        scrollbarContainer.addEventListener('click', (e) => {
+            const scrollbarButtonWidth = scrollbarButton.offsetWidth;
+            const scrollbarButtonLeft = getScrollbarButtonLeftOffset();
+            const scrollbarButtonRight = scrollbarButtonLeft + scrollbarButtonWidth;
+            const clickX = e.pageX - scrollbarContainer.offsetLeft;
+            if (clickX < scrollbarButtonLeft) {
+                slider.moveToDirection('prev');
+            }
+            else if (clickX > scrollbarButtonRight) {
+                slider.moveToDirection('next');
+            }
+        });
+        // make scrollbar button draggable via mouse/touch and update the scroll position
+        let isInteractionDown = false;
+        let startX = 0;
+        let scrollLeft = 0;
+        const onInteractionDown = (e) => {
+            isInteractionDown = true;
+            const pageX = e.pageX || e.touches[0].pageX;
+            startX = pageX - scrollbarContainer.offsetLeft;
+            scrollLeft = slider.container.scrollLeft;
+            // change cursor to grabbing
+            scrollbarButton.style.cursor = 'grabbing';
+            slider.container.style.scrollSnapType = 'none';
+            scrollbarButton.setAttribute('data-is-grabbed', 'true');
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const onInteractionMove = (e) => {
+            if (!isInteractionDown) {
+                return;
+            }
+            e.preventDefault();
+            const pageX = e.pageX || e.touches[0].pageX;
+            const x = pageX - scrollbarContainer.offsetLeft;
+            const scrollingFactor = slider.details.scrollableAreaWidth / scrollbarContainer.offsetWidth;
+            const walk = (x - startX) * scrollingFactor;
+            slider.container.scrollLeft = scrollLeft + walk;
+        };
+        const onInteractionUp = () => {
+            isInteractionDown = false;
+            scrollbarButton.style.cursor = '';
+            slider.container.style.scrollSnapType = '';
+            scrollbarButton.setAttribute('data-is-grabbed', 'false');
+        };
+        scrollbarButton.addEventListener('mousedown', onInteractionDown);
+        scrollbarButton.addEventListener('touchstart', onInteractionDown);
+        window.addEventListener('mousemove', onInteractionMove);
+        window.addEventListener('touchmove', onInteractionMove, { passive: false });
+        window.addEventListener('mouseup', onInteractionUp);
+        window.addEventListener('touchend', onInteractionUp);
+    };
+}
+
+export { ScrollIndicatorPlugin as default };

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

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

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

@@ -0,0 +1,42 @@
+import { generateId } from '../../../core/utils.esm.js';
+
+const DEFAULT_TEXTS = {
+    skipList: 'Skip list'
+};
+const DEFAULT_CLASS_NAMES = {
+    skipLink: 'screen-reader-text',
+    skipLinkTarget: 'overflow-slider__skip-link-target',
+};
+function SkipLinksPlugin(args) {
+    return (slider) => {
+        var _a, _b, _c, _d, _e, _f;
+        const options = {
+            texts: Object.assign(Object.assign({}, DEFAULT_TEXTS), (args === null || args === void 0 ? void 0 : args.texts) || []),
+            classNames: Object.assign(Object.assign({}, DEFAULT_CLASS_NAMES), (args === null || args === void 0 ? void 0 : args.classNames) || []),
+            containerBefore: (_a = args === null || args === void 0 ? void 0 : args.containerAfter) !== null && _a !== void 0 ? _a : null,
+            containerAfter: (_b = args === null || args === void 0 ? void 0 : args.containerAfter) !== null && _b !== void 0 ? _b : null,
+        };
+        const skipId = generateId('overflow-slider-skip');
+        const skipLinkEl = document.createElement('a');
+        skipLinkEl.setAttribute('href', `#${skipId}`);
+        skipLinkEl.textContent = options.texts.skipList;
+        skipLinkEl.classList.add(options.classNames.skipLink);
+        const skipTargetEl = document.createElement('div');
+        skipTargetEl.setAttribute('id', skipId);
+        skipTargetEl.setAttribute('tabindex', '-1');
+        if (options.containerBefore) {
+            (_c = options.containerBefore.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(skipLinkEl, options.containerBefore);
+        }
+        else {
+            (_d = slider.container.parentNode) === null || _d === void 0 ? void 0 : _d.insertBefore(skipLinkEl, slider.container);
+        }
+        if (options.containerAfter) {
+            (_e = options.containerAfter.parentNode) === null || _e === void 0 ? void 0 : _e.insertBefore(skipTargetEl, options.containerAfter.nextSibling);
+        }
+        else {
+            (_f = slider.container.parentNode) === null || _f === void 0 ? void 0 : _f.insertBefore(skipTargetEl, slider.container.nextSibling);
+        }
+    };
+}
+
+export { SkipLinksPlugin as default };

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

@@ -0,0 +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};

package/docs/dist/plugins/thumbnails/thumbnails/index.esm.js

@@ -0,0 +1,41 @@
+function FullWidthPlugin(args) {
+    return (slider) => {
+        const options = {
+            mainSlider: args.mainSlider,
+        };
+        const mainSlider = options.mainSlider;
+        const setActiveThumbnail = (slide = null) => {
+            if (slide === null && slider.slides.length > 0) {
+                slide = slider.slides[0];
+            }
+            if (slide === null) {
+                return;
+            }
+            // add aria-current to the clicked slide
+            slider.slides.forEach((s) => {
+                s.setAttribute('aria-current', 'false');
+            });
+            slide.setAttribute('aria-current', 'true');
+        };
+        const addClickListeners = () => {
+            slider.slides.forEach((slide, index) => {
+                slide.addEventListener('click', () => {
+                    mainSlider.moveToSlide(index);
+                    setActiveThumbnail(slide);
+                });
+            });
+        };
+        setActiveThumbnail();
+        addClickListeners();
+        mainSlider.on('activeSlideChanged', () => {
+            setTimeout(() => {
+                const activeSlideIdx = mainSlider.activeSlideIdx;
+                const activeThumbnail = slider.slides[activeSlideIdx];
+                setActiveThumbnail(activeThumbnail);
+                slider.moveToSlide(activeSlideIdx);
+            }, 50);
+        });
+    };
+}
+
+export { FullWidthPlugin as default };

package/docs/dist/plugins/thumbnails/thumbnails/index.min.js

@@ -0,0 +1 @@
+function e(e){return i=>{const t={mainSlider:e.mainSlider}.mainSlider,l=(e=null)=>{null===e&&i.slides.length>0&&(e=i.slides[0]),null!==e&&(i.slides.forEach((e=>{e.setAttribute("aria-current","false")})),e.setAttribute("aria-current","true"))};l(),i.slides.forEach(((e,i)=>{e.addEventListener("click",(()=>{t.moveToSlide(i),l(e)}))})),t.on("activeSlideChanged",(()=>{setTimeout((()=>{const e=t.activeSlideIdx,n=i.slides[e];l(n),i.moveToSlide(e)}),50)}))}}export{e as default};