fix(slideshow-a11y): changed active pagination item width for better a11y

Author: Flodi

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- `Slideshow`: Changed active pagination item width for better a11y.
+
 ## [3.9.1][] - 2024-09-17
 
 ### Fixed

packages/lumx-core/src/scss/components/slideshow/_index.scss

@@ -93,7 +93,7 @@
     &__pagination {
         align-items: center;
         // Compute max width for N items based on their size, margin and focus outline
-        max-width: ($item-max-count * ($item-size + $item-margin-inline)) + $item-focus-outline * 2;
+        max-width: ($item-max-count * ($item-size + $item-margin-inline)) + $item-focus-outline * 2 + $item-size;
         overflow: hidden;
     }
 
@@ -130,32 +130,40 @@
         }
 
         #{$self}--theme-light & {
-            background-color: lumx-color-variant("dark", "L4");
+            background-color:lumx-color-variant("dark", "L5");
 
             &[data-focus-visible-added] {
                 @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark");
             }
 
-            &:hover,
+            &:hover {
+                background-color: lumx-color-variant("primary", "N");
+            }
             &--is-active {
                 background-color: lumx-color-variant("primary", "N");
-
+                width: $item-size*2;
+                border-radius: $lumx-border-radius;
+                
                 &[data-focus-visible-added] {
                     @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "primary");
                 }
             }
         }
 
         #{$self}--theme-dark & {
-            background-color: lumx-color-variant("light", "L4");
+            background-color: lumx-color-variant("light", "L5");
 
             &[data-focus-visible-added] {
                 @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");
             }
 
-            &:hover,
+            &:hover {
+                background-color: lumx-color-variant("light", "N");
+            }
             &--is-active {
                 background-color: lumx-color-variant("light", "N");
+                width: $item-size*2;
+                border-radius: $lumx-border-radius;
 
                 &[data-focus-visible-added] {
                     @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");