@syncfusion/ej2-navigations 31.2.16 → 32.1.24

package/styles/material3.scss

@@ -1,61 +1,59 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'pager/material3-definition' as *;
+@use 'pager/icons/material3' as *;
+@use 'pager/all.material3' as *;
+@use 'pager/bigger.material3' as *;
+@use 'h-scroll/material3-definition' as *;
+@use 'h-scroll/icons/material3' as *;
+@use 'h-scroll/all.material3' as *;
+@use 'h-scroll/bigger.material3' as *;
+@use 'v-scroll/material3-definition' as *;
+@use 'v-scroll/icons/material3' as *;
+@use 'v-scroll/all.material3' as *;
+@use 'v-scroll/bigger.material3' as *;
+@use 'ej2-buttons/styles/button/material3-definition' as *;
+@use 'ej2-popups/styles/popup/material3-definition' as *;
+@use 'toolbar/material3-definition' as *;
+@use 'toolbar/icons/material3' as *;
+@use 'toolbar/all.material3' as *;
+@use 'toolbar/bigger.material3' as *;
+@use 'accordion/material3-definition' as *;
+@use 'accordion/icons/material3' as *;
+@use 'accordion/all.material3' as *;
+@use 'accordion/bigger.material3' as *;
+@use 'carousel/material3-definition' as *;
+@use 'carousel/icons/material3' as *;
+@use 'carousel/all.material3' as *;
 
-
-
-@import 'pager/material3-definition.scss';
-@import 'pager/icons/material3.scss';
-@import 'pager/all.scss';
-@import 'pager/bigger.scss';
-@import 'h-scroll/material3-definition.scss';
-@import 'h-scroll/icons/material3.scss';
-@import 'h-scroll/all.scss';
-@import 'h-scroll/bigger.scss';
-@import 'v-scroll/material3-definition.scss';
-@import 'v-scroll/icons/material3.scss';
-@import 'v-scroll/all.scss';
-@import 'v-scroll/bigger.scss';
-@import 'ej2-buttons/styles/button/material3-definition.scss';
-@import 'ej2-popups/styles/popup/material3-definition.scss';
-@import 'toolbar/material3-definition.scss';
-@import 'toolbar/icons/material3.scss';
-@import 'toolbar/all.scss';
-@import 'toolbar/bigger.scss';
-@import 'accordion/material3-definition.scss';
-@import 'accordion/icons/material3.scss';
-@import 'accordion/all.scss';
-@import 'accordion/bigger.scss';
-@import 'carousel/material3-definition.scss';
-@import 'carousel/icons/material3.scss';
-@import 'carousel/all.scss';
-
-@import 'context-menu/material3-definition.scss';
-@import 'context-menu/icons/material3.scss';
-@import 'context-menu/all.scss';
-@import 'context-menu/bigger.scss';
-@import 'tab/material3-definition.scss';
-@import 'tab/icons/material3.scss';
-@import 'tab/all.scss';
-@import 'tab/bigger.scss';
-@import 'ej2-inputs/styles/input/material3-definition.scss';
-@import 'ej2-buttons/styles/check-box/material3-definition.scss';
-@import 'treeview/material3-definition.scss';
-@import 'treeview/icons/material3.scss';
-@import 'treeview/all.scss';
-@import 'treeview/bigger.scss';
-@import 'sidebar/material3-definition.scss';
-@import 'sidebar/all.scss';
-@import 'menu/material3-definition.scss';
-@import 'menu/icons/material3.scss';
-@import 'menu/all.scss';
-@import 'menu/bigger.scss';
-@import 'breadcrumb/material3-definition.scss';
-@import 'breadcrumb/icons/material3.scss';
-@import 'breadcrumb/all.scss';
-@import 'breadcrumb/bigger.scss';
-@import 'appbar/material3-definition.scss';
-@import 'appbar/all.scss';
-@import 'appbar/bigger.scss';
-@import 'ej2-popups/styles/tooltip/material3-definition.scss';
-@import 'stepper/material3-definition.scss';
-@import 'stepper/icons/material3.scss';
-@import 'stepper/all.scss';
-@import 'stepper/bigger.scss';
+@use 'context-menu/material3-definition' as *;
+@use 'context-menu/icons/material3' as *;
+@use 'context-menu/all.material3' as *;
+@use 'context-menu/bigger.material3' as *;
+@use 'tab/material3-definition' as *;
+@use 'tab/icons/material3' as *;
+@use 'tab/all.material3' as *;
+@use 'tab/bigger.material3' as *;
+@use 'ej2-inputs/styles/input/material3-definition' as *;
+@use 'ej2-buttons/styles/check-box/material3-definition' as *;
+@use 'treeview/material3-definition' as *;
+@use 'treeview/icons/material3' as *;
+@use 'treeview/all.material3' as *;
+@use 'treeview/bigger.material3' as *;
+@use 'sidebar/material3-definition' as *;
+@use 'sidebar/all.material3' as *;
+@use 'menu/material3-definition' as *;
+@use 'menu/icons/material3' as *;
+@use 'menu/all.material3' as *;
+@use 'menu/bigger.material3' as *;
+@use 'breadcrumb/material3-definition' as *;
+@use 'breadcrumb/icons/material3' as *;
+@use 'breadcrumb/all.material3' as *;
+@use 'breadcrumb/bigger.material3' as *;
+@use 'appbar/material3-definition' as *;
+@use 'appbar/all.material3' as *;
+@use 'appbar/bigger.material3' as *;
+@use 'ej2-popups/styles/tooltip/material3-definition' as *;
+@use 'stepper/material3-definition' as *;
+@use 'stepper/icons/material3' as *;
+@use 'stepper/all.material3' as *;
+@use 'stepper/bigger.material3' as *;

