Move some default options to components.

dist/js/splide.cjs.js

@@ -709,8 +709,8 @@ const Elements = (Splide, Components, options, event) => {
     });
   }
   function init() {
+    const { role = "region" } = options;
     const id = root.id || uniqueId(PROJECT_CODE);
-    const role = options.role;
     root.id = id;
     track.id = track.id || `${id}-track`;
     list.id = list.id || `${id}-list`;
@@ -838,7 +838,8 @@ const Slide$1 = (Splide2, index, slideIndex, slide) => {
   }
   function isActive() {
     const { index: curr } = Splide2;
-    return curr === index || options.cloneStatus && curr === slideIndex;
+    const { cloneStatus = true } = options;
+    return curr === index || cloneStatus && curr === slideIndex;
   }
   function isVisible() {
     if (Splide2.is(FADE)) {
@@ -1511,7 +1512,7 @@ const Arrows = (Splide, Components, options, event) => {
     mount();
   }
   function init() {
-    const enabled = options.arrows;
+    const { arrows: enabled = true } = options;
     if (enabled && !(prev && next)) {
       createArrows();
     }
@@ -1583,7 +1584,8 @@ const INTERVAL_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-interval`;
 
 const Autoplay = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
-  const interval = RequestInterval(options.interval, Splide.go.bind(Splide, ">"), onAnimationFrame);
+  const { interval: duration = 5e3, pauseOnHover = true, pauseOnFocus = true, resetProgress = true } = options;
+  const interval = RequestInterval(duration, Splide.go.bind(Splide, ">"), onAnimationFrame);
   const { isPaused } = interval;
   const { Elements, Elements: { root, toggle } } = Components;
   const { autoplay } = options;
@@ -1599,13 +1601,13 @@ const Autoplay = (Splide, Components, options, event) => {
     }
   }
   function listen() {
-    if (options.pauseOnHover) {
+    if (pauseOnHover) {
       bind(root, "mouseenter mouseleave", (e) => {
         hovered = e.type === "mouseenter";
         autoToggle();
       });
     }
-    if (options.pauseOnFocus) {
+    if (pauseOnFocus) {
       bind(root, "focusin focusout", (e) => {
         focused = e.type === "focusin";
         autoToggle();
@@ -1621,7 +1623,7 @@ const Autoplay = (Splide, Components, options, event) => {
   }
   function play() {
     if (isPaused() && Components.Slides.isEnough()) {
-      interval.start(!options.resetProgress);
+      interval.start(!resetProgress);
       focused = hovered = stopped = false;
       update();
       emit(EVENT_AUTOPLAY_PLAY);
@@ -1804,7 +1806,9 @@ const Drag = (Splide, Components, options, event) => {
         Move.translate(basePosition + constrain(diffCoord(e)));
         const expired = diffTime(e) > LOG_INTERVAL;
         const hasExceeded = exceeded !== (exceeded = exceededLimit());
-        expired || hasExceeded && save(e);
+        if (expired || hasExceeded) {
+          save(e);
+        }
         clickPrevented = true;
         emit(EVENT_DRAGGING);
         prevent(e);
@@ -1838,12 +1842,14 @@ const Drag = (Splide, Components, options, event) => {
     basePosition = getPosition();
   }
   function move(e) {
+    const { updateOnDragged = true } = options;
     const velocity = computeVelocity(e);
     const destination = computeDestination(velocity);
     const rewind = options.rewind && options.rewindByDrag;
+    const scroll = updateOnDragged ? Controller.scroll : Scroll.scroll;
     reduce(false);
     if (isFree) {
-      Controller.scroll(destination, void 0, options.snap);
+      scroll(destination, void 0, options.snap);
     } else if (Splide.is(FADE)) {
       Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
     } else if (Splide.is(SLIDE) && exceeded && rewind) {
@@ -2061,7 +2067,7 @@ const Pagination = (Splide, Components, options, event) => {
   function mount() {
     destroy();
     on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], mount);
-    const enabled = options.pagination;
+    const { pagination: enabled = true } = options;
     placeholder && display(placeholder, enabled ? "" : "none");
     if (enabled) {
       on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
@@ -2081,7 +2087,7 @@ const Pagination = (Splide, Components, options, event) => {
   }
   function createPagination() {
     const { length } = Splide;
-    const { classes, i18n, perPage } = options;
+    const { classes, i18n, perPage, paginationKeyboard = true } = options;
     const max = hasFocus() ? Controller.getEnd() + 1 : ceil(length / perPage);
     list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
     addClass(list, paginationClasses = `${CLASS_PAGINATION}--${getDirection()}`);
@@ -2094,7 +2100,7 @@ const Pagination = (Splide, Components, options, event) => {
       const controls = Slides.getIn(i).map((Slide) => Slide.slide.id);
       const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
       bind(button, "click", apply(onClick, i));
-      if (options.paginationKeyboard) {
+      if (paginationKeyboard) {
         bind(button, "keydown", apply(onKeydown, i));
       }
       setAttribute(li, ROLE, "presentation");
@@ -2274,7 +2280,8 @@ const SR_REMOVAL_DELAY = 90;
 const Live = (Splide, Components, options, event) => {
   const { on } = event;
   const { track } = Components.Elements;
-  const enabled = options.live && !options.isNavigation;
+  const { live = true } = options;
+  const enabled = live && !options.isNavigation;
   const sr = create("span", CLASS_SR);
   const interval = RequestInterval(SR_REMOVAL_DELAY, apply(toggle, false));
   function mount() {
@@ -2352,23 +2359,13 @@ const I18N = {
 
 const DEFAULTS = {
   type: "slide",
-  role: "region",
   speed: 400,
   perPage: 1,
-  cloneStatus: true,
-  arrows: true,
-  pagination: true,
-  paginationKeyboard: true,
-  interval: 5e3,
-  pauseOnHover: true,
-  pauseOnFocus: true,
-  resetProgress: true,
   easing: "cubic-bezier(0.25, 1, 0.5, 1)",
   drag: true,
   direction: "ltr",
   trimSpace: true,
   focusableNodes: "a, button, textarea, input, select, iframe",
-  live: true,
   classes: CLASSES,
   i18n: I18N,
   reducedMotion: {

dist/js/splide.esm.js

@@ -705,8 +705,8 @@ const Elements = (Splide, Components, options, event) => {
     });
   }
   function init() {
+    const { role = "region" } = options;
     const id = root.id || uniqueId(PROJECT_CODE);
-    const role = options.role;
     root.id = id;
     track.id = track.id || `${id}-track`;
     list.id = list.id || `${id}-list`;
@@ -834,7 +834,8 @@ const Slide$1 = (Splide2, index, slideIndex, slide) => {
   }
   function isActive() {
     const { index: curr } = Splide2;
-    return curr === index || options.cloneStatus && curr === slideIndex;
+    const { cloneStatus = true } = options;
+    return curr === index || cloneStatus && curr === slideIndex;
   }
   function isVisible() {
     if (Splide2.is(FADE)) {
@@ -1507,7 +1508,7 @@ const Arrows = (Splide, Components, options, event) => {
     mount();
   }
   function init() {
-    const enabled = options.arrows;
+    const { arrows: enabled = true } = options;
     if (enabled && !(prev && next)) {
       createArrows();
     }
@@ -1579,7 +1580,8 @@ const INTERVAL_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-interval`;
 
 const Autoplay = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
-  const interval = RequestInterval(options.interval, Splide.go.bind(Splide, ">"), onAnimationFrame);
+  const { interval: duration = 5e3, pauseOnHover = true, pauseOnFocus = true, resetProgress = true } = options;
+  const interval = RequestInterval(duration, Splide.go.bind(Splide, ">"), onAnimationFrame);
   const { isPaused } = interval;
   const { Elements, Elements: { root, toggle } } = Components;
   const { autoplay } = options;
@@ -1595,13 +1597,13 @@ const Autoplay = (Splide, Components, options, event) => {
     }
   }
   function listen() {
-    if (options.pauseOnHover) {
+    if (pauseOnHover) {
       bind(root, "mouseenter mouseleave", (e) => {
         hovered = e.type === "mouseenter";
         autoToggle();
       });
     }
-    if (options.pauseOnFocus) {
+    if (pauseOnFocus) {
       bind(root, "focusin focusout", (e) => {
         focused = e.type === "focusin";
         autoToggle();
@@ -1617,7 +1619,7 @@ const Autoplay = (Splide, Components, options, event) => {
   }
   function play() {
     if (isPaused() && Components.Slides.isEnough()) {
-      interval.start(!options.resetProgress);
+      interval.start(!resetProgress);
       focused = hovered = stopped = false;
       update();
       emit(EVENT_AUTOPLAY_PLAY);
@@ -1800,7 +1802,9 @@ const Drag = (Splide, Components, options, event) => {
         Move.translate(basePosition + constrain(diffCoord(e)));
         const expired = diffTime(e) > LOG_INTERVAL;
         const hasExceeded = exceeded !== (exceeded = exceededLimit());
-        expired || hasExceeded && save(e);
+        if (expired || hasExceeded) {
+          save(e);
+        }
         clickPrevented = true;
         emit(EVENT_DRAGGING);
         prevent(e);
@@ -1834,12 +1838,14 @@ const Drag = (Splide, Components, options, event) => {
     basePosition = getPosition();
   }
   function move(e) {
+    const { updateOnDragged = true } = options;
     const velocity = computeVelocity(e);
     const destination = computeDestination(velocity);
     const rewind = options.rewind && options.rewindByDrag;
+    const scroll = updateOnDragged ? Controller.scroll : Scroll.scroll;
     reduce(false);
     if (isFree) {
-      Controller.scroll(destination, void 0, options.snap);
+      scroll(destination, void 0, options.snap);
     } else if (Splide.is(FADE)) {
       Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
     } else if (Splide.is(SLIDE) && exceeded && rewind) {
@@ -2057,7 +2063,7 @@ const Pagination = (Splide, Components, options, event) => {
   function mount() {
     destroy();
     on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], mount);
-    const enabled = options.pagination;
+    const { pagination: enabled = true } = options;
     placeholder && display(placeholder, enabled ? "" : "none");
     if (enabled) {
       on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
@@ -2077,7 +2083,7 @@ const Pagination = (Splide, Components, options, event) => {
   }
   function createPagination() {
     const { length } = Splide;
-    const { classes, i18n, perPage } = options;
+    const { classes, i18n, perPage, paginationKeyboard = true } = options;
     const max = hasFocus() ? Controller.getEnd() + 1 : ceil(length / perPage);
     list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
     addClass(list, paginationClasses = `${CLASS_PAGINATION}--${getDirection()}`);
@@ -2090,7 +2096,7 @@ const Pagination = (Splide, Components, options, event) => {
       const controls = Slides.getIn(i).map((Slide) => Slide.slide.id);
       const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
       bind(button, "click", apply(onClick, i));
-      if (options.paginationKeyboard) {
+      if (paginationKeyboard) {
         bind(button, "keydown", apply(onKeydown, i));
       }
       setAttribute(li, ROLE, "presentation");
@@ -2270,7 +2276,8 @@ const SR_REMOVAL_DELAY = 90;
 const Live = (Splide, Components, options, event) => {
   const { on } = event;
   const { track } = Components.Elements;
-  const enabled = options.live && !options.isNavigation;
+  const { live = true } = options;
+  const enabled = live && !options.isNavigation;
   const sr = create("span", CLASS_SR);
   const interval = RequestInterval(SR_REMOVAL_DELAY, apply(toggle, false));
   function mount() {
@@ -2348,23 +2355,13 @@ const I18N = {
 
 const DEFAULTS = {
   type: "slide",
-  role: "region",
   speed: 400,
   perPage: 1,
-  cloneStatus: true,
-  arrows: true,
-  pagination: true,
-  paginationKeyboard: true,
-  interval: 5e3,
-  pauseOnHover: true,
-  pauseOnFocus: true,
-  resetProgress: true,
   easing: "cubic-bezier(0.25, 1, 0.5, 1)",
   drag: true,
   direction: "ltr",
   trimSpace: true,
   focusableNodes: "a, button, textarea, input, select, iframe",
-  live: true,
   classes: CLASSES,
   i18n: I18N,
   reducedMotion: {

dist/js/splide.js

@@ -705,8 +705,8 @@
       });
     }
     function init() {
+      const { role = "region" } = options;
       const id = root.id || uniqueId(PROJECT_CODE);
-      const role = options.role;
       root.id = id;
       track.id = track.id || `${id}-track`;
       list.id = list.id || `${id}-list`;
@@ -834,7 +834,8 @@
     }
     function isActive() {
       const { index: curr } = Splide2;
-      return curr === index || options.cloneStatus && curr === slideIndex;
+      const { cloneStatus = true } = options;
+      return curr === index || cloneStatus && curr === slideIndex;
     }
     function isVisible() {
       if (Splide2.is(FADE)) {
@@ -1507,7 +1508,7 @@
       mount();
     }
     function init() {
-      const enabled = options.arrows;
+      const { arrows: enabled = true } = options;
       if (enabled && !(prev && next)) {
         createArrows();
       }
@@ -1579,7 +1580,8 @@
 
   const Autoplay = (Splide, Components, options, event) => {
     const { on, bind, emit } = event;
-    const interval = RequestInterval(options.interval, Splide.go.bind(Splide, ">"), onAnimationFrame);
+    const { interval: duration = 5e3, pauseOnHover = true, pauseOnFocus = true, resetProgress = true } = options;
+    const interval = RequestInterval(duration, Splide.go.bind(Splide, ">"), onAnimationFrame);
     const { isPaused } = interval;
     const { Elements, Elements: { root, toggle } } = Components;
     const { autoplay } = options;
@@ -1595,13 +1597,13 @@
       }
     }
     function listen() {
-      if (options.pauseOnHover) {
+      if (pauseOnHover) {
         bind(root, "mouseenter mouseleave", (e) => {
           hovered = e.type === "mouseenter";
           autoToggle();
         });
       }
-      if (options.pauseOnFocus) {
+      if (pauseOnFocus) {
         bind(root, "focusin focusout", (e) => {
           focused = e.type === "focusin";
           autoToggle();
@@ -1617,7 +1619,7 @@
     }
     function play() {
       if (isPaused() && Components.Slides.isEnough()) {
-        interval.start(!options.resetProgress);
+        interval.start(!resetProgress);
         focused = hovered = stopped = false;
         update();
         emit(EVENT_AUTOPLAY_PLAY);
@@ -1823,6 +1825,7 @@
       }
       binder.destroy();
       dragging = false;
+      exceeded = false;
     }
     function onClick(e) {
       if (!disabled && clickPrevented) {
@@ -2060,7 +2063,7 @@
     function mount() {
       destroy();
       on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], mount);
-      const enabled = options.pagination;
+      const { pagination: enabled = true } = options;
       placeholder && display(placeholder, enabled ? "" : "none");
       if (enabled) {
         on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
@@ -2080,7 +2083,7 @@
     }
     function createPagination() {
       const { length } = Splide;
-      const { classes, i18n, perPage } = options;
+      const { classes, i18n, perPage, paginationKeyboard = true } = options;
       const max = hasFocus() ? Controller.getEnd() + 1 : ceil(length / perPage);
       list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
       addClass(list, paginationClasses = `${CLASS_PAGINATION}--${getDirection()}`);
@@ -2093,7 +2096,7 @@
         const controls = Slides.getIn(i).map((Slide) => Slide.slide.id);
         const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
         bind(button, "click", apply(onClick, i));
-        if (options.paginationKeyboard) {
+        if (paginationKeyboard) {
           bind(button, "keydown", apply(onKeydown, i));
         }
         setAttribute(li, ROLE, "presentation");
@@ -2273,7 +2276,8 @@
   const Live = (Splide, Components, options, event) => {
     const { on } = event;
     const { track } = Components.Elements;
-    const enabled = options.live && !options.isNavigation;
+    const { live = true } = options;
+    const enabled = live && !options.isNavigation;
     const sr = create("span", CLASS_SR);
     const interval = RequestInterval(SR_REMOVAL_DELAY, apply(toggle, false));
     function mount() {
@@ -2351,23 +2355,13 @@
 
   const DEFAULTS = {
     type: "slide",
-    role: "region",
     speed: 400,
     perPage: 1,
-    cloneStatus: true,
-    arrows: true,
-    pagination: true,
-    paginationKeyboard: true,
-    interval: 5e3,
-    pauseOnHover: true,
-    pauseOnFocus: true,
-    resetProgress: true,
     easing: "cubic-bezier(0.25, 1, 0.5, 1)",
     drag: true,
     direction: "ltr",
     trimSpace: true,
     focusableNodes: "a, button, textarea, input, select, iframe",
-    live: true,
     classes: CLASSES,
     i18n: I18N,
     reducedMotion: {

dist/types/index.d.ts

@@ -729,6 +729,11 @@ interface ResponsiveOptions {
      * Limits the number of pages to move by "flick".
      */
     flickMaxPages?: number;
+    /**
+     * If `drag` is `'free'`, determines whether to activate the closest slide after drag or not.
+     * The default value is `true`.
+     */
+    updateOnDragged?: boolean;
     /**
      * Enables navigation by the mouse wheel.
      * You'll need to set `waitForTransition` to `ture` or provide the `wheelSleep` duration to avoid quick change.

src/js/components/Arrows/Arrows.ts

@@ -108,7 +108,7 @@ export const Arrows: ComponentConstructor<ArrowsComponent> = ( Splide, Component
    * Initializes the component.
    */
   function init(): void {
-    const enabled = options.arrows;
+    const { arrows: enabled = true } = options;
 
     if ( enabled && ! ( prev && next ) ) {
       createArrows();

src/js/components/Autoplay/Autoplay.ts

@@ -38,7 +38,8 @@ export interface AutoplayComponent extends BaseComponent {
  */
 export const Autoplay: ComponentConstructor<AutoplayComponent> = ( Splide, Components, options, event ) => {
   const { on, bind, emit } = event;
-  const interval = RequestInterval( options.interval, Splide.go.bind( Splide, '>' ), onAnimationFrame );
+  const { interval: duration = 5000, pauseOnHover = true, pauseOnFocus = true, resetProgress = true } = options;
+  const interval = RequestInterval( duration, Splide.go.bind( Splide, '>' ), onAnimationFrame );
   const { isPaused } = interval;
   const { Elements, Elements: { root, toggle } } = Components;
   const { autoplay } = options;
@@ -75,14 +76,14 @@ export const Autoplay: ComponentConstructor<AutoplayComponent> = ( Splide, Compo
    * Listens to some events.
    */
   function listen(): void {
-    if ( options.pauseOnHover ) {
+    if ( pauseOnHover ) {
       bind( root, 'mouseenter mouseleave', e => {
         hovered = e.type === 'mouseenter';
         autoToggle();
       } );
     }
 
-    if ( options.pauseOnFocus ) {
+    if ( pauseOnFocus ) {
       bind( root, 'focusin focusout', e => {
         focused = e.type === 'focusin';
         autoToggle();
@@ -104,7 +105,7 @@ export const Autoplay: ComponentConstructor<AutoplayComponent> = ( Splide, Compo
    */
   function play(): void {
     if ( isPaused() && Components.Slides.isEnough() ) {
-      interval.start( ! options.resetProgress );
+      interval.start( ! resetProgress );
       focused = hovered = stopped = false;
       update();
       emit( EVENT_AUTOPLAY_PLAY );

src/js/components/Drag/Drag.ts

@@ -194,7 +194,7 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
 
     binder.destroy();
     dragging = false;
-    // exceeded = false;
+    exceeded = false;
   }
 
   /**

src/js/components/Elements/Elements.ts

@@ -199,8 +199,8 @@ export const Elements: ComponentConstructor<ElementsComponent> = ( Splide, Compo
    * which removes the region from the accessibility tree.
    */
   function init(): void {
-    const id   = root.id || uniqueId( PROJECT_CODE );
-    const role = options.role;
+    const { role = 'region' } = options;
+    const id = root.id || uniqueId( PROJECT_CODE );
 
     root.id  = id;
     track.id = track.id || `${ id }-track`;

src/js/components/Live/Live.ts

@@ -37,11 +37,12 @@ const SR_REMOVAL_DELAY = 90;
 export const Live: ComponentConstructor<LiveComponent> = ( Splide, Components, options, event ) => {
   const { on } = event;
   const { track } = Components.Elements;
+  const { live = true } = options;
 
   /**
    * Indicates whether the live region is enabled or not.
    */
-  const enabled = options.live && ! options.isNavigation;
+  const enabled = live && ! options.isNavigation;
 
   /**
    * The span element for the SR only text.

src/js/components/Pagination/Pagination.ts

@@ -111,7 +111,7 @@ export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, C
     destroy();
     on( [ EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED ], mount );
 
-    const enabled = options.pagination;
+    const { pagination: enabled = true } = options;
     placeholder && display( placeholder, enabled ? '' : 'none' );
 
     if ( enabled ) {
@@ -141,7 +141,7 @@ export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, C
    */
   function createPagination(): void {
     const { length } = Splide;
-    const { classes, i18n, perPage } = options;
+    const { classes, i18n, perPage, paginationKeyboard = true } = options;
     const max = hasFocus() ? Controller.getEnd() + 1 : ceil( length / perPage );
 
     list = placeholder || create( 'ul', classes.pagination, Elements.track.parentElement );
@@ -159,7 +159,7 @@ export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, C
 
       bind( button, 'click', apply( onClick, i ) );
 
-      if ( options.paginationKeyboard ) {
+      if ( paginationKeyboard ) {
         bind( button, 'keydown', apply( onKeydown, i ) );
       }
 

src/js/components/Slides/Slide.ts

@@ -243,7 +243,8 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
    */
   function isActive(): boolean {
     const { index: curr } = Splide;
-    return curr === index || ( options.cloneStatus && curr === slideIndex );
+    const { cloneStatus = true } = options;
+    return curr === index || ( cloneStatus && curr === slideIndex );
   }
 
   /**

src/js/constants/defaults.ts

@@ -10,26 +10,16 @@ import { I18N } from './i18n';
  * @since 3.0.0
  */
 export const DEFAULTS: Options = {
-  type              : 'slide',
-  role              : 'region',
-  speed             : 400,
-  perPage           : 1,
-  cloneStatus       : true,
-  arrows            : true,
-  pagination        : true,
-  paginationKeyboard: true,
-  interval          : 5000,
-  pauseOnHover      : true,
-  pauseOnFocus      : true,
-  resetProgress     : true,
-  easing            : 'cubic-bezier(0.25, 1, 0.5, 1)',
-  drag              : true,
-  direction         : 'ltr',
-  trimSpace         : true,
-  focusableNodes    : 'a, button, textarea, input, select, iframe',
-  live              : true,
-  classes           : CLASSES,
-  i18n              : I18N,
+  type          : 'slide',
+  speed         : 400,
+  perPage       : 1,
+  easing        : 'cubic-bezier(0.25, 1, 0.5, 1)',
+  drag          : true,
+  direction     : 'ltr',
+  trimSpace     : true,
+  focusableNodes: 'a, button, textarea, input, select, iframe',
+  classes       : CLASSES,
+  i18n          : I18N,
   reducedMotion: {
     speed      : 0,
     rewindSpeed: 0,