@syncfusion/ej2-navigations 32.2.7 → 32.2.9

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.7
+*  version : 32.2.9
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-navigations",
-  "version": "32.2.7",
+  "version": "32.2.9",
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,12 +8,12 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-navigations.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.2.6",
-    "@syncfusion/ej2-buttons": "~32.2.7",
+    "@syncfusion/ej2-base": "~32.2.9",
+    "@syncfusion/ej2-buttons": "~32.2.9",
     "@syncfusion/ej2-data": "~32.2.3",
-    "@syncfusion/ej2-inputs": "~32.2.7",
+    "@syncfusion/ej2-inputs": "~32.2.8",
     "@syncfusion/ej2-lists": "~32.2.7",
-    "@syncfusion/ej2-popups": "~32.2.7"
+    "@syncfusion/ej2-popups": "~32.2.8"
   },
   "devDependencies": {},
   "keywords": [

package/src/accordion/accordion.js

@@ -716,8 +716,13 @@ var Accordion = /** @class */ (function (_super) {
             if (this.isReact) {
                 this.renderReactTemplates();
             }
-            append(this.getItemTemplate()(this.dataSource[parseInt(index.toString(), 10)], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);
-            itemcnt.appendChild(ctn);
+            if (!isNOU(this.getItemTemplate())) {
+                append(this.getItemTemplate()(this.dataSource[parseInt(index.toString(), 10)], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);
+                itemcnt.appendChild(ctn);
+            }
+            else {
+                itemcnt.appendChild(this.fetchElement(ctn, this.dataSource[parseInt(index.toString(), 10)].content, index));
+            }
         }
         else {
             var content = this.items[parseInt(index.toString(), 10)].content;

package/src/common/menu-base.d.ts

@@ -192,6 +192,7 @@ export declare abstract class MenuBase extends Component<HTMLUListElement> imple
     protected isOpenCalled: boolean;
     private isAnimationNone;
     private isKBDAction;
+    private skipNextArrowDown;
     private touchStartFn;
     private touchMoveFn;
     /**
@@ -448,6 +449,7 @@ export declare abstract class MenuBase extends Component<HTMLUListElement> imple
     private toggleAnimation;
     private triggerOpen;
     private end;
+    protected getAppendToElement(): HTMLElement;
     /**
      * Get the properties to be maintained in the persisted state.
      *

package/src/common/menu-base.js

@@ -158,6 +158,7 @@ var MenuBase = /** @class */ (function (_super) {
         _this.isOpenCalled = false;
         _this.isAnimationNone = false;
         _this.isKBDAction = false;
+        _this.skipNextArrowDown = false;
         return _this;
     }
     /**
@@ -265,7 +266,8 @@ var MenuBase = /** @class */ (function (_super) {
                 this.element.parentElement.insertBefore(wrapper, this.element);
             }
             else {
-                document.body.appendChild(wrapper);
+                var appendToElement = this.getAppendToElement();
+                appendToElement.appendChild(wrapper);
             }
         }
         if (this.cssClass) {
@@ -402,8 +404,38 @@ var MenuBase = /** @class */ (function (_super) {
             e.action = ESCAPE;
             this.leftEscKeyHandler(e);
         }
+        var isDown = e.key ? (e.key === 'ArrowDown') : e.keyCode === 40;
+        if (!isDown) {
+            return;
+        }
+        var hostPopup = closest(this.element, '.e-popup-open');
+        if (!hostPopup) {
+            return;
+        }
+        if (closest(document.activeElement, '#' + this.element.id)) {
+            return;
+        }
+        var active = document.activeElement;
+        if (!active) {
+            return;
+        }
+        var expanded = active.getAttribute('aria-expanded') === 'true';
+        if (!expanded) {
+            return;
+        }
+        var ul = this.element;
+        var firstItem = select('.e-menu-item', ul);
+        if (firstItem) {
+            ul.focus();
+            firstItem.classList.add('e-focused');
+            this.skipNextArrowDown = true;
+        }
     };
     MenuBase.prototype.keyBoardHandler = function (e) {
+        if (e.action === DOWNARROW && this.skipNextArrowDown) {
+            this.skipNextArrowDown = false;
+            return;
+        }
         var actionName = '';
         var trgt = e.target;
         var actionNeeded = this.isMenu && !this.hamburgerMode && !this.element.classList.contains('e-vertical')
@@ -503,6 +535,13 @@ var MenuBase = /** @class */ (function (_super) {
         fliIdx = this.isValidLI(cli, fliIdx, e.action);
         cul.children[fliIdx].classList.add(FOCUSED);
         cul.children[fliIdx].focus();
+        if (closest(this.element, '.e-popup')) {
+            var focusedLiItem = cul.children[fliIdx];
+            var focusableChild = focusedLiItem.querySelector('[tabindex], span[tabindex], a, button, [tabindex]:not([tabindex="-1"])');
+            if (!focusableChild) {
+                cul.focus();
+            }
+        }
     };
     MenuBase.prototype.isValidLI = function (cli, index, action) {
         var cul = this.getUlByNavIdx();
@@ -546,7 +585,8 @@ var MenuBase = /** @class */ (function (_super) {
             return isNullOrUndefined(popup) ? null : select('.e-menu-parent', popup);
         }
         else {
-            if (!document.body.contains(this.element) && navIdxLen === 0) {
+            var appendToElement = this.getAppendToElement();
+            if (!appendToElement.contains(this.element) && navIdxLen === 0) {
                 return null;
             }
             return this.getWrapper().children[navIdxLen];
@@ -902,7 +942,8 @@ var MenuBase = /** @class */ (function (_super) {
                     li.appendChild(this.popupWrapper);
                 }
                 else {
-                    document.body.appendChild(this.popupWrapper);
+                    var appendToElement = this.getAppendToElement();
+                    appendToElement.appendChild(this.popupWrapper);
                 }
                 this.isNestedOrVertical = this.element.classList.contains('e-vertical') || this.navIdx.length !== 1;
                 this.popupObj = this.generatePopup(this.popupWrapper, this.uList, li, this.isNestedOrVertical);
@@ -2203,6 +2244,16 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
     };
+    MenuBase.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     /**
      * Get the properties to be maintained in the persisted state.
      *

package/src/sidebar/sidebar.js

@@ -569,6 +569,13 @@ var Sidebar = /** @class */ (function (_super) {
                     else {
                         addClass([this.element], DOCKER);
                     }
+                    if (!this.isOpen && sibling) {
+                        if (!this.enableDock) {
+                            this.element.style.transform = sibling.style.transform = '';
+                        }
+                        sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] =
+                            this.enableDock ? this.setDimension(this.dockSize) : '0px';
+                    }
                     break;
                 case 'zIndex':
                     this.setZindex();

package/styles/appbar/material3-dark.css

@@ -330,12 +330,10 @@
           box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.13), 0 0.3px 0.9px rgba(0, 0, 0, 0.1);
 }
 .e-appbar.e-light {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
   border: 1px solid;
   -o-border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08));
-     border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08)));
      border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08));
 }
 .e-appbar.e-light .e-appbar-separator {
@@ -358,13 +356,11 @@
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit,
 .e-appbar.e-light .e-menu-container.e-inherit {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
   -webkit-box-shadow: none;
           box-shadow: none;
   -o-border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08));
-     border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08)));
      border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08));
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
@@ -447,7 +443,6 @@
 }
 
 .e-light.e-inherit.e-input-group, .e-light.e-inherit.e-input-group.e-control-wrapper, .e-light.e-inherit.e-float-input, .e-light.e-inherit.e-float-input.e-input-group, .e-light.e-inherit.e-float-input.e-control-wrapper, .e-light.e-inherit.e-float-input.e-input-group.e-control-wrapper, .e-light.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover, .e-light.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }

package/styles/appbar/material3.css

@@ -336,12 +336,10 @@
           box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.13), 0 0.3px 0.9px rgba(0, 0, 0, 0.1);
 }
 .e-appbar.e-light {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
   border: 1px solid;
   -o-border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08));
-     border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08)));
      border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08));
 }
 .e-appbar.e-light .e-appbar-separator {
@@ -364,13 +362,11 @@
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit,
 .e-appbar.e-light .e-menu-container.e-inherit {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
   -webkit-box-shadow: none;
           box-shadow: none;
   -o-border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08));
-     border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08)));
      border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08));
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
@@ -453,7 +449,6 @@
 }
 
 .e-light.e-inherit.e-input-group, .e-light.e-inherit.e-input-group.e-control-wrapper, .e-light.e-inherit.e-float-input, .e-light.e-inherit.e-float-input.e-input-group, .e-light.e-inherit.e-float-input.e-control-wrapper, .e-light.e-inherit.e-float-input.e-input-group.e-control-wrapper, .e-light.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover, .e-light.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }

package/styles/bds-lite.css

@@ -896,11 +896,9 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-bg-secondary), 1)), to(rgba(var(--color-sf-bg-secondary), 0)));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-bg-secondary), 1) 0%, rgba(var(--color-sf-bg-secondary), 0) 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-bg-secondary), 0)), to(rgba(var(--color-sf-bg-secondary), 1)));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-bg-secondary), 0) 0%, rgba(var(--color-sf-bg-secondary), 1) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {
@@ -1130,11 +1128,9 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-bg-secondary), 1)), to(rgba(var(--color-sf-bg-secondary), 0)));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-bg-secondary), 1) 0%, rgba(var(--color-sf-bg-secondary), 0) 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-bg-secondary), 0)), to(rgba(var(--color-sf-bg-secondary), 1)));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-bg-secondary), 0) 0%, rgba(var(--color-sf-bg-secondary), 1) 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {

package/styles/bds.css

@@ -1161,11 +1161,9 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-bg-secondary), 1)), to(rgba(var(--color-sf-bg-secondary), 0)));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-bg-secondary), 1) 0%, rgba(var(--color-sf-bg-secondary), 0) 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-bg-secondary), 0)), to(rgba(var(--color-sf-bg-secondary), 1)));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-bg-secondary), 0) 0%, rgba(var(--color-sf-bg-secondary), 1) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {
@@ -1446,11 +1444,9 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-bg-secondary), 1)), to(rgba(var(--color-sf-bg-secondary), 0)));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-bg-secondary), 1) 0%, rgba(var(--color-sf-bg-secondary), 0) 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-bg-secondary), 0)), to(rgba(var(--color-sf-bg-secondary), 1)));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-bg-secondary), 0) 0%, rgba(var(--color-sf-bg-secondary), 1) 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {

package/styles/bootstrap5.3-lite.css

@@ -1249,11 +1249,9 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-sf-content-bg-color-alt2)), to(transparent));
   background-image: linear-gradient(-270deg, var(--color-sf-content-bg-color-alt2) 0%, transparent 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--color-sf-content-bg-color-alt2)));
   background-image: linear-gradient(-270deg, transparent 0%, var(--color-sf-content-bg-color-alt2) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {
@@ -1643,11 +1641,9 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-sf-content-bg-color-alt2)), to(transparent));
   background-image: linear-gradient(-270deg, var(--color-sf-content-bg-color-alt2) 0%, transparent 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--color-sf-content-bg-color-alt2)));
   background-image: linear-gradient(-270deg, transparent 0%, var(--color-sf-content-bg-color-alt2) 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {

package/styles/bootstrap5.3.css

@@ -1552,11 +1552,9 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-sf-content-bg-color-alt2)), to(transparent));
   background-image: linear-gradient(-270deg, var(--color-sf-content-bg-color-alt2) 0%, transparent 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--color-sf-content-bg-color-alt2)));
   background-image: linear-gradient(-270deg, transparent 0%, var(--color-sf-content-bg-color-alt2) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {
@@ -2077,11 +2075,9 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-sf-content-bg-color-alt2)), to(transparent));
   background-image: linear-gradient(-270deg, var(--color-sf-content-bg-color-alt2) 0%, transparent 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--color-sf-content-bg-color-alt2)));
   background-image: linear-gradient(-270deg, transparent 0%, var(--color-sf-content-bg-color-alt2) 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {

package/styles/breadcrumb/material3-dark.css

@@ -546,7 +546,6 @@
 }
 
 .e-breadcrumb-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-breadcrumb-popup .e-breadcrumb-text {

package/styles/breadcrumb/material3.css

@@ -552,7 +552,6 @@
 }
 
 .e-breadcrumb-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-breadcrumb-popup .e-breadcrumb-text {

package/styles/carousel/material3-dark.css

@@ -575,10 +575,8 @@
           box-shadow: none;
 }
 .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator div {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
   -o-border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14));
