@syncfusion/ej2-navigations 31.2.16 → 32.1.19

package/styles/carousel/_bootstrap5-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
 $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;
@@ -18,3 +20,17 @@ $carousel-indicator-dynamic-minheight: 36px !default;
 $carousel-indicator-fraction-minheight: 36px !default;
 $carousel-indicator-progress-minheight: 4px !default;
 $carousel-indicator-progress-height: 4px !default;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($white, .4) !default;
 $carousel-navigator-icon-color: rgba($white) !default;
@@ -8,13 +10,27 @@ $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-navigator-btn-border-radius-hover: $border-radius-50p !default;
 $carousel-indicator-padding: 4px !default;
 $carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 2px !default;
+$carousel-indicator-bar-border-radius: $radius-2 !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;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: $border-radius-50p !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($neutral-primary, .4) !default;
 $carousel-navigator-icon-color: $neutral-primary !default;
@@ -18,3 +20,17 @@ $carousel-indicator-dynamic-minheight: 36px !default;
 $carousel-indicator-fraction-minheight: 36px !default;
 $carousel-indicator-progress-minheight: 4px !default;
 $carousel-indicator-progress-height: 4px !default;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

package/styles/carousel/_fabric-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($neutral-white, .4) !default;
 $carousel-navigator-icon-color: $neutral-white !default;
@@ -18,3 +20,17 @@ $carousel-indicator-dynamic-minheight: 36px !default;
 $carousel-indicator-fraction-minheight: 36px !default;
 $carousel-indicator-progress-minheight: 4px !default;
 $carousel-indicator-progress-height: 4px !default;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

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

@@ -1 +1,36 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+$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: 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;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

package/styles/carousel/_fluent-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fluent' as *;
+@forward 'ej2-base/styles/definition/fluent';
 $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;
@@ -18,3 +20,17 @@ $carousel-indicator-dynamic-minheight: 36px !default;
 $carousel-indicator-fraction-minheight: 36px !default;
 $carousel-indicator-progress-minheight: 4px !default;
 $carousel-indicator-progress-height: 4px !default;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

package/styles/carousel/_fluent2-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@forward 'ej2-base/styles/definition/fluent2';
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: $content-bg-color-hover !default;
 $carousel-navigator-btn-focus-box-shadow: $keyboard-focus !default;
@@ -11,13 +13,28 @@ $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-navigator-btn-border-radius-hover: $border-radius-50p !default;
 $carousel-indicator-padding: 6px !default;
 $carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 50% !default;
+$carousel-indicator-bar-border-radius: $border-radius-50p !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;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: $border-radius-50p !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;
+$carousel-navigator-focus-visible-border-radius: $radius-4 !default;

package/styles/carousel/_fusionnew-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fusionnew' as *;
+@forward 'ej2-base/styles/definition/fusionnew';
 $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;
@@ -18,3 +20,17 @@ $carousel-indicator-dynamic-minheight: 36px !default;
 $carousel-indicator-fraction-minheight: 36px !default;
 $carousel-indicator-progress-minheight: 4px !default;
 $carousel-indicator-progress-height: 4px !default;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

package/styles/carousel/_highcontrast-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($message-font, .4) !default;
 $carousel-navigator-icon-color: $message-font !default;
@@ -18,3 +20,17 @@ $carousel-indicator-dynamic-minheight: 36px !default;
 $carousel-indicator-fraction-minheight: 36px !default;
 $carousel-indicator-progress-minheight: 4px !default;
 $carousel-indicator-progress-height: 4px !default;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($selection-font, .4) !default;
 $carousel-navigator-icon-color: $selection-font !default;
@@ -18,3 +20,17 @@ $carousel-indicator-dynamic-minheight: 36px !default;
 $carousel-indicator-fraction-minheight: 36px !default;
 $carousel-indicator-progress-minheight: 4px !default;
 $carousel-indicator-progress-height: 4px !default;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

package/styles/carousel/_layout.scss

