Add `focus-visible` styles.

src/css/template/default/foundation/colors.scss

@@ -4,3 +4,5 @@ $sub02: #999 !default;
 
 $background: #ccc !default;
 $background-active: #fff !default;
+
+$focus: $main !default;

src/css/template/default/foundation/mixins.scss

@@ -0,0 +1,9 @@
+@use './colors';
+
+$outline: colors.$focus 2px solid !default;
+$outline-offset: 2px !default;
+
+@mixin focus-outline {
+  outline: $outline;
+  outline-offset: $outline-offset;
+}

src/css/template/default/object/objects/arrow.scss

@@ -1,4 +1,5 @@
 @use '../../foundation/colors';
+@use '../../foundation/mixins';
 
 $size: 1.2em !default;
 $fill: colors.$main !default;
@@ -74,6 +75,10 @@ $right: 1em !default;
       outline: none;
     }
 
+    &:focus-visible {
+      @include mixins.focus-outline;
+    }
+
     &--prev {
       left: $left;
 

src/css/template/default/object/objects/pagination.scss

@@ -1,4 +1,5 @@
 @use '../../foundation/colors';
+@use '../../foundation/mixins';
 
 $bottom: .5em !default;
 $dot-width: 8px !default;
@@ -62,6 +63,10 @@ $dot-transform-active: scale( 1.4 ) !default;
       &:focus {
         outline: none;
       }
+
+      &:focus-visible {
+        @include mixins.focus-outline;
+      }
     }
   }
 }

src/css/template/default/object/objects/slide.scss

@@ -1,9 +1,18 @@
+@use '../../foundation/colors';
+@use '../../foundation/mixins';
+
 $border-radius: false !default;
+$outline-offset: -2px !default;
 
 .splide {
   &__slide {
     @if $border-radius {
       border-radius: $border-radius;
     }
+
+    &:focus-visible {
+      @include mixins.focus-outline;
+      outline-offset: $outline-offset;
+    }
   }
 }

src/css/themes/sea-green/index.scss

@@ -27,7 +27,7 @@ $main-light: lighten( $main, 20% ) !default;
   $opacity-hover: false,
   $fill-hover: $main-light,
   $transition: fill .2s linear,
-  $button-size: false,
+  $button-size: 2.5em,
   $button-background: transparent,
 );
 
@@ -37,7 +37,7 @@ $main-light: lighten( $main, 20% ) !default;
   $dot-height: 5px,
   $dot-border-radius: 2.5px,
   $dot-opacity: false,
-  $dot-transition: all .2s linear,
+  $dot-transition: background-color .2s linear,
   $dot-background-hover: $main-light,
   $dot-transform-active: false,
 );

src/css/themes/skyblue/index.scss

@@ -20,7 +20,7 @@ $main-light: lighten( $main, 20% ) !default;
   $opacity-hover: false,
   $fill-hover: $main-light,
   $transition: fill .2s linear,
-  $button-size: false,
+  $button-size: 2.5em,
   $button-background: transparent,
 );
 
@@ -28,7 +28,7 @@ $main-light: lighten( $main, 20% ) !default;
   $dot-width: 10px,
   $dot-height: 10px,
   $dot-opacity: false,
-  $dot-transition: all .2s linear,
+  $dot-transition: ( background-color .2s linear, transform .2s linear ),
   $dot-background-hover: $main-light,
 );