@evermade/overflow-slider 4.2.0 → 4.2.1

package/dist/overflow-slider.css

@@ -1 +1 @@
-: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-autoplay-background:#000}.overflow-slider__autoplay{background:var(--overflow-slider-autoplay-background)}: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%}.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-autoplay-background:#000}.overflow-slider__autoplay{background:var(--overflow-slider-autoplay-background)}: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: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%}.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}

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

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.d2.ts';
+import { DeepPartial, Slider } from '../core/index.js';
 
 type ArrowsMovementTypes = 'view' | 'slide';
 type ArrowsOptions = {

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

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.d2.ts';
+import { DeepPartial, Slider } from '../core/index.js';
 
 type AutoplayMovementTypes = 'view' | 'slide';
 type AutoplayPluginOptions = {

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

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

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

@@ -1,23 +1,78 @@
-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;
     getInclusiveClientWidth: () => number;
+    getGapSize: () => number;
+    getLeftOffset: () => number;
     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/dist/plugins/core/index.d2.ts

@@ -1,76 +1,25 @@
-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;
     getInclusiveClientWidth: () => number;
+    getGapSize: () => number;
+    getLeftOffset: () => number;
     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;
-    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;
+} | 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/dist/plugins/dots/index.d.ts

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

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

@@ -20,6 +20,7 @@ function DotsPlugin(args) {
         const buildDots = () => {
             dots.setAttribute('data-has-content', slider.details.hasOverflow.toString());
             dots.innerHTML = '';
+            console.log('buildDots');
             const dotsList = document.createElement('ul');
             const count = options.type === 'view' ? slider.details.amountOfPages : slider.details.slideCount;
             const currentIndex = options.type === 'view' ? slider.details.currentPage : slider.activeSlideIdx;
@@ -77,8 +78,15 @@ function DotsPlugin(args) {
             }
         };
         const activateDot = (index) => {
+            console.log('activateDot', index, 'slider.details', slider.details);
             if (options.type === 'view') {
-                const targetPosition = slider.details.containerWidth * (index - 1);
+                const count = slider.details.amountOfPages;
+                let targetPosition = slider.details.containerWidth * (index - 1);
+                // For the last page, scroll to the maximum scroll position to ensure it activates
+                if (index === count) {
+                    const maxScroll = slider.details.scrollableAreaWidth - slider.details.containerWidth;
+                    targetPosition = maxScroll;
+                }
                 const scrollLeft = slider.options.rtl ? -targetPosition : targetPosition;
                 slider.container.scrollTo({
                     left: scrollLeft,

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

@@ -1 +1 @@
-const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return 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};
+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 l={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},r=document.createElement("div");r.classList.add(l.classNames.dotsContainer);let d=null;const c=()=>{r.setAttribute("data-has-content",i.details.hasOverflow.toString()),r.innerHTML="",console.log("buildDots");const t=document.createElement("ul"),e="view"===l.type?i.details.amountOfPages:i.details.slideCount,n="view"===l.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",l.classNames.dotsItem),s.setAttribute("aria-label",l.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=r.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=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),u(t)}}if("ArrowRight"===t.key){const t=o+1;if(t<=e){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),u(t)}}})}if(r.appendChild(t),d){const t=r.querySelector(`[data-item="${d}"]`);t&&t.focus()}}},u=t=>{if(console.log("activateDot",t,"slider.details",i.details),"view"===l.type){const e=i.details.amountOfPages;let n=i.details.containerWidth*(t-1);if(t===e){n=i.details.scrollableAreaWidth-i.details.containerWidth}const o=i.options.rtl?-n:n;i.container.scrollTo({left:o,behavior:i.options.scrollBehavior})}else i.moveToSlide(t-1)};c(),l.container?l.container.appendChild(r):null===(a=i.container.parentNode)||void 0===a||a.insertBefore(r,i.container.nextSibling),i.on("scrollEnd",c),i.on("contentsChanged",c),i.on("containerSizeChanged",c),i.on("detailsChanged",c)}}export{n as default};

package/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/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/dist/plugins/full-width/index.d.ts

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

package/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/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/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;

package/docs/assets/demo.css

@@ -665,6 +665,12 @@ h3:before {
 	/* transform: scale(0); */
 }
 
+.example-container-1-dots-view-full {
+	width: 100vw;
+	margin-inline-start: calc(-50vw + 50%);
+	scroll-snap-type: x mandatory;
+}
+
 /* ===========================================================================
   Example 4: Filters
 =========================================================================== */

package/docs/assets/demo.js

@@ -139,6 +139,28 @@ import ClassNamesPlugin from '../dist/plugins/classnames/index.esm.js';
 		);
 		console.log( '1-dots-view', example1DotsView );
 
+		const example1DotsViewFull = new OverflowSlider(
+			document.querySelector( '.example-container-1-dots-view-full' ),
+			{
+				emulateScrollSnap: true,
+				rtl: document.documentElement.dir === 'rtl',
+				targetWidth: (slider) => {
+					return slider.container.parentElement.clientWidth;
+				}
+			},
+			[
+				FullWidthPlugin(),
+				DragScrollingPlugin(),
+				SkipLinksPlugin(),
+				DotsPlugin(
+					{
+						type: 'view'
+					}
+				),
+			]
+		);
+		console.log( '1-dots-view-full', example1DotsViewFull );
+
 		const example1Fade = new OverflowSlider(
 			document.querySelector( '.example-container-1-fade' ),
 			{

package/docs/dist/index.esm.js

@@ -7,7 +7,7 @@ function details(slider) {
     let containerHeight = 0;
     let scrollableAreaWidth = 0;
     let amountOfPages = 0;
-    let currentPage = 1;
+    let currentPage = 0;
     if (Math.floor(slider.getInclusiveScrollWidth()) > Math.floor(slider.getInclusiveClientWidth())) {
         hasOverflow = true;
     }
@@ -18,8 +18,11 @@ function details(slider) {
     amountOfPages = Math.ceil(scrollableAreaWidth / 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 (Math.floor(slider.getScrollLeft() + containerWidth) === Math.floor(scrollableAreaWidth)) {
+        // Consider as last page if we're within tolerance of the maximum scroll position
+        // When FullWidthPlugin is active, account for the margin offset
+        const maxScroll = scrollableAreaWidth - containerWidth - (2 * slider.getLeftOffset());
+        const currentScroll = slider.getScrollLeft();
+        if (currentScroll >= maxScroll - 1) {
             currentPage = amountOfPages - 1;
         }
     }
@@ -604,6 +607,8 @@ function Slider(container, options, plugins) {
         snapToClosestSlide,
         getInclusiveScrollWidth,
         getInclusiveClientWidth,
+        getLeftOffset,
+        getGapSize,
         getScrollLeft,
         setScrollLeft,
         setActiveSlideIdx,