package/styles/menu/_all.bds.scss

@@ -0,0 +1,2 @@
+@use 'layout.bds' as *;
+@use 'theme.bds' as *;

package/styles/menu/_all.bootstrap-dark.scss

@@ -0,0 +1,2 @@
+@use 'layout.bootstrap-dark' as *;
+@use 'theme.bootstrap-dark' as *;

package/styles/menu/_all.bootstrap.scss

@@ -0,0 +1,2 @@
+@use 'layout.bootstrap' as *;
+@use 'theme.bootstrap' as *;

package/styles/menu/_all.bootstrap4.scss

@@ -0,0 +1,2 @@
+@use 'layout.bootstrap4' as *;
+@use 'theme.bootstrap4' as *;

package/styles/menu/_all.bootstrap5-dark.scss

@@ -0,0 +1,2 @@
+@use 'layout.bootstrap5-dark' as *;
+@use 'theme.bootstrap5-dark' as *;

package/styles/menu/_all.bootstrap5.3.scss

@@ -0,0 +1,2 @@
+@use 'layout.bootstrap5.3' as *;
+@use 'theme.bootstrap5.3' as *;

package/styles/menu/_all.bootstrap5.scss

@@ -0,0 +1,2 @@
+@use 'layout.bootstrap5' as *;
+@use 'theme.bootstrap5' as *;

package/styles/menu/_all.fabric-dark.scss

@@ -0,0 +1,2 @@
+@use 'layout.fabric-dark' as *;
+@use 'theme.fabric-dark' as *;

package/styles/menu/_all.fabric.scss

@@ -0,0 +1,2 @@
+@use 'layout.fabric' as *;
+@use 'theme.fabric' as *;

package/styles/menu/_all.fluent-dark.scss

@@ -0,0 +1,2 @@
+@use 'layout.fluent-dark' as *;
+@use 'theme.fluent-dark' as *;

package/styles/menu/_all.fluent.scss

@@ -0,0 +1,2 @@
+@use 'layout.fluent' as *;
+@use 'theme.fluent' as *;

package/styles/menu/_all.fluent2.scss

@@ -0,0 +1,2 @@
+@use 'layout.fluent2' as *;
+@use 'theme.fluent2' as *;

package/styles/menu/_all.highcontrast-light.scss

@@ -0,0 +1,2 @@
+@use 'layout.highcontrast-light' as *;
+@use 'theme.highcontrast-light' as *;

package/styles/menu/_all.highcontrast.scss

@@ -0,0 +1,2 @@
+@use 'layout.highcontrast' as *;
+@use 'theme.highcontrast' as *;

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

@@ -0,0 +1,2 @@
+@use 'layout.material-dark' as *;
+@use 'theme.material-dark' as *;

package/styles/menu/_all.material.scss

@@ -0,0 +1,2 @@
+@use 'layout.material' as *;
+@use 'theme.material' as *;

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

@@ -0,0 +1,2 @@
+@use 'layout.material3-dark' as *;
+@use 'theme.material3-dark' as *;

package/styles/menu/_all.material3.scss

@@ -0,0 +1,2 @@
+@use 'layout.material3' as *;
+@use 'theme.material3' as *;

package/styles/menu/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

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

@@ -0,0 +1,2 @@
+@use 'layout.tailwind-dark' as *;
+@use 'theme.tailwind-dark' as *;

package/styles/menu/_all.tailwind.scss

