@evermade/overflow-slider 4.0.0 → 4.2.0

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
-import { DeepPartial, Slider } from '../core/index.d2.ts';
+import { DeepPartial, Slider } from '../core/index.js';
 
 type DotsOptions = {
+    type: 'view' | 'slide';
     texts: {
         dotDescription: string;
     };

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

@@ -7,11 +7,12 @@ const DEFAULT_CLASS_NAMES = {
 };
 function DotsPlugin(args) {
     return (slider) => {
-        var _a, _b;
+        var _a, _b, _c;
         const options = {
+            type: (_a = args === null || args === void 0 ? void 0 : args.type) !== null && _a !== void 0 ? _a : 'slide',
             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,
+            container: (_b = args === null || args === void 0 ? void 0 : args.container) !== null && _b !== void 0 ? _b : null,
         };
         const dots = document.createElement('div');
         dots.classList.add(options.classNames.dotsContainer);
@@ -20,18 +21,18 @@ function DotsPlugin(args) {
             dots.setAttribute('data-has-content', slider.details.hasOverflow.toString());
             dots.innerHTML = '';
             const dotsList = document.createElement('ul');
-            const pages = slider.details.slideCount;
-            const currentItem = slider.activeSlideIdx;
-            if (pages <= 1) {
+            const count = options.type === 'view' ? slider.details.amountOfPages : slider.details.slideCount;
+            const currentIndex = options.type === 'view' ? slider.details.currentPage : slider.activeSlideIdx;
+            if (count <= 1) {
                 return;
             }
-            for (let i = 0; i < pages; i++) {
+            for (let i = 0; i < count; 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 === currentItem).toString());
+                dot.setAttribute('aria-label', options.texts.dotDescription.replace('%d', (i + 1).toString()).replace('%d', count.toString()));
+                dot.setAttribute('aria-pressed', (i === currentIndex).toString());
                 dot.setAttribute('data-item', (i + 1).toString());
                 dotListItem.appendChild(dot);
                 dotsList.appendChild(dotListItem);
@@ -45,23 +46,23 @@ function DotsPlugin(args) {
                     }
                     const currentItem = parseInt((_a = currentItemItem.getAttribute('data-item')) !== null && _a !== void 0 ? _a : '1');
                     if (e.key === 'ArrowLeft') {
-                        const previousPage = currentItem - 1;
-                        if (previousPage > 0) {
-                            const matchingDot = dots.querySelector(`[data-item="${previousPage}"]`);
+                        const previousIndex = currentItem - 1;
+                        if (previousIndex > 0) {
+                            const matchingDot = dots.querySelector(`[data-item="${previousIndex}"]`);
                             if (matchingDot) {
                                 matchingDot.focus();
                             }
-                            activateDot(previousPage);
+                            activateDot(previousIndex);
                         }
                     }
                     if (e.key === 'ArrowRight') {
-                        const nextPage = currentItem + 1;
-                        if (nextPage <= pages) {
-                            const matchingDot = dots.querySelector(`[data-item="${nextPage}"]`);
+                        const nextIndex = currentItem + 1;
+                        if (nextIndex <= count) {
+                            const matchingDot = dots.querySelector(`[data-item="${nextIndex}"]`);
                             if (matchingDot) {
                                 matchingDot.focus();
                             }
-                            activateDot(nextPage);
+                            activateDot(nextIndex);
                         }
                     }
                 });
@@ -75,19 +76,30 @@ function DotsPlugin(args) {
                 }
             }
         };
-        const activateDot = (item) => {
-            slider.moveToSlide(item - 1);
+        const activateDot = (index) => {
+            if (options.type === 'view') {
+                const targetPosition = slider.details.containerWidth * (index - 1);
+                const scrollLeft = slider.options.rtl ? -targetPosition : targetPosition;
+                slider.container.scrollTo({
+                    left: scrollLeft,
+                    behavior: slider.options.scrollBehavior
+                });
+            }
+            else {
+                slider.moveToSlide(index - 1);
+            }
         };
         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);
+            (_c = slider.container.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(dots, slider.container.nextSibling);
         }
         slider.on('scrollEnd', buildDots);
         slider.on('contentsChanged', buildDots);
         slider.on('containerSizeChanged', buildDots);
+        slider.on('detailsChanged', buildDots);
     };
 }
 

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

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

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

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.d2.ts';
+import { DeepPartial, Slider } from '../core/index.js';
 
 type DragScrollingOptions = {
     draggedDistanceThatPreventsClick: number;

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

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.d2.ts';
+import { DeepPartial, Slider } from '../core/index.js';
 
 type FadeOptions = {
     classNames: {

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

@@ -1,7 +1,7 @@
-import { DeepPartial, Slider } from '../core/index.d2.ts';
+import { DeepPartial, Slider } from '../core/index.js';
 
 type FullWidthOptions = {
-    targetWidth: (slider: Slider) => number;
+    targetWidth?: (slider: Slider) => number;
     addMarginBefore: boolean;
     addMarginAfter: boolean;
 };

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { SliderPlugin } from '../core/index.d2.ts';
+import { SliderPlugin } from '../core/index.js';
 
 /**
  * Infinite‐scroll plugin

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

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.d2.ts';
+import { DeepPartial, Slider } from '../core/index.js';
 
 type ScrollIndicatorOptions = {
     classNames: {

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

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.d2.ts';
+import { DeepPartial, Slider } from '../core/index.js';
 
 type SkipLinkOptions = {
     texts: {

package/docs/dist/plugins/thumbnails/index.d.ts

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.d2.ts';
+import { DeepPartial, Slider } from '../core/index.js';
 
 type ThumbnailsOptions = {
     mainSlider: Slider;