@syncfusion/ej2-navigations 24.2.4 → 25.1.35-579988

package/styles/bootstrap.css

@@ -1336,8 +1336,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 0 12px 0 0;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 0;
   padding: 2.5px 5px;
 }
@@ -1521,6 +1521,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 38px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1625,6 +1638,12 @@
   min-height: 0;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1675,7 +1694,7 @@
   font-size: 14px;
   padding: 0 12px 0 6px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 30px;
   padding: 4px 2.5px;
@@ -1968,6 +1987,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 3px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0 12px 0 0;
 }
@@ -2006,7 +2028,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 3px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -2991,6 +3012,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
@@ -10316,6 +10343,9 @@ ejs-sidebar {
   -ms-flex-direction: column;
       flex-direction: column;
 }
+.e-stepper.e-horizontal {
+  display: block;
+}
 .e-stepper.e-horizontal .e-stepper-steps {
   -ms-flex-direction: row;
       flex-direction: row;

package/styles/bootstrap4.css

@@ -1289,7 +1289,7 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
-  padding: 0 4.5px;
+  padding: 1.5px 5.5px;
 }
 .e-bigger .e-toolbar .e-toolbar-item,
 .e-toolbar.e-bigger .e-toolbar-item {
@@ -1336,8 +1336,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 0 12px 0 0;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 0;
   padding: 8px 2.5px;
 }
@@ -1521,6 +1521,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 38px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1625,6 +1638,12 @@
   min-height: 0;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1640,7 +1659,7 @@
   padding: 0 3px;
   border-radius: 4px;
   line-height: 27px;
-  border: none;
+  border: 1px solid transparent;
   cursor: pointer;
   font-size: 14px;
   font-weight: 400;
@@ -1663,7 +1682,7 @@
   line-height: 26px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-toolbar .e-toolbar-item .e-tbar-btn:active {
-  padding: 0 2px;
+  padding: 0 3px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
   outline: 0;
@@ -1675,7 +1694,7 @@
   font-size: 14px;
   padding: 0 6px 0 4px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 30px;
   padding: 3px 4px;
@@ -1968,6 +1987,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 12px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0 4px 0 6px;
 }
@@ -2006,7 +2028,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 12px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -2058,7 +2079,7 @@
   background: #f8f9fa;
   box-shadow: none;
   color: #495057;
-  border: none;
+  border: 1px solid transparent;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
   color: #495057;
@@ -2990,6 +3011,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
@@ -10441,6 +10468,9 @@ ejs-sidebar {
   -ms-flex-direction: column;
       flex-direction: column;
 }
+.e-stepper.e-horizontal {
+  display: block;
+}
 .e-stepper.e-horizontal .e-stepper-steps {
   -ms-flex-direction: row;
       flex-direction: row;

package/styles/bootstrap5-dark.css

@@ -1402,8 +1402,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 4px 6px;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 49px;
   padding: 4px;
 }
@@ -1587,6 +1587,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 28px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1691,6 +1704,12 @@
   min-height: 38px;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1741,7 +1760,7 @@
   font-size: 14px;
   padding: 4px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 28px;
   padding: 4px;
@@ -2034,6 +2053,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 8px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 4px;
 }
@@ -2072,7 +2094,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 8px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -3060,6 +3081,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
@@ -10481,6 +10508,9 @@ ejs-sidebar {
   -ms-flex-direction: column;
       flex-direction: column;
 }
+.e-stepper.e-horizontal {
+  display: block;
+}
 .e-stepper.e-horizontal .e-stepper-steps {
   -ms-flex-direction: row;
       flex-direction: row;

package/styles/bootstrap5.css

@@ -1402,8 +1402,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 4px 6px;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 49px;
   padding: 4px;
 }
@@ -1587,6 +1587,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 28px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1691,6 +1704,12 @@
   min-height: 38px;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1741,7 +1760,7 @@
   font-size: 14px;
   padding: 4px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 28px;
   padding: 4px;
@@ -2034,6 +2053,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 8px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 4px;
 }
@@ -2072,7 +2094,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 8px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -3060,6 +3081,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
@@ -10481,6 +10508,9 @@ ejs-sidebar {
   -ms-flex-direction: column;
       flex-direction: column;
 }