@@ -0,0 +1,2 @@
+@use 'layout.tailwind' as *;
+@use 'theme.tailwind' as *;

package/styles/menu/_all.tailwind3.scss

@@ -0,0 +1,2 @@
+@use 'layout.tailwind3' as *;
+@use 'theme.tailwind3' as *;

package/styles/menu/_bds-definition.scss

@@ -1,8 +1,13 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@use '../context-menu/bds-definition' as *;
+@forward 'ej2-base/styles/definition/bds';
+@forward '../context-menu/bds-definition';
 $menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
 $menu-bigger-caret-li-padding: 32px !default;
 $menu-bigger-caret-right: 12px !default;
 $menu-bigger-font-size: $text-base !default;
 $menu-bigger-li-height: 48px !default;
+$menu-bigger-li-line-height: 48px !default;
 $menu-bigger-li-padding: 0 16px !default;
 $menu-bigger-li-text-indent: 15px !default;
 $menu-bigger-li-right-padding: 12px !default;
@@ -22,23 +27,31 @@ $menu-caret-padding-left: 8px !default;
 $menu-disable-opacity: .65 !default;
 $menu-font-size: $text-sm !default;
 $menu-icon-margin-right: 8px !default;
+$menu-icon-margin-right-text-indent: 8px !default;
 $menu-icon-bigger-margin-right: 12px !default;
 $menu-li-hover-outline-offset: 0 !default;
 $menu-li-border-style: solid !default;
 $menu-li-border-width: 1px !default;
 $menu-li-height: 38px !default;
+$menu-li-line-height: 38px !default;
 $menu-li-padding: 0 12px !default;
 $menu-li-text-indent: 12px !default;
 $menu-li-right-padding: 12px !default;
 $menu-separator-padding: 0 !default;
 $menu-icon-font-size: $text-lg !default;
+$menu-header-font-size: $text-lg !default;
+$menu-icon-font-size-text-indent: $text-lg !default;
 $menu-icon-bigger-font-size: 22px !default;
 $menu-li-selected-outline-offset: 0 !default;
 $menu-hscroll-nav-size: 28px !default;
 $menu-vscroll-nav-size: 28px !default;
+$menu-vscroll-nav-height: 28px !default;
+$menu-vscroll-nav-padding: 28px !default;
 $menu-scroll-nav-icon-size: 16px !default;
 $menu-bigger-hscroll-nav-size: 40px !default;
 $menu-bigger-vscroll-nav-size: 32px !default;
+$menu-bigger-vscroll-nav-height: 32px !default;
+$menu-bigger-vscroll-nav-padding: 32px !default;
 $menu-bigger-scroll-nav-icon-size: 18px !default;
 $menu-header-icon-padding: 0 16px !default;
 $menu-li-bgcolor: $content-bg-color-alt3 !default;
@@ -63,3 +76,23 @@ $menu-icon-color: $icon-color !default;
 $menu-icon-hover-color: $content-text-color !default;
 $menu-icon-focussed-color: $cmenu-caret-color !default;
 $menu-caret-color: $cmenu-caret-color !default;
+$menu-padding-none: 0 !default;
+$menu-bigger-icon-mrg-right: 0 !default;
+$menu-bigger-icon-margin-left: 0 !default;
+$menu-icon-margin-bottom: 4px !default;
+$menu-scroll-padding: 0 !default;
+$menu-hscroll-nav-interaction-border: 0 !default;
+$menu-hamburger-border: 0 !default;
+$menu-hamburger-border-radius: 0 !default;
+$menu-hamburger-padding: 0 !default;
+$menu-hamburger-rtl-icon-margin-left: 0 !default;
+$menu-border-none: 0 !default;
+$menu-inherit-height: inherit !default;
+$menu-inherit-line-height: inherit !default;
+$menu-auto-height: auto !default;
+$menu-header-font-family: $font-family !default;
+$menu-scroll-bar-height: 100% !default;
+$menu-container-height: 1px !default;
+$menu-normal-line-height: normal !default;
+$menu-container-ul-font-weight: 500 !default;
+$menu-wrapper-line-height: 0 !default;

package/styles/menu/_bigger.bds.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bds';
+@import './_bigger';

package/styles/menu/_bigger.bootstrap-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap-dark';
+@import './_bigger';

package/styles/menu/_bigger.bootstrap.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap';
+@import './_bigger';

package/styles/menu/_bigger.bootstrap4.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap4';
+@import './_bigger';

package/styles/menu/_bigger.bootstrap5-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap5-dark';
+@import './_bigger';

package/styles/menu/_bigger.bootstrap5.3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap5.3';
+@import './_bigger';

package/styles/menu/_bigger.bootstrap5.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap5';
+@import './_bigger';

package/styles/menu/_bigger.fabric-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fabric-dark';
+@import './_bigger';

package/styles/menu/_bigger.fabric.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fabric';
+@import './_bigger';

package/styles/menu/_bigger.fluent-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fluent-dark';
+@import './_bigger';

package/styles/menu/_bigger.fluent.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fluent';
+@import './_bigger';

package/styles/menu/_bigger.fluent2.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fluent2';
+@import './_bigger';

package/styles/menu/_bigger.highcontrast-light.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.highcontrast-light';
+@import './_bigger';

package/styles/menu/_bigger.highcontrast.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.highcontrast';
+@import './_bigger';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material-dark';
+@import './_bigger';

package/styles/menu/_bigger.material.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material';
+@import './_bigger';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material3-dark';
+@import './_bigger';

package/styles/menu/_bigger.material3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material3';
+@import './_bigger';

package/styles/menu/_bigger.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @mixin bigger-rtl-blank-icon {
   padding-left: $cmenu-caret-blank-icon;
 
@@ -14,37 +15,37 @@
 
 @mixin bigger-li-size {
   height: $cmenu-bigger-li-height;
-  line-height: $cmenu-bigger-li-height;
+  line-height: $cmenu-bigger-li-line-height;
   @if $skin-name == 'fluent2' {
-    height: 40px;
-    line-height: 21px;
-    padding: 9px;
+    height: $cmenu-bigger-li-size-height;
+    line-height: $cmenu-bigger-li-size-line-height;
+    padding: $cmenu-bigger-li-size-padding;
   }
 
   &.e-menu-caret-icon {
     @if $skin-name == 'fluent2' {
-      padding: 9px 36px 9px 9px;
+      padding: $cmenu-caret-icon-padding;
     }
   }
 
   & .e-menu-icon {
     font-size: $cmenu-icon-bigger-font-size;
-    line-height: $cmenu-bigger-li-height;
+    line-height: $cmenu-bigger-li-line-height;
     @if $skin-name == 'tailwind' {
       margin-right: $cmenu-icon-bigger-margin-right;
     }
   }
 
   & .e-caret {
-    line-height: $cmenu-bigger-li-height;
+    line-height: $cmenu-bigger-li-line-height;
     @if $skin-name == 'fluent2' {
-      margin: 3px 0;
+      margin: $cmenu-bigger-caret-icon-margin;
     }
   }
 
   &.e-separator {
-    height: auto;
-    line-height: normal;
+    height: $menu-auto-height;
+    line-height: $menu-normal-line-height;
   }
 }
 
@@ -56,16 +57,16 @@
     font-size: $menu-bigger-font-size;
 
     &.e-menu .e-menu-item {
-      line-height: $menu-bigger-li-height;
+      line-height: $menu-bigger-li-line-height;
       padding: $menu-bigger-li-padding;
       height: $menu-bigger-li-height;
 
       & .e-menu-icon {
         font-size: $menu-icon-bigger-font-size;
-        line-height: $menu-bigger-li-height;
+        line-height: $menu-bigger-li-line-height;
         margin-right: $menu-bigger-icon-margin-right;
         @if $skin-name == 'fluent2' {
-          margin-bottom: 3px;
+          margin-bottom: $menu-bigger-icon-item-margin-bottom;
         }
       }
 
@@ -75,7 +76,7 @@
           line-height: $menu-bigger-li-icon-height;
         }
         @else {
-          line-height: $menu-bigger-li-height;
+          line-height: $menu-bigger-li-line-height;
         }
         right: $menu-bigger-caret-right;
       }
@@ -93,8 +94,8 @@
       &.e-vertical {
         & .e-menu-item {
           &.e-separator {
-            height: auto;
-            line-height: normal;
+            height: $menu-auto-height;
+            line-height: $menu-normal-line-height;
           }
         }
       }
