Quit including SR styles in script.

dist/css/splide-core.min.css

@@ -1 +1 @@
-@keyframes splide-loading{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}.splide__track--draggable{-webkit-touch-callout:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0 !important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0 !important;padding:0 !important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none !important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s infinite linear;border:2px solid #999;border-left-color:rgba(0,0,0,0);border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__play{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}
+@keyframes splide-loading{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}.splide__track--draggable{-webkit-touch-callout:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0 !important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0 !important;padding:0 !important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none !important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s infinite linear;border:2px solid #999;border-left-color:rgba(0,0,0,0);border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{border:0 !important;clip:rect(0 0 0 0) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important}.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__play{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}

dist/js/splide.cjs.js

@@ -1926,14 +1926,13 @@ const Drag = (Splide, Components, options, event) => {
 
 const KEYBOARD_EVENT = "keydown";
 const Keyboard = (Splide, Components, options, event) => {
-  const { on, bind, destroy } = event;
-  const { root } = Splide;
+  const { destroy } = event;
   const { resolve } = Components.Direction;
   function mount() {
     const { keyboard } = options;
     destroy();
-    keyboard && bind(keyboard === "global" ? window : root, KEYBOARD_EVENT, onKeydown);
-    on(EVENT_UPDATED, mount);
+    keyboard && event.bind(keyboard === "global" ? window : Splide.root, KEYBOARD_EVENT, onKeydown);
+    event.on(EVENT_UPDATED, mount);
   }
   function disable(value) {
     value ? destroy() : mount();
@@ -1986,9 +1985,8 @@ const LazyLoad = (Splide, Components, options, event) => {
         const src = getAttribute(img, SRC_DATA_ATTRIBUTE);
         const srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);
         if (src !== img.src || srcset !== img.srcset) {
-          const className = options.classes.spinner;
           const parent = img.parentElement;
-          const spinner = child(parent, `.${className}`) || create("span", className, parent);
+          const spinner = child(parent, `.${CLASS_SPINNER}`) || create("span", options.classes.spinner, parent);
           entries.push([img, Slide, spinner]);
           img.src || display(img, "none");
         }
@@ -2008,8 +2006,7 @@ const LazyLoad = (Splide, Components, options, event) => {
     bind(img, "load error", apply(onLoad, data));
     setAttribute(img, "src", getAttribute(img, SRC_DATA_ATTRIBUTE));
     setAttribute(img, "srcset", getAttribute(img, SRCSET_DATA_ATTRIBUTE));
-    removeAttribute(img, SRC_DATA_ATTRIBUTE);
-    removeAttribute(img, SRCSET_DATA_ATTRIBUTE);
+    removeAttribute(img, [SRC_DATA_ATTRIBUTE, SRCSET_DATA_ATTRIBUTE]);
   }
   function onLoad(data, e) {
     const [img, Slide] = data;
@@ -2253,8 +2250,6 @@ const Wheel = (Splide, Components, options, event) => {
   };
 };
 
-const VISUALLY_HIDDEN = `border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px`;
-
 const SR_REMOVAL_DELAY = 90;
 const Live = (Splide, Components, options, event) => {
   const { on } = event;
@@ -2268,7 +2263,6 @@ const Live = (Splide, Components, options, event) => {
       disable(!Components.Autoplay.isPaused());
       setAttribute(track, ARIA_ATOMIC, true);
       sr.textContent = "\u2026";
-      sr.style.cssText = VISUALLY_HIDDEN;
       on(EVENT_AUTOPLAY_PLAY, apply(disable, true));
       on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));
       on([EVENT_MOVED, EVENT_SCROLLED], apply(toggle, true));

dist/js/splide.esm.js

@@ -1922,14 +1922,13 @@ const Drag = (Splide, Components, options, event) => {
 
 const KEYBOARD_EVENT = "keydown";
 const Keyboard = (Splide, Components, options, event) => {
-  const { on, bind, destroy } = event;
-  const { root } = Splide;
+  const { destroy } = event;
   const { resolve } = Components.Direction;
   function mount() {
     const { keyboard } = options;
     destroy();
-    keyboard && bind(keyboard === "global" ? window : root, KEYBOARD_EVENT, onKeydown);
-    on(EVENT_UPDATED, mount);
+    keyboard && event.bind(keyboard === "global" ? window : Splide.root, KEYBOARD_EVENT, onKeydown);
+    event.on(EVENT_UPDATED, mount);
   }
   function disable(value) {
     value ? destroy() : mount();
@@ -1982,9 +1981,8 @@ const LazyLoad = (Splide, Components, options, event) => {
         const src = getAttribute(img, SRC_DATA_ATTRIBUTE);
         const srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);
         if (src !== img.src || srcset !== img.srcset) {
-          const className = options.classes.spinner;
           const parent = img.parentElement;
-          const spinner = child(parent, `.${className}`) || create("span", className, parent);
+          const spinner = child(parent, `.${CLASS_SPINNER}`) || create("span", options.classes.spinner, parent);
           entries.push([img, Slide, spinner]);
           img.src || display(img, "none");
         }
@@ -2004,8 +2002,7 @@ const LazyLoad = (Splide, Components, options, event) => {
     bind(img, "load error", apply(onLoad, data));
     setAttribute(img, "src", getAttribute(img, SRC_DATA_ATTRIBUTE));
     setAttribute(img, "srcset", getAttribute(img, SRCSET_DATA_ATTRIBUTE));
-    removeAttribute(img, SRC_DATA_ATTRIBUTE);
-    removeAttribute(img, SRCSET_DATA_ATTRIBUTE);
+    removeAttribute(img, [SRC_DATA_ATTRIBUTE, SRCSET_DATA_ATTRIBUTE]);
   }
   function onLoad(data, e) {
     const [img, Slide] = data;
@@ -2249,8 +2246,6 @@ const Wheel = (Splide, Components, options, event) => {
   };
 };
 
-const VISUALLY_HIDDEN = `border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px`;
-
 const SR_REMOVAL_DELAY = 90;
 const Live = (Splide, Components, options, event) => {
   const { on } = event;
@@ -2264,7 +2259,6 @@ const Live = (Splide, Components, options, event) => {
       disable(!Components.Autoplay.isPaused());
       setAttribute(track, ARIA_ATOMIC, true);
       sr.textContent = "\u2026";
-      sr.style.cssText = VISUALLY_HIDDEN;
       on(EVENT_AUTOPLAY_PLAY, apply(disable, true));
       on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));
       on([EVENT_MOVED, EVENT_SCROLLED], apply(toggle, true));

dist/js/splide.js

@@ -1981,9 +1981,8 @@
           const src = getAttribute(img, SRC_DATA_ATTRIBUTE);
           const srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);
           if (src !== img.src || srcset !== img.srcset) {
-            const className = options.classes.spinner;
             const parent = img.parentElement;
-            const spinner = child(parent, `.${className}`) || create("span", className, parent);
+            const spinner = child(parent, `.${CLASS_SPINNER}`) || create("span", options.classes.spinner, parent);
             entries.push([img, Slide, spinner]);
             img.src || display(img, "none");
           }
@@ -2003,8 +2002,7 @@
       bind(img, "load error", apply(onLoad, data));
       setAttribute(img, "src", getAttribute(img, SRC_DATA_ATTRIBUTE));
       setAttribute(img, "srcset", getAttribute(img, SRCSET_DATA_ATTRIBUTE));
-      removeAttribute(img, SRC_DATA_ATTRIBUTE);
-      removeAttribute(img, SRCSET_DATA_ATTRIBUTE);
+      removeAttribute(img, [SRC_DATA_ATTRIBUTE, SRCSET_DATA_ATTRIBUTE]);
     }
     function onLoad(data, e) {
       const [img, Slide] = data;
@@ -2248,8 +2246,6 @@
     };
   };
 
-  const VISUALLY_HIDDEN = `border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px`;
-
   const SR_REMOVAL_DELAY = 90;
   const Live = (Splide, Components, options, event) => {
     const { on } = event;
@@ -2263,7 +2259,6 @@
         disable(!Components.Autoplay.isPaused());
         setAttribute(track, ARIA_ATOMIC, true);
         sr.textContent = "\u2026";
-        sr.style.cssText = VISUALLY_HIDDEN;
         on(EVENT_AUTOPLAY_PLAY, apply(disable, true));
         on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));
         on([EVENT_MOVED, EVENT_SCROLLED], apply(toggle, true));

src/css/core/object/objects/index.scss

@@ -5,5 +5,6 @@
 @forward 'root';
 @forward 'slide';
 @forward 'spinner' as spinner-*;
+@forward 'sr';
 @forward 'toggle';
 @forward 'track';

src/css/core/object/objects/sr.scss

@@ -0,0 +1,12 @@
+.splide {
+  &__sr {
+    border: 0 !important;
+    clip: rect( 0 0 0 0 ) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+  }
+}

src/js/components/LazyLoad/LazyLoad.ts

@@ -1,4 +1,4 @@
-import { CLASS_LOADING } from '../../constants/classes';
+import { CLASS_LOADING, CLASS_SPINNER } from '../../constants/classes';
 import {
   EVENT_LAZYLOAD_ERROR,
   EVENT_LAZYLOAD_LOADED,
@@ -104,9 +104,8 @@ export const LazyLoad: ComponentConstructor<LazyLoadComponent> = ( Splide, Compo
         const srcset = getAttribute( img, SRCSET_DATA_ATTRIBUTE );
 
         if ( src !== img.src || srcset !== img.srcset ) {
-          const className = options.classes.spinner;
-          const parent    = img.parentElement;
-          const spinner   = child( parent, `.${ className }` ) || create( 'span', className, parent );
+          const parent  = img.parentElement;
+          const spinner = child( parent, `.${ CLASS_SPINNER }` ) || create( 'span', options.classes.spinner, parent );
 
           entries.push( [ img, Slide, spinner ] );
           img.src || display( img, 'none' );
@@ -141,8 +140,8 @@ export const LazyLoad: ComponentConstructor<LazyLoadComponent> = ( Splide, Compo
 
     setAttribute( img, 'src', getAttribute( img, SRC_DATA_ATTRIBUTE ) );
     setAttribute( img, 'srcset', getAttribute( img, SRCSET_DATA_ATTRIBUTE ) );
-    removeAttribute( img, SRC_DATA_ATTRIBUTE );
-    removeAttribute( img, SRCSET_DATA_ATTRIBUTE );
+
+    removeAttribute( img, [ SRC_DATA_ATTRIBUTE, SRCSET_DATA_ATTRIBUTE ] );
   }
 
   /**

src/js/components/Live/Live.ts

@@ -3,7 +3,6 @@ import { CLASS_SR } from '../../constants/classes';
 import { EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_MOVED, EVENT_SCROLLED } from '../../constants/events';
 import { BaseComponent, ComponentConstructor } from '../../types';
 import { append, apply, create, removeAttribute, removeNode, RequestInterval, setAttribute } from '@splidejs/utils';
-import { VISUALLY_HIDDEN } from './constants';
 
 
 /**
@@ -63,8 +62,7 @@ export const Live: ComponentConstructor<LiveComponent> = ( Splide, Components, o
     if ( enabled ) {
       disable( ! Components.Autoplay.isPaused() );
       setAttribute( track, ARIA_ATOMIC, true );
-      sr.textContent   = '…';
-      sr.style.cssText = VISUALLY_HIDDEN;
+      sr.textContent = '…';
 
       on( EVENT_AUTOPLAY_PLAY, apply( disable, true ) );
       on( EVENT_AUTOPLAY_PAUSE, apply( disable, false ) );

src/js/components/Live/constants.ts

@@ -1,6 +0,0 @@
-/**
- * Styles for visually hidden.
- *
- * @since 5.0.0
- */
-export const VISUALLY_HIDDEN = `border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px`;