@syncfusion/ej2-navigations 25.2.4 → 26.1.35-750253

package/styles/breadcrumb/tailwind.css

@@ -1,4 +1,3 @@
-/*! breadcrumb icons */
 .e-breadcrumb .e-breadcrumb-collapsed::before,
 .e-breadcrumb .e-breadcrumb-menu::before {
   content: "\e71c";
@@ -15,17 +14,18 @@
   height: 21px;
 }
 
-/*! breadcrumb layout */
 .e-breadcrumb {
   display: block;
 }
 .e-breadcrumb.e-breadcrumb-wrap-mode {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
 .e-breadcrumb .e-breadcrumb-first-ol {
-  -ms-flex-align: start;
-      align-items: flex-start;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
   -ms-flex-negative: 0;
       flex-shrink: 0;
   padding-right: 0;
@@ -41,8 +41,10 @@
   overflow: auto;
 }
 .e-breadcrumb ol {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   line-height: normal;
@@ -56,8 +58,10 @@
   white-space: nowrap;
 }
 .e-breadcrumb .e-breadcrumb-item {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-negative: 0;
@@ -73,15 +77,18 @@
   padding: 2px 4px;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text .e-anchor-wrap {
-  -ms-flex-align: inherit;
-      align-items: inherit;
+  -webkit-box-align: inherit;
+      -ms-flex-align: inherit;
+          align-items: inherit;
   display: inherit;
 }
 .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text {
@@ -125,6 +132,7 @@
   pointer-events: none;
 }
 .e-breadcrumb .e-breadcrumb-separator {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
@@ -151,6 +159,7 @@
   display: inline-block;
 }
 .e-breadcrumb .e-breadcrumb-item-wrapper {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -176,7 +185,8 @@
 .e-breadcrumb-popup {
   border: 1px solid #e5e7eb;
   border-radius: 4px;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   position: absolute;
 }
 .e-breadcrumb-popup ul {
@@ -188,8 +198,10 @@
   white-space: nowrap;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
@@ -199,8 +211,9 @@
   width: 100%;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text .e-anchor-wrap {
-  -ms-flex-align: inherit;
-      align-items: inherit;
+  -webkit-box-align: inherit;
+      -ms-flex-align: inherit;
+          align-items: inherit;
   display: inherit;
   width: inherit;
 }
@@ -221,12 +234,15 @@
 }
 .e-breadcrumb-popup.e-icon-right .e-breadcrumb-icon,
 .e-breadcrumb-popup .e-icon-right .e-breadcrumb-icon {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-positive: 1;
-      flex-grow: 1;
-  -ms-flex-pack: end;
-      justify-content: flex-end;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
 }
 .e-breadcrumb-popup.e-rtl.e-icon-right .e-breadcrumb-icon, .e-breadcrumb-popup.e-rtl .e-icon-right .e-breadcrumb-icon {
   padding-left: 0;
@@ -326,7 +342,6 @@
   padding-right: 12px;
 }
 
-/*! breadcrumb theme */
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
   color: #6b7280;
 }

package/styles/carousel/_bds-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component bds theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($white, .4) !default;
 $carousel-navigator-icon-color: $white !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($white, .4) !default;
 $carousel-indicator-bar-bg-active: $primary !default;
 $carousel-indicator-border-color-focus: $black !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 6px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_bootstrap-dark-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component bootstrap-dark theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($brand-primary-font, .4) !default;
 $carousel-navigator-icon-color: $brand-primary-font !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($brand-primary-font, .4) !default
 $carousel-indicator-bar-bg-active: $brand-primary !default;
 $carousel-indicator-border-color-focus: $base-font !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 4px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_bootstrap-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component bootstrap theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($brand-primary-font, .4) !default;
 $carousel-navigator-icon-color: $brand-primary-font !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($brand-primary-font, .4) !default
 $carousel-indicator-bar-bg-active: $brand-primary !default;
 $carousel-indicator-border-color-focus: $base-font !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 4px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_bootstrap4-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component bootstrap4 theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($primary-font, .4) !default;
 $carousel-navigator-icon-color: $primary-font !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($primary-font, .4) !default;
 $carousel-indicator-bar-bg-active: $primary !default;
 $carousel-indicator-border-color-focus: $black !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 4px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_bootstrap5-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component bootstrap5 theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($primary-text-color, .4) !default;
 $carousel-navigator-icon-color: $primary-text-color !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($primary-text-color, .4) !default
 $carousel-indicator-bar-bg-active: $primary !default;
 $carousel-indicator-border-color-focus: $black !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 4px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_bootstrap5.3-definition.scss

@@ -0,0 +1,20 @@
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($primary-text-color, .4) !default;
+$carousel-navigator-icon-color: $primary-text-color !default;
+$carousel-indicator-bar-bg: $primary-text-color !default;
+$carousel-indicator-bar-border: 1px solid rgba($primary-text-color, .4) !default;
+$carousel-indicator-bar-bg-active: $primary !default;
+$carousel-indicator-border-color-focus: $black !default;
+$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
+$carousel-animation-duration: .6s !default;
+$carousel-animation-timing-function: ease-in-out !default;
+$carousel-navigator-btn-border-radius-hover: 50% !default;
+$carousel-indicator-padding: 4px !default;
+$carousel-indicator-height: 48px !default;
+$carousel-indicator-bar-border-radius: 2px !default;
+$carousel-indicator-bar-height: 5px !default;
+$carousel-indicator-bar-width: 20px !default;
+$carousel-indicator-dynamic-minheight: 36px !default;
+$carousel-indicator-fraction-minheight: 36px !default;
+$carousel-indicator-progress-minheight: 4px !default;
+$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_fabric-dark-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component fabric-dark theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($neutral-primary, .4) !default;
 $carousel-navigator-icon-color: $neutral-primary !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($neutral-primary, .4) !default;
 $carousel-indicator-bar-bg-active: $theme-primary !default;
 $carousel-indicator-border-color-focus: $shadow !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 6px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_fabric-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component fabric theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($neutral-white, .4) !default;
 $carousel-navigator-icon-color: $neutral-white !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($neutral-white, .4) !default;
 $carousel-indicator-bar-bg-active: $theme-primary !default;
 $carousel-indicator-border-color-focus: $neutral-black !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 6px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_fluent-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component FluentUI theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($primary-text-color, .4) !default;
 $carousel-navigator-icon-color: $primary-text-color !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($primary-text-color, .4) !default
 $carousel-indicator-bar-bg-active: $primary !default;
 $carousel-indicator-border-color-focus: $black !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 6px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_fluent2-definition.scss

@@ -0,0 +1,21 @@
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: $content-bg-color-hover !default;
+$carousel-navigator-btn-focus-box-shadow: $shadow-focus-ring1 !default;
+$carousel-navigator-icon-color: $icon-color !default;
+$carousel-indicator-bar-bg: $white !default;
+$carousel-indicator-bar-border: 1px solid rgba($white, .4) !default;
+$carousel-indicator-bar-bg-active: $primary !default;
+$carousel-indicator-border-color-focus: $black !default;
+$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
+$carousel-animation-duration: .6s !default;
+$carousel-animation-timing-function: ease-in-out !default;
+$carousel-navigator-btn-border-radius-hover: 50% !default;
+$carousel-indicator-padding: 6px !default;
+$carousel-indicator-height: 48px !default;
+$carousel-indicator-bar-border-radius: 50% !default;
+$carousel-indicator-bar-height: 12px !default;
+$carousel-indicator-bar-width: 12px !default;
+$carousel-indicator-dynamic-minheight: 36px !default;
+$carousel-indicator-fraction-minheight: 36px !default;
+$carousel-indicator-progress-minheight: 4px !default;
+$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_fusionnew-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component bootstrap5 theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($primary-text-color, .4) !default;
 $carousel-navigator-icon-color: $primary-text-color !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($primary-text-color, .4) !default
 $carousel-indicator-bar-bg-active: $primary !default;
 $carousel-indicator-border-color-focus: $black !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 4px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_highcontrast-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component highcontrast theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($message-font, .4) !default;
 $carousel-navigator-icon-color: $message-font !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($message-font, .4) !default;
 $carousel-indicator-bar-bg-active: $selection-border !default;
 $carousel-indicator-border-color-focus: $shadow !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 6px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_highcontrast-light-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component highcontrast-light theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($selection-font, .4) !default;
 $carousel-navigator-icon-color: $selection-font !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($selection-font, .4) !default;
 $carousel-indicator-bar-bg-active: $selection-border !default;
 $carousel-indicator-border-color-focus: $message-font !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 6px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_layout.scss

@@ -1,6 +1,4 @@
 @include export-module('carousel-layout') {
-
-  /*! carousel component styles */
   .e-carousel {
     display: block;
     margin: 0;

package/styles/carousel/_material-dark-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component material-dark theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($grey-white, .4) !default;
 $carousel-navigator-icon-color: $grey-white !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($grey-white, .4) !default;
 $carousel-indicator-bar-bg-active: $accent !default;
 $carousel-indicator-border-color-focus: $grey-black !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 6px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_material-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component material theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($grey-white, .4) !default;
 $carousel-navigator-icon-color: $grey-white !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($grey-white, .4) !default;
 $carousel-indicator-bar-bg-active: $accent !default;
 $carousel-indicator-border-color-focus: $grey-black !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 6px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_material3-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component bootstrap5 theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: $content-bg-color-hover !default;
 $carousel-navigator-icon-color: rgba($icon-color) !default;
@@ -10,12 +7,8 @@ $carousel-indicator-bar-border-bg: linear-gradient(0deg, rgba($primary, $opacity
 $carousel-indicator-bar-bg-active: rgba($primary) !default;
 $carousel-indicator-border-color-focus: rgba($content-text-color) !default;
 $carousel-indicator-progress-bg: rgba($primary, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 8px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_tailwind-definition.scss

@@ -1,6 +1,3 @@
-/*! Carousel component tailwind theme definitions and variables */
-
-// COLORS VARIABLES
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($white, .4) !default;
 $carousel-navigator-icon-color: $white !default;
@@ -9,12 +6,8 @@ $carousel-indicator-bar-border: 1px solid rgba($white, .4) !default;
 $carousel-indicator-bar-bg-active: $primary !default;
 $carousel-indicator-border-color-focus: $black !default;
 $carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
 $carousel-navigator-btn-border-radius-hover: 50% !default;
 $carousel-indicator-padding: 6px !default;
 $carousel-indicator-height: 48px !default;

package/styles/carousel/_theme.scss

@@ -1,6 +1,4 @@
 @include export-module('carousel-theme') {
-
-  /*! carousel component theme */
   .e-carousel {
     .e-carousel-navigators {
 
@@ -19,6 +17,14 @@
           background-color: $carousel-navigator-btn-bg-hover;
           outline: none;
         }
+
+        @if $skin-name == 'fluent2' {
+          &:focus {
+            background-color: $carousel-navigator-btn-bg;
+            box-shadow: $carousel-navigator-btn-focus-box-shadow;
+            border-radius: 4px;
+          }
+        }
       }
     }