@@ -104,7 +105,7 @@
       @include bigger-ul-size;
       min-width: $cmenu-bigger-min-width;
       @if $skin-name == 'tailwind3' {
-        font-weight: $font-weight-normal;
+        font-weight: $menu-ul-font-weight;
       }
 
       & .e-menu-item  {
@@ -151,7 +152,7 @@
   .e-bigger .e-menu-container,
   .e-bigger.e-menu-container {
     & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
-      padding: 0 $menu-bigger-hscroll-nav-size;
+      padding: $menu-padding-none $menu-bigger-hscroll-nav-size;
 
       & .e-scroll-nav {
         width: $menu-bigger-hscroll-nav-size;
@@ -163,11 +164,11 @@
 
     & .e-menu-vscroll.e-vscroll {
       &:not(.e-scroll-device) {
-        padding: $menu-bigger-vscroll-nav-size 0;
+        padding: $menu-bigger-vscroll-nav-padding $menu-padding-none;
       }
 
       & .e-scroll-nav {
-        height: $menu-bigger-vscroll-nav-size;
+        height: $menu-bigger-vscroll-nav-height;
       }
     }
 
@@ -189,12 +190,12 @@
 
       & .e-menu-icon {
         margin-left: $menu-bigger-icon-margin-right;
-        margin-right: 0;
+        margin-right: $menu-bigger-icon-mrg-right;
       }
 
       & .e-caret {
         left: $menu-bigger-caret-right;
-        margin-left: 0;
+        margin-left: $menu-bigger-icon-margin-left;
         right: auto;
       }
 
@@ -217,7 +218,7 @@
         &.e-menu-caret-icon {
           padding-left: $cmenu-caret-li-padding;
           @if $skin-name == 'fluent2' {
-            padding-right: 9px;
+            padding-right: $menu-bigger-caret-icon-padding-right;
           }
           @else {
             padding-right: $cmenu-li-right-padding;
@@ -248,9 +249,9 @@
       max-width: 100%;
 
       & .e-menu-item {
-        height: auto;
-        line-height: $menu-bigger-li-height;
-        padding: 0;
+        height: $menu-auto-height;
+        line-height: $menu-bigger-li-line-height;
+        padding: $menu-padding-none;
       }
     }
   }
@@ -262,7 +263,7 @@
     & .e-menu-header {
       font-size: $menu-icon-bigger-font-size;
       height: $menu-bigger-li-height;
-      line-height: $menu-bigger-li-height;
+      line-height: $menu-bigger-li-line-height;
     }
 
     & ul.e-menu {
@@ -281,7 +282,7 @@
           text-indent: inherit;
 
           &.e-menu-caret-icon {
-            padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+            padding-right: $menu-padding-none !important; /* stylelint-disable-line declaration-no-important */
           }
 
           & .e-caret {
@@ -308,7 +309,7 @@
         }
       }
       .e-ul {
-        font-weight: $font-weight-medium;
+        font-weight: $menu-container-ul-font-weight;
       }
     }
   }
@@ -319,7 +320,7 @@
   .e-bigger.e-rtl.e-menu-container.e-hamburger {
     & ul.e-menu {
       & .e-menu-item {
-        padding: 0;
+        padding: $menu-padding-none;
         text-indent: $menu-bigger-li-text-indent;
 
         &.e-blankicon {
@@ -327,13 +328,13 @@
         }
 
         & .e-menu-icon {
-          margin-left: 0;
+          margin-left: $menu-bigger-icon-margin-left;
           text-indent: inherit;
         }
 
         &.e-menu-caret-icon {
-          padding-left: 0;
-          padding-right: 0;
+          padding-left: $menu-padding-none;
+          padding-right: $menu-padding-none;
         }
 
         & .e-caret {
@@ -352,14 +353,14 @@
 
   .e-bigger .e-menu-container .e-ul .e-menu-item .e-caret {
     @if $skin-name == 'fluent2' {
-      padding: 9px 0;
+      padding: $menu-container-caret-padding;
     }
   }
 
   .e-bigger .e-menu-wrapper:not(.e-hamburger) ul.e-ul .e-menu-item:not(.e-separator),
   .e-bigger .e-menu-container:not(.e-hamburger) ul.e-ul .e-menu-item:not(.e-separator) {
     @if $skin-name == 'fluent2' {
-      height: 40px;
+      height: $menu-bigger-ul-item-height;
     }
     @else {
       height: $cmenu-bigger-li-height;
@@ -375,7 +376,7 @@
 
   .e-bigger .e-menu-wrapper.e-hamburger ul.e-menu .e-menu-item,
   .e-bigger .e-menu-container.e-hamburger ul.e-menu .e-menu-item {
-    padding: 0 !important; /* stylelint-disable-line declaration-no-important */
-    height: auto !important; /* stylelint-disable-line declaration-no-important */
+    padding: $menu-padding-none !important; /* stylelint-disable-line declaration-no-important */
+    height: $menu-auto-height !important; /* stylelint-disable-line declaration-no-important */
   }
 }

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind-dark';
+@import './_bigger';

package/styles/menu/_bigger.tailwind.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind';
+@import './_bigger';

package/styles/menu/_bigger.tailwind3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind3';
+@import './_bigger';