@evermade/overflow-slider 4.2.1 → 4.2.3

package/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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/index.html

@@ -288,6 +288,35 @@
 								</div>
 							</div>
 
+							<div class="entry__item">
+								<h3>Keyboard focus</h3>
+								<p>Focused slide or slide's sub focusable element is moved into view when focused. This is core feature.</p>
+								<div class="example-container-1-focus-wrapper">
+									<div class="overflow-slider example-container example-container-1-focus">
+										<a href="#1" class="example-item example-item--1" style="width: 120px;">1</a>
+										<div class="example-item example-item--2" style="width: 500px;">
+											<a href="#2a" style="color: #fff;">2a</a>
+											<a href="#2b" style="color: #fff; margin-left: 1rem;">2b</a>
+										</div>
+										<a href="#3" class="example-item example-item--3" style="width: 80px;">3</a>
+										<div class="example-item example-item--4" style="width: 450px;">
+											<button type="button" style="padding: 0.5rem 1rem;">Button 4</button>
+										</div>
+										<a href="#5" class="example-item example-item--5" style="width: 150px;">5</a>
+										<div class="example-item example-item--6" style="width: 600px;">
+											<a href="#6a" style="color: #fff;">6a</a>
+											<input type="text" placeholder="Type here" style="margin-left: auto; padding: 0.25rem 0.5rem; width: 120px;" />
+										</div>
+										<a href="#7" class="example-item example-item--7" style="width: 100px;">7</a>
+										<a href="#8" class="example-item example-item--8">8</a>
+										<div class="example-item example-item--9" style="width: 400px;">
+											<a href="#9" style="color: #fff;">Link 9</a>
+										</div>
+										<a href="#10" class="example-item example-item--10" style="width: 140px;">10</a>
+									</div>
+								</div>
+							</div>
+
 						</section>
 
 						<section class="entry__section">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evermade/overflow-slider",
-	"version": "4.2.1",
+	"version": "4.2.3",
 	"description": "Accessible slider that is powered by overflow: auto.",
 	"type": "module",
 	"main": "dist/index.js",

package/src/core/slider.ts

@@ -202,20 +202,42 @@ export default function Slider( container: HTMLElement, options : SliderOptionAr
 			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 as HTMLElement;
-				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 as HTMLElement;
+
+			// 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);
 		});
 
 
@@ -265,6 +287,83 @@ export default function Slider( container: HTMLElement, options : SliderOptionAr
 		}
 	};
 
+	/**
+	 * 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: HTMLElement, focusedElement: HTMLElement ) {
+		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: number;
+
+		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();

package/src/core/types.ts

@@ -95,7 +95,8 @@ export type SliderHooks =
 	| HOOK_NATIVE_SCROLL_END
 	| HOOK_PROGRAMMATIC_SCROLL_START
 	| HOOK_PROGRAMMATIC_SCROLL
-	| HOOK_PROGRAMMATIC_SCROLL_END;
+	| HOOK_PROGRAMMATIC_SCROLL_END
+	| HOOK_FOCUS_SCROLL;
 
 export type HOOK_CREATED = 'created';
 export type HOOK_DETAILS_CHANGED = 'detailsChanged';
@@ -118,5 +119,7 @@ export type HOOK_PROGRAMMATIC_SCROLL_START = 'programmaticScrollStart';
 export type HOOK_PROGRAMMATIC_SCROLL = 'programmaticScroll';
 export type HOOK_PROGRAMMATIC_SCROLL_END = 'programmaticScrollEnd';
 
+// keyboard focus triggered scroll
+export type HOOK_FOCUS_SCROLL = 'focusScroll';
 
 export type SliderPlugin = (slider: Slider) => void;

package/src/overflow-slider.scss

@@ -22,6 +22,7 @@
 	overflow: auto;
 	width: 100%;
 	display: grid;
+	justify-content: flex-start;
 	grid-auto-flow: column;
 	grid-template-columns: max-content;
 	max-width: max-content;

package/src/plugins/thumbnails/index.ts

@@ -4,7 +4,7 @@ export type ThumbnailsOptions = {
 	mainSlider: Slider,
 };
 
-export default function FullWidthPlugin( args: DeepPartial<ThumbnailsOptions> ) {
+export default function ThumbnailPlugin( args: DeepPartial<ThumbnailsOptions> ) {
 	return ( slider: Slider ) => {
 
 		const options = <ThumbnailsOptions>{
@@ -43,14 +43,14 @@ export default function FullWidthPlugin( args: DeepPartial<ThumbnailsOptions> )
 			setTimeout(() => {
 				const mainActiveSlideIdx = mainSlider.activeSlideIdx;
 				const thumbActiveSlideIdx = slider.activeSlideIdx;
+				const activeThumbnail = slider.slides[mainActiveSlideIdx] as HTMLElement;
+				setActiveThumbnail(activeThumbnail);
 				if ( thumbActiveSlideIdx === mainActiveSlideIdx ) {
 					return;
 				}
-				const activeThumbnail = slider.slides[mainActiveSlideIdx] as HTMLElement;
-				setActiveThumbnail(activeThumbnail);
 				slider.moveToSlide(mainActiveSlideIdx);
 			}, 50);
 		});
-
 	};
 }
+