+.e-stepper.e-horizontal {
+  display: block;
+}
 .e-stepper.e-horizontal .e-stepper-steps {
   -ms-flex-direction: row;
       flex-direction: row;

package/styles/breadcrumb/_bds-definition.scss

@@ -0,0 +1,60 @@
+// Size variables
+$breadcrumb-skin: $skin-name !default;
+$breadcrumb-last-item-font-weight: $font-weight-medium !default;
+$breadcrumb-font-size: $text-sm !default;
+$breadcrumb-bigger-font-size: $text-base !default;
+$breadcrumb-icon-font-size: $text-sm !default;
+$breadcrumb-icon-bigger-font-size: $text-base !default;
+$breadcrumb-padding: 3px 8px !default;
+$breadcrumb-padding-left: 0 !default;
+$breadcrumb-padding-right: 0 !default;
+$breadcrumb-bigger-padding: 2px 12px !default;
+$breadcrumb-separator-padding: 3px 4px !default;
+$breadcrumb-separator-bigger-padding: 2px 4px !default;
+$breadcrumb-icon-color: $icon-color !default;
+$breadcrumb-icon-right-padding: 8px !default;
+$breadcrumb-icon-bigger-right-padding: 12px !default;
+$breadcrumb-collapsed-icon-padding: 4px 8px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 3px 8px !default;
+$breadcrumb-collapsed-icon-font-size: $text-base !default;
+$breadcrumb-collapsed-icon-bigger-font-size: $text-lg !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -4px !default;
+$breadcrumb-icon-item-padding: 2px 0 !default;
+$breadcrumb-item-focus-padding: 2px 11px !default;
+$breadcrumb-item-focus-bigger-padding: 1px 15px !default;
+$breadcrumb-icon-only-item-padding: 3px 5px !default;
+$breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
+$breadcrumb-icon-only-item-bigger-padding: 3px 5px !default;
+$breadcrumb-icon-only-item-focus-bigger-padding: 2px 4px !default;
+$breadcrumb-scroll-mode-lineheight: 26px !default;
+$breadcrumb-popup-item-padding: 0 12px !default;
+$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-item-height: 32px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 36px !default;
+
+// Color variables
+$breadcrumb-item-color: $content-text-color-alt1 !default;
+$breadcrumb-separator-color: $icon-color-disabled !default;
+$breadcrumb-item-hover-color: $content-text-color-alt2 !default;
+$breadcrumb-item-focus-color: $content-text-color-alt2 !default;
+$breadcrumb-item-active-color: $content-text-color !default;
+$breadcrumb-item-hover-bgcolor: $primary-lighter !default;
+$breadcrumb-item-active-bgcolor: $transparent !default;
+$breadcrumb-item-focus-bgcolor: $primary-lighter !default;
+$breadcrumb-last-item-font-color: $primary_alt !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $content-bg-color-alt2 !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $content-bg-color-alt3 !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: $content-bg-color-alt2 !default;
+$breadcrumb-collapsed-icon-color: $icon-color !default;
+$breadcrumb-collapsed-icon-hover-color: $icon-color-hover !default;
+$breadcrumb-disabled-item-color: $content-text-color-disabled !default;
+$breadcrumb-item-focus-border: 1px solid $content-text-color-alt1 !default;
+$breadcrumb-popup-item-color: $content-text-color !default;
+$breadcrumb-popup-border: 1px solid $border-light !default;
+$breadcrumb-popup-bgcolor: $flyout-bg-color !default;
+$breadcrumb-popup-box-shadow: $shadow-lg !default;
+$breadcrumb-popup-item-hover-bgcolor: $content-bg-color-hover !default;
+$breadcrumb-popup-item-hover-color: $content-text-color-hover !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $border-light !default;

package/styles/breadcrumb/icons/_bds.scss

@@ -0,0 +1,25 @@
+@include export-module('breadcrumb-bds-icons') {
+
+  /*! breadcrumb icons */
+  .e-breadcrumb {
+    .e-breadcrumb-collapsed::before,
+    .e-breadcrumb-menu::before {
+      content: '\e71c';
+    }
+
+    .e-home::before {
+      content: '\e87b';
+    }
+
+    .e-home {
+      height: 18px;
+    }
+  }
+
+  .e-bigger .e-breadcrumb,
+  .e-bigger.e-breadcrumb {
+    .e-home {
+      height: 21px;
+    }
+  }
+}

package/styles/carousel/_bds-definition.scss

@@ -0,0 +1,27 @@
+/*! 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;
+$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;
+
+// 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;
+$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/_layout.scss

@@ -137,6 +137,11 @@
           &.e-rtl {
             transform: rotate(180deg);
           }
+
+          .e-play-icon {
+            line-height: 1;
+            padding-left: 3px;
+          }
         }
 
         &.e-hover-arrows {

package/styles/carousel/bootstrap-dark.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/bootstrap.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/bootstrap4.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/bootstrap5-dark.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/bootstrap5.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/fabric-dark.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/fabric.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/fluent-dark.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/fluent.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/highcontrast-light.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {

package/styles/carousel/highcontrast.css

@@ -138,6 +138,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {