Add the `is-overflow` status class.

dist/js/splide.cjs.js

@@ -696,6 +696,7 @@ var ARIA_LIVE = ARIA_PREFIX + "live";
 var ARIA_BUSY = ARIA_PREFIX + "busy";
 var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
 var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_LABELLEDBY, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
+var STATUS_CLASS_PREFIX = "is-";
 var CLASS_ROOT = PROJECT_CODE;
 var CLASS_TRACK = PROJECT_CODE + "__track";
 var CLASS_LIST = PROJECT_CODE + "__list";
@@ -715,14 +716,15 @@ var CLASS_TOGGLE_PLAY = CLASS_TOGGLE + "__play";
 var CLASS_TOGGLE_PAUSE = CLASS_TOGGLE + "__pause";
 var CLASS_SPINNER = PROJECT_CODE + "__spinner";
 var CLASS_SR = PROJECT_CODE + "__sr";
-var CLASS_INITIALIZED = "is-initialized";
-var CLASS_ACTIVE = "is-active";
-var CLASS_PREV = "is-prev";
-var CLASS_NEXT = "is-next";
-var CLASS_VISIBLE = "is-visible";
-var CLASS_LOADING = "is-loading";
-var CLASS_FOCUS_IN = "is-focus-in";
-var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_IN];
+var CLASS_INITIALIZED = STATUS_CLASS_PREFIX + "initialized";
+var CLASS_ACTIVE = STATUS_CLASS_PREFIX + "active";
+var CLASS_PREV = STATUS_CLASS_PREFIX + "prev";
+var CLASS_NEXT = STATUS_CLASS_PREFIX + "next";
+var CLASS_VISIBLE = STATUS_CLASS_PREFIX + "visible";
+var CLASS_LOADING = STATUS_CLASS_PREFIX + "loading";
+var CLASS_FOCUS_IN = STATUS_CLASS_PREFIX + "focus-in";
+var CLASS_OVERFLOW = STATUS_CLASS_PREFIX + "overflow";
+var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_IN, CLASS_OVERFLOW];
 var CLASSES = {
   slide: CLASS_SLIDE,
   clone: CLASS_CLONE,
@@ -1222,6 +1224,7 @@ function Layout(Splide2, Components2, options) {
       emit(EVENT_RESIZED);
 
       if (overflow !== (overflow = isOverflow())) {
+        toggleClass(root, CLASS_OVERFLOW, overflow);
         emit(EVENT_OVERFLOW, overflow);
       }
     }
@@ -2536,7 +2539,7 @@ function Pagination(Splide2, Components2, options) {
   function mount() {
     destroy();
     on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], mount);
-    var enabled = options.pagination && Slides.isEnough();
+    var enabled = options.pagination;
     placeholder && display(placeholder, enabled ? "" : "none");
 
     if (enabled) {
@@ -3696,6 +3699,7 @@ exports.CLASS_INITIALIZED = CLASS_INITIALIZED;
 exports.CLASS_LIST = CLASS_LIST;
 exports.CLASS_LOADING = CLASS_LOADING;
 exports.CLASS_NEXT = CLASS_NEXT;
+exports.CLASS_OVERFLOW = CLASS_OVERFLOW;
 exports.CLASS_PAGINATION = CLASS_PAGINATION;
 exports.CLASS_PAGINATION_PAGE = CLASS_PAGINATION_PAGE;
 exports.CLASS_PREV = CLASS_PREV;

dist/js/splide.esm.js

@@ -691,6 +691,7 @@ var ARIA_LIVE = ARIA_PREFIX + "live";
 var ARIA_BUSY = ARIA_PREFIX + "busy";
 var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
 var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_LABELLEDBY, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
+var STATUS_CLASS_PREFIX = "is-";
 var CLASS_ROOT = PROJECT_CODE;
 var CLASS_TRACK = PROJECT_CODE + "__track";
 var CLASS_LIST = PROJECT_CODE + "__list";
@@ -710,14 +711,15 @@ var CLASS_TOGGLE_PLAY = CLASS_TOGGLE + "__play";
 var CLASS_TOGGLE_PAUSE = CLASS_TOGGLE + "__pause";
 var CLASS_SPINNER = PROJECT_CODE + "__spinner";
 var CLASS_SR = PROJECT_CODE + "__sr";
-var CLASS_INITIALIZED = "is-initialized";
-var CLASS_ACTIVE = "is-active";
-var CLASS_PREV = "is-prev";
-var CLASS_NEXT = "is-next";
-var CLASS_VISIBLE = "is-visible";
-var CLASS_LOADING = "is-loading";
-var CLASS_FOCUS_IN = "is-focus-in";
-var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_IN];
+var CLASS_INITIALIZED = STATUS_CLASS_PREFIX + "initialized";
+var CLASS_ACTIVE = STATUS_CLASS_PREFIX + "active";
+var CLASS_PREV = STATUS_CLASS_PREFIX + "prev";
+var CLASS_NEXT = STATUS_CLASS_PREFIX + "next";
+var CLASS_VISIBLE = STATUS_CLASS_PREFIX + "visible";
+var CLASS_LOADING = STATUS_CLASS_PREFIX + "loading";
+var CLASS_FOCUS_IN = STATUS_CLASS_PREFIX + "focus-in";
+var CLASS_OVERFLOW = STATUS_CLASS_PREFIX + "overflow";
+var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_IN, CLASS_OVERFLOW];
 var CLASSES = {
   slide: CLASS_SLIDE,
   clone: CLASS_CLONE,
@@ -1217,6 +1219,7 @@ function Layout(Splide2, Components2, options) {
       emit(EVENT_RESIZED);
 
       if (overflow !== (overflow = isOverflow())) {
+        toggleClass(root, CLASS_OVERFLOW, overflow);
         emit(EVENT_OVERFLOW, overflow);
       }
     }
@@ -2531,7 +2534,7 @@ function Pagination(Splide2, Components2, options) {
   function mount() {
     destroy();
     on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], mount);
-    var enabled = options.pagination && Slides.isEnough();
+    var enabled = options.pagination;
     placeholder && display(placeholder, enabled ? "" : "none");
 
     if (enabled) {
@@ -3678,4 +3681,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_FOCUS_IN, 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, DEFAULTS, 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_END_INDEX_CHANGED, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_OVERFLOW, 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, FADE, LOOP, LTR, RTL, RequestInterval, SLIDE, STATUS_CLASSES, Splide, SplideRenderer, State, TTB, Throttle, Splide as default };
+export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_FOCUS_IN, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_OVERFLOW, 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, DEFAULTS, 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_END_INDEX_CHANGED, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_OVERFLOW, 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, FADE, LOOP, LTR, RTL, RequestInterval, SLIDE, STATUS_CLASSES, Splide, SplideRenderer, State, TTB, Throttle, Splide as default };

dist/js/splide.js

@@ -691,6 +691,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var ARIA_BUSY = ARIA_PREFIX + "busy";
   var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
   var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_LABELLEDBY, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
+  var STATUS_CLASS_PREFIX = "is-";
   var CLASS_ROOT = PROJECT_CODE;
   var CLASS_TRACK = PROJECT_CODE + "__track";
   var CLASS_LIST = PROJECT_CODE + "__list";
@@ -708,14 +709,15 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var CLASS_TOGGLE = PROJECT_CODE + "__toggle";
   var CLASS_SPINNER = PROJECT_CODE + "__spinner";
   var CLASS_SR = PROJECT_CODE + "__sr";
-  var CLASS_INITIALIZED = "is-initialized";
-  var CLASS_ACTIVE = "is-active";
-  var CLASS_PREV = "is-prev";
-  var CLASS_NEXT = "is-next";
-  var CLASS_VISIBLE = "is-visible";
-  var CLASS_LOADING = "is-loading";
-  var CLASS_FOCUS_IN = "is-focus-in";
-  var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_IN];
+  var CLASS_INITIALIZED = STATUS_CLASS_PREFIX + "initialized";
+  var CLASS_ACTIVE = STATUS_CLASS_PREFIX + "active";
+  var CLASS_PREV = STATUS_CLASS_PREFIX + "prev";
+  var CLASS_NEXT = STATUS_CLASS_PREFIX + "next";
+  var CLASS_VISIBLE = STATUS_CLASS_PREFIX + "visible";
+  var CLASS_LOADING = STATUS_CLASS_PREFIX + "loading";
+  var CLASS_FOCUS_IN = STATUS_CLASS_PREFIX + "focus-in";
+  var CLASS_OVERFLOW = STATUS_CLASS_PREFIX + "overflow";
+  var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_IN, CLASS_OVERFLOW];
   var CLASSES = {
     slide: CLASS_SLIDE,
     clone: CLASS_CLONE,
@@ -1215,6 +1217,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         emit(EVENT_RESIZED);
 
         if (overflow !== (overflow = isOverflow())) {
+          toggleClass(root, CLASS_OVERFLOW, overflow);
           emit(EVENT_OVERFLOW, overflow);
         }
       }