@@ -1,16 +1,18 @@
-@include export-module('carousel-layout') {
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
+@include export-module('carousel-layout') {
   .e-carousel {
     display: block;
-    margin: 0;
-    padding: 0;
+    margin: $carousel-margin-none;
+    padding: $carousel-padding-none;
     position: relative;
 
     .e-carousel-items,
     .e-carousel-slide-container {
-      height: 100%;
-      margin: 0;
+      height: $carousel-items-height;
+      margin: $carousel-margin-none;
       overflow: hidden;
-      padding: 0;
+      padding: $carousel-padding-none;
       position: relative;
       width: 100%;
     }
@@ -21,14 +23,14 @@
 
     &.e-partial {
       .e-carousel-slide-container {
-        padding: 0 100px;
+        padding: $carousel-partial-horizontal-padding;
 
         @media screen and (max-width: 480px) {
-          padding: 0 75px;
+          padding: $carousel-partial-horizontal-padding-small;
         }
 
         @media screen and (max-width: 320px) {
-          padding: 0 50px;
+          padding: $carousel-partial-horizontal-padding-extra-small;
         }
       }
     }
@@ -42,9 +44,9 @@
       transition-timing-function: $carousel-animation-timing-function;
 
       .e-carousel-item {
-        height: 100%;
+        height: $carousel-items-height;
         overflow: hidden;
-        padding: 0;
+        padding: $carousel-padding-none;
         position: relative;
         width: calc(100% / var(--carousel-items-count));
       }
@@ -94,7 +96,7 @@
     &.e-carousel-custom-animation:not(.e-partial) {
       .e-carousel-item {
         display: block;
-        height: 100%;
+        height: $carousel-items-height;
         left: 0;
         opacity: 0;
         pointer-events: none;
@@ -110,7 +112,7 @@
     .e-carousel-navigators {
       align-items: center;
       display: flex;
-      height: 100%;
+      height: $carousel-items-height;
       justify-content: space-between;
       pointer-events: none;
       position: absolute;
@@ -121,11 +123,11 @@
       .e-play-pause,
       .e-previous,
       .e-next {
-        padding: .5em;
+        padding: $carousel-navigator-btn-padding;
         pointer-events: auto;
 
         .e-btn {
-          border: 0;
+          border: $carousel-border-none;
           box-shadow: none;
 
           &:hover {
@@ -137,8 +139,8 @@
           }
 
           .e-play-icon {
-            line-height: 1;
-            padding-left: 3px;
+            line-height: $carousel-play-icon-line-height;
+            padding-left: $carousel-navigator-play-icon-padding-left;
           }
         }
 
@@ -154,7 +156,7 @@
       display: flex;
       justify-content: center;
       min-height: $carousel-indicator-height;
-      padding: 0;
+      padding: $carousel-padding-none;
       pointer-events: none;
       position: absolute;
       width: 100%;
@@ -167,7 +169,7 @@
         pointer-events: auto;
 
         .e-indicator-bar {
-          padding: 0;
+          padding: $carousel-padding-none;
 
           .e-indicator {
             align-items: center;
@@ -203,11 +205,11 @@
           width: 80px;
 
           .e-indicator-bar {
-            border-radius: 50%;
+            border-radius: $carousel-indicator-border-radius;
             display: inline-block;
-            height: 8px;
+            height: $carousel-dynamic-indicator-bar-height;
             left: calc(32px - calc(16px * var(--carousel-items-current)));
-            margin: 0 4px;
+            margin: $carousel-dynamic-indicator-bar-margin;
             opacity: 1;
             position: relative;
             transform: scale(.33);
@@ -241,7 +243,7 @@
           width: 100%;
 
           .e-indicator-bar {
-            height: 100%;
+            height: $carousel-indicator-progressbar-height;
             left: 0;
             position: absolute;
             top: 0;

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($grey-white, .4) !default;
 $carousel-navigator-icon-color: $grey-white !default;
@@ -18,3 +20,17 @@ $carousel-indicator-dynamic-minheight: 36px !default;
 $carousel-indicator-fraction-minheight: 36px !default;
 $carousel-indicator-progress-minheight: 4px !default;
 $carousel-indicator-progress-height: 4px !default;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

package/styles/carousel/_material-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/material' as *;
+@forward 'ej2-base/styles/definition/material';
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($grey-white, .4) !default;
 $carousel-navigator-icon-color: $grey-white !default;
@@ -18,3 +20,17 @@ $carousel-indicator-dynamic-minheight: 36px !default;
 $carousel-indicator-fraction-minheight: 36px !default;
 $carousel-indicator-progress-minheight: 4px !default;
 $carousel-indicator-progress-height: 4px !default;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

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

@@ -1 +1,37 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: $content-bg-color-hover !default;
+$carousel-navigator-icon-color: rgba($icon-color) !default;
+$carousel-indicator-bar-bg: $content-bg-color-alt5 !default;
+$carousel-indicator-bar-border: 1px solid rgba($content-text-color, .4) !default;
+$carousel-indicator-bar-border-bg: linear-gradient(0deg, rgba($primary, $opacity14), rgba($primary, $opacity14)) !default;
+$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;
+$carousel-animation-duration: .6s !default;
+$carousel-animation-timing-function: ease-in-out !default;
+$carousel-navigator-btn-border-radius-hover: 50% !default;
+$carousel-indicator-padding: 8px !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;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

package/styles/carousel/_material3-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: $content-bg-color-hover !default;
 $carousel-navigator-icon-color: rgba($icon-color) !default;
@@ -9,13 +11,27 @@ $carousel-indicator-border-color-focus: rgba($content-text-color) !default;
 $carousel-indicator-progress-bg: rgba($primary, .4) !default;
 $carousel-animation-duration: .6s !default;
 $carousel-animation-timing-function: ease-in-out !default;
-$carousel-navigator-btn-border-radius-hover: 50% !default;
+$carousel-navigator-btn-border-radius-hover: $border-radius-50p !default;
 $carousel-indicator-padding: 8px !default;
 $carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 50% !default;
+$carousel-indicator-bar-border-radius: $border-radius-50p !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;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: $border-radius-50p !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

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

@@ -1 +1,36 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+$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;
+$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;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

package/styles/carousel/_tailwind-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: rgba($white, .4) !default;
 $carousel-navigator-icon-color: $white !default;
@@ -18,3 +20,17 @@ $carousel-indicator-dynamic-minheight: 36px !default;
 $carousel-indicator-fraction-minheight: 36px !default;
 $carousel-indicator-progress-minheight: 4px !default;
 $carousel-indicator-progress-height: 4px !default;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: 50% !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

package/styles/carousel/_tailwind3-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
 $carousel-navigator-btn-bg: transparent !default;
 $carousel-navigator-btn-bg-hover: $content-bg-color-hover !default;
 $carousel-navigator-btn-bg-active: $content-bg-color-pressed !default;
@@ -12,13 +14,27 @@ $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-navigator-btn-border-radius-hover: $border-radius-50p !default;
 $carousel-indicator-padding: 6px !default;
 $carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 50% !default;
+$carousel-indicator-bar-border-radius: $border-radius-50p !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;
+$carousel-items-height: 100% !default;
+$carousel-border-none: 0 !default;
+$carousel-play-icon-line-height: 1 !default;
+$carousel-indicator-border-radius: $border-radius-50p !default;
+$carousel-dynamic-indicator-bar-height: 8px !default;
+$carousel-indicator-progressbar-height: 100% !default;
+$carousel-padding-none: 0 !default;
+$carousel-margin-none: 0 !default;
+$carousel-partial-horizontal-padding: 0 100px !default;
+$carousel-partial-horizontal-padding-small: 0 75px !default;
+$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
+$carousel-navigator-play-icon-padding-left: 3px !default;
+$carousel-dynamic-indicator-bar-margin: 0 4px !default;
+$carousel-navigator-btn-padding: .5em !default;

package/styles/carousel/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';