Reduce the file size. Fix lint errors.

dist/js/splide.cjs.js

@@ -643,30 +643,32 @@ function Media(Splide2, Components2, options) {
   };
 }
 
+var ARROW = "Arrow";
+var ARROW_LEFT = ARROW + "Left";
+var ARROW_RIGHT = ARROW + "Right";
+var ARROW_UP = ARROW + "Up";
+var ARROW_DOWN = ARROW + "Down";
 var RTL = "rtl";
 var TTB = "ttb";
 var ORIENTATION_MAP = {
-  marginRight: ["marginBottom", "marginLeft"],
-  autoWidth: ["autoHeight"],
-  fixedWidth: ["fixedHeight"],
-  paddingLeft: ["paddingTop", "paddingRight"],
-  paddingRight: ["paddingBottom", "paddingLeft"],
   width: ["height"],
-  Width: ["Height"],
   left: ["top", "right"],
   right: ["bottom", "left"],
   x: ["y"],
   X: ["Y"],
   Y: ["X"],
-  ArrowLeft: ["ArrowUp", "ArrowRight"],
-  ArrowRight: ["ArrowDown", "ArrowLeft"]
+  ArrowLeft: [ARROW_UP, ARROW_RIGHT],
+  ArrowRight: [ARROW_DOWN, ARROW_LEFT]
 };
 
 function Direction(Splide2, Components2, options) {
   function resolve(prop, axisOnly, direction) {
     direction = direction || options.direction;
     var index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
-    return ORIENTATION_MAP[prop][index] || prop;
+    return ORIENTATION_MAP[prop] && ORIENTATION_MAP[prop][index] || prop.replace(/width|left|right/i, function (match, offset) {
+      var replacement = ORIENTATION_MAP[match.toLowerCase()][index] || match;
+      return offset > 0 ? replacement.charAt(0).toUpperCase() + replacement.slice(1) : replacement;
+    });
   }
 
   function orient(value) {
@@ -718,7 +720,8 @@ var CLASS_PREV = "is-prev";
 var CLASS_NEXT = "is-next";
 var CLASS_VISIBLE = "is-visible";
 var CLASS_LOADING = "is-loading";
-var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING];
+var CLASS_FOCUS_VISIBLE = "has-focus-visible";
+var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_VISIBLE];
 var CLASSES = {
   slide: CLASS_SLIDE,
   clone: CLASS_CLONE,
@@ -749,9 +752,16 @@ function closest(from, selector) {
   return elm;
 }
 
+var FRICTION = 5;
+var LOG_INTERVAL = 200;
+var POINTER_DOWN_EVENTS = "touchstart mousedown";
+var POINTER_MOVE_EVENTS = "touchmove mousemove";
+var POINTER_UP_EVENTS = "touchend touchcancel mouseup";
+
 function Elements(Splide2, Components2, options) {
   var _EventInterface = EventInterface(Splide2),
-      on = _EventInterface.on;
+      on = _EventInterface.on,
+      bind = _EventInterface.bind;
 
   var root = Splide2.root;
   var i18n = options.i18n;
@@ -762,6 +772,7 @@ function Elements(Splide2, Components2, options) {
   var rootRole;
   var track;
   var list;
+  var isUsingKey;
 
   function setup() {
     collect();
@@ -773,6 +784,14 @@ function Elements(Splide2, Components2, options) {
     on(EVENT_REFRESH, destroy);
     on(EVENT_REFRESH, setup);
     on(EVENT_UPDATED, update);
+    bind(document, POINTER_DOWN_EVENTS + " keydown", function (e) {
+      isUsingKey = e.type === "keydown";
+    }, {
+      capture: true
+    });
+    bind(root, "focusin", function () {
+      toggleClass(root, CLASS_FOCUS_VISIBLE, !!isUsingKey);
+    });
   }
 
   function destroy() {
@@ -2073,11 +2092,6 @@ var SCROLL_LISTENER_OPTIONS = {
   passive: false,
   capture: true
 };
-var FRICTION = 5;
-var LOG_INTERVAL = 200;
-var POINTER_DOWN_EVENTS = "touchstart mousedown";
-var POINTER_MOVE_EVENTS = "touchmove mousemove";
-var POINTER_UP_EVENTS = "touchend touchcancel mouseup";
 
 function Drag(Splide2, Components2, options) {
   var _EventInterface10 = EventInterface(Splide2),
@@ -2294,10 +2308,10 @@ function Drag(Splide2, Components2, options) {
 
 var NORMALIZATION_MAP = {
   Spacebar: " ",
-  Right: "ArrowRight",
-  Left: "ArrowLeft",
-  Up: "ArrowUp",
-  Down: "ArrowDown"
+  Right: ARROW_RIGHT,
+  Left: ARROW_LEFT,
+  Up: ARROW_UP,
+  Down: ARROW_DOWN
 };
 
 function normalizeKey(key) {
@@ -2354,9 +2368,9 @@ function Keyboard(Splide2, Components2, options) {
     if (!disabled) {
       var key = normalizeKey(e);
 
-      if (key === resolve("ArrowLeft")) {
+      if (key === resolve(ARROW_LEFT)) {
         Splide2.go("<");
-      } else if (key === resolve("ArrowRight")) {
+      } else if (key === resolve(ARROW_RIGHT)) {
         Splide2.go(">");
       }
     }
@@ -2581,9 +2595,9 @@ function Pagination(Splide2, Components2, options) {
     var dir = getDirection();
     var nextPage = -1;
 
-    if (key === resolve("ArrowRight", false, dir)) {
+    if (key === resolve(ARROW_RIGHT, false, dir)) {
       nextPage = ++page % length;
-    } else if (key === resolve("ArrowLeft", false, dir)) {
+    } else if (key === resolve(ARROW_LEFT, false, dir)) {
       nextPage = (--page + length) % length;
     } else if (key === "Home") {
       nextPage = 0;
@@ -3649,6 +3663,7 @@ exports.CLASS_ARROW_NEXT = CLASS_ARROW_NEXT;
 exports.CLASS_ARROW_PREV = CLASS_ARROW_PREV;
 exports.CLASS_CLONE = CLASS_CLONE;
 exports.CLASS_CONTAINER = CLASS_CONTAINER;
+exports.CLASS_FOCUS_VISIBLE = CLASS_FOCUS_VISIBLE;
 exports.CLASS_INITIALIZED = CLASS_INITIALIZED;
 exports.CLASS_LIST = CLASS_LIST;
 exports.CLASS_LOADING = CLASS_LOADING;

dist/js/splide.esm.js

@@ -638,30 +638,32 @@ function Media(Splide2, Components2, options) {
   };
 }
 
+var ARROW = "Arrow";
+var ARROW_LEFT = ARROW + "Left";
+var ARROW_RIGHT = ARROW + "Right";
+var ARROW_UP = ARROW + "Up";
+var ARROW_DOWN = ARROW + "Down";
 var RTL = "rtl";
 var TTB = "ttb";
 var ORIENTATION_MAP = {
-  marginRight: ["marginBottom", "marginLeft"],
-  autoWidth: ["autoHeight"],
-  fixedWidth: ["fixedHeight"],
-  paddingLeft: ["paddingTop", "paddingRight"],
-  paddingRight: ["paddingBottom", "paddingLeft"],
   width: ["height"],
-  Width: ["Height"],
   left: ["top", "right"],
   right: ["bottom", "left"],
   x: ["y"],
   X: ["Y"],
   Y: ["X"],
-  ArrowLeft: ["ArrowUp", "ArrowRight"],
-  ArrowRight: ["ArrowDown", "ArrowLeft"]
+  ArrowLeft: [ARROW_UP, ARROW_RIGHT],
+  ArrowRight: [ARROW_DOWN, ARROW_LEFT]
 };
 
 function Direction(Splide2, Components2, options) {
   function resolve(prop, axisOnly, direction) {
     direction = direction || options.direction;
     var index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
-    return ORIENTATION_MAP[prop][index] || prop;
+    return ORIENTATION_MAP[prop] && ORIENTATION_MAP[prop][index] || prop.replace(/width|left|right/i, function (match, offset) {
+      var replacement = ORIENTATION_MAP[match.toLowerCase()][index] || match;
+      return offset > 0 ? replacement.charAt(0).toUpperCase() + replacement.slice(1) : replacement;
+    });
   }
 
   function orient(value) {
@@ -713,7 +715,8 @@ var CLASS_PREV = "is-prev";
 var CLASS_NEXT = "is-next";
 var CLASS_VISIBLE = "is-visible";
 var CLASS_LOADING = "is-loading";
-var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING];
+var CLASS_FOCUS_VISIBLE = "has-focus-visible";
+var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_VISIBLE];
 var CLASSES = {
   slide: CLASS_SLIDE,
   clone: CLASS_CLONE,
@@ -744,9 +747,16 @@ function closest(from, selector) {
   return elm;
 }
 
+var FRICTION = 5;
+var LOG_INTERVAL = 200;
+var POINTER_DOWN_EVENTS = "touchstart mousedown";
+var POINTER_MOVE_EVENTS = "touchmove mousemove";
+var POINTER_UP_EVENTS = "touchend touchcancel mouseup";
+
 function Elements(Splide2, Components2, options) {
   var _EventInterface = EventInterface(Splide2),
-      on = _EventInterface.on;
+      on = _EventInterface.on,
+      bind = _EventInterface.bind;
 
   var root = Splide2.root;
   var i18n = options.i18n;
@@ -757,6 +767,7 @@ function Elements(Splide2, Components2, options) {
   var rootRole;
   var track;
   var list;
+  var isUsingKey;
 
   function setup() {
     collect();
@@ -768,6 +779,14 @@ function Elements(Splide2, Components2, options) {
     on(EVENT_REFRESH, destroy);
     on(EVENT_REFRESH, setup);
     on(EVENT_UPDATED, update);
+    bind(document, POINTER_DOWN_EVENTS + " keydown", function (e) {
+      isUsingKey = e.type === "keydown";
+    }, {
+      capture: true
+    });
+    bind(root, "focusin", function () {
+      toggleClass(root, CLASS_FOCUS_VISIBLE, !!isUsingKey);
+    });
   }
 
   function destroy() {
@@ -2068,11 +2087,6 @@ var SCROLL_LISTENER_OPTIONS = {
   passive: false,
   capture: true
 };
-var FRICTION = 5;
-var LOG_INTERVAL = 200;
-var POINTER_DOWN_EVENTS = "touchstart mousedown";
-var POINTER_MOVE_EVENTS = "touchmove mousemove";
-var POINTER_UP_EVENTS = "touchend touchcancel mouseup";
 
 function Drag(Splide2, Components2, options) {
   var _EventInterface10 = EventInterface(Splide2),
@@ -2289,10 +2303,10 @@ function Drag(Splide2, Components2, options) {
 
 var NORMALIZATION_MAP = {
   Spacebar: " ",
-  Right: "ArrowRight",
-  Left: "ArrowLeft",
-  Up: "ArrowUp",
-  Down: "ArrowDown"
+  Right: ARROW_RIGHT,
+  Left: ARROW_LEFT,
+  Up: ARROW_UP,
+  Down: ARROW_DOWN
 };
 
 function normalizeKey(key) {
@@ -2349,9 +2363,9 @@ function Keyboard(Splide2, Components2, options) {
     if (!disabled) {
       var key = normalizeKey(e);
 
-      if (key === resolve("ArrowLeft")) {
+      if (key === resolve(ARROW_LEFT)) {
         Splide2.go("<");
-      } else if (key === resolve("ArrowRight")) {
+      } else if (key === resolve(ARROW_RIGHT)) {
         Splide2.go(">");
       }
     }
@@ -2576,9 +2590,9 @@ function Pagination(Splide2, Components2, options) {
     var dir = getDirection();
     var nextPage = -1;
 
-    if (key === resolve("ArrowRight", false, dir)) {
+    if (key === resolve(ARROW_RIGHT, false, dir)) {
       nextPage = ++page % length;
-    } else if (key === resolve("ArrowLeft", false, dir)) {
+    } else if (key === resolve(ARROW_LEFT, false, dir)) {
       nextPage = (--page + length) % length;
     } else if (key === "Home") {
       nextPage = 0;
@@ -3636,4 +3650,4 @@ var SplideRenderer = /*#__PURE__*/function () {
   return SplideRenderer;
 }();
 
-export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBinder, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };
+export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_FOCUS_VISIBLE, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBinder, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };

dist/js/splide.js

@@ -639,30 +639,32 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     };
   }
 
+  var ARROW = "Arrow";
+  var ARROW_LEFT = ARROW + "Left";
+  var ARROW_RIGHT = ARROW + "Right";
+  var ARROW_UP = ARROW + "Up";
+  var ARROW_DOWN = ARROW + "Down";
   var RTL = "rtl";
   var TTB = "ttb";
   var ORIENTATION_MAP = {
-    marginRight: ["marginBottom", "marginLeft"],
-    autoWidth: ["autoHeight"],
-    fixedWidth: ["fixedHeight"],
-    paddingLeft: ["paddingTop", "paddingRight"],
-    paddingRight: ["paddingBottom", "paddingLeft"],
     width: ["height"],
-    Width: ["Height"],
     left: ["top", "right"],
     right: ["bottom", "left"],
     x: ["y"],
     X: ["Y"],
     Y: ["X"],
-    ArrowLeft: ["ArrowUp", "ArrowRight"],
-    ArrowRight: ["ArrowDown", "ArrowLeft"]
+    ArrowLeft: [ARROW_UP, ARROW_RIGHT],
+    ArrowRight: [ARROW_DOWN, ARROW_LEFT]
   };
 
   function Direction(Splide2, Components2, options) {
     function resolve(prop, axisOnly, direction) {
       direction = direction || options.direction;
       var index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
-      return ORIENTATION_MAP[prop][index] || prop;
+      return ORIENTATION_MAP[prop] && ORIENTATION_MAP[prop][index] || prop.replace(/width|left|right/i, function (match, offset) {
+        var replacement = ORIENTATION_MAP[match.toLowerCase()][index] || match;
+        return offset > 0 ? replacement.charAt(0).toUpperCase() + replacement.slice(1) : replacement;
+      });
     }
 
     function orient(value) {
@@ -2300,10 +2302,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
   var NORMALIZATION_MAP = {
     Spacebar: " ",
-    Right: "ArrowRight",
-    Left: "ArrowLeft",
-    Up: "ArrowUp",
-    Down: "ArrowDown"
+    Right: ARROW_RIGHT,
+    Left: ARROW_LEFT,
+    Up: ARROW_UP,
+    Down: ARROW_DOWN
   };
 
   function normalizeKey(key) {
@@ -2360,9 +2362,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       if (!disabled) {
         var key = normalizeKey(e);
 
-        if (key === resolve("ArrowLeft")) {
+        if (key === resolve(ARROW_LEFT)) {
           Splide2.go("<");
-        } else if (key === resolve("ArrowRight")) {
+        } else if (key === resolve(ARROW_RIGHT)) {
           Splide2.go(">");
         }
       }
@@ -2587,9 +2589,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       var dir = getDirection();
       var nextPage = -1;
 
-      if (key === resolve("ArrowRight", false, dir)) {
+      if (key === resolve(ARROW_RIGHT, false, dir)) {
         nextPage = ++page % length;
-      } else if (key === resolve("ArrowLeft", false, dir)) {
+      } else if (key === resolve(ARROW_LEFT, false, dir)) {
         nextPage = (--page + length) % length;
       } else if (key === "Home") {
         nextPage = 0;

dist/types/index.d.ts

@@ -1595,6 +1595,7 @@ declare const CLASS_PREV = "is-prev";
 declare const CLASS_NEXT = "is-next";
 declare const CLASS_VISIBLE = "is-visible";
 declare const CLASS_LOADING = "is-loading";
+declare const CLASS_FOCUS_VISIBLE = "has-focus-visible";
 /**
  * The array with all status classes.
  *
@@ -1618,4 +1619,4 @@ declare const CLASSES: {
     spinner: string;
 };
 
-export { AnyFunction, ArrowsComponent, AutoplayComponent, BaseComponent, CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, Cast, ClonesComponent, ComponentConstructor, Components, ControllerComponent, CoverComponent, DirectionComponent, DragComponent, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, ElementsComponent, EventBinder, EventBinderObject, EventInterface, EventInterfaceObject, EventMap, Head, KeyboardComponent, LayoutComponent, LazyLoadComponent, LiveComponent, MediaComponent, MoveComponent, Options, PaginationComponent, PaginationData, PaginationItem, Push, RequestInterval, RequestIntervalInterface, Resolve, ResponsiveOptions, STATUS_CLASSES, ScrollComponent, Shift, ShiftN, SlideComponent, SlidesComponent, Splide, SplideRenderer, State, StateObject, SyncComponent, SyncTarget, Throttle, ThrottleInstance, TransitionComponent, WheelComponent, Splide as default };
+export { AnyFunction, ArrowsComponent, AutoplayComponent, BaseComponent, CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_FOCUS_VISIBLE, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, Cast, ClonesComponent, ComponentConstructor, Components, ControllerComponent, CoverComponent, DirectionComponent, DragComponent, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, ElementsComponent, EventBinder, EventBinderObject, EventInterface, EventInterfaceObject, EventMap, Head, KeyboardComponent, LayoutComponent, LazyLoadComponent, LiveComponent, MediaComponent, MoveComponent, Options, PaginationComponent, PaginationData, PaginationItem, Push, RequestInterval, RequestIntervalInterface, Resolve, ResponsiveOptions, STATUS_CLASSES, ScrollComponent, Shift, ShiftN, SlideComponent, SlidesComponent, Splide, SplideRenderer, State, StateObject, SyncComponent, SyncTarget, Throttle, ThrottleInstance, TransitionComponent, WheelComponent, Splide as default };

src/css/template/default/foundation/mixins.scss

@@ -5,7 +5,7 @@ $outline-offset: 3px !default;
 $outline-offset-inset: -3px !default;
 
 @mixin ie-only {
-  @media screen and ( -ms-high-contrast: none ) {
+  @media screen and (-ms-high-contrast: none) {
     @content;
   }
 }
@@ -25,4 +25,4 @@ $outline-offset-inset: -3px !default;
   @include ie-only {
     border: $outline;
   }
-}
+}

src/js/components/Direction/Direction.ts

@@ -1,3 +1,4 @@
+import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from '../../constants/arrows';
 import { RTL, TTB } from '../../constants/directions';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
@@ -19,20 +20,14 @@ export interface DirectionComponent extends BaseComponent {
  * @since 3.0.0
  */
 export const ORIENTATION_MAP = {
-  marginRight : [ 'marginBottom', 'marginLeft' ],
-  autoWidth   : [ 'autoHeight' ],
-  fixedWidth  : [ 'fixedHeight' ],
-  paddingLeft : [ 'paddingTop', 'paddingRight' ],
-  paddingRight: [ 'paddingBottom', 'paddingLeft' ],
-  width       : [ 'height' ],
-  Width       : [ 'Height' ],
-  left        : [ 'top', 'right' ],
-  right       : [ 'bottom', 'left' ],
-  x           : [ 'y' ],
-  X           : [ 'Y' ],
-  Y           : [ 'X' ],
-  ArrowLeft   : [ 'ArrowUp', 'ArrowRight' ],
-  ArrowRight  : [ 'ArrowDown', 'ArrowLeft' ],
+  width     : [ 'height' ],
+  left      : [ 'top', 'right' ],
+  right     : [ 'bottom', 'left' ],
+  x         : [ 'y' ],
+  X         : [ 'Y' ],
+  Y         : [ 'X' ],
+  ArrowLeft : [ ARROW_UP, ARROW_RIGHT ],
+  ArrowRight: [ ARROW_DOWN, ARROW_LEFT ],
 };
 
 /**
@@ -57,7 +52,12 @@ export function Direction( Splide: Splide, Components: Components, options: Opti
   function resolve( prop: string, axisOnly?: boolean, direction?: Options['direction'] ): string {
     direction = direction || options.direction;
     const index = direction === RTL && ! axisOnly ? 1 : direction === TTB ? 0 : -1;
-    return ORIENTATION_MAP[ prop ][ index ] || prop;
+
+    return ORIENTATION_MAP[ prop ] && ORIENTATION_MAP[ prop ][ index ]
+      || prop.replace( /width|left|right/i, ( match, offset ) => {
+        const replacement = ORIENTATION_MAP[ match.toLowerCase() ][ index ] || match;
+        return offset > 0 ? replacement.charAt( 0 ).toUpperCase() + replacement.slice( 1 ) : replacement;
+      } );
   }
 
   /**

src/js/components/Keyboard/Keyboard.ts

@@ -1,3 +1,4 @@
+import { ARROW_LEFT, ARROW_RIGHT } from '../../constants/arrows';
 import { EVENT_MOVE, EVENT_UPDATED } from '../../constants/events';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
@@ -105,9 +106,9 @@ export function Keyboard( Splide: Splide, Components: Components, options: Optio
     if ( ! disabled ) {
       const key = normalizeKey( e );
 
-      if ( key === resolve( 'ArrowLeft' ) ) {
+      if ( key === resolve( ARROW_LEFT ) ) {
         Splide.go( '<' );
-      } else if ( key === resolve( 'ArrowRight' ) ) {
+      } else if ( key === resolve( ARROW_RIGHT ) ) {
         Splide.go( '>' );
       }
     }

src/js/components/Pagination/Pagination.ts

@@ -1,3 +1,4 @@
+import { ARROW_LEFT, ARROW_RIGHT } from '../../constants/arrows';
 import {
   ARIA_CONTROLS,
   ARIA_LABEL,
@@ -197,9 +198,9 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
 
     let nextPage = -1;
 
-    if ( key === resolve( 'ArrowRight', false, dir ) ) {
+    if ( key === resolve( ARROW_RIGHT, false, dir ) ) {
       nextPage = ++page % length;
-    } else if ( key === resolve( 'ArrowLeft', false, dir ) ) {
+    } else if ( key === resolve( ARROW_LEFT, false, dir ) ) {
       nextPage = ( --page + length ) % length;
     } else if ( key === 'Home' ) {
       nextPage = 0;

src/js/constants/arrows.ts

@@ -0,0 +1,5 @@
+const ARROW = 'Arrow';
+export const ARROW_LEFT  = `${ ARROW }Left`;
+export const ARROW_RIGHT = `${ ARROW }Right`;
+export const ARROW_UP    = `${ ARROW }Up`;
+export const ARROW_DOWN  = `${ ARROW }Down`;

src/js/test/assets/css/styles.css

@@ -1,6 +1,6 @@
 body {
   background : #eee;
-  height: 200vh;
+  /*height: 200vh;*/
   font-family: Roboto, sans-serif;
   line-height: 1.5;
   padding: 2rem;
@@ -11,9 +11,9 @@ img {
   height: auto;
 }
 
-button:focus {
-  outline: 2px solid yellowgreen;
-}
+/*button:focus {*/
+/*  outline: 2px solid yellowgreen;*/
+/*}*/
 
 .splide {
   margin: 2rem auto;
@@ -30,9 +30,9 @@ button:focus {
   border: 2px solid darkgray;
 }
 
-.splide__slide.is-active {
-  border: 2px solid yellowgreen;
-}
+/*.splide__slide.is-active {*/
+/*  border: 2px solid yellowgreen;*/
+/*}*/
 
 /*.splide__slide:focus, .splide__arrow:focus, .splide__pagination__page:focus {*/
 /*  border: 2px solid tomato !important;*/

src/js/test/html/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<title>HTML</title>
+	<link rel="stylesheet" href="../../../../dist/css/themes/splide-default.min.css">
+	<link rel="stylesheet" href="./src/js/test/assets/css/styles.css">
+	<script type="text/javascript" src="../../../../dist/js/splide.js"></script>
+
+	<script>
+		document.addEventListener( 'DOMContentLoaded', function () {
+			const splide = new Splide( '#splide01', {
+				isNavigation: true,
+				fixedWidth: 100,
+				pagination: false,
+			} );
+
+			splide.mount();
+		} );
+	</script>
+</head>
+<body>
+
+<section id="splide01" class="splide">
+	<div class="splide__track">
+		<ul class="splide__list">
+			<li class="splide__slide">
+				<img src="./src/js/test/assets/images/pics/slide01.jpg">
+			</li>
+			<li class="splide__slide">
+				<img src="./src/js/test/assets/images/pics/slide02.jpg">
+			</li>
+			<li class="splide__slide">
+				<img src="./src/js/test/assets/images/pics/slide03.jpg">
+			</li>
+			<li class="splide__slide">
+				<img src="./src/js/test/assets/images/pics/slide04.jpg">
+			</li>
+			<li class="splide__slide">
+				<img src="./src/js/test/assets/images/pics/slide05.jpg">
+			</li>
+			<li class="splide__slide">
+				<img src="./src/js/test/assets/images/pics/slide06.jpg">
+			</li>
+			<li class="splide__slide">
+				<img src="./src/js/test/assets/images/pics/slide07.jpg">
+			</li>
+			<li class="splide__slide">
+				<img src="./src/js/test/assets/images/pics/slide08.jpg">
+			</li>
+			<li class="splide__slide">
+				<img src="./src/js/test/assets/images/pics/slide09.jpg">
+			</li>
+			<li class="splide__slide">
+				<img src="./src/js/test/assets/images/pics/slide10.jpg">
+			</li>
+		</ul>
+	</div>
+</section>
+
+</body>
+</html>

src/js/utils/dom/normalizeKey/normalizeKey.ts

@@ -1,3 +1,4 @@
+import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from '../../../constants/arrows';
 import { isString } from '../../type/type';
 
 
@@ -8,10 +9,10 @@ import { isString } from '../../type/type';
  */
 export const NORMALIZATION_MAP = {
   Spacebar: ' ',
-  Right   : 'ArrowRight',
-  Left    : 'ArrowLeft',
-  Up      : 'ArrowUp',
-  Down    : 'ArrowDown',
+  Right   : ARROW_RIGHT,
+  Left    : ARROW_LEFT,
+  Up      : ARROW_UP,
+  Down    : ARROW_DOWN,
 };
 
 /**