@syncfusion/ej2-angular-navigations 22.2.11 → 23.1.36-ngcc

package/styles/context-menu/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 @keyframes hscroll-popup-shadow {
   0% {
     border-color: rgba(255, 255, 255, 0.5);

package/styles/context-menu/material-dark.scss

@@ -1,7 +1 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
-@import '../h-scroll/material-dark-definition.scss';
-@import '../v-scroll/material-dark-definition.scss';
-@import 'ej2-popups/styles/popup/material-dark-definition.scss';
-@import 'material-dark-definition.scss';
-@import 'icons/material-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/context-menu/material-dark.scss';

package/styles/context-menu/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /*! component's theme wise override definitions and variables */
 @keyframes hscroll-popup-shadow {
   0% {

package/styles/context-menu/material.scss

@@ -1,7 +1 @@
-@import 'ej2-base/styles/material-definition.scss';
-@import '../h-scroll/material-definition.scss';
-@import '../v-scroll/material-definition.scss';
-@import 'ej2-popups/styles/popup/material-definition.scss';
-@import 'material-definition.scss';
-@import 'icons/material.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/context-menu/material.scss';

package/styles/context-menu/material3-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/context-menu/material3-dark.scss

@@ -1,8 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
 
-@import '../h-scroll/material3-dark-definition.scss';
-@import '../v-scroll/material3-dark-definition.scss';
-@import 'ej2-popups/styles/popup/material3-dark-definition.scss';
-@import 'material3-dark-definition.scss';
-@import 'icons/material3-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/context-menu/material3-dark.scss';

package/styles/context-menu/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/context-menu/material3.scss

@@ -1,8 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
 
-@import '../h-scroll/material3-definition.scss';
-@import '../v-scroll/material3-definition.scss';
-@import 'ej2-popups/styles/popup/material3-definition.scss';
-@import 'material3-definition.scss';
-@import 'icons/material3.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/context-menu/material3.scss';

package/styles/context-menu/tailwind-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! component's theme wise override definitions and variables */
 @keyframes hscroll-popup-shadow {
   0% {

package/styles/context-menu/tailwind-dark.scss

@@ -1,7 +1 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
-@import '../h-scroll/tailwind-dark-definition.scss';
-@import '../v-scroll/tailwind-dark-definition.scss';
-@import 'ej2-popups/styles/popup/tailwind-dark-definition.scss';
-@import 'tailwind-dark-definition.scss';
-@import 'icons/tailwind-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/context-menu/tailwind-dark.scss';

package/styles/context-menu/tailwind.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! component's theme wise override definitions and variables */
 @keyframes hscroll-popup-shadow {
   0% {

package/styles/context-menu/tailwind.scss

@@ -1,7 +1 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
-@import '../h-scroll/tailwind-definition.scss';
-@import '../v-scroll/tailwind-definition.scss';
-@import 'ej2-popups/styles/popup/tailwind-definition.scss';
-@import 'tailwind-definition.scss';
-@import 'icons/tailwind.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/context-menu/tailwind.scss';

package/styles/fabric-dark.css

@@ -9307,19 +9307,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #dadada;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected,
-.e-menu-container .e-menu .e-menu-item.e-selected {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
   color: #fff;
   outline: 0 solid #514f4f;
   outline-offset: 0;
   background: #514f4f;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
   color: #dadada;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
   color: #dadada;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9360,8 +9363,9 @@ ejs-sidebar {
   outline: 0 solid #414040;
   outline-offset: 0;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected,
-.e-menu-container .e-ul .e-menu-item.e-selected {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
+.e-menu-container .e-ul .e-menu-item.e-selected,
+.e-menu-container .e-ul .e-menu-item.e-active-item {
   background-color: #514f4f;
   color: #fff;
   outline: 0 solid #514f4f;
@@ -9432,8 +9436,9 @@ ejs-sidebar {
 .e-menu-container.e-inherit .e-menu {
   background: inherit;
 }
-.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
   background: rgba(0, 0, 0, 0.056);
   color: inherit;

package/styles/fabric.css

@@ -9318,19 +9318,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #333;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected,
-.e-menu-container .e-menu .e-menu-item.e-selected {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
   color: #000;
   outline: 0 solid #dadada;
   outline-offset: 0;
   background: #dadada;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
   color: #333;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
   color: #333;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9371,8 +9374,9 @@ ejs-sidebar {
   outline: 0 solid #eaeaea;
   outline-offset: 0;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected,
-.e-menu-container .e-ul .e-menu-item.e-selected {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
+.e-menu-container .e-ul .e-menu-item.e-selected,
+.e-menu-container .e-ul .e-menu-item.e-active-item {
   background-color: #f4f4f4;
   color: #000;
   outline: 0 solid #f4f4f4;
@@ -9443,8 +9447,9 @@ ejs-sidebar {
 .e-menu-container.e-inherit .e-menu {
   background: inherit;
 }
-.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
   background: rgba(0, 0, 0, 0.056);
   color: inherit;

package/styles/fluent-dark.css

@@ -9467,19 +9467,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #a19f9d;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected,
-.e-menu-container .e-menu .e-menu-item.e-selected {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
   color: #f3f2f1;
   outline: 0 solid #292827;
   outline-offset: 0;
   background: #323130;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
   color: #a19f9d;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
   color: #a19f9d;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9528,8 +9531,9 @@ ejs-sidebar {
   outline: 0 solid #292827;
   outline-offset: 0;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected,
-.e-menu-container .e-ul .e-menu-item.e-selected {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
+.e-menu-container .e-ul .e-menu-item.e-selected,
+.e-menu-container .e-ul .e-menu-item.e-active-item {
   background-color: #3b3a39;
   color: #f3f2f1;
   outline: 0 solid #3b3a39;
@@ -9600,8 +9604,9 @@ ejs-sidebar {
 .e-menu-container.e-inherit .e-menu {
   background: inherit;
 }
-.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
   background: rgba(0, 0, 0, 0.056);
   color: inherit;

package/styles/fluent.css

@@ -9467,19 +9467,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #605e5c;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected,
-.e-menu-container .e-menu .e-menu-item.e-selected {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
   color: #201f1e;
   outline: 0 solid #edebe9;
   outline-offset: 0;
   background: #f3f2f1;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
   color: #605e5c;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
   color: #605e5c;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9528,8 +9531,9 @@ ejs-sidebar {
   outline: 0 solid #edebe9;
   outline-offset: 0;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected,
-.e-menu-container .e-ul .e-menu-item.e-selected {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
+.e-menu-container .e-ul .e-menu-item.e-selected,
+.e-menu-container .e-ul .e-menu-item.e-active-item {
   background-color: #edebe9;
   color: #201f1e;
   outline: 0 solid #edebe9;
@@ -9600,8 +9604,9 @@ ejs-sidebar {
 .e-menu-container.e-inherit .e-menu {
   background: inherit;
 }
-.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
   background: rgba(0, 0, 0, 0.056);
   color: inherit;

package/styles/h-scroll/bootstrap-dark.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/bootstrap-dark.scss';

package/styles/h-scroll/bootstrap.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
-@import 'bootstrap-definition.scss';
-@import 'icons/bootstrap.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/bootstrap.scss';

package/styles/h-scroll/bootstrap4.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
-@import 'bootstrap4-definition.scss';
-@import 'icons/bootstrap4.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/bootstrap4.scss';

package/styles/h-scroll/bootstrap5-dark.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'icons/bootstrap5-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/bootstrap5-dark.scss';

package/styles/h-scroll/bootstrap5.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
-@import 'bootstrap5-definition.scss';
-@import 'icons/bootstrap5.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/bootstrap5.scss';

package/styles/h-scroll/fabric-dark.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
-@import 'fabric-dark-definition.scss';
-@import 'icons/fabric-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/fabric-dark.scss';

package/styles/h-scroll/fabric.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/fabric-definition.scss';
-@import 'fabric-definition.scss';
-@import 'icons/fabric.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/fabric.scss';

package/styles/h-scroll/fluent-dark.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
-@import 'fluent-dark-definition.scss';
-@import 'icons/fluent-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/fluent-dark.scss';

package/styles/h-scroll/fluent.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/fluent-definition.scss';
-@import 'fluent-definition.scss';
-@import 'icons/fluent.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/fluent.scss';

package/styles/h-scroll/highcontrast-light.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'icons/highcontrast-light.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/highcontrast-light.scss';

package/styles/h-scroll/highcontrast.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
-@import 'highcontrast-definition.scss';
-@import 'icons/highcontrast.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/highcontrast.scss';

package/styles/h-scroll/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 @keyframes hscroll-popup-shadow {
   0% {
     border-color: rgba(255, 255, 255, 0.5);

package/styles/h-scroll/material-dark.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
-@import 'material-dark-definition.scss';
-@import 'icons/material-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/material-dark.scss';

package/styles/h-scroll/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /*! component's theme wise override definitions and variables */
 @keyframes hscroll-popup-shadow {
   0% {

package/styles/h-scroll/material.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/material-definition.scss';
-@import 'material-definition.scss';
-@import 'icons/material.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/material.scss';

package/styles/h-scroll/material3-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/h-scroll/material3-dark.scss

@@ -1,5 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
 
-@import 'material3-dark-definition.scss';
-@import 'icons/material3-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/material3-dark.scss';

package/styles/h-scroll/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/h-scroll/material3.scss

@@ -1,5 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
 
-@import 'material3-definition.scss';
-@import 'icons/material3.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/material3.scss';

package/styles/h-scroll/tailwind-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! component's theme wise override definitions and variables */
 @keyframes hscroll-popup-shadow {
   0% {

package/styles/h-scroll/tailwind-dark.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
-@import 'tailwind-dark-definition.scss';
-@import 'icons/tailwind-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/tailwind-dark.scss';

package/styles/h-scroll/tailwind.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! component's theme wise override definitions and variables */
 @keyframes hscroll-popup-shadow {
   0% {

package/styles/h-scroll/tailwind.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
-@import 'tailwind-definition.scss';
-@import 'icons/tailwind.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/tailwind.scss';

package/styles/highcontrast-light.css

@@ -9301,19 +9301,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #000;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected,
-.e-menu-container .e-menu .e-menu-item.e-selected {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
   color: #fff;
   outline: 0 solid #808080;
   outline-offset: 0;
   background: #808080;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
   color: #000;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
   color: #000;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9354,8 +9357,9 @@ ejs-sidebar {
   outline: 1px solid #757575;
   outline-offset: -1px;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected,
-.e-menu-container .e-ul .e-menu-item.e-selected {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
+.e-menu-container .e-ul .e-menu-item.e-selected,
+.e-menu-container .e-ul .e-menu-item.e-active-item {
   background-color: #400074;
   color: #fff;
   outline: 0 solid #400074;
@@ -9426,8 +9430,9 @@ ejs-sidebar {
 .e-menu-container.e-inherit .e-menu {
   background: inherit;
 }
-.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
   background: rgba(0, 0, 0, 0.056);
   color: inherit;

package/styles/highcontrast.css

@@ -9335,19 +9335,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #fff;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected,
-.e-menu-container .e-menu .e-menu-item.e-selected {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
   color: #000;
   outline: 0 solid #ffd939;
   outline-offset: 0;
   background: #ffd939;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
   color: #fff;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
   color: #fff;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9388,8 +9391,9 @@ ejs-sidebar {
   outline: 1px solid #969696;
   outline-offset: -1px;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected,
-.e-menu-container .e-ul .e-menu-item.e-selected {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
+.e-menu-container .e-ul .e-menu-item.e-selected,
+.e-menu-container .e-ul .e-menu-item.e-active-item {
   background-color: #ffd939;
   color: #000;
   outline: 0 solid #ffd939;
@@ -9460,8 +9464,9 @@ ejs-sidebar {
 .e-menu-container.e-inherit .e-menu {
   background: inherit;
 }
-.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
   background: rgba(0, 0, 0, 0.056);
   color: inherit;

package/styles/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! component icons */
 .e-pager .e-icon-last::before,
 .e-grid-menu .e-icon-last::before {
@@ -9449,19 +9448,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: rgba(255, 255, 255, 0.7);
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected,
-.e-menu-container .e-menu .e-menu-item.e-selected {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
   color: #fff;
   outline: 0 solid rgba(255, 255, 255, 0.18);
   outline-offset: 0;
   background: rgba(255, 255, 255, 0.18);
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
   color: rgba(255, 255, 255, 0.7);
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
   color: rgba(255, 255, 255, 0.7);
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9502,8 +9504,9 @@ ejs-sidebar {
   outline: 0 solid #616161;
   outline-offset: 0;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected,
-.e-menu-container .e-ul .e-menu-item.e-selected {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
+.e-menu-container .e-ul .e-menu-item.e-selected,
+.e-menu-container .e-ul .e-menu-item.e-active-item {
   background-color: rgba(255, 255, 255, 0.18);
   color: #fff;
   outline: 0 solid rgba(255, 255, 255, 0.18);
@@ -9574,8 +9577,9 @@ ejs-sidebar {
 .e-menu-container.e-inherit .e-menu {
   background: inherit;
 }
-.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
   background: rgba(0, 0, 0, 0.056);
   color: inherit;