Replace all utility methods with the util package.

dist/types/index.d.ts

@@ -3,6 +3,13 @@
  */
 declare type AnyFunction$1 = (...args: any[]) => any;
 
+/**
+ * The union for CSS properties.
+ *
+ * @since 0.0.1
+ */
+declare type CSSProperties = Exclude<keyof CSSStyleDeclaration, number | 'length' | 'parentRule' | 'getPropertyPriority' | 'getPropertyValue' | 'item' | 'removeProperty' | 'setProperty'>;
+
 /**
  * The type for an array with remover functions.
  *
@@ -125,7 +132,7 @@ interface MediaComponent extends BaseComponent {
  * @since 3.0.0
  */
 interface DirectionComponent extends BaseComponent {
-    resolve(prop: string, axisOnly?: boolean, direction?: Options['direction']): string;
+    resolve<R extends string>(prop: string, axisOnly?: boolean, direction?: Options['direction']): R;
     orient(value: number): number;
 }
 
@@ -166,7 +173,7 @@ interface SlideComponent extends BaseComponent {
     container: HTMLElement;
     isClone: boolean;
     update(): void;
-    style(prop: string, value: string | number, useContainer?: boolean): void;
+    style(prop: CSSProperties, value: string | number, useContainer?: boolean): void;
     isWithin(from: number, distance: number): boolean;
 }
 

package-lock.json

