Change the version. Clean up.

src/js/components/Clones/Clones.ts

@@ -17,7 +17,7 @@ export interface ClonesComponent extends BaseComponent {
 /**
  * The multiplier to determine the number of clones.
  *
- * @since 3.7.0
+ * @since 4.0.0
  */
 export const MULTIPLIER = 2;
 

src/js/components/Live/Live.ts

@@ -9,7 +9,7 @@ import { apply, setAttribute } from '../../utils';
 /**
  * The interface for the Live component.
  *
- * @since 3.7.0
+ * @since 4.0.0
  */
 export interface LiveComponent extends BaseComponent {
   disable( disabled: boolean ): void;
@@ -20,7 +20,7 @@ export interface LiveComponent extends BaseComponent {
  *
  * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
  *
- * @since 3.7.0
+ * @since 4.0.0
  *
  * @param Splide     - A Splide instance.
  * @param Components - A collection of components.

src/js/constructors/EventBinder/EventBinder.ts

@@ -5,7 +5,7 @@ import { empty, forEach } from '../../utils';
 /**
  * The type for an EventTarget or an array with EventTarget objects.
  *
- * @since 3.7.0
+ * @since 4.0.0
  */
 type EventTargets = EventTarget | EventTarget[];
 
@@ -24,7 +24,7 @@ export interface EventBinderObject {
 /**
  * The constructor function to provide methods to subscribe native events.
  *
- * @since 3.7.0
+ * @since 4.0.0
  * @constructor
  *
  * @return An EventBinder object.

src/js/test/assets/css/planet.css

@@ -1,11 +1,12 @@
 body {
-  background: linear-gradient(0deg,#8cde1d,#c0e900);
+  background: linear-gradient(0deg, #8cde1d, #c0e900);
   height: 200vh;
   font-family: SplideBody, sans-serif;
   padding: 2rem;
   color: #d7e9f5;
   line-height: 1.8;
   font-weight: normal;
+  overflow-x: hidden;
 }
 
 img {
@@ -13,8 +14,14 @@ img {
   height: auto;
 }
 
-button:focus {
-  outline: 2px solid yellowgreen;
+p {
+  margin: 0 0 1em 0;
+}
+
+cite {
+  font-size: .8em;
+  font-style: normal;
+  opacity: .7;
 }
 
 .wrapper {
@@ -24,10 +31,28 @@ button:focus {
 }
 
 .splide__track {
+  height: 100%;
+}
+
+.splide__slide {
+  padding: 2rem 1rem;
+  height: 100%;
+}
+
+.splide__slide__inner {
   background: #000;
   border-radius: 10px;
   overflow: hidden;
-  box-shadow: 0 0 15px 4px rgba( 0, 0, 0, .25 );
+  height: 100%;
+  transform: scale(.8);
+  opacity: 0;
+  transition: all .5s cubic-bezier(.17, .67, .44, 1);
+}
+
+.splide__slide.is-active .splide__slide__inner {
+  box-shadow: 0 0 15px 4px rgba(0, 0, 0, .25);
+  transform: scale(1);
+  opacity: 1;
 }
 
 .splide__heading {
@@ -41,7 +66,7 @@ button:focus {
 
 .splide__desc {
   margin: 0;
-  padding: .5rem 1.5rem 2rem;
+  padding: .5rem 1.5rem 3rem;
 }
 
 .splide__arrow {
@@ -49,6 +74,7 @@ button:focus {
   opacity: 1;
   width: 2rem;
   height: 2rem;
+  border-radius: 0;
 }
 
 .splide__arrow svg {
@@ -62,9 +88,33 @@ button:focus {
 }
 
 .splide__arrow--prev {
-  left: -2.5rem;
+  left: -2.7rem;
 }
 
 .splide__arrow--next {
-  right: -2.5rem;
+  right: -2.7rem;
+}
+
+.splide__pagination {
+  bottom: 3rem;
 }
+
+.splide__pagination__page {
+  width: 10px;
+  height: 10px;
+  background: #d7e9f5;
+}
+
+.splide__pagination__page.is-active {
+  background: #8cde1d;
+  opacity: 1;
+}
+
+.splide__arrow:focus-visible {
+  outline: #fff dotted 3px;
+}
+
+.splide__slide:focus-visible {
+  outline: #fff dotted 3px;
+}
+

src/js/test/php/examples/default.php

@@ -21,28 +21,13 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
-				width: 800,
-        // type   : 'loop',
-        perPage: 3,
-        // perMove: 1,
-        rewind: true,
+	      width       : 800,
+	      type        : 'loop',
+	      perPage     : 3,
+	      rewind      : true,
 	      rewindByDrag: true,
-        padding: 40,
-	      // focus: 'center',
-        // updateOnMove: true,
-	      // keyboard: false,
-	      // waitForTransition: false,
-	      // flickPower: 1,
-	      // flickMaxSlides: 2,
-	      // direction: 'rtl',
-	      dragMinThreshold: {
-					mouse: 20,
-		      touch: 0,
-	      },
-	      // trimSpace: 'move',
-	      // speed: 3000,
-	      // useScroll: true,
-        // noDrag: 'button',
+	      padding     : 40,
+	      updateOnMove: true,
       } );
 
 	    // splide.on( 'move', function () {

src/js/test/php/examples/live-regions.php

@@ -19,12 +19,13 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
-	      width     : 600,
-	      rewind    : true,
-	      live      : true,
-	      speed     : 1000,
-	      pagination: true,
-	      arrowPath : 'm13.5 7.01 13 13m-13 13 13-13',
+	      type        : 'loop',
+	      width       : 480,
+	      rewind      : true,
+	      live        : true,
+	      speed       : 600,
+	      arrowPath   : 'm13.5 7.01 13 13m-13 13 13-13',
+	      updateOnMove: true,
       } );
 
       splide.mount();
@@ -38,24 +39,44 @@ $settings = get_settings();
 		<div class="splide__track">
 			<ul class="splide__list">
 				<li class="splide__slide">
-					<img src="../../assets/images/planets/neptune.jpg" alt="Neptune as seen from Voyager 2 from 4.4 million miles">
-					<h3 class="splide__heading">Neptune</h3>
-					<div class="splide__desc">
-						Neptune is the eighth and farthest-known Solar planet from the Sun. In the Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet, and the densest giant planet.
+					<div class="splide__slide__inner">
+						<img src="../../assets/images/planets/neptune.jpg"
+						     alt="">
+						<h3 class="splide__heading">Neptune</h3>
+						<div class="splide__desc">
+							<p>
+								Neptune is the eighth and farthest-known Solar planet from the Sun.
+							</p>
+							<cite aria-hidden="true">Quoted from Wikipedia</cite>
+						</div>
 					</div>
 				</li>
 				<li class="splide__slide">
-					<img src="../../assets/images/planets/saturn.jpg" alt="Saturn as seen from the Cassini–Huygens space-research mission">
-					<h3 class="splide__heading">Saturn</h3>
-					<div class="splide__desc">
-						Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter. It is a gas giant with an average radius of about nine and a half times that of Earth.
+					<div class="splide__slide__inner">
+
+						<img src="../../assets/images/planets/saturn.jpg"
+						     alt="">
+						<h3 class="splide__heading">Saturn</h3>
+						<div class="splide__desc">
+							<p>
+								Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter.
+							</p>
+							<cite aria-hidden="true">Quoted from Wikipedia</cite>
+						</div>
 					</div>
 				</li>
 				<li class="splide__slide">
-					<img src="../../assets/images/planets/mars.jpg" alt="A simulated view of Mars as it would be seen from the Mars Global Surveyor spacecraft">
-					<h3 class="splide__heading">Mars</h3>
-					<div class="splide__desc">
-						Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, being larger than only Mercury.
+					<div class="splide__slide__inner">
+
+						<img src="../../assets/images/planets/mars.jpg"
+						     alt="">
+						<h3 class="splide__heading">Mars</h3>
+						<div class="splide__desc">
+							<p>
+								Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System.
+							</p>
+							<cite aria-hidden="true">Quoted from Wikipedia</cite>
+						</div>
 					</div>
 				</li>
 			</ul>

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

@@ -4,7 +4,7 @@ import { isString } from '../../type/type';
 /**
  * The map to associate a non-standard name to the standard one.
  *
- * @since 3.7.0
+ * @since 4.0.0
  */
 export const NORMALIZATION_MAP = {
   Spacebar: ' ',