@@ -2529,7 +2532,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function mount() {
       destroy();
       on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], mount);
-      var enabled = options.pagination && Slides.isEnough();
+      var enabled = options.pagination;
       placeholder && display(placeholder, enabled ? "" : "none");
 
       if (enabled) {

dist/types/index.d.ts

@@ -1594,6 +1594,9 @@ declare const EVENT_SLIDE_KEYDOWN = "sk";
 declare const EVENT_SHIFTED = "sh";
 declare const EVENT_END_INDEX_CHANGED = "ei";
 
+/**
+ * All classes as constants.
+ */
 declare const CLASS_ROOT = "splide";
 declare const CLASS_TRACK: string;
 declare const CLASS_LIST: string;
@@ -1613,15 +1616,16 @@ declare const CLASS_TOGGLE_PLAY: string;
 declare const CLASS_TOGGLE_PAUSE: string;
 declare const CLASS_SPINNER: string;
 declare const CLASS_SR: string;
-declare const CLASS_INITIALIZED = "is-initialized";
-declare const CLASS_ACTIVE = "is-active";
-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_IN = "is-focus-in";
+declare const CLASS_INITIALIZED: string;
+declare const CLASS_ACTIVE: string;
+declare const CLASS_PREV: string;
+declare const CLASS_NEXT: string;
+declare const CLASS_VISIBLE: string;
+declare const CLASS_LOADING: string;
+declare const CLASS_FOCUS_IN: string;
+declare const CLASS_OVERFLOW: string;
 /**
- * The array with all status classes.
+ * The array with all status classes except for `is-initialized`.
  *
  * @since 3.0.0
  */
@@ -1683,4 +1687,4 @@ declare const LOOP = "loop";
  */
 declare const FADE = "fade";
 
-export { AnyFunction, ArrowsComponent, AutoplayComponent, BaseComponent, CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_FOCUS_IN, 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, DEFAULTS, 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_END_INDEX_CHANGED, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_OVERFLOW, 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, FADE, Head, KeyboardComponent, LOOP, LTR, LayoutComponent, LazyLoadComponent, LiveComponent, MediaComponent, MoveComponent, Options, PaginationComponent, PaginationData, PaginationItem, Push, RTL, RequestInterval, RequestIntervalInterface, Resolve, ResponsiveOptions, SLIDE, STATUS_CLASSES, ScrollComponent, Shift, ShiftN, SlideComponent, SlidesComponent, Splide, SplideRenderer, State, StateObject, SyncComponent, SyncTarget, TTB, 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_IN, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_OVERFLOW, 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, DEFAULTS, 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_END_INDEX_CHANGED, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_OVERFLOW, 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, FADE, Head, KeyboardComponent, LOOP, LTR, LayoutComponent, LazyLoadComponent, LiveComponent, MediaComponent, MoveComponent, Options, PaginationComponent, PaginationData, PaginationItem, Push, RTL, RequestInterval, RequestIntervalInterface, Resolve, ResponsiveOptions, SLIDE, STATUS_CLASSES, ScrollComponent, Shift, ShiftN, SlideComponent, SlidesComponent, Splide, SplideRenderer, State, StateObject, SyncComponent, SyncTarget, TTB, Throttle, ThrottleInstance, TransitionComponent, WheelComponent, Splide as default };

src/js/components/Layout/Layout.ts

@@ -3,8 +3,9 @@ import { EVENT_OVERFLOW, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_UPDAT
 import { EventInterface, Throttle } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { abs, apply, assert, isObject, rect, style, unit } from '../../utils';
+import { abs, apply, assert, isObject, rect, style, toggleClass, unit } from '../../utils';
 import { FADE } from '../../constants/types';
+import { CLASS_OVERFLOW } from '../../constants/classes';
 
 
 /**
@@ -100,6 +101,7 @@ export function Layout( Splide: Splide, Components: Components, options: Options
       emit( EVENT_RESIZED );
 
       if ( overflow !== ( overflow = isOverflow() ) ) {
+        toggleClass( root, CLASS_OVERFLOW, overflow );
         emit( EVENT_OVERFLOW, overflow );
       }
     }

src/js/components/Pagination/Pagination.ts

@@ -115,7 +115,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
     destroy();
     on( [ EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED ], mount );
 
-    const enabled = options.pagination && Slides.isEnough();
+    const enabled = options.pagination;
     placeholder && display( placeholder, enabled ? '' : 'none' );
 
     if ( enabled ) {

src/js/components/Pagination/test/general.test.ts

@@ -84,13 +84,6 @@ describe( 'Pagination', () => {
     expect( items[ 3 ].getAttribute( 'aria-selected' ) ).toBe( 'true' );
   } );
 
-  test( 'should not create pagination if slides are not enough to the perPage option.', () => {
-    init( { perPage: 3 }, { length: 1 } );
-    const items  = document.getElementsByClassName( CLASS_PAGINATION_PAGE );
-
-    expect( items.length ).toBe( 0 );
-  } );
-
   test( 'should remove the pagination on destroy.', () => {
     const splide = init();
     splide.destroy();

src/js/constants/classes.ts

@@ -1,6 +1,15 @@
 import { PROJECT_CODE } from './project';
 
+/**
+ * The prefix for status classes.
+ *
+ * @since 4.1.0
+ */
+const STATUS_CLASS_PREFIX = 'is-';
 
+/**
+ * All classes as constants.
+ */
 export const CLASS_ROOT            = PROJECT_CODE;
 export const CLASS_TRACK           = `${ PROJECT_CODE }__track`;
 export const CLASS_LIST            = `${ PROJECT_CODE }__list`;
@@ -20,17 +29,17 @@ export const CLASS_TOGGLE_PLAY     = `${ CLASS_TOGGLE }__play`;
 export const CLASS_TOGGLE_PAUSE    = `${ CLASS_TOGGLE }__pause`;
 export const CLASS_SPINNER         = `${ PROJECT_CODE }__spinner`;
 export const CLASS_SR              = `${ PROJECT_CODE }__sr`;
-export const CLASS_INITIALIZED     = 'is-initialized';
-export const CLASS_ACTIVE          = 'is-active';
-export const CLASS_PREV            = 'is-prev';
-export const CLASS_NEXT            = 'is-next';
-export const CLASS_VISIBLE         = 'is-visible';
-export const CLASS_LOADING         = 'is-loading';
-export const CLASS_FOCUS_IN        = 'is-focus-in';
-
+export const CLASS_INITIALIZED     = `${ STATUS_CLASS_PREFIX }initialized`;
+export const CLASS_ACTIVE          = `${ STATUS_CLASS_PREFIX }active`;
+export const CLASS_PREV            = `${ STATUS_CLASS_PREFIX }prev`;
+export const CLASS_NEXT            = `${ STATUS_CLASS_PREFIX }next`;
+export const CLASS_VISIBLE         = `${ STATUS_CLASS_PREFIX }visible`;
+export const CLASS_LOADING         = `${ STATUS_CLASS_PREFIX }loading`;
+export const CLASS_FOCUS_IN        = `${ STATUS_CLASS_PREFIX }focus-in`;
+export const CLASS_OVERFLOW        = `${ STATUS_CLASS_PREFIX }overflow`;
 
 /**
- * The array with all status classes.
+ * The array with all status classes except for `is-initialized`.
  *
  * @since 3.0.0
  */
@@ -41,6 +50,7 @@ export const STATUS_CLASSES = [
   CLASS_NEXT,
   CLASS_LOADING,
   CLASS_FOCUS_IN,
+  CLASS_OVERFLOW,
 ];
 
 /**