@@ -38,7 +38,7 @@
     },
     "../utils": {
       "name": "@splidejs/utils",
-      "version": "1.0.3",
+      "version": "1.0.4",
       "devDependencies": {
         "@types/jest": "^29.0.3",
         "@types/node": "^18.7.20",

src/js/components/Arrows/Arrows.ts

@@ -20,14 +20,14 @@ import {
   before,
   create,
   display,
+  EventInterface,
   parseHtml,
-  remove,
+  removeNode,
   removeAttribute,
   removeClass,
   setAttribute,
-} from '../../utils';
+} from '@splidejs/utils';
 import { PATH, SIZE, XML_NAME_SPACE } from './path';
-import { EventInterface } from '@splidejs/utils';
 
 
 /**
@@ -143,7 +143,7 @@ export function Arrows(
     removeClass( wrapper, wrapperClasses );
 
     if ( created ) {
-      remove( placeholder ? [ prev, next ] : wrapper );
+      removeNode( placeholder ? [ prev, next ] : wrapper );
       prev = next = null;
     } else {
       removeAttribute( [ prev, next ], ALL_ATTRIBUTES );

src/js/components/Autoplay/Autoplay.ts

@@ -10,9 +10,8 @@ import {
 } from '../../constants/events';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { getAttribute, setAttribute, style, toggleClass } from '../../utils';
+import { EventInterface, getAttribute, RequestInterval, setAttribute, style, toggleClass } from '@splidejs/utils';
 import { INTERVAL_DATA_ATTRIBUTE } from './constants';
-import { EventInterface, RequestInterval } from '@splidejs/utils';
 
 
 /**

src/js/components/Clones/Clones.ts

@@ -2,8 +2,19 @@ import { EVENT_REFRESH, EVENT_RESIZE, EVENT_UPDATED } from '../../constants/even
 import { LOOP } from '../../constants/types';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { addClass, append, before, ceil, empty, isUndefined, pad, push, rect, remove } from '../../utils';
-import { EventInterface } from '@splidejs/utils';
+import {
+  addClass,
+  append,
+  before,
+  ceil,
+  empty,
+  EventInterface,
+  isUndefined,
+  pad,
+  push,
+  rect,
+  removeNode,
+} from '@splidejs/utils';
 
 
 /**
@@ -79,7 +90,7 @@ export function Clones(
    * Destroys clones.
    */
   function destroy(): void {
-    remove( clones );
+    removeNode( clones );
     empty( clones );
     event.destroy();
   }

src/js/components/Controller/Controller.ts

@@ -3,8 +3,17 @@ import { MOVING, SCROLLING } from '../../constants/states';
 import { LOOP, SLIDE } from '../../constants/types';
 import { Splide } from '../../core/Splide/Splide';
 import { AnyFunction, BaseComponent, Components, Options } from '../../types';
-import { apply, approximatelyEqual, between, clamp, floor, isString, isUndefined, min } from '../../utils';
-import { EventInterface } from '@splidejs/utils';
+import {
+  apply,
+  approximatelyEqual,
+  between,
+  clamp,
+  EventInterface,
+  floor,
+  isString,
+  isUndefined,
+  min,
+} from '@splidejs/utils';
 
 
 /**

src/js/components/Cover/Cover.ts

@@ -1,9 +1,8 @@
 import { EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_REFRESH, EVENT_UPDATED } from '../../constants/events';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { apply, child, display } from '../../utils';
+import { apply, child, display, EventInterface } from '@splidejs/utils';
 import { SlideComponent } from '../Slides/Slide';
-import { EventInterface } from '@splidejs/utils';
 
 
 /**

src/js/components/Direction/Direction.ts

@@ -10,7 +10,7 @@ import { BaseComponent, Components, Options } from '../../types';
  * @since 3.0.0
  */
 export interface DirectionComponent extends BaseComponent {
-  resolve( prop: string, axisOnly?: boolean, direction?: Options['direction'] ): string;
+  resolve<R extends string>( prop: string, axisOnly?: boolean, direction?: Options['direction'] ): R;
   orient( value: number ): number;
 }
 
@@ -49,7 +49,7 @@ export function Direction( Splide: Splide, Components: Components, options: Opti
    * @param axisOnly  - Optional. If `ture`, returns the same property for LTR and RTL.
    * @param direction - Optional. Specify the direction. The default value is the `direction` option.
    */
-  function resolve( prop: string, axisOnly?: boolean, direction?: Options['direction'] ): string {
+  function resolve<R extends string>( prop: string, axisOnly?: boolean, direction?: Options['direction'] ): R {
     direction = direction || options.direction;
     const index = direction === RTL && ! axisOnly ? 1 : direction === TTB ? 0 : -1;
 

src/js/components/Drag/Drag.ts

@@ -5,9 +5,8 @@ import { DRAGGING, IDLE, MOVING, SCROLLING } from '../../constants/states';
 import { FADE, LOOP, SLIDE } from '../../constants/types';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { abs, isObject, matches, min, noop, prevent, sign, timeOf } from '../../utils';
+import { abs, EventInterface, isObject, matches, min, noop, prevent, sign, timeOf } from '@splidejs/utils';
 import { FRICTION, LOG_INTERVAL, POINTER_DOWN_EVENTS, POINTER_MOVE_EVENTS, POINTER_UP_EVENTS } from './constants';
-import { EventBinder, EventInterface } from '@splidejs/utils';
 
 
 /**

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

@@ -1,6 +1,5 @@
 import { EVENT_DRAG, EVENT_DRAGGING } from '../../../constants/events';
 import { fire, init } from '../../../test';
-import { assign } from '../../../utils';
 
 
 describe( 'Drag', () => {
@@ -99,7 +98,7 @@ function fireCancelable( elm: Element | Window, event: string, data: any = {} ):
 function fireWithCoord( elm: Element | Window, event: string, data: any = {} ): void {
   const { x: pageX = 0, y: pageY = 0 } = data;
 
-  fireCancelable( elm, event, assign( data, {
+  fireCancelable( elm, event, Object.assign( data, {
     pageX,
     pageY,
     touches: [

src/js/components/Drag/test/rewind.test.ts

@@ -1,5 +1,4 @@
 import { fire, init, wait } from '../../../test';
-import { assign } from '../../../utils';
 
 
 describe( 'Drag', () => {
@@ -61,7 +60,7 @@ function fireCancelable( elm: Element | Window, event: string, data: any = {} ):
 function fireWithCoord( elm: Element | Window, event: string, data: any = {} ): void {
   const { x: pageX = 0, y: pageY = 0 } = data;
 
-  fireCancelable( elm, event, assign( data, {
+  fireCancelable( elm, event, Object.assign( data, {
     pageX,
     pageY,
     touches: [

src/js/components/Elements/Elements.ts

@@ -20,12 +20,12 @@ import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
 import {
   addClass,
-  assert,
   assign,
   child,
   children,
+  closest,
   empty,
-  forOwn,
+  EventInterface,
   getAttribute,
   push,
   query,
@@ -34,10 +34,9 @@ import {
   setAttribute,
   toggleClass,
   uniqueId,
-} from '../../utils';
-import { closest } from '../../utils/dom/closest/closest';
+} from '@splidejs/utils';
+import { assert } from '../../utils';
 import { POINTER_DOWN_EVENTS } from '../Drag/constants';
-import { EventInterface } from '@splidejs/utils';
 
 
 /**
@@ -181,24 +180,24 @@ export function Elements(
    * Collects elements which the slider consists of.
    */
   function collect(): void {
-    track = find( `.${ CLASS_TRACK }` );
+    track = find( CLASS_TRACK );
     list  = child( track, `.${ CLASS_LIST }` );
 
     assert( track && list, 'A track/list element is missing.' );
     push( slides, children( list, `.${ CLASS_SLIDE }:not(.${ CLASS_CLONE })` ) );
 
-    forOwn( {
-      arrows    : CLASS_ARROWS,
-      pagination: CLASS_PAGINATION,
-      prev      : CLASS_ARROW_PREV,
-      next      : CLASS_ARROW_NEXT,
-      bar       : CLASS_PROGRESS_BAR,
-      toggle    : CLASS_TOGGLE,
-    }, ( className, key ) => {
-      elements[ key ] = find( `.${ className }` );
+    assign( elements, {
+      root,
+      track,
+      list,
+      slides,
+      arrows    : find( CLASS_ARROWS ),
+      pagination: find( CLASS_PAGINATION ),
+      prev      : find( CLASS_ARROW_PREV ),
+      next      : find( CLASS_ARROW_NEXT ),
+      bar       : find( CLASS_PROGRESS_BAR ),
+      toggle    : find( CLASS_TOGGLE ),
     } );
-
-    assign( elements, { root, track, list, slides } );
   }
 
   /**
@@ -225,10 +224,12 @@ export function Elements(
   /**
    * Finds an element only in this slider, ignoring elements in a nested slider.
    *
+   * @param className - A class name.
+   *
    * @return A found element or null.
    */
-  function find( selector: string ): HTMLElement | undefined {
-    const elm = query<HTMLElement>( root, selector );
+  function find( className: string ): HTMLElement | undefined {
+    const elm = query<HTMLElement>( root, `.${ className }` );
     return elm && closest( elm, `.${ CLASS_ROOT }` ) === root ? elm : undefined;
   }
 

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

@@ -4,7 +4,8 @@ import {
   CLASS_ARROW_PREV,
   CLASS_LIST,
   CLASS_PROGRESS_BAR,
-  CLASS_ROOT, CLASS_TOGGLE,
+  CLASS_ROOT,
+  CLASS_TOGGLE,
   CLASS_TRACK,
 } from '../../../constants/classes';
 import { RTL } from '../../../constants/directions';

src/js/components/Keyboard/Keyboard.ts

@@ -2,9 +2,7 @@ import { ARROW_LEFT, ARROW_RIGHT } from '../../constants/arrows';
 import { EVENT_MOVE, EVENT_UPDATED } from '../../constants/events';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { nextTick } from '../../utils';
-import { normalizeKey } from '../../utils/dom/normalizeKey/normalizeKey';
-import { EventInterface } from '@splidejs/utils';
+import { EventInterface, nextTick } from '@splidejs/utils';
 
 
 /**
@@ -103,11 +101,9 @@ export function Keyboard(
    */
   function onKeydown( e: KeyboardEvent ): void {
     if ( ! disabled ) {
-      const key = normalizeKey( e );
-
-      if ( key === resolve( ARROW_LEFT ) ) {
+      if ( e.key === resolve( ARROW_LEFT ) ) {
         Splide.go( '<' );
-      } else if ( key === resolve( ARROW_RIGHT ) ) {
+      } else if ( e.key === resolve( ARROW_RIGHT ) ) {
         Splide.go( '>' );
       }
     }

src/js/components/Layout/Layout.ts

@@ -2,10 +2,10 @@ import { TTB } from '../../constants/directions';
 import { EVENT_OVERFLOW, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_UPDATED } from '../../constants/events';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { abs, apply, assert, isObject, rect, style, toggleClass, unit } from '../../utils';
+import { abs, apply, EventInterface, isObject, rect, style, Throttle, toggleClass, unit } from '@splidejs/utils';
+import { assert } from '../../utils';
 import { FADE } from '../../constants/types';
 import { CLASS_OVERFLOW } from '../../constants/classes';
-import { EventInterface, Throttle } from '@splidejs/utils';
 
 
 /**
@@ -263,7 +263,10 @@ export function Layout(
    * @return The padding value in pixel.
    */
   function getPadding( right: boolean ): number {
-    return parseFloat( style( track, resolve( `padding${ right ? 'Right' : 'Left' }` ) ) ) || 0;
+    return parseFloat( style(
+      track,
+      resolve( `padding${ right ? 'Right' : 'Left' }` )
+    ) ) || 0;
   }
 
   /**

src/js/components/LazyLoad/LazyLoad.ts

@@ -15,16 +15,16 @@ import {
   create,
   display,
   empty,
+  EventInterface,
   getAttribute,
   queryAll,
-  remove,
+  removeNode,
   removeAttribute,
   removeClass,
   setAttribute,
-} from '../../utils';
+} from '@splidejs/utils';
 import { SlideComponent } from '../Slides/Slide';
 import { IMAGE_SELECTOR, SRC_DATA_ATTRIBUTE, SRCSET_DATA_ATTRIBUTE } from './constants';
-import { EventInterface } from '@splidejs/utils';
 
 
 /**
@@ -163,7 +163,7 @@ export function LazyLoad(
     removeClass( Slide.slide, CLASS_LOADING );
 
     if ( e.type !== 'error' ) {
-      remove( data[ 2 ] );
+      removeNode( data[ 2 ] );
       display( img, '' );
       emit( EVENT_LAZYLOAD_LOADED, img, Slide );
       emit( EVENT_RESIZE );

src/js/components/Live/Live.ts

@@ -3,8 +3,16 @@ import { CLASS_SR } from '../../constants/classes';
 import { EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_MOVED, EVENT_SCROLLED } from '../../constants/events';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { append, apply, create, remove, removeAttribute, setAttribute } from '../../utils';
-import { EventInterface, RequestInterval } from '@splidejs/utils';
+import {
+  append,
+  apply,
+  create,
+  EventInterface,
+  removeNode,
+  removeAttribute,
+  RequestInterval,
+  setAttribute,
+} from '@splidejs/utils';
 
 
 /**
@@ -88,7 +96,7 @@ export function Live(
       append( track, sr );
       interval.start();
     } else {
-      remove( sr );
+      removeNode( sr );
       interval.cancel();
     }
   }
@@ -98,7 +106,7 @@ export function Live(
    */
   function destroy(): void {
     removeAttribute( track, [ ARIA_LIVE, ARIA_ATOMIC, ARIA_BUSY ] );
-    remove( sr );
+    removeNode( sr );
   }
 
   /**

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

@@ -1,4 +1,4 @@
-import { ARIA_ATOMIC, ARIA_LIVE, ARIA_BUSY } from '../../../constants/attributes';
+import { ARIA_ATOMIC, ARIA_BUSY, ARIA_LIVE } from '../../../constants/attributes';
 import { CLASS_SR } from '../../../constants/classes';
 import { init, wait } from '../../../test';
 

src/js/components/Media/Media.ts

@@ -1,9 +1,8 @@
 import { MEDIA_PREFERS_REDUCED_MOTION } from '../../constants/media';
 import { CREATED, DESTROYED } from '../../constants/states';
-import { EventBinder } from '@splidejs/utils';
+import { EventBinder, merge, omit, ownKeys } from '@splidejs/utils';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { merge, omit, ownKeys } from '../../utils';
 import { EVENT_UPDATED } from '../../constants/events';
 
 

src/js/components/Move/Move.ts

@@ -11,8 +11,7 @@ import { IDLE, MOVING } from '../../constants/states';
 import { FADE, LOOP, SLIDE } from '../../constants/types';
 import { Splide } from '../../core/Splide/Splide';
 import { AnyFunction, BaseComponent, Components, Options, TransitionComponent } from '../../types';
-import { abs, ceil, clamp, isUndefined, rect, style } from '../../utils';
-import { EventInterface } from '@splidejs/utils';
+import { abs, ceil, clamp, EventInterface, isUndefined, rect, style } from '@splidejs/utils';
 
 
 /**

src/js/components/Pagination/Pagination.ts

@@ -28,17 +28,16 @@ import {
   create,
   display,
   empty,
+  EventInterface,
   focus,
   format,
   prevent,
-  remove,
+  removeNode,
   removeAttribute,
   removeClass,
   setAttribute,
   slice,
-} from '../../utils';
-import { normalizeKey } from '../../utils/dom/normalizeKey/normalizeKey';
-import { EventInterface } from '@splidejs/utils';
+} from '@splidejs/utils';
 
 
 /**
@@ -135,7 +134,7 @@ export function Pagination(
    */
   function destroy(): void {
     if ( list ) {
-      remove( placeholder ? slice( list.children ) : list );
+      removeNode( placeholder ? slice( list.children ) : list );
       removeClass( list, paginationClasses );
       empty( items );
       list = null;
@@ -203,7 +202,7 @@ export function Pagination(
    */
   function onKeydown( page: number, e: KeyboardEvent ): void {
     const { length } = items;
-    const key = normalizeKey( e );
+    const { key } = e;
     const dir = getDirection();
 
     let nextPage = -1;

src/js/components/Scroll/Scroll.ts

@@ -3,9 +3,8 @@ import { IDLE, SCROLLING } from '../../constants/states';
 import { SLIDE } from '../../constants/types';
 import { Splide } from '../../core/Splide/Splide';
 import { AnyFunction, BaseComponent, Components, Options } from '../../types';
-import { abs, apply, approximatelyEqual, floor, max, sign } from '../../utils';
+import { abs, apply, approximatelyEqual, EventInterface, floor, max, RequestInterval, sign } from '@splidejs/utils';
 import { BASE_VELOCITY, BOUNCE_DIFF_THRESHOLD, BOUNCE_DURATION, FRICTION_FACTOR, MIN_DURATION } from './constants';
-import { EventInterface, RequestInterval } from '@splidejs/utils';
 
 
 /**

src/js/components/Slides/Slide.ts

@@ -38,6 +38,7 @@ import {
   apply,
   ceil,
   child,
+  CSSProperties,
   floor,
   focus,
   format,
@@ -52,7 +53,7 @@ import {
   setAttribute,
   style as _style,
   toggleClass,
-} from '../../utils';
+} from '@splidejs/utils';
 
 
 /**
@@ -67,7 +68,7 @@ export interface  SlideComponent extends BaseComponent {
   container: HTMLElement;
   isClone: boolean;
   update(): void;
-  style( prop: string, value: string | number, useContainer?: boolean ): void
+  style( prop: CSSProperties, value: string | number, useContainer?: boolean ): void
   isWithin( from: number, distance: number ): boolean;
 }
 
@@ -227,7 +228,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    * @param value        - A CSS value to add.
    * @param useContainer - Optional. Determines whether to apply the rule to the container or not.
    */
-  function style( prop: string, value: string | number, useContainer?: boolean ): void {
+  function style( prop: CSSProperties, value: string | number, useContainer?: boolean ): void {
     _style( ( useContainer && container ) || slide, prop, value );
   }
 

src/js/components/Slides/Slides.ts

@@ -6,8 +6,9 @@ import {
   append,
   apply,
   before,
-  between,
+  between, CSSProperties,
   empty,
+  EventInterface,
   forEach as forEachItem,
   includes,
   isFunction,
@@ -16,11 +17,10 @@ import {
   matches,
   parseHtml,
   queryAll,
-  remove as removeNode,
+  removeNode,
   toArray,
-} from '../../utils';
+} from '@splidejs/utils';
 import { Slide, SlideComponent } from './Slide';
-import { EventInterface } from '@splidejs/utils';
 
 
 /**
@@ -240,7 +240,7 @@ export function Slides(
    * @param value        - A CSS value to add.
    * @param useContainer - Optional. Determines whether to apply the rule to the container or not.
    */
-  function style( prop: string, value: string | number, useContainer?: boolean ): void {
+  function style( prop: CSSProperties, value: string | number, useContainer?: boolean ): void {
     forEach( Slide => { Slide.style( prop, value, useContainer ) } );
   }
 

src/js/components/Slides/test/slide.test.ts

@@ -9,7 +9,7 @@ import {
 } from '../../../constants/events';
 import { Splide } from '../../../core/Splide/Splide';
 import { fire, init, keydown } from '../../../test';
-import { format } from '../../../utils';
+import { format } from '@splidejs/utils';
 import { SlideComponent } from '../Slide';
 
 

src/js/components/Sync/Sync.ts

@@ -11,10 +11,8 @@ import {
 import { LOOP } from '../../constants/types';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { apply, empty, includes, isUndefined, prevent, setAttribute } from '../../utils';
-import { normalizeKey } from '../../utils/dom/normalizeKey/normalizeKey';
+import { apply, empty, EventInterface, includes, isUndefined, prevent, setAttribute } from '@splidejs/utils';
 import { SlideComponent } from '../Slides/Slide';
-import { EventInterface } from '@splidejs/utils';
 
 
 /**
@@ -151,7 +149,7 @@ export function Sync(
    * @param e     - A KeyboardEvent object.
    */
   function onKeydown( Slide: SlideComponent, e: KeyboardEvent ): void {
-    if ( includes( TRIGGER_KEYS, normalizeKey( e ) ) ) {
+    if ( includes( TRIGGER_KEYS, e.key ) ) {
       onClick( Slide );
       prevent( e );
     }

src/js/components/Sync/test/navigation.test.ts

@@ -44,7 +44,7 @@ describe( 'Sync#navigate()', () => {
     expect( secondary.index ).toBe( 5 );
 
     Slides[ 3 ].slide.focus();
-    keydown( 'Spacebar', Slides[ 3 ].slide );
+    keydown( 'Enter', Slides[ 3 ].slide );
 
     expect( primary.index ).toBe( 3 );
     expect( secondary.index ).toBe( 3 );

src/js/components/Wheel/Wheel.ts

@@ -2,8 +2,7 @@ import { SCROLL_LISTENER_OPTIONS } from '../../constants/listener-options';
 import { MOVING } from '../../constants/states';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { abs, prevent, timeOf } from '../../utils';
-import { EventInterface } from '@splidejs/utils';
+import { abs, EventInterface, prevent, timeOf } from '@splidejs/utils';
 
 
 /**

src/js/core/Splide/Splide.ts

@@ -8,9 +8,21 @@ import { CREATED, DESTROYED, IDLE, STATES } from '../../constants/states';
 import { FADE } from '../../constants/types';
 import { Fade, Slide } from '../../transitions';
 import { AnyFunction, ComponentConstructor, Components, EventMap, Options, SyncTarget } from '../../types';
-import { addClass, assert, assign, empty, forOwn, getAttribute, isString, merge, query, slice } from '../../utils';
+import {
+  addClass,
+  assign,
+  empty,
+  EventInterface,
+  forOwn,
+  getAttribute,
+  isString,
+  merge,
+  query,
+  slice,
+  State,
+} from '@splidejs/utils';
+import { assert } from '../../utils';
 import { ARIA_LABEL, ARIA_LABELLEDBY } from '../../constants/attributes';
-import { EventInterface, State } from '@splidejs/utils';
 
 
 /**

src/js/renderer/SplideRenderer/SplideRenderer.ts

@@ -8,7 +8,6 @@ import { LOOP, SLIDE } from '../../constants/types';
 import { Splide } from '../../core/Splide/Splide';
 import { Options } from '../../types';
 import {
-  assert,
   assign,
   camelToKebab,
   child,
@@ -19,14 +18,15 @@ import {
   merge,
   push,
   queryAll,
-  remove,
+  removeNode,
   uniqueId,
   unit,
-} from '../../utils';
+} from '@splidejs/utils';
 import { CLASS_RENDERED } from '../constants/classes';
 import { RENDERER_DEFAULT_CONFIG } from '../constants/defaults';
 import { Style } from '../Style/Style';
 import { RendererConfig, SlideContent } from '../types/types';
+import { assert } from '../../utils';
 
 
 /**
@@ -46,10 +46,10 @@ export class SplideRenderer {
     const clones = queryAll( root, `.${ CLASS_CLONE }` );
 
     on( EVENT_MOUNTED, () => {
-      remove( child( root, 'style' ) );
+      removeNode( child( root, 'style' ) );
     } );
 
-    remove( clones );
+    removeNode( clones );
   }
 
   /**

src/js/renderer/Style/Style.ts

@@ -1,5 +1,5 @@
 import { Options } from '../../types';
-import { forOwn } from '../../utils';
+import { forOwn } from '@splidejs/utils';
 
 
 interface Styles {

src/js/test/utils/utils.ts

@@ -1,7 +1,7 @@
 import { CLASS_LIST, CLASS_ROOT, CLASS_SLIDE, CLASS_TRACK } from '../../constants/classes';
 import { Splide } from '../../core/Splide/Splide';
 import { Options } from '../../types';
-import { assign } from '../../utils';
+import { assign } from '@splidejs/utils';
 import { buildHtml, BuildHtmlArgs } from '../fixtures';
 import { SLIDER_WIDTH } from '../fixtures/constants';
 

src/js/transitions/Fade/Fade.ts

@@ -1,8 +1,7 @@
 import { EVENT_MOUNTED, EVENT_REFRESH } from '../../constants/events';
 import { Splide } from '../../core/Splide/Splide';
 import { Components, Options, TransitionComponent } from '../../types';
-import { nextTick, noop } from '../../utils';
-import { EventInterface } from '@splidejs/utils';
+import { EventInterface, nextTick, noop } from '@splidejs/utils';
 
 
 /**

src/js/transitions/Slide/Slide.ts

@@ -1,8 +1,7 @@
 import { SLIDE } from '../../constants/types';
 import { Splide } from '../../core/Splide/Splide';
 import { Components, Options, TransitionComponent } from '../../types';
-import { abs, apply, style } from '../../utils';
-import { EventInterface } from '@splidejs/utils';
+import { abs, apply, EventInterface, style } from '@splidejs/utils';
 
 
 /**

src/js/utils/array/empty/empty.test.ts

@@ -1,12 +0,0 @@
-import { empty } from './empty';
-
-
-describe( 'empty', () => {
-  test( 'can empty an array.', () => {
-    const array = [ 1, 2, 3 ];
-    empty( array );
-
-    expect( array[ 0 ] ).toBeUndefined();
-    expect( array.length ).toBe( 0 );
-  } );
-} );

src/js/utils/array/empty/empty.ts

@@ -1,8 +0,0 @@
-/**
- * Empties the array.
- *
- * @param array - A array to empty.
- */
-export function empty( array: any[] ): void {
-  array.length = 0;
-}

src/js/utils/array/forEach/forEach.test.ts

@@ -1,31 +0,0 @@
-import { forEach } from './forEach';
-
-
-describe( 'forEach', () => {
-  test( 'can iterate over an array.', () => {
-    const array = [ 1, 2, 3 ];
-    const callback = jest.fn();
-
-    forEach( array, ( value, index, current ) => {
-      expect( value ).toBe( array[ index ] );
-      expect( current ).toBe( array );
-
-      callback();
-    } );
-
-    expect( callback ).toHaveBeenCalledTimes( array.length );
-  } );
-
-  test( 'can push the provided value to a new array and iterate over it.', () => {
-    const callback = jest.fn();
-
-    forEach( 1, ( value, index, current ) => {
-      expect( value ).toBe( 1 );
-      expect( current ).toEqual( [ 1 ] );
-
-      callback();
-    } );
-
-    expect( callback ).toHaveBeenCalledTimes( 1 );
-  } );
-} );

src/js/utils/array/forEach/forEach.ts

@@ -1,12 +0,0 @@
-import { toArray } from '../toArray/toArray';
-
-
-/**
- * The extended `Array#forEach` method that accepts a single value as an argument.
- *
- * @param values   - A value or values to iterate over.
- * @param iteratee - An iteratee function.
- */
-export function forEach<T>( values: T | T[], iteratee: ( value: T, index: number, array: T[] ) => void ): void {
-  toArray( values ).forEach( iteratee );
-}

src/js/utils/array/includes/includes.test.ts

@@ -1,16 +0,0 @@
-import { includes } from './includes';
-
-
-describe( 'includes', () => {
-  const array = [ 1, 2, 3 ];
-
-  test( 'can check if the array includes a certain value or not.', () => {
-    expect( includes( array, 1 ) ).toBe( true );
-    expect( includes( array, 2 ) ).toBe( true );
-    expect( includes( array, 3 ) ).toBe( true );
-
-    expect( includes( array, 5 ) ).toBe( false );
-    expect( includes( array, 'a' as any ) ).toBe( false );
-    expect( includes( array, true as any ) ).toBe( false );
-  } );
-} );

src/js/utils/array/includes/includes.ts

@@ -1,12 +0,0 @@
-/**
- * Checks if the array includes the value or not.
- * `Array#includes` is not supported by IE.
- *
- * @param array - An array.
- * @param value - A value to search for.
- *
- * @return `true` if the array includes the value, or otherwise `false`.
- */
-export function includes<T>( array: T[], value: T ): boolean {
-  return array.indexOf( value ) > -1;
-}

src/js/utils/array/index.ts

@@ -1,5 +0,0 @@
-export { empty }    from './empty/empty';
-export { forEach }  from './forEach/forEach';
-export { includes } from './includes/includes';
-export { push }     from './push/push';
-export { toArray }  from './toArray/toArray';

src/js/utils/array/push/push.test.ts

@@ -1,19 +0,0 @@
-import { push } from './push';
-
-
-describe( 'push', () => {
-  test( 'can push an item to an array.', () => {
-    expect( push( [], 1 ) ).toEqual( [ 1 ] );
-    expect( push( [ 1 ], 2 ) ).toEqual( [ 1, 2 ] );
-  } );
-
-  test( 'can push items to an array.', () => {
-    expect( push( [], [ 1, 2, 3 ] ) ).toEqual( [ 1, 2, 3 ] );
-    expect( push( [ 1, 2, 3 ], [ 4, 5, 6 ] ) ).toEqual( [ 1, 2, 3, 4, 5, 6 ] );
-  } );
-
-  test( 'should return the provided array itself.', () => {
-    const array: number[] = [];
-    expect( push( array, 1 ) ).toBe( array );
-  } );
-} );

src/js/utils/array/push/push.ts

@@ -1,15 +0,0 @@
-import { toArray } from '../toArray/toArray';
-
-
-/**
- * Extended `Array#push()` that accepts an item or an array with items.
- *
- * @param array - An array to push items.
- * @param items - An item or items to push.
- *
- * @return A provided array itself.
- */
-export function push<T>( array: T[], items: T | T[] ): T[] {
-  array.push( ...toArray( items ) );
-  return array;
-}

src/js/utils/array/toArray/toArray.test.ts

@@ -1,15 +0,0 @@
-import { toArray } from './toArray';
-
-
-describe( 'toArray', () => {
-  test( 'can push a provided value into an array.', () => {
-    expect( toArray( 1 ) ).toEqual( [ 1 ] );
-    expect( toArray( true ) ).toEqual( [ true ] );
-    expect( toArray( { a: 1 } ) ).toStrictEqual( [ { a: 1 } ] );
-  } );
-
-  test( 'should return a provided value itself if it is already an array.', () => {
-    const array = [ 1 ];
-    expect( toArray( array ) ).toBe( array );
-  } );
-} );

src/js/utils/array/toArray/toArray.ts

@@ -1,13 +0,0 @@
-import { isArray } from '../../type/type';
-
-
-/**
- * Push the provided value to an array if the value is not an array.
- *
- * @param value - A value to push.
- *
- * @return An array containing the value, or the value itself if it is already an array.
- */
-export function toArray<T>( value: T | T[] ): T[] {
-  return isArray( value ) ? value : [ value ];
-}

src/js/utils/arrayLike/find/find.test.ts

@@ -1,18 +0,0 @@
-import { find } from './find';
-
-
-describe( 'find', () => {
-  test( 'can find a value in an array-like object that satisfies the predicate function.', () => {
-    const arrayLike = { length: 3, 0: '1', 1: '2', 2: '3' };
-
-    expect( find( arrayLike, value => value === '2' ) ).toBe( '2' );
-    expect( find( arrayLike, ( value, index ) => index > 1 ) ).toBe( '3' );
-  } );
-
-  test( 'can find a value in an array that satisfies the predicate function.', () => {
-    const array = [ 1, 2, 3 ];
-
-    expect( find( array, value => value === 2 ) ).toBe( 2 );
-    expect( find( array, ( value, index ) => index > 1 ) ).toBe( 3 );
-  } );
-} );

src/js/utils/arrayLike/find/find.ts

@@ -1,18 +0,0 @@
-import { slice } from '../slice/slice';
-
-
-/**
- * The find method for an array or array-like object, works in IE.
- * This method is not performant for a huge array.
- *
- * @param arrayLike - An array-like object.
- * @param predicate - The predicate function to test each element in the object.
- *
- * @return A found value if available, or otherwise `undefined`.
- */
-export function find<T>(
-  arrayLike: ArrayLike<T>,
-  predicate: ( value: T, index: number, array: T[] ) => any
-): T | undefined {
-  return slice( arrayLike ).filter( predicate )[ 0 ];
-}

src/js/utils/arrayLike/index.ts

@@ -1,2 +0,0 @@
-export { slice } from './slice/slice';
-export { find }  from './find/find';

src/js/utils/arrayLike/slice/slice.test.ts

@@ -1,23 +0,0 @@
-import { slice } from './slice';
-
-
-describe( 'slice', () => {
-  const arrayLike = { length: 3, 0: '1', 1: '2', 2: '3' };
-
-  test( 'can slice an array-like object.', () => {
-    expect( slice( arrayLike ) ).toEqual( [ '1', '2', '3' ] );
-    expect( slice( arrayLike, 1 ) ).toEqual( [ '2', '3' ] );
-    expect( slice( arrayLike, 1, 2 ) ).toEqual( [ '2' ] );
-  } );
-
-  test( 'can slice a node list.', () => {
-    const div = document.createElement( 'div' );
-    div.innerHTML = `<span>1</span><span>2</span><span>3</span><span>4</span>`;
-
-    const spans = slice( div.children );
-
-    expect( spans.length ).toBe( 4 );
-    expect( spans[ 0 ] instanceof HTMLSpanElement ).toBe( true );
-    expect( spans[ 3 ].textContent ).toBe( '4' );
-  } );
-} );

src/js/utils/arrayLike/slice/slice.ts

@@ -1,12 +0,0 @@
-/**
- * The slice method for an array-like object.
- *
- * @param arrayLike - An array-like object.
- * @param start     - Optional. A start index.
- * @param end       - Optional. A end index.
- *
- * @return An array with sliced elements.
- */
-export function slice<T>( arrayLike: ArrayLike<T>, start?: number, end?: number ): T[] {
-  return Array.prototype.slice.call( arrayLike, start, end );
-}

src/js/utils/dom/addClass/addClass.test.ts

@@ -1,23 +0,0 @@
-import { addClass } from './addClass';
-
-
-describe( 'addClass', () => {
-  beforeEach( () => {
-    document.body.innerHTML = '<div id="container"></div>';
-  } );
-
-  test( 'can add a class to the element.', () => {
-    const container = document.getElementById( 'container' );
-    addClass( container, 'active' );
-    expect( container.classList.contains( 'active' ) ).toBe( true );
-  } );
-
-  test( 'can add classes to the element.', () => {
-    const container = document.getElementById( 'container' );
-
-    addClass( container, [ 'active', 'visible' ] );
-
-    expect( container.classList.contains( 'active' ) ).toBe( true );
-    expect( container.classList.contains( 'visible' ) ).toBe( true );
-  } );
-} );

src/js/utils/dom/addClass/addClass.ts

@@ -1,13 +0,0 @@
-import { isString } from '../../type/type';
-import { toggleClass } from '../toggleClass/toggleClass';
-
-
-/**
- * Adds classes to the element.
- *
- * @param elm     - An element to add classes to.
- * @param classes - Classes to add.
- */
-export function addClass( elm: Element, classes: string | string[] ): void {
-  toggleClass( elm, isString( classes ) ? classes.split( ' ' ) : classes, true );
-}

src/js/utils/dom/append/append.test.ts

@@ -1,25 +0,0 @@
-import { append } from './append';
-
-
-describe( 'append', () => {
-  test( 'can append a child element to a parent element.', () => {
-    const div  = document.createElement( 'div' );
-    const span = document.createElement( 'span' );
-
-    append( div, span );
-    expect( div.firstElementChild ).toBe( span );
-  } );
-
-  test( 'can append children to a parent element.', () => {
-    const div   = document.createElement( 'div' );
-    const span1 = document.createElement( 'span' );
-    const span2 = document.createElement( 'span' );
-    const span3 = document.createElement( 'span' );
-
-    append( div, [ span1, span2, span3 ] );
-
-    expect( div.children[ 0 ] ).toBe( span1 );
-    expect( div.children[ 1 ] ).toBe( span2 );
-    expect( div.children[ 2 ] ).toBe( span3 );
-  } );
-} );

src/js/utils/dom/append/append.ts

@@ -1,12 +0,0 @@
-import { forEach } from '../../array';
-
-
-/**
- * Appends children to the parent element.
- *
- * @param parent   - A parent element.
- * @param children - A child or children to append to the parent.
- */
-export function append( parent: Element, children: Node | Node[] ): void {
-  forEach( children, parent.appendChild.bind( parent ) );
-}

src/js/utils/dom/before/before.test.ts

@@ -1,41 +0,0 @@
-import { before } from './before';
-
-
-describe( 'before', () => {
-  beforeEach( () => {
-    document.body.textContent = '';
-  } );
-
-  test( 'can insert a node before the reference node.', () => {
-    const ref   = document.createElement( 'a' );
-    const span1 = document.createElement( 'span' );
-    const span2 = document.createElement( 'span' );
-
-    document.body.appendChild( ref );
-
-    before( span1, ref );
-    expect( document.body.firstChild ).toBe( span1 );
-    expect( span1.nextSibling ).toBe( ref );
-
-    before( span2, ref );
-    expect( document.body.firstChild ).toBe( span1 );
-    expect( span1.nextSibling ).toBe( span2 );
-    expect( span2.nextSibling ).toBe( ref );
-  } );
-
-  test( 'can insert nodes before the reference node.', () => {
-    const ref   = document.createElement( 'a' );
-    const span1 = document.createElement( 'span' );
-    const span2 = document.createElement( 'span' );
-    const span3 = document.createElement( 'span' );
-
-    document.body.appendChild( ref );
-
-    before( [ span1, span2, span3 ], ref );
-
-    expect( document.body.children[ 0 ] ).toBe( span1 );
-    expect( document.body.children[ 1 ] ).toBe( span2 );
-    expect( document.body.children[ 2 ] ).toBe( span3 );
-    expect( document.body.children[ 3 ] ).toBe( ref );
-  } );
-} );

src/js/utils/dom/before/before.ts

@@ -1,18 +0,0 @@
-import { forEach } from '../../array';
-
-
-/**
- * Inserts a node or nodes before the specified reference node.
- *
- * @param nodes - A node or nodes to insert.
- * @param ref   - A reference node.
- */
-export function before( nodes: Node | Node[], ref: Node | null ): void {
-  forEach( nodes, node => {
-    const parent = ( ref || node ).parentNode;
-
-    if ( parent ) {
-      parent.insertBefore( node, ref );
-    }
-  } );
-}

src/js/utils/dom/child/child.test.ts

@@ -1,41 +0,0 @@
-import { child } from './child';
-
-
-describe( 'child', () => {
-  beforeEach( () => {
-    document.body.innerHTML = `
-      <div id="container">
-        <span id="span1" class="active"></span>
-        <button id="button1" class="active"></button>
-        <span id="span2"></span>
-        <button id="button2"></button>
-        <span id="span3"></span>
-        <button id="button3"></button>
-      </div>
-    `;
-  } );
-
-  test( 'can return the child that matches the specified selector.', () => {
-    const container = document.getElementById( 'container' );
-    const span1     = child( container, 'span' );
-    expect( span1.id ).toBe( 'span1' );
-
-    const span2 = child( container, '#span2' );
-    expect( span2.id ).toBe( 'span2' );
-
-    const active = child( container, '.active' );
-    expect( active.id ).toBe( 'span1' );
-  } );
-
-  test( 'can return the firstElementChild if the selector is omitted.', () => {
-    const container = document.getElementById( 'container' );
-    const span1     = child( container );
-    expect( span1.id ).toBe( 'span1' );
-  } );
-
-  test( 'should rerun undefined if no element is found.', () => {
-    const container = document.getElementById( 'container' );
-    const elm       = child( container, 'nothing' );
-    expect( elm ).toBeUndefined();
-  } );
-} );

src/js/utils/dom/child/child.ts

@@ -1,14 +0,0 @@
-import { children } from '../children/children';
-
-
-/**
- * Returns a child element that matches the specified tag or class name.
- *
- * @param parent   - A parent element.
- * @param selector - A selector to filter children.
- *
- * @return A matched child element if available, or otherwise `undefined`.
- */
-export function child<E extends HTMLElement>( parent: HTMLElement, selector?: string ): E | undefined {
-  return selector ? children<E>( parent, selector )[ 0 ] : parent.firstElementChild as E;
-}

src/js/utils/dom/children/children.test.ts

@@ -1,42 +0,0 @@
-import { children } from './children';
-
-
-describe( 'children', () => {
-  beforeEach( () => {
-    document.body.innerHTML = `
-      <div id="container">
-        <span id="span1" class="active"></span>
-        <button id="button1" class="active"></button>
-        <span id="span2"></span>
-        <button id="button2"></button>
-        <span id="span3"></span>
-        <button id="button3"></button>
-      </div>
-    `;
-  } );
-
-  test( 'can return children that have the specified tag name.', () => {
-    const container = document.getElementById( 'container' );
-    const spans     = children( container, 'span' );
-
-    expect( spans.length ).toBe( 3 );
-    expect( spans[ 0 ].id ).toBe( 'span1' );
-    expect( spans[ 1 ].id ).toBe( 'span2' );
-    expect( spans[ 2 ].id ).toBe( 'span3' );
-  } );
-
-  test( 'can return children that have the specified class name.', () => {
-    const container = document.getElementById( 'container' );
-    const spans     = children( container, '.active' );
-
-    expect( spans.length ).toBe( 2 );
-    expect( spans[ 0 ].id ).toBe( 'span1' );
-    expect( spans[ 1 ].id ).toBe( 'button1' );
-  } );
-
-  test( 'should rerun an empty array if no element is found.', () => {
-    const container = document.getElementById( 'container' );
-    const elms = children( container, '.nothing' );
-    expect( elms.length ).toBe( 0 );
-  } );
-} );

src/js/utils/dom/children/children.ts

@@ -1,16 +0,0 @@
-import { slice } from '../../arrayLike';
-import { matches } from '../matches/matches';
-
-
-/**
- * Finds children that has the specified tag or class name.
- *
- * @param parent   - A parent element.
- * @param selector - Optional. A selector to filter children.
- *
- * @return An array with filtered children.
- */
-export function children<E extends HTMLElement>( parent: HTMLElement, selector?: string ): E[] {
-  const children = parent ? slice( parent.children ) as E[] : [];
-  return selector ? children.filter( child => matches( child, selector ) ) : children;
-}

src/js/utils/dom/closest/closest.test.ts

@@ -1,54 +0,0 @@
-import { closest } from './closest';
-
-
-describe.each( [ [ 'native' ], [ 'polyfill' ] ] )( 'closest (%s)', ( env ) => {
-  if ( env === 'polyfill' ) {
-    // Forces to disable the native method.
-    Element.prototype.closest = null as any;
-  }
-
-  beforeEach( () => {
-    document.body.innerHTML = `
-      <div id="container" class="wrapper">
-        <div id="outer" class="wrapper">
-          <div id="inner">
-            <span id="start">start</span>
-          </div>
-        </div>
-      </div>
-    `;
-  } );
-
-  test( 'can find the closest element.', () => {
-    const from = document.getElementById( 'start' );
-
-    if ( from ) {
-      expect( closest( from, '#inner' )?.id ).toBe( 'inner' );
-      expect( closest( from, '#outer' )?.id ).toBe( 'outer' );
-      expect( closest( from, 'div' )?.id ).toBe( 'inner' );
-      expect( closest( from, '.wrapper' )?.id ).toBe( 'outer' );
-    } else {
-      fail();
-    }
-  } );
-
-  test( 'should include the provided element itself.', () => {
-    const from = document.getElementById( 'start' );
-
-    if ( from ) {
-      expect( closest( from, 'span' )?.id ).toBe( 'start' );
-    } else {
-      fail();
-    }
-  } );
-
-  test( 'should return null if no element is found.', () => {
-    const from = document.getElementById( 'start' );
-
-    if ( from ) {
-      expect( closest( from, 'invalid' ) ).toBeNull();
-    } else {
-      fail();
-    }
-  } );
-} );

src/js/utils/dom/closest/closest.ts

@@ -1,29 +0,0 @@
-import { isFunction } from '../../type/type';
-import { matches } from '../matches/matches';
-
-
-/**
- * Starts from the provided element, searches for the first element that matches the selector in ascendants.
- *
- * @param from     - An element to search from.
- * @param selector - A selector.
- *
- * @return The found element if available, or `null`.
- */
-export function closest( from: HTMLElement, selector: string ): HTMLElement | null {
-  if ( isFunction( from.closest ) ) {
-    return from.closest( selector );
-  }
-
-  let elm: HTMLElement | null = from;
-
-  while ( elm && elm.nodeType === 1 ) {
-    if ( matches( elm, selector ) ) {
-      break;
-    }
-
-    elm = elm.parentElement;
-  }
-
-  return elm;
-}

src/js/utils/dom/create/create.test.ts

@@ -1,19 +0,0 @@
-import { create } from './create';
-
-
-describe( 'create', () => {
-  test( 'can create an element by a tag name.', () => {
-    const div = create( 'div' );
-    const iframe = create( 'iframe' );
-
-    expect( div instanceof HTMLDivElement ).toBe( true );
-    expect( iframe instanceof HTMLIFrameElement ).toBe( true );
-  } );
-
-  test( 'can create an element with setting attributes.', () => {
-    const iframe = create( 'iframe', { width: 100, height: 200 } );
-
-    expect( iframe.getAttribute( 'width' ) ).toBe( '100' );
-    expect( iframe.getAttribute( 'height' ) ).toBe( '200' );
-  } );
-} );

src/js/utils/dom/create/create.ts

@@ -1,40 +0,0 @@
-import { isString } from '../../type/type';
-import { addClass } from '../addClass/addClass';
-import { append } from '../append/append';
-import { setAttribute } from '../setAttribute/setAttribute';
-
-
-export function create<K extends keyof HTMLElementTagNameMap>(
-  tag: K,
-  attrs?: Record<string, string | number | boolean> | string,
-  parent?: HTMLElement
-): HTMLElementTagNameMap[ K ];
-
-export function create(
-  tag: string,
-  attrs?: Record<string, string | number | boolean> | string,
-  parent?: HTMLElement
-): HTMLElement;
-
-/**
- * Creates a HTML element.
- *
- * @param tag    - A tag name.
- * @param attrs  - Optional. An object with attributes to apply the created element to, or a string with classes.
- * @param parent - Optional. A parent element where the created element is appended.
- */
-export function create<K extends keyof HTMLElementTagNameMap>(
-  tag: K,
-  attrs?: Record<string, string | number | boolean> | string,
-  parent?: HTMLElement
-): HTMLElementTagNameMap[ K ] {
-  const elm = document.createElement( tag );
-
-  if ( attrs ) {
-    isString( attrs ) ? addClass( elm, attrs ) : setAttribute( elm, attrs );
-  }
-
-  parent && append( parent, elm );
-
-  return elm;
-}

src/js/utils/dom/display/display.test.ts

@@ -1,17 +0,0 @@
-import { display } from './display';
-
-
-describe( 'display', () => {
-  test( 'can set a new display value.', () => {
-    const div = document.createElement( 'div' );
-
-    display( div, 'none' );
-    expect( div.style.display ).toBe( 'none' );
-
-    display( div, 'flex' );
-    expect( div.style.display ).toBe( 'flex' );
-
-    display( div, '' );
-    expect( div.style.display ).toBe( '' );
-  } );
-} );

src/js/utils/dom/display/display.ts

@@ -1,12 +0,0 @@
-import { style } from '../style/style';
-
-
-/**
- * Sets the `display` CSS value to the element.
- *
- * @param elm     - An element to set a new value to.
- * @param display - A new `display` value.
- */
-export function display( elm: HTMLElement, display: string ): void {
-  style( elm, 'display', display );
-}

src/js/utils/dom/focus/focus.test.ts

@@ -1,17 +0,0 @@
-import { focus } from './focus';
-
-
-describe( 'focus', () => {
-  test( 'can make an element focused if it is focusable.', () => {
-    const div = document.createElement( 'div' );
-
-    div.tabIndex = 0;
-    document.body.appendChild( div );
-
-    expect( document.activeElement ).not.toBe( div );
-
-    focus( div );
-
-    expect( document.activeElement ).toBe( div );
-  } );
-} );

src/js/utils/dom/focus/focus.ts

@@ -1,8 +0,0 @@
-/**
- * Focuses the provided element without scrolling the ascendant element.
- *
- * @param elm - An element to focus.
- */
-export function focus( elm: HTMLElement ): void {
-  elm[ 'setActive' ] && elm[ 'setActive' ]() || elm.focus( { preventScroll: true } );
-}

src/js/utils/dom/getAttribute/getAttribute.test.ts

@@ -1,19 +0,0 @@
-import { getAttribute } from './getAttribute';
-
-
-describe( 'getAttribute', () => {
-  beforeEach( () => {
-    document.body.innerHTML = '<div id="container"></div>';
-  } );
-
-  test( 'can set an attribute to an element.', () => {
-    const container = document.getElementById( 'container' );
-
-    container.setAttribute( 'aria-hidden', 'true' );
-    container.setAttribute( 'tabindex', '-1' );
-
-    expect( getAttribute( container, 'id' ) ).toBe( 'container' );
-    expect( getAttribute( container, 'aria-hidden' ) ).toBe( 'true' );
-    expect( getAttribute( container, 'tabindex' ) ).toBe( '-1' );
-  } );
-} );

src/js/utils/dom/getAttribute/getAttribute.ts

@@ -1,9 +0,0 @@
-/**
- * Returns the specified attribute value.
- *
- * @param elm  - An element.
- * @param attr - An attribute to get.
- */
-export function getAttribute( elm: Element, attr: string ): string | null {
-  return elm.getAttribute( attr );
-}

src/js/utils/dom/hasClass/hasClass.test.ts

@@ -1,20 +0,0 @@
-import { hasClass } from './hasClass';
-
-
-describe( 'hasClass', () => {
-  test( 'can return true if the element contains the specified class.', () => {
-    const container = document.createElement( 'div' );
-    container.classList.add( 'active' );
-    container.classList.add( 'visible' );
-
-    expect( hasClass( container, 'active' ) ).toBe( true );
-    expect( hasClass( container, 'visible' ) ).toBe( true );
-  } );
-
-  test( 'can return false if the element does not contain the specified class.', () => {
-    const container = document.createElement( 'div' );
-
-    expect( hasClass( container, 'active' ) ).toBe( false );
-    expect( hasClass( container, 'visible' ) ).toBe( false );
-  } );
-} );

src/js/utils/dom/hasClass/hasClass.ts

@@ -1,11 +0,0 @@
-/**
- * Checks if the element contains the specified class or not.
- *
- * @param elm       - An element to check.
- * @param className - A class name that may be contained by the element.
- *
- * @return `true` if the element contains the class, or otherwise `false`.
- */
-export function hasClass( elm: Element, className: string ): boolean {
-  return elm && elm.classList.contains( className );
-}

src/js/utils/dom/index.ts

@@ -1,25 +0,0 @@
-export { addClass }        from './addClass/addClass';
-export { append }          from './append/append';
-export { before }          from './before/before';
-export { child }           from './child/child';
-export { children }        from './children/children';
-export { create }          from './create/create';
-export { display }         from './display/display';
-export { focus }           from './focus/focus';
-export { getAttribute }    from './getAttribute/getAttribute';
-export { hasClass }        from './hasClass/hasClass';
-export { matches }         from './matches/matches';
-export { measure }         from './measure/measure';
-export { parseHtml }       from './parseHtml/parseHtml';
-export { prevent }         from './prevent/prevent';
-export { query }           from './query/query';
-export { queryAll }        from './queryAll/queryAll';
-export { rect }            from './rect/rect';
-export { remove }          from './remove/remove';
-export { removeAttribute } from './removeAttribute/removeAttribute';
-export { removeClass }     from './removeClass/removeClass';
-export { setAttribute }    from './setAttribute/setAttribute';
-export { style }           from './style/style';
-export { timeOf }          from './timeOf/timeOf';
-export { toggleClass }     from './toggleClass/toggleClass';
-export { unit }            from './unit/unit';

src/js/utils/dom/matches/matches.test.ts

@@ -1,35 +0,0 @@
-import { matches } from './matches';
-
-
-describe( 'children', () => {
-  beforeEach( () => {
-    document.body.innerHTML = `
-      <div id="container">
-        <span id="span1" class="active"></span>
-        <button id="button1" class="active"></button>
-        <span id="span2"></span>
-        <button id="button2"></button>
-        <span id="span3"></span>
-        <button id="button3"></button>
-      </div>
-    `;
-  } );
-
-  test( 'can test if the selector matches the element or not.', () => {
-    const container = document.getElementById( 'container' );
-
-    expect( matches( container, 'div' ) ).toBe( true );
-    expect( matches( container, '#container' ) ).toBe( true );
-    expect( matches( container, 'span' ) ).toBe( false );
-
-    const span = container.firstElementChild;
-
-    expect( matches( span, 'span' ) ).toBe( true );
-    expect( matches( span, '#span1' ) ).toBe( true );
-    expect( matches( span, '.active' ) ).toBe( true );
-    expect( matches( span, '#container .active' ) ).toBe( true );
-
-    expect( matches( span, '#container' ) ).toBe( false );
-    expect( matches( span, '#span2' ) ).toBe( false );
-  } );
-} );

src/js/utils/dom/matches/matches.ts

@@ -1,14 +0,0 @@
-import { isHTMLElement } from '../../type/type';
-
-
-/**
- * Checks if the element can be selected by the provided selector or not.
- *
- * @param elm      - An element to check.
- * @param selector - A selector to test.
- *
- * @return `true` if the selector matches the element, or otherwise `false`.
- */
-export function matches( elm: Element | EventTarget, selector: string ): boolean {
-  return isHTMLElement( elm ) && ( elm[ 'msMatchesSelector' ] || elm.matches ).call( elm, selector );
-}

src/js/utils/dom/measure/measure.ts

@@ -1,23 +0,0 @@
-import { isString } from '../../type/type';
-import { create } from '../create/create';
-import { rect } from '../rect/rect';
-import { remove } from '../remove/remove';
-
-
-/**
- * Attempts to convert the provided value to pixel as the relative value to the parent element.
- *
- * @param parent - A parent element.
- * @param value  - A value to convert.
- *
- * @return A converted value in pixel. Unhandled values will become 0.
- */
-export function measure( parent: HTMLElement, value: number | string ): number {
-  if ( isString( value ) ) {
-    const div = create( 'div', { style: `width: ${ value }; position: absolute;` }, parent );
-    value = rect( div ).width;
-    remove( div );
-  }
-
-  return value;
-}

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

@@ -1,31 +0,0 @@
-import { fire } from '../../../test';
-import { NORMALIZATION_MAP, normalizeKey } from './normalizeKey';
-
-
-describe( 'normalizeKey', () => {
-  test( 'can normalize a key into a standard name.', () => {
-    const keys     = Object.keys( NORMALIZATION_MAP );
-    const callback = jest.fn();
-
-    keys.forEach( key => {
-      expect( normalizeKey( key ) ).toBe( NORMALIZATION_MAP[ key ] );
-      callback();
-    } );
-
-    expect( callback ).toHaveBeenCalled();
-  } );
-
-  test( 'can return a normalized key from a Keyboard event object.', done => {
-    window.addEventListener( 'keydown', e => {
-      expect( normalizeKey( e ) ).toBe( 'ArrowUp' );
-      done();
-    } );
-
-    fire( window, 'keydown', { key: 'Up' } );
-  } );
-
-  test( 'should do the provided key as is if the normalization map does not include the passed key.', () => {
-    expect( normalizeKey( 'a' ) ).toBe( 'a' );
-    expect( normalizeKey( 'F1' ) ).toBe( 'F1' );
-  } );
-} );

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

@@ -1,28 +0,0 @@
-import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from '../../../constants/arrows';
-import { isString } from '../../type/type';
-
-
-/**
- * The map to associate a non-standard name to the standard one.
- *
- * @since 4.0.0
- */
-export const NORMALIZATION_MAP = {
-  Spacebar: ' ',
-  Right   : ARROW_RIGHT,
-  Left    : ARROW_LEFT,
-  Up      : ARROW_UP,
-  Down    : ARROW_DOWN,
-};
-
-/**
- * Normalizes the key.
- *
- * @param key - A string or a KeyboardEvent object.
- *
- * @return A normalized key.
- */
-export function normalizeKey( key: string | KeyboardEvent ): string {
-  key = isString( key ) ? key : key.key;
-  return NORMALIZATION_MAP[ key ] || key;
-}

src/js/utils/dom/parseHtml/parseHtml.test.ts

@@ -1,21 +0,0 @@
-import { parseHtml } from './parseHtml';
-
-
-describe( 'parseHtml', () => {
-  test( 'can parse the provided HTML string.', () => {
-    const div = parseHtml( '<div id="container" class="active"><span>content</span></div>' );
-
-    expect( div.id ).toBe( 'container' );
-    expect( div.classList.contains( 'active' ) ).toBe( true );
-    expect( div.firstElementChild.tagName.toUpperCase() ).toBe( 'SPAN' );
-    expect( div.firstElementChild.textContent ).toBe( 'content' );
-  } );
-
-  test( 'can parse the provided SVG string.', () => {
-    const svg = parseHtml( '<svg id="icon"><path d="m19 18-14-13m0 13 14-13"></path></svg>' );
-
-    expect( svg instanceof SVGElement ).toBe( true );
-    expect( svg.id ).toBe( 'icon' );
-    expect( svg.firstElementChild.tagName.toUpperCase() ).toBe( 'PATH' );
-  } );
-} );

src/js/utils/dom/parseHtml/parseHtml.ts

@@ -1,13 +0,0 @@
-import { child } from '../child/child';
-
-
-/**
- * Parses the provided HTML string and returns the first element.
- *
- * @param html - An HTML string to parse.
- *
- * @return An Element on success, or otherwise `undefined`.
- */
-export function parseHtml<E extends HTMLElement>( html: string ): E | undefined {
-  return child<E>( new DOMParser().parseFromString( html, 'text/html' ).body );
-}

src/js/utils/dom/prevent/prevent.test.ts

@@ -1,15 +0,0 @@
-import { fire } from '../../../test';
-import { prevent } from './prevent';
-
-
-describe( 'prevent', () => {
-  test( 'can prevent the default browser action of an event.', done => {
-    window.addEventListener( 'click', e => {
-      prevent( e );
-      expect( e.defaultPrevented ).toBe( true );
-      done();
-    } );
-
-    fire( window, 'click', { timeStamp: 123 }, { cancelable: true } );
-  } );
-} );

src/js/utils/dom/prevent/prevent.ts

@@ -1,14 +0,0 @@
-/**
- * Call the `preventDefault()` of the provided event.
- *
- * @param e               - An Event object.
- * @param stopPropagation - Optional. Whether to stop the event propagation or not.
- */
-export function prevent( e: Event, stopPropagation?: boolean ): void {
-  e.preventDefault();
-
-  if ( stopPropagation ) {
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-  }
-}

src/js/utils/dom/query/query.test.ts

@@ -1,37 +0,0 @@
-import { query } from './query';
-
-
-describe( 'query', () => {
-  beforeEach( () => {
-    document.body.innerHTML = `
-      <div id="div1">
-        <span>1</span>
-      </div>
-      <div id="div2">
-        <span>2</span>
-      </div>
-      <div id="div3">
-        <span>3</span>
-      </div>
-    `;
-  } );
-
-  test( 'can return the first element that matches the specified selector.', () => {
-    const div1 = query( document, 'div' );
-    expect( div1.id ).toBe( 'div1' );
-
-    const div3 = query( document, '#div3' );
-    expect( div3.id ).toBe( 'div3' );
-  } );
-
-  test( 'can accept a parent element to start find an element from.', () => {
-    const div2  = query( document, '#div2' );
-    const span2 = query( div2, 'span' );
-
-    expect( span2.textContent ).toBe( '2' );
-  } );
-
-  test( 'should return `null` if nothing matches the selector.', () => {
-    expect( query( document, '#nothing' ) ).toBeNull();
-  } );
-} );

src/js/utils/dom/query/query.ts

@@ -1,11 +0,0 @@
-/**
- * Returns an element that matches the provided selector.
- *
- * @param parent   - A parent element to start searching from.
- * @param selector - A selector to query.
- *
- * @return A found element or `null`.
- */
-export function query<E extends Element = Element>( parent: Element | Document, selector: string ): E | null {
-  return parent && parent.querySelector( selector );
-}

src/js/utils/dom/queryAll/queryAll.test.ts

@@ -1,31 +0,0 @@
-import { queryAll } from './queryAll';
-
-
-describe( 'queryAll', () => {
-  beforeEach( () => {
-    document.body.innerHTML = `
-      <div id="div1">
-        <span>1</span>
-      </div>
-      <div id="div2">
-        <span>2</span>
-      </div>
-      <div id="div3">
-        <span>3</span>
-      </div>
-    `;
-  } );
-
-  test( 'can get elements that match the selector.', () => {
-    const divs = queryAll( document.body, 'div' );
-    expect( divs.length ).toBe( 3 );
-    expect( divs[ 0 ].id ).toBe( 'div1' );
-    expect( divs[ 1 ].id ).toBe( 'div2' );
-    expect( divs[ 2 ].id ).toBe( 'div3' );
-
-    const spans = queryAll( document.body, '#div1 span' );
-
-    expect( spans.length ).toBe( 1 );
-    expect( spans[ 0 ].textContent ).toBe( '1' );
-  } );
-} );

src/js/utils/dom/queryAll/queryAll.ts

@@ -1,14 +0,0 @@
-import { slice } from '../../arrayLike';
-
-
-/**
- * Returns elements that match the provided selector.
- *
- * @param parent   - A parent element to start searching from.
- * @param selector - A selector to query.
- *
- * @return An array with matched elements.
- */
-export function queryAll<E extends Element = Element>( parent: Element | Document, selector?: string ): E[] {
-  return selector ? slice<E>( parent.querySelectorAll( selector ) ) : [];
-}

src/js/utils/dom/rect/rect.test.ts

@@ -1,11 +0,0 @@
-import { rect } from './rect';
-
-
-describe( 'rect', () => {
-  test( 'can return a DOMRect object.', () => {
-    const div = document.createElement( 'div' );
-
-    expect( rect( div ).width ).toBe( 0 );
-    expect( rect( div ).left ).toBe( 0 );
-  } );
-} );

src/js/utils/dom/rect/rect.ts

@@ -1,8 +0,0 @@
-/**
- * Returns a DOMRect object of the provided element.
- *
- * @param target - An element.
- */
-export function rect( target: Element ): DOMRect {
-  return target.getBoundingClientRect();
-}

src/js/utils/dom/remove/remove.test.ts

@@ -1,43 +0,0 @@
-import { remove } from './remove';
-
-
-describe( 'remove', () => {
-  test( 'can remove an element from its parent.', () => {
-    const div  = document.createElement( 'div' );
-    const span = document.createElement( 'span' );
-
-    div.appendChild( span );
-    expect( div.firstElementChild ).toBe( span );
-
-    remove( span );
-    expect( div.children.length ).toBe( 0 );
-  } );
-
-  test( 'can remove elements from its parent.', () => {
-    const div   = document.createElement( 'div' );
-    const span1 = document.createElement( 'span' );
-    const span2 = document.createElement( 'span' );
-    const span3 = document.createElement( 'span' );
-
-    div.appendChild( span1 );
-    div.appendChild( span2 );
-    div.appendChild( span3 );
-    expect( div.children[ 0 ] ).toBe( span1 );
-    expect( div.children[ 1 ] ).toBe( span2 );
-    expect( div.children[ 2 ] ).toBe( span3 );
-
-    remove( [ span1, span2, span3 ] );
-    expect( div.children.length ).toBe( 0 );
-  } );
-
-  test( 'can remove a text node from its parent.', () => {
-    const span = document.createElement( 'span' );
-    const node = document.createTextNode( 'sample' );
-
-    span.appendChild( node );
-    expect( span.textContent ).toBe( 'sample' );
-
-    remove( node );
-    expect( span.textContent ).toBe( '' );
-  } );
-} );

src/js/utils/dom/remove/remove.ts

@@ -1,15 +0,0 @@
-import { forEach } from '../../array';
-
-
-/**
- * Removes the provided node from its parent.
- *
- * @param nodes - A node or nodes to remove.
- */
-export function remove( nodes: Node | Node[] ): void {
-  forEach( nodes, node => {
-    if ( node && node.parentNode ) {
-      node.parentNode.removeChild( node );
-    }
-  } );
-}

src/js/utils/dom/removeAttribute/removeAttribute.test.ts

@@ -1,52 +0,0 @@
-import { removeAttribute } from './removeAttribute';
-
-
-describe( 'removeAttribute', () => {
-  test( 'can remove an attribute from an element.', () => {
-    const div = document.createElement( 'div' );
-
-    div.setAttribute( 'aria-hidden', 'true' );
-    div.setAttribute( 'tabindex', '-1' );
-
-    removeAttribute( div, 'aria-hidden' );
-    expect( div.getAttribute( 'aria-hidden' ) ).toBeNull();
-    expect( div.getAttribute( 'tabindex' ) ).not.toBeNull();
-
-    removeAttribute( div, 'tabindex' );
-    expect( div.getAttribute( 'tabindex' ) ).toBeNull();
-  } );
-
-  test( 'can remove attributes from an element.', () => {
-    const div = document.createElement( 'div' );
-
-    div.setAttribute( 'aria-hidden', 'true' );
-    div.setAttribute( 'tabindex', '-1' );
-
-    removeAttribute( div, [ 'aria-hidden', 'tabindex' ] );
-    expect( div.getAttribute( 'aria-hidden' ) ).toBeNull();
-    expect( div.getAttribute( 'tabindex' ) ).toBeNull();
-  } );
-
-  test( 'can remove attributes from elements.', () => {
-    const div1     = document.createElement( 'div1' );
-    const div2     = document.createElement( 'div2' );
-    const div3     = document.createElement( 'div2' );
-    const divs     = [ div1, div2, div3 ];
-    const callback = jest.fn();
-
-    divs.forEach( div => {
-      div.setAttribute( 'aria-hidden', 'true' );
-      div.setAttribute( 'tabindex', '-1' );
-    } );
-
-    removeAttribute( divs, [ 'aria-hidden', 'tabindex' ] );
-
-    divs.forEach( div => {
-      expect( div.getAttribute( 'aria-hidden' ) ).toBeNull();
-      expect( div.getAttribute( 'tabindex' ) ).toBeNull();
-      callback();
-    } );
-
-    expect( callback ).toHaveBeenCalledTimes( divs.length );
-  } );
-} );

src/js/utils/dom/removeAttribute/removeAttribute.ts

@@ -1,16 +0,0 @@
-import { forEach } from '../../array';
-
-
-/**
- * Removes attributes from the element.
- *
- * @param elms  - An element or elements.
- * @param attrs - An attribute or attributes to remove.
- */
-export function removeAttribute( elms: Element | Element[], attrs: string | string[] ): void {
-  forEach( elms, elm => {
-    forEach( attrs, attr => {
-      elm && elm.removeAttribute( attr );
-    } );
-  } );
-}