@syncfusion/ej2-navigations 28.1.33 → 28.1.35

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.1.33
+*  version : 28.1.35
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@22.42.3",
+  "_id": "@syncfusion/ej2-navigations@28.1.33",
   "_inBundle": false,
-  "_integrity": "sha512-RX6GTiVPFJ765WKvMPISlHeieMchRrSJd1Wwi99lh51uK6gsrTzLIKNzSI9UsBXyjC8NNigPfd8UIOBzKKediA==",
+  "_integrity": "sha512-0OLo+b+tpp6pVC1e+OE3OcYMqxPCCG1JxTo35UipJ2I2/Fve/COtxBBPpyBLFsAmMHeHldqnsLcSo3X7Fo3mWg==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -40,8 +40,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-navigations/-/ej2-navigations-22.42.3.tgz",
-  "_shasum": "338d4553f460c0ebc346b0852e92e524b55673c3",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-28.1.33.tgz",
+  "_shasum": "12d9c190b00e66a4da177fff767f1d7e117474e9",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -162,6 +162,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "28.1.33",
+  "version": "28.1.35",
   "sideEffects": false
 }

package/src/accordion/accordion.d.ts

@@ -18,6 +18,13 @@ export interface AccordionClickArgs extends BaseEventArgs {
      * Defines the current Event arguments.
      */
     originalEvent?: Event;
+    /**
+     * Defines whether to cancel the Accordion click action.
+     * When set to `true`, the default click behavior will be prevented,
+     * preventing any action associated with the Accordion item click (such as expanding or collapsing the item).
+     * When set to `false` or omitted, the default click behavior will proceed as normal.
+     */
+    cancel?: boolean;
 }
 /** An interface that holds options to control the expanding item action. */
 export interface ExpandEventArgs extends BaseEventArgs {

package/src/accordion/accordion.js

@@ -438,56 +438,60 @@ var Accordion = /** @class */ (function (_super) {
     Accordion.prototype.afterContentRender = function (trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem) {
         var _this = this;
         var acrdActive = [];
-        this.trigger('clicked', eventArgs);
-        var cntclkCheck = (acrdnCtn && !isNOU(select('.e-target', acrdnCtn)));
-        var inlineAcrdnSel = '.' + CLS_CONTENT + ' .' + CLS_ROOT;
-        var inlineEleAcrdn = acrdnCtn && !isNOU(select('.' + CLS_ROOT, acrdnCtn)) && isNOU(closest(trgt, inlineAcrdnSel));
-        var nestContCheck = acrdnCtn && isNOU(select('.' + CLS_ROOT, acrdnCtn)) || !(closest(trgt, '.' + CLS_ROOT) === this.element);
-        cntclkCheck = cntclkCheck && (inlineEleAcrdn || nestContCheck);
-        trgt.classList.remove('e-target');
-        if (trgt.classList.contains(CLS_CONTENT) || trgt.classList.contains(CLS_CTENT) || cntclkCheck) {
-            return;
-        }
-        var acrdcontainer = this.element.querySelector('.' + CLS_CONTAINER);
-        var acrdnchild = (acrdcontainer) ? acrdcontainer.children : this.element.children;
-        [].slice.call(acrdnchild).forEach(function (el) {
-            if (el.classList.contains(CLS_ACTIVE)) {
-                acrdActive.push(el);
-            }
-        });
-        var acrdAniEle = [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM + ' [' + CLS_ANIMATE + ']'));
-        if (acrdAniEle.length > 0) {
-            for (var _i = 0, acrdAniEle_1 = acrdAniEle; _i < acrdAniEle_1.length; _i++) {
-                var el = acrdAniEle_1[_i];
-                acrdActive.push(el.parentElement);
-            }
-        }
-        var sameContentCheck = acrdActive.indexOf(acrdnCtnItem) !== -1 && acrdnCtn.getAttribute('e-animate') === 'true';
-        var sameHeader = false;
-        if (!isNOU(acrdnItem) && !isNOU(acrdnHdr)) {
-            var acrdnCtn_1 = select('.' + CLS_CONTENT, acrdnItem);
-            var acrdnRoot = closest(acrdnItem, '.' + CLS_ACRDN_ROOT);
-            var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);
-            if (isNOU(acrdnCtn_1)) {
+        this.trigger('clicked', eventArgs, function (eventArgs) {
+            if (eventArgs.cancel) {
                 return;
             }
-            sameHeader = (expandState === acrdnItem);
-            if (isVisible(acrdnCtn_1) && (!sameContentCheck || acrdnCtnItem.classList.contains(CLS_SLCTED))) {
-                this.collapse(acrdnCtn_1);
+            var cntclkCheck = (acrdnCtn && !isNOU(select('.e-target', acrdnCtn)));
+            var inlineAcrdnSel = '.' + CLS_CONTENT + ' .' + CLS_ROOT;
+            var inlineEleAcrdn = acrdnCtn && !isNOU(select('.' + CLS_ROOT, acrdnCtn)) && isNOU(closest(trgt, inlineAcrdnSel));
+            var nestContCheck = acrdnCtn && isNOU(select('.' + CLS_ROOT, acrdnCtn)) || !(closest(trgt, '.' + CLS_ROOT) === _this.element);
+            cntclkCheck = cntclkCheck && (inlineEleAcrdn || nestContCheck);
+            trgt.classList.remove('e-target');
+            if (trgt.classList.contains(CLS_CONTENT) || trgt.classList.contains(CLS_CTENT) || cntclkCheck) {
+                return;
             }
-            else {
-                if ((acrdActive.length > 0) && this.expandMode === 'Single' && !sameContentCheck) {
-                    acrdActive.forEach(function (el) {
-                        _this.collapse(select('.' + CLS_CONTENT, el));
-                        el.classList.remove(CLS_EXPANDSTATE);
-                    });
+            var acrdcontainer = _this.element.querySelector('.' + CLS_CONTAINER);
+            var acrdnchild = (acrdcontainer) ? acrdcontainer.children : _this.element.children;
+            [].slice.call(acrdnchild).forEach(function (el) {
+                if (el.classList.contains(CLS_ACTIVE)) {
+                    acrdActive.push(el);
+                }
+            });
+            var acrdAniEle = [].slice.call(_this.element.querySelectorAll('.' + CLS_ITEM + ' [' + CLS_ANIMATE + ']'));
+            if (acrdAniEle.length > 0) {
+                for (var _i = 0, acrdAniEle_1 = acrdAniEle; _i < acrdAniEle_1.length; _i++) {
+                    var el = acrdAniEle_1[_i];
+                    acrdActive.push(el.parentElement);
                 }
-                this.expand(acrdnCtn_1);
             }
-            if (!isNOU(expandState) && !sameHeader) {
-                expandState.classList.remove(CLS_EXPANDSTATE);
+            var sameContentCheck = acrdActive.indexOf(acrdnCtnItem) !== -1 && acrdnCtn.getAttribute('e-animate') === 'true';
+            var sameHeader = false;
+            if (!isNOU(acrdnItem) && !isNOU(acrdnHdr)) {
+                var acrdnCtn_1 = select('.' + CLS_CONTENT, acrdnItem);
+                var acrdnRoot = closest(acrdnItem, '.' + CLS_ACRDN_ROOT);
+                var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);
+                if (isNOU(acrdnCtn_1)) {
+                    return;
+                }
+                sameHeader = (expandState === acrdnItem);
+                if (isVisible(acrdnCtn_1) && (!sameContentCheck || acrdnCtnItem.classList.contains(CLS_SLCTED))) {
+                    _this.collapse(acrdnCtn_1);
+                }
+                else {
+                    if ((acrdActive.length > 0) && _this.expandMode === 'Single' && !sameContentCheck) {
+                        acrdActive.forEach(function (el) {
+                            _this.collapse(select('.' + CLS_CONTENT, el));
+                            el.classList.remove(CLS_EXPANDSTATE);
+                        });
+                    }
+                    _this.expand(acrdnCtn_1);
+                }
+                if (!isNOU(expandState) && !sameHeader) {
+                    expandState.classList.remove(CLS_EXPANDSTATE);
+                }
             }
-        }
+        });
     };
     Accordion.prototype.eleMoveFocus = function (action, root, trgt) {
         var clst;
@@ -841,9 +845,12 @@ var Accordion = /** @class */ (function (_super) {
     };
     Accordion.prototype.collapse = function (trgt) {
         var _this = this;
+        if (isNOU(trgt)) {
+            return;
+        }
         var items = this.getItems();
         var trgtItemEle = closest(trgt, '.' + CLS_ITEM);
-        if (isNOU(trgt) || !isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE)) {
+        if (!isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE)) {
             return;
         }
         var animation = {

package/src/carousel/carousel.js

@@ -1126,7 +1126,7 @@ var Carousel = /** @class */ (function (_super) {
         }
     };
     Carousel.prototype.wireEvents = function () {
-        if (!(this.animationEffect === 'Custom')) {
+        if (this.animationEffect !== 'Custom' && this.enableTouchSwipe) {
             this.swipeModehandlers();
         }
         EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);

package/styles/bds-lite.css

@@ -9002,7 +9002,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bds.css

@@ -11625,7 +11625,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bootstrap-dark-lite.css

@@ -8567,7 +8567,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bootstrap-dark.css

@@ -11034,7 +11034,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bootstrap-lite.css

@@ -8578,7 +8578,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bootstrap.css

@@ -11045,7 +11045,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bootstrap4-lite.css

@@ -8624,7 +8624,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bootstrap4.css

@@ -11163,7 +11163,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bootstrap5-dark-lite.css

@@ -8607,7 +8607,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bootstrap5-dark.css

@@ -11186,7 +11186,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bootstrap5-lite.css

@@ -8607,7 +8607,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bootstrap5.3-lite.css

@@ -8693,7 +8693,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bootstrap5.3.css

@@ -11177,7 +11177,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/bootstrap5.css

@@ -11186,7 +11186,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/breadcrumb/_bigger.scss

@@ -29,6 +29,12 @@
         }
       }
 
+      @if $breadcrumb-skin == 'tailwind3' {
+        &.e-icon-item .e-breadcrumb-text {
+          padding: 5px !important; /* stylelint-disable-line declaration-no-important */
+        }
+      }
+
       .e-breadcrumb-text {
         font-size: $breadcrumb-bigger-font-size;
 

package/styles/breadcrumb/_layout.scss

@@ -70,6 +70,9 @@
         @if $skin-name == 'fluent2' {
           padding: 9px;
         }
+        @if $skin-name == 'tailwind3' {
+          padding: 3px;
+        }
       }
 
       @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' or $breadcrumb-skin == 'tailwind' {

package/styles/breadcrumb/_tailwind3-definition.scss

@@ -5,10 +5,10 @@ $breadcrumb-font-size: $text-sm !default;
 $breadcrumb-bigger-font-size: $text-base !default;
 $breadcrumb-icon-font-size: $text-base !default;
 $breadcrumb-icon-bigger-font-size: $text-lg !default;
-$breadcrumb-padding: 0 !default;
+$breadcrumb-padding: 2px !default;
 $breadcrumb-padding-left: 0 !default;
 $breadcrumb-padding-right: 0 !default;
-$breadcrumb-bigger-padding: 0 !default;
+$breadcrumb-bigger-padding: 2px !default;
 $breadcrumb-separator-padding: 0 8px !default;
 $breadcrumb-separator-bigger-padding: 0 8px !default;
 $breadcrumb-icon-color: $content-text-color-alt4 !default;

package/styles/breadcrumb/tailwind3.css

@@ -73,7 +73,10 @@
       flex-shrink: 0;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
-  padding: 0;
+  padding: 2px;
+}
+.e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text {
+  padding: 3px;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
   -webkit-box-align: center;
@@ -354,7 +357,11 @@
 
 .e-bigger.e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text,
 .e-bigger .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
-  padding: 0;
+  padding: 2px;
+}
+.e-bigger.e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text,
+.e-bigger .e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text {
+  padding: 5px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-bigger.e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text,
 .e-bigger .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {

package/styles/context-menu/tailwind3.css

@@ -81,7 +81,7 @@
 }
 .e-contextmenu-wrapper ul.e-ul,
 .e-contextmenu-container ul.e-ul {
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
 }
 .e-contextmenu-wrapper ul .e-menu-item,
 .e-contextmenu-container ul .e-menu-item {

package/styles/fabric-dark-lite.css

@@ -8562,7 +8562,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/fabric-dark.css

@@ -11034,7 +11034,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/fabric-lite.css

@@ -8564,7 +8564,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/fabric.css

@@ -11036,7 +11036,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/fluent-dark-lite.css

@@ -8608,7 +8608,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/fluent-dark.css

@@ -11156,7 +11156,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/fluent-lite.css

@@ -8608,7 +8608,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/fluent.css

@@ -11156,7 +11156,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/fluent2-lite.css

@@ -9207,7 +9207,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 2px;
   top: 0;
   left: var(--progress-position);

package/styles/fluent2.css

@@ -11809,7 +11809,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 2px;
   top: 0;
   left: var(--progress-position);

package/styles/highcontrast-light-lite.css

@@ -8563,7 +8563,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/highcontrast-light.css

@@ -11035,7 +11035,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/highcontrast-lite.css

@@ -8599,7 +8599,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/highcontrast.css

@@ -11071,7 +11071,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/material-dark-lite.css

@@ -8735,7 +8735,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/material-dark.css

@@ -11194,7 +11194,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/material-lite.css

@@ -8755,7 +8755,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/material.css

@@ -11210,7 +11210,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/material3-dark-lite.css

@@ -8688,7 +8688,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/material3-dark.css

@@ -11244,7 +11244,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/material3-lite.css

@@ -8690,7 +8690,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/material3.css

@@ -11246,7 +11246,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/menu/_bigger.scss

@@ -155,6 +155,9 @@
 
       & .e-scroll-nav {
         width: $menu-bigger-hscroll-nav-size;
+        @if $skin-name == 'tailwind3' {
+          min-height: 48px;
+        }
       }
     }
 

package/styles/menu/_layout.scss

@@ -179,6 +179,9 @@
 
       & .e-scroll-nav {
         width: $menu-hscroll-nav-size;
+        @if $skin-name == 'tailwind3' {
+          min-height: 38px;
+        }
 
         &:focus,
         &:hover {

package/styles/menu/_theme.scss

@@ -253,9 +253,7 @@
     }
 
     & .e-menu-hscroll.e-hscroll .e-scroll-nav {
-      @if $skin-name != 'tailwind3' {
-        background: $menu-ul-bgcolor;
-      }
+      background: $menu-ul-bgcolor;
 
       & .e-nav-arrow.e-icons {
         @if $skin-name == 'fluent2' {