@evermade/overflow-slider 3.0.0 → 3.2.0

package/README.md

@@ -9,8 +9,9 @@ Overflow Slider aims to be lightweight, mobile-first and accessible. It is desig
 ## Demos
 
 * [Example and demos](https://evermade.github.io/overflow-slider/)
+* [RTL demos](https://evermade.github.io/overflow-slider/index-rtl.html)
 
-### Usage
+## Getting started
 
 Markup:
 
@@ -65,7 +66,7 @@ const slider = new OverflowSlider(
 const slider = new OverflowSlider(
 	document.querySelector( '.slider-container-here' ),
 	{
-		// options here
+		emulateScrollSnap: true,
 	},
 	[
 		ArrowsPlugin({
@@ -101,11 +102,64 @@ You can use the CSS variables to override some values easily.
 
 Note that you can easily write styles from scratch if you want to. See source code from `src/overflow-slider.scss` for reference.
 
+## Slides per view
+
+You control slides per view in CSS. Set gap between slides via `gap` to slider. Slide layout/size is controlled by `width` property. You can use others but `width` is the most stable.
+
+### A) Fixed width
+
+Set fixed width for slides: `width: 200px;`. Note you can freely change this with media queries.
+
+### B) Relative width
+
+Set relative width for slides: `width: 100vw;`. Note that you cannot use percentages because they are relative to the container and not the viewport.
+
+### C) Variable based width
+
+This is most practical approach if you want to make sure exactly 3 slides are visible at all times or so. Or you want to display like 1.5 slides in mobile per view.
+
+This is based on getting the container width and dividing it by the number of slides you want to show and subtracting the gap. It's recommended to add SCSS mixin for this in case you are using SCSS.
+
+Mixin:
+
+```scss
+@mixin slideWidth($slidesPerView: 3, $gap: var(--slide-gap, 1rem), $containerWidth: var(--slider-container-width, 90vw)) {
+	width: calc( ( #{$containerWidth} / #{$slidesPerView} ) - calc( #{$slidesPerView} - 1 ) / #{$slidesPerView} * #{$gap});
+}
+```
+
+Usage:
+
+```scss
+.overflow-slider {
+	--gap: 1.5rem;
+	gap: var(--gap);
+	> * {
+		--slidesPerView: 3;
+		@include slideWidth(
+			var(--slidesPerView),
+			var(--gap),
+			var(--slider-container-width)
+		);
+	}
+}
+```
+
+Note that if you are using FullWidthPlugin, you should use container width from `--slider-container-target-width` instead of `--slider-container-width`.
+
+## Plugins
+
+TBA
+
 ## Known issues
 
-### Drag Scrolling and Smoothness
+### CSS grids and Overflow Slider
+
+You can use use Overflow Slider within CSS grid but if you are using `fr` units remember to set them like `minmax(0, 1fr)` instead of just `1fr`. With plain `1fr` the width of columns can be calculated incorrectly by browser.
 
-Scroll snapping doesn't apply smoothly to drag scrolling. It might be browser limitation or some issue with implementation here. Should look into fixing it.
+### CSS scroll-snap can be buggy
+
+If you are using `scroll-snap-type` CSS property, you might encounter some bugs like browser wants to snap to a slide regardless of margins.
 
 ## Limitations
 
@@ -113,10 +167,6 @@ Scroll snapping doesn't apply smoothly to drag scrolling. It might be browser li
 
 The library is designed to work with horizontal scrolling. Vertical scrolling is not supported and likely never will because it is not a common use case for sliders.
 
-### RTL support
-
-RTL support is not implemented yet. In case need arises it can be implemented but requires changes to the core and plugins.
-
 ### Looping slides
 
 Looping slides is not supported and likely never will be. It is a feature that is not very common and it is not very accessible.
@@ -133,6 +183,21 @@ Auto-play is not supported at the moment but can probably be implemented as a pl
 
 ## Changelog
 
+### 3.2.0
+
+* Add: RTL support
+* Add: `--slider-container-target-width` for FullWidthPlugin to allow CSS based on target size
+* Add: Documentation how to set slides per view in CSS
+* Fix: Attach ThumbnailsPlugin to scrollEnd which skips in-between slides when multiple slides are scrolled at once
+
+### 3.1.0
+
+* Add: slider.getInclusiveScrollWidth and slider.getInclusiveScrollHeight methods to get widths including outermost childs outermost margins
+* Fix: Lot of bugs related to subpixel widths
+* Fix: Don't run arrow click action if there are no more slides to scroll to
+* Fix: FullWidthPlugin bugs where arrows were not detecting start or end properly (because of child margins not taken into account)
+* Fix: Attach ThumbnailsPlugin to activeSlideChanged which is more appropriate hook
+
 ### 3.0.0
 
 * Breaking: Change dot plugin to calculate dots based on slides instead of container width "pages"

package/dist/core/details.esm.js

@@ -7,17 +7,17 @@ function details(slider) {
     let scrollableAreaWidth = 0;
     let amountOfPages = 0;
     let currentPage = 1;
-    if (slider.container.scrollWidth > slider.container.clientWidth) {
+    if (Math.floor(slider.getInclusiveScrollWidth()) > Math.floor(slider.getInclusiveClientWidth())) {
         hasOverflow = true;
     }
     slideCount = (_a = slider.slides.length) !== null && _a !== void 0 ? _a : 0;
     containerWidth = slider.container.offsetWidth;
-    scrollableAreaWidth = slider.container.scrollWidth;
+    scrollableAreaWidth = slider.getInclusiveScrollWidth();
     amountOfPages = Math.ceil(scrollableAreaWidth / containerWidth);
-    if (slider.container.scrollLeft >= 0) {
-        currentPage = Math.floor(slider.container.scrollLeft / containerWidth);
+    if (Math.floor(slider.getScrollLeft()) >= 0) {
+        currentPage = Math.floor(slider.getScrollLeft() / containerWidth);
         // consider as last page if the scrollLeft + containerWidth is equal to scrollWidth
-        if (slider.container.scrollLeft + containerWidth === scrollableAreaWidth) {
+        if (Math.floor(slider.getScrollLeft() + containerWidth) === Math.floor(scrollableAreaWidth)) {
             currentPage = amountOfPages - 1;
         }
     }

package/dist/core/details.min.js

@@ -1 +1 @@
-function t(t){var e;let n,l=!1,o=0,r=0,i=0,a=0,c=1;return t.container.scrollWidth>t.container.clientWidth&&(l=!0),o=null!==(e=t.slides.length)&&void 0!==e?e:0,r=t.container.offsetWidth,i=t.container.scrollWidth,a=Math.ceil(i/r),t.container.scrollLeft>=0&&(c=Math.floor(t.container.scrollLeft/r),t.container.scrollLeft+r===i&&(c=a-1)),n={hasOverflow:l,slideCount:o,containerWidth:r,scrollableAreaWidth:i,amountOfPages:a,currentPage:c},n}export{t as default};
+function t(t){var l;let e,o=!1,r=0,a=0,i=0,n=0,f=1;return Math.floor(t.getInclusiveScrollWidth())>Math.floor(t.getInclusiveClientWidth())&&(o=!0),r=null!==(l=t.slides.length)&&void 0!==l?l:0,a=t.container.offsetWidth,i=t.getInclusiveScrollWidth(),n=Math.ceil(i/a),Math.floor(t.getScrollLeft())>=0&&(f=Math.floor(t.getScrollLeft()/a),Math.floor(t.getScrollLeft()+a)===Math.floor(i)&&(f=n-1)),e={hasOverflow:o,slideCount:r,containerWidth:a,scrollableAreaWidth:i,amountOfPages:n,currentPage:f},e}export{t as default};

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

@@ -12,6 +12,7 @@ function OverflowSlider(container, options, plugins) {
             slidesSelector: ":scope > *",
             emulateScrollSnap: false,
             emulateScrollSnapMaxThreshold: 64,
+            rtl: false,
         };
         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 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};
+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,rtl:!1},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

@@ -1,5 +1,5 @@
 import details from './details.esm.js';
-import { generateId, objectsAreEqual } from './utils.esm.js';
+import { generateId, objectsAreEqual, getOutermostChildrenEdgeMarginSum } from './utils.esm.js';
 
 function Slider(container, options, plugins) {
     let slider;
@@ -81,7 +81,7 @@ function Slider(container, options, plugins) {
         // any scroll
         slider.container.addEventListener('scroll', () => {
             const newScrollLeft = slider.container.scrollLeft;
-            if (scrollLeft !== newScrollLeft) {
+            if (Math.floor(scrollLeft) !== Math.floor(newScrollLeft)) {
                 if (!isScrolling) {
                     isScrolling = true;
                     slider.emit('scrollStart');
@@ -102,7 +102,7 @@ function Slider(container, options, plugins) {
         // user initted scroll (touchmove, mouse wheel, etc.)
         const nativeScrollHandler = () => {
             const newScrollLeft = slider.container.scrollLeft;
-            if (nativeScrollLeft !== newScrollLeft && !isProgrammaticScrolling) {
+            if (Math.floor(nativeScrollLeft) !== Math.floor(newScrollLeft) && !isProgrammaticScrolling) {
                 if (!isUserScrolling) {
                     slider.emit('nativeScrollStart');
                     isUserScrolling = true;
@@ -128,7 +128,7 @@ function Slider(container, options, plugins) {
         });
         slider.container.addEventListener('scroll', () => {
             const newScrollLeft = slider.container.scrollLeft;
-            if (programmaticScrollLeft !== newScrollLeft && !isUserScrolling && isProgrammaticScrolling) {
+            if (Math.floor(programmaticScrollLeft) !== Math.floor(newScrollLeft) && !isUserScrolling && isProgrammaticScrolling) {
                 programmaticScrollLeft = newScrollLeft;
                 clearTimeout(programmaticScrollTimeout);
                 programmaticScrollTimeout = setTimeout(() => {
@@ -184,6 +184,9 @@ function Slider(container, options, plugins) {
     }
     function setDataAttributes() {
         slider.container.setAttribute('data-has-overflow', slider.details.hasOverflow ? 'true' : 'false');
+        if (slider.options.rtl) {
+            slider.container.setAttribute('dir', 'rtl');
+        }
     }
     function ensureSlideIsInView(slide, scrollBehavior = null) {
         const behavior = scrollBehavior || slider.options.scrollBehavior;
@@ -194,13 +197,13 @@ function Slider(container, options, plugins) {
         const slideStart = slideRect.left - sliderRect.left + scrollLeft;
         const slideEnd = slideStart + slideRect.width;
         let scrollTarget = null;
-        if (slideStart < scrollLeft) {
+        if (Math.floor(slideStart) < Math.floor(scrollLeft)) {
             scrollTarget = slideStart;
         }
-        else if (slideEnd > scrollLeft + containerWidth) {
+        else if (Math.floor(slideEnd) > Math.floor(scrollLeft) + Math.floor(containerWidth)) {
             scrollTarget = slideEnd - containerWidth;
         }
-        else if (slideStart === 0) {
+        else if (Math.floor(slideStart) === 0) {
             scrollTarget = 0;
         }
         else {
@@ -215,19 +218,56 @@ function Slider(container, options, plugins) {
     }
     function setActiveSlideIdx() {
         const sliderRect = slider.container.getBoundingClientRect();
-        const scrollLeft = slider.container.scrollLeft;
+        const scrollLeft = slider.getScrollLeft();
         const slides = slider.slides;
         let activeSlideIdx = 0;
-        for (let i = 0; i < slides.length; i++) {
-            const slideRect = slides[i].getBoundingClientRect();
-            const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
-            if (slideStart > scrollLeft) {
-                activeSlideIdx = i;
-                break;
+        let scrolledPastLastSlide = false;
+        if (slider.options.rtl) {
+            const scrolledDistance = slider.getInclusiveScrollWidth() - scrollLeft - slider.getInclusiveClientWidth();
+            const slidePositions = [];
+            for (let i = slides.length - 1; i >= 0; i--) {
+                const slideRect = slides[i].getBoundingClientRect();
+                const slideEnd = Math.abs(slideRect.left) - Math.abs(sliderRect.left) + scrolledDistance;
+                slidePositions.push({
+                    slide: slides[i],
+                    slideEnd: slideEnd,
+                });
+            }
+            let closestSlide = null;
+            let closestDistance = null;
+            for (let i = 0; i < slidePositions.length; i++) {
+                const distance = Math.abs(slidePositions[i].slideEnd - scrolledDistance);
+                if (closestDistance === null || distance < closestDistance) {
+                    closestDistance = distance;
+                    closestSlide = slidePositions[i].slide;
+                }
+            }
+            if (closestSlide) {
+                activeSlideIdx = slides.indexOf(closestSlide);
+            }
+            else {
+                activeSlideIdx = slides.length - 1;
             }
         }
+        else {
+            for (let i = 0; i < slides.length; i++) {
+                const slideRect = slides[i].getBoundingClientRect();
+                const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
+                if (Math.floor(slideStart) >= Math.floor(scrollLeft)) {
+                    activeSlideIdx = i;
+                    break;
+                }
+                if (i === slides.length - 1) {
+                    scrolledPastLastSlide = true;
+                }
+            }
+        }
+        if (scrolledPastLastSlide) {
+            activeSlideIdx = slides.length - 1;
+        }
         const oldActiveSlideIdx = slider.activeSlideIdx;
         slider.activeSlideIdx = activeSlideIdx;
+        // console.log('activeSlideIdx', activeSlideIdx);
         if (oldActiveSlideIdx !== activeSlideIdx) {
             slider.emit('activeSlideChanged');
         }
@@ -238,12 +278,24 @@ function Slider(container, options, plugins) {
             ensureSlideIsInView(slide);
         }
     }
+    function getInclusiveScrollWidth() {
+        return slider.container.scrollWidth + getOutermostChildrenEdgeMarginSum(slider.container);
+    }
+    function getInclusiveClientWidth() {
+        return slider.container.clientWidth + getOutermostChildrenEdgeMarginSum(slider.container);
+    }
+    function getScrollLeft() {
+        return slider.options.rtl ? Math.abs(slider.container.scrollLeft) : slider.container.scrollLeft;
+    }
+    function setScrollLeft(value) {
+        slider.container.scrollLeft = slider.options.rtl ? -value : value;
+    }
     function getGapSize() {
         let gapSize = 0;
         if (slider.slides.length > 1) {
             const firstSlideRect = slider.slides[0].getBoundingClientRect();
             const secondSlideRect = slider.slides[1].getBoundingClientRect();
-            gapSize = secondSlideRect.left - firstSlideRect.right;
+            gapSize = slider.options.rtl ? Math.abs(Math.floor(secondSlideRect.right - firstSlideRect.left)) : Math.floor(secondSlideRect.left - firstSlideRect.right);
         }
         return gapSize;
     }
@@ -253,7 +305,7 @@ function Slider(container, options, plugins) {
         if (fullWidthOffset) {
             offset = parseInt(fullWidthOffset);
         }
-        return offset;
+        return Math.floor(offset);
     }
     function moveToDirection(direction = "prev") {
         const scrollStrategy = slider.options.scrollStrategy;
@@ -261,38 +313,47 @@ function Slider(container, options, plugins) {
         const sliderRect = slider.container.getBoundingClientRect();
         const containerWidth = slider.container.offsetWidth;
         let targetScrollPosition = scrollLeft;
-        if (direction === 'prev') {
+        const realDirection = slider.options.rtl ? (direction === 'prev' ? 'next' : 'prev') : direction;
+        if (realDirection === 'prev') {
             targetScrollPosition = Math.max(0, scrollLeft - slider.container.offsetWidth);
         }
-        else if (direction === 'next') {
-            targetScrollPosition = Math.min(slider.container.scrollWidth, scrollLeft + slider.container.offsetWidth);
+        else if (realDirection === 'next') {
+            targetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), scrollLeft + slider.container.offsetWidth);
         }
         if (scrollStrategy === 'fullSlide') {
-            let fullSldeTargetScrollPosition = null;
+            let fullSlideTargetScrollPosition = null;
             // extend targetScrollPosition to include gap
-            if (direction === 'prev') {
-                fullSldeTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
+            if (realDirection === 'prev') {
+                fullSlideTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
             }
             else {
-                fullSldeTargetScrollPosition = Math.min(slider.container.scrollWidth, targetScrollPosition + getGapSize());
+                fullSlideTargetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), targetScrollPosition + getGapSize());
             }
-            if (direction === 'next') {
+            if (realDirection === 'next') {
                 let partialSlideFound = false;
                 for (let slide of slider.slides) {
                     const slideRect = slide.getBoundingClientRect();
                     const slideStart = slideRect.left - sliderRect.left + scrollLeft;
                     const slideEnd = slideStart + slideRect.width;
-                    if (slideStart < targetScrollPosition && slideEnd > targetScrollPosition) {
-                        fullSldeTargetScrollPosition = slideStart;
+                    if (Math.floor(slideStart) < Math.floor(targetScrollPosition) && Math.floor(slideEnd) > Math.floor(targetScrollPosition)) {
+                        fullSlideTargetScrollPosition = slideStart;
                         partialSlideFound = true;
                         break;
                     }
                 }
                 if (!partialSlideFound) {
-                    fullSldeTargetScrollPosition = Math.min(targetScrollPosition, slider.container.scrollWidth - slider.container.offsetWidth);
+                    fullSlideTargetScrollPosition = Math.min(targetScrollPosition, slider.getInclusiveScrollWidth() - slider.container.offsetWidth);
                 }
-                if (fullSldeTargetScrollPosition && fullSldeTargetScrollPosition > scrollLeft) {
-                    targetScrollPosition = fullSldeTargetScrollPosition;
+                if (fullSlideTargetScrollPosition) {
+                    if (Math.floor(fullSlideTargetScrollPosition) > Math.floor(scrollLeft)) {
+                        // make sure fullSlideTargetScrollPosition is possible considering the container width
+                        const maxScrollPosition = Math.floor(slider.getInclusiveScrollWidth()) - Math.floor(containerWidth);
+                        targetScrollPosition = Math.min(fullSlideTargetScrollPosition, maxScrollPosition);
+                    }
+                    else {
+                        // cannot snap to slide, move one page worth of distance
+                        targetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), scrollLeft + containerWidth);
+                    }
                 }
             }
             else {
@@ -301,23 +362,23 @@ function Slider(container, options, plugins) {
                     const slideRect = slide.getBoundingClientRect();
                     const slideStart = slideRect.left - sliderRect.left + scrollLeft;
                     const slideEnd = slideStart + slideRect.width;
-                    if (slideStart < scrollLeft && slideEnd > scrollLeft) {
-                        fullSldeTargetScrollPosition = slideEnd - containerWidth;
+                    if (Math.floor(slideStart) < Math.floor(scrollLeft) && Math.floor(slideEnd) > Math.floor(scrollLeft)) {
+                        fullSlideTargetScrollPosition = slideEnd - containerWidth;
                         partialSlideFound = true;
                         break;
                     }
                 }
                 if (!partialSlideFound) {
-                    fullSldeTargetScrollPosition = Math.max(0, scrollLeft - containerWidth);
+                    fullSlideTargetScrollPosition = Math.max(0, scrollLeft - containerWidth);
                 }
-                if (fullSldeTargetScrollPosition && fullSldeTargetScrollPosition < scrollLeft) {
-                    targetScrollPosition = fullSldeTargetScrollPosition;
+                if (fullSlideTargetScrollPosition && Math.floor(fullSlideTargetScrollPosition) < Math.floor(scrollLeft)) {
+                    targetScrollPosition = fullSlideTargetScrollPosition;
                 }
             }
         }
         // add left offset
         const offsettedTargetScrollPosition = targetScrollPosition - getLeftOffset();
-        if (offsettedTargetScrollPosition >= 0) {
+        if (Math.floor(offsettedTargetScrollPosition) >= 0) {
             targetScrollPosition = offsettedTargetScrollPosition;
         }
         slider.emit('programmaticScrollStart');
@@ -326,12 +387,12 @@ function Slider(container, options, plugins) {
         setTimeout(() => slider.container.style.scrollBehavior = '', 50);
     }
     function snapToClosestSlide(direction = "prev") {
-        const isMovingForward = direction === 'next';
+        const isMovingForward = slider.options.rtl ? direction === 'prev' : 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 slideStart = slider.options.rtl ? Math.abs(slide.offsetLeft + slideWidth - slider.details.containerWidth) : slide.offsetLeft;
             const slideEnd = slideStart + slideWidth;
             const slideMiddle = slideStart + slideWidth / 2;
             const trigger = Math.min(slideMiddle, slideStart + slider.options.emulateScrollSnapMaxThreshold);
@@ -342,18 +403,22 @@ function Slider(container, options, plugins) {
                 width: slideWidth,
                 trigger: trigger,
                 slide: slide,
+                // debug
+                offSetleft: slide.offsetLeft,
+                rect: slide.getBoundingClientRect(),
             });
         }
+        console.log('slideReference', slideReference);
         let snapTarget = null;
-        const scrollPosition = slider.container.scrollLeft;
+        const scrollPosition = getScrollLeft();
         if (isMovingForward) {
             for (let i = 0; i < slideReference.length; i++) {
                 const item = slideReference[i];
-                if (i === 0 && scrollPosition <= item.trigger) {
+                if (i === 0 && Math.floor(scrollPosition) <= Math.floor(item.trigger)) {
                     snapTarget = 0;
                     break;
                 }
-                if (slider.container.scrollLeft <= item.trigger) {
+                if (Math.floor(getScrollLeft()) <= Math.floor(item.trigger)) {
                     snapTarget = item.start;
                     break;
                 }
@@ -362,11 +427,11 @@ function Slider(container, options, plugins) {
         else {
             for (let i = slideReference.length - 1; i >= 0; i--) {
                 const item = slideReference[i];
-                if (i === slideReference.length - 1 && scrollPosition >= item.trigger) {
+                if (i === slideReference.length - 1 && Math.floor(scrollPosition) >= Math.floor(item.trigger)) {
                     snapTarget = item.start;
                     break;
                 }
-                if (slider.container.scrollLeft >= item.trigger) {
+                if (Math.floor(getScrollLeft()) >= Math.floor(item.trigger)) {
                     snapTarget = item.start;
                     break;
                 }
@@ -374,12 +439,12 @@ function Slider(container, options, plugins) {
         }
         if (snapTarget !== null) {
             const offsettedSnapTarget = snapTarget - getLeftOffset();
-            if (offsettedSnapTarget >= 0) {
+            if (Math.floor(offsettedSnapTarget) >= 0) {
                 snapTarget = offsettedSnapTarget;
             }
             const scrollBehavior = slider.options.scrollBehavior || 'smooth';
             slider.container.scrollTo({
-                left: snapTarget,
+                left: slider.options.rtl ? -snapTarget : snapTarget,
                 behavior: scrollBehavior
             });
         }
@@ -407,6 +472,10 @@ function Slider(container, options, plugins) {
         moveToDirection,
         moveToSlide,
         snapToClosestSlide,
+        getInclusiveScrollWidth,
+        getInclusiveClientWidth,
+        getScrollLeft,
+        setScrollLeft,
         on,
         options,
     };

package/dist/core/slider.min.js

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

package/dist/core/utils.esm.js

@@ -18,5 +18,19 @@ function objectsAreEqual(obj1, obj2) {
     }
     return true;
 }
+function getOutermostChildrenEdgeMarginSum(el) {
+    if (el.children.length === 0) {
+        return 0;
+    }
+    // get the first child and its left margin
+    const firstChild = el.children[0];
+    const firstChildStyle = getComputedStyle(firstChild);
+    const firstChildMarginLeft = parseFloat(firstChildStyle.marginLeft);
+    // Get the last child and its right margin
+    const lastChild = el.children[el.children.length - 1];
+    const lastChildStyle = getComputedStyle(lastChild);
+    const lastChildMarginRight = parseFloat(lastChildStyle.marginRight);
+    return firstChildMarginLeft + lastChildMarginRight;
+}
 
-export { generateId, objectsAreEqual };
+export { generateId, getOutermostChildrenEdgeMarginSum, objectsAreEqual };

package/dist/core/utils.min.js

@@ -1 +1 @@
-function t(e,n=1){const r=`${e}-${n}`;return document.getElementById(r)?t(e,n+1):r}function e(t,e){const n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(let r of n)if(!1===e.hasOwnProperty(r)||t[r]!==e[r])return!1;return!0}export{t as generateId,e as objectsAreEqual};
+function e(t,n=1){const r=`${t}-${n}`;return document.getElementById(r)?e(t,n+1):r}function t(e,t){const n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(let r of n)if(!1===t.hasOwnProperty(r)||e[r]!==t[r])return!1;return!0}function n(e){if(0===e.children.length)return 0;const t=e.children[0],n=getComputedStyle(t),r=parseFloat(n.marginLeft),o=e.children[e.children.length-1],l=getComputedStyle(o);return r+parseFloat(l.marginRight)}export{e as generateId,n as getOutermostChildrenEdgeMarginSum,t as objectsAreEqual};

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;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%}
+.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}[dir=rtl] .overflow-slider-fade--start{left:auto}.overflow-slider-fade--end,[dir=rtl] .overflow-slider-fade--start{background:linear-gradient(to left,var(--overflow-slider-fade-color) 0,transparent 100%);right:0}[dir=rtl] .overflow-slider-fade--end{background:linear-gradient(to right,var(--overflow-slider-fade-color) 0,transparent 100%);left:0;right:auto}[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%}