-     border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14)));
      border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14));
 }
 .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:hover {

package/styles/carousel/material3.css

@@ -581,10 +581,8 @@
           box-shadow: none;
 }
 .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator div {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
   -o-border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14));
-     border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14)));
      border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14));
 }
 .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:hover {

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

@@ -519,7 +519,6 @@
 /* 16px */
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }
@@ -593,7 +592,6 @@
 
 .e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
 .e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border: 1px solid rgba(var(--color-sf-outline-variant));
 }

package/styles/context-menu/material3.css

@@ -525,7 +525,6 @@
 
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }
@@ -599,7 +598,6 @@
 
 .e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
 .e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: 1px solid rgba(var(--color-sf-outline-variant));
 }

package/styles/fluent2-lite.css

@@ -1290,11 +1290,9 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-sf-content-bg-color-alt2)), to(transparent));
   background-image: linear-gradient(-270deg, var(--color-sf-content-bg-color-alt2) 0%, transparent 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--color-sf-content-bg-color-alt2)));
   background-image: linear-gradient(-270deg, transparent 0%, var(--color-sf-content-bg-color-alt2) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {
@@ -1699,11 +1697,9 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-sf-content-bg-color-alt2)), to(transparent));
   background-image: linear-gradient(-270deg, var(--color-sf-content-bg-color-alt2) 0%, transparent 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--color-sf-content-bg-color-alt2)));
   background-image: linear-gradient(-270deg, transparent 0%, var(--color-sf-content-bg-color-alt2) 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {

package/styles/fluent2.css

@@ -1601,11 +1601,9 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-sf-content-bg-color-alt2)), to(transparent));
   background-image: linear-gradient(-270deg, var(--color-sf-content-bg-color-alt2) 0%, transparent 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--color-sf-content-bg-color-alt2)));
   background-image: linear-gradient(-270deg, transparent 0%, var(--color-sf-content-bg-color-alt2) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {
@@ -2143,11 +2141,9 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-sf-content-bg-color-alt2)), to(transparent));
   background-image: linear-gradient(-270deg, var(--color-sf-content-bg-color-alt2) 0%, transparent 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--color-sf-content-bg-color-alt2)));
   background-image: linear-gradient(-270deg, transparent 0%, var(--color-sf-content-bg-color-alt2) 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {

package/styles/h-scroll/bds.css

@@ -227,11 +227,9 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-bg-secondary), 1)), to(rgba(var(--color-sf-bg-secondary), 0)));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-bg-secondary), 1) 0%, rgba(var(--color-sf-bg-secondary), 0) 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-bg-secondary), 0)), to(rgba(var(--color-sf-bg-secondary), 1)));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-bg-secondary), 0) 0%, rgba(var(--color-sf-bg-secondary), 1) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {

package/styles/h-scroll/bootstrap5.3.css

@@ -467,11 +467,9 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-sf-content-bg-color-alt2)), to(transparent));
   background-image: linear-gradient(-270deg, var(--color-sf-content-bg-color-alt2) 0%, transparent 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--color-sf-content-bg-color-alt2)));
   background-image: linear-gradient(-270deg, transparent 0%, var(--color-sf-content-bg-color-alt2) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {

package/styles/h-scroll/fluent2.css

@@ -473,11 +473,9 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-sf-content-bg-color-alt2)), to(transparent));
   background-image: linear-gradient(-270deg, var(--color-sf-content-bg-color-alt2) 0%, transparent 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--color-sf-content-bg-color-alt2)));
   background-image: linear-gradient(-270deg, transparent 0%, var(--color-sf-content-bg-color-alt2) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {

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

@@ -461,15 +461,12 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-surface))), to(transparent));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-surface)) 0%, transparent 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(var(--color-sf-surface))));
   background-image: linear-gradient(-270deg, transparent 0%, rgba(var(--color-sf-surface)) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-hscroll.e-rtl .e-scroll-nav.e-scroll-left-nav {
@@ -514,7 +511,6 @@
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-hscroll .e-scroll-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-hscroll .e-scroll-nav.e-scroll-left-nav {

package/styles/h-scroll/material3.css

@@ -467,15 +467,12 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-surface))), to(transparent));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-surface)) 0%, transparent 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(var(--color-sf-surface))));
   background-image: linear-gradient(-270deg, transparent 0%, rgba(var(--color-sf-surface)) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-hscroll.e-rtl .e-scroll-nav.e-scroll-left-nav {
@@ -520,7 +517,6 @@
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-hscroll .e-scroll-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-hscroll .e-scroll-nav.e-scroll-left-nav {

package/styles/h-scroll/tailwind3.css

@@ -437,11 +437,9 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-sf-secondary-bg-color-disabled)), to(transparent));
   background-image: linear-gradient(-270deg, var(--color-sf-secondary-bg-color-disabled) 0%, transparent 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--color-sf-secondary-bg-color-disabled)));
   background-image: linear-gradient(-270deg, transparent 0%, var(--color-sf-secondary-bg-color-disabled) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {