@evermade/overflow-slider 4.2.1 → 4.2.3

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

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

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

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

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

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

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

@@ -1,10 +1,12 @@
-type Slider<O = {}, C = {}, H extends string = string> = {
+import { SliderOptionArgs, SliderPlugin, SliderCallback, SliderOptions, SliderDetails } from './index.d2.ts';
+
+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;
@@ -14,65 +16,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;
-    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/core/index.d2.ts

@@ -1,12 +1,10 @@
-import { SliderOptionArgs, SliderPlugin, SliderCallback, SliderOptions, SliderDetails } from './index.js';
-
-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;
@@ -16,10 +14,66 @@ 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 | HOOK_FOCUS_SCROLL;
+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 HOOK_FOCUS_SCROLL = 'focusScroll';
+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_FOCUS_SCROLL, 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/dots/index.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,9 @@
-import { DeepPartial, Slider } from '../core/index.js';
+import { DeepPartial, Slider } from '../core/index.d2.ts';
 
 type ThumbnailsOptions = {
     mainSlider: Slider;
 };
-declare function FullWidthPlugin(args: DeepPartial<ThumbnailsOptions>): (slider: Slider) => void;
+declare function ThumbnailPlugin(args: DeepPartial<ThumbnailsOptions>): (slider: Slider) => void;
 
-export { FullWidthPlugin as default };
+export { ThumbnailPlugin as default };
 export type { ThumbnailsOptions };

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

@@ -1,4 +1,4 @@
-function FullWidthPlugin(args) {
+function ThumbnailPlugin(args) {
     return (slider) => {
         const options = {
             mainSlider: args.mainSlider,
@@ -31,15 +31,15 @@ function FullWidthPlugin(args) {
             setTimeout(() => {
                 const mainActiveSlideIdx = mainSlider.activeSlideIdx;
                 const thumbActiveSlideIdx = slider.activeSlideIdx;
+                const activeThumbnail = slider.slides[mainActiveSlideIdx];
+                setActiveThumbnail(activeThumbnail);
                 if (thumbActiveSlideIdx === mainActiveSlideIdx) {
                     return;
                 }
-                const activeThumbnail = slider.slides[mainActiveSlideIdx];
-                setActiveThumbnail(activeThumbnail);
                 slider.moveToSlide(mainActiveSlideIdx);
             }, 50);
         });
     };
 }
 
-export { FullWidthPlugin as default };
+export { ThumbnailPlugin as default };

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

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

package/docs/assets/demo.css

@@ -846,3 +846,8 @@ h3:before {
 	--overflow-slider-dot-inactive-color: rgba(0, 0, 0, 0.2);
 	--overflow-slider-dot-active-color: rgba(0, 0, 0, .8);
 }
+
+.example-container-1-focus .example-item {
+	aspect-ratio: unset;
+	height: 200px;
+}

package/docs/assets/demo.js

@@ -241,6 +241,17 @@ import ClassNamesPlugin from '../dist/plugins/classnames/index.esm.js';
 		);
 		console.log( '1-autoplay-view', example1AutoplayView );
 
+		const example1Focus = new OverflowSlider(
+			document.querySelector( '.example-container-1-focus' ),
+			{
+				rtl: document.documentElement.dir === 'rtl',
+			},
+			[
+				DragScrollingPlugin(),
+			]
+		);
+		console.log( '1-focus', example1Focus );
+
 		const example2PerfectFit = new OverflowSlider(
 			document.querySelector( '.example-container-2-perfect-fit' ),
 			{

package/docs/dist/index.d.ts

@@ -1 +1 @@
-export { default as OverflowSlider } from './plugins/core/index.d2.ts';
+export { default as OverflowSlider } from './plugins/core/index.js';

package/docs/dist/index.esm.js

@@ -21,8 +21,7 @@ function details(slider) {
         // 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) {
+        if (slider.getScrollLeft() >= maxScroll - 1) {
             currentPage = amountOfPages - 1;
         }
     }
@@ -253,21 +252,38 @@ function Slider(container, options, plugins) {
             wasInteractedWith = true;
         }, { passive: true });
         slider.container.addEventListener('focusin', (e) => {
-            // move target parents as long as they are not the container
-            // but only if focus didn't start from mouse or touch
-            if (!wasInteractedWith) {
-                let target = e.target;
-                while (target.parentElement !== slider.container) {
-                    if (target.parentElement) {
-                        target = target.parentElement;
-                    }
-                    else {
-                        break;
-                    }
-                }
-                ensureSlideIsInView(target, 'auto');
+            // Only handle keyboard-initiated focus (not mouse or touch)
+            if (wasInteractedWith) {
+                wasInteractedWith = false;
+                return;
             }
             wasInteractedWith = false;
+            // No scrolling needed if there is no overflow
+            if (!slider.details.hasOverflow) {
+                return;
+            }
+            const focusedElement = e.target;
+            // Walk up from the focused element to find the direct child (slide) of the container
+            let slide = focusedElement;
+            while (slide.parentElement !== slider.container) {
+                if (slide.parentElement) {
+                    slide = slide.parentElement;
+                }
+                else {
+                    // Focused element is not inside the slider container
+                    return;
+                }
+            }
+            // Emit programmaticScrollStart immediately so the browser's native focus
+            // scroll events are classified as programmatic (not native). This prevents
+            // nativeScrollStart from restoring scrollSnapType and fighting our correction.
+            slider.emit('programmaticScrollStart');
+            // Use setTimeout to let the browser's native focus scroll complete,
+            // then override with our WCAG-compliant scroll positioning
+            setTimeout(() => {
+                scrollFocusedSlideIntoView(slide, focusedElement);
+                slider.emit('focusScroll');
+            }, 50);
         });
     }
     function setCSSVariables() {
@@ -314,6 +330,82 @@ function Slider(container, options, plugins) {
             }, 50, scrollTarget);
         }
     }
+    /**
+     * Scrolls a focused slide (or child element) into view for WCAG AA compliance.
+     * Priority:
+     *   1. Show the full slide if it fits in the container
+     *   2. If the slide is wider than the container, show the focused element
+     *   3. If neither fits, align the leading edge (left for LTR, right for RTL)
+     */
+    function scrollFocusedSlideIntoView(slide, focusedElement) {
+        const isRtl = slider.options.rtl;
+        const containerRect = slider.container.getBoundingClientRect();
+        const containerWidth = slider.container.offsetWidth;
+        const slideRect = slide.getBoundingClientRect();
+        const scrollLeft = slider.container.scrollLeft;
+        // Calculate visual offsets relative to the container viewport
+        const slideLeftOffset = slideRect.left - containerRect.left;
+        const slideRightOffset = slideRect.right - containerRect.right;
+        // Check if slide is already fully visible (1px tolerance for sub-pixel rounding)
+        if (slideLeftOffset >= -1 && slideRightOffset <= 1) {
+            slider.container.style.scrollSnapType = '';
+            slider.emit('programmaticScrollEnd');
+            return;
+        }
+        let scrollTarget;
+        if (slideRect.width <= containerWidth) {
+            // Slide fits in container — align its leading edge to show it fully
+            if (isRtl) {
+                // RTL: align slide's right edge with container's right edge
+                scrollTarget = scrollLeft + slideRightOffset;
+            }
+            else {
+                // LTR: align slide's left edge with container's left edge
+                scrollTarget = scrollLeft + slideLeftOffset;
+            }
+        }
+        else if (focusedElement !== slide) {
+            // Slide is wider than container — try to show the focused child element
+            const focusRect = focusedElement.getBoundingClientRect();
+            const focusLeftOffset = focusRect.left - containerRect.left;
+            const focusRightOffset = focusRect.right - containerRect.right;
+            // Check if focused element is already fully visible
+            if (focusLeftOffset >= -1 && focusRightOffset <= 1) {
+                slider.container.style.scrollSnapType = '';
+                slider.emit('programmaticScrollEnd');
+                return;
+            }
+            if (focusRect.width <= containerWidth) {
+                // Focused element fits in container — align its leading edge
+                if (isRtl) {
+                    scrollTarget = scrollLeft + focusRightOffset;
+                }
+                else {
+                    scrollTarget = scrollLeft + focusLeftOffset;
+                }
+            }
+            else {
+                // Focused element is also wider than container — align leading edge
+                if (isRtl) {
+                    scrollTarget = scrollLeft + focusRightOffset;
+                }
+                else {
+                    scrollTarget = scrollLeft + focusLeftOffset;
+                }
+            }
+        }
+        else {
+            // Slide is the focused element and wider than container — align leading edge
+            if (isRtl) {
+                scrollTarget = scrollLeft + slideRightOffset;
+            }
+            else {
+                scrollTarget = scrollLeft + slideLeftOffset;
+            }
+        }
+        slider.emit('programmaticScrollStart');
+        slider.container.scrollTo({ left: scrollTarget, behavior: 'auto' });
+    }
     function setActiveSlideIdx() {
         const sliderRect = slider.container.getBoundingClientRect();
         const scrollLeft = slider.getScrollLeft();