@syncfusion/ej2-navigations 34.1.29 → 34.1.30

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 34.1.29
+*  version : 34.1.30
 *  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": "34.1.29",
+  "version": "34.1.30",
   "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,11 +8,11 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-navigations.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~34.1.29",
-    "@syncfusion/ej2-buttons": "~34.1.29",
+    "@syncfusion/ej2-base": "~34.1.30",
+    "@syncfusion/ej2-buttons": "~34.1.30",
     "@syncfusion/ej2-data": "~34.1.29",
-    "@syncfusion/ej2-inputs": "~34.1.29",
-    "@syncfusion/ej2-lists": "~34.1.29",
+    "@syncfusion/ej2-inputs": "~34.1.30",
+    "@syncfusion/ej2-lists": "~34.1.30",
     "@syncfusion/ej2-popups": "~34.1.29"
   },
   "devDependencies": {},

package/src/common/h-scroll.d.ts

@@ -26,6 +26,7 @@ export declare class HScroll extends Component<HTMLElement> implements INotifyPr
     private browserCheck;
     private ieCheck;
     private customStep;
+    private resizeContext;
     /**
      * Specifies the left or right scrolling distance of the horizontal scrollbar moving.
      *
@@ -92,6 +93,7 @@ export declare class HScroll extends Component<HTMLElement> implements INotifyPr
     private frameScrollRequest;
     private touchHandler;
     private arrowDisabling;
+    private resizeHandler;
     private scrollHandler;
     /**
      * Gets called when the model property changes.The data that describes the old and new values of property that changed.

package/src/common/h-scroll.js

@@ -67,6 +67,7 @@ var HScroll = /** @class */ (function (_super) {
      */
     HScroll.prototype.preRender = function () {
         this.browser = Browser.info.name;
+        this.resizeContext = this.resizeHandler.bind(this);
         this.browserCheck = this.browser === 'mozilla';
         this.isDevice = Browser.isDevice;
         this.customStep = true;
@@ -91,6 +92,9 @@ var HScroll = /** @class */ (function (_super) {
     HScroll.prototype.render = function () {
         this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });
         EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);
+        if (this.element && this.element.closest('.e-toolbar')) {
+            window.addEventListener('resize', this.resizeContext);
+        }
         if (!this.isDevice) {
             this.createNavIcon(this.element);
         }
@@ -169,6 +173,10 @@ var HScroll = /** @class */ (function (_super) {
             }
         }
         EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);
+        if (this.element && this.element.closest('.e-toolbar')) {
+            window.removeEventListener('resize', this.resizeContext);
+        }
+        this.resizeContext = null;
         this.touchModule.destroy();
         this.touchModule = null;
         _super.prototype.destroy.call(this);
@@ -422,6 +430,9 @@ var HScroll = /** @class */ (function (_super) {
         }
         this.repeatScroll();
     };
+    HScroll.prototype.resizeHandler = function (e) {
+        this.scrollHandler(e);
+    };
     HScroll.prototype.scrollHandler = function (e) {
         var target = e.target;
         var width = target.offsetWidth;

package/src/common/menu-base.js

@@ -415,6 +415,14 @@ var MenuBase = /** @class */ (function (_super) {
             this.leftEscKeyHandler(e);
         }
         var isDown = e.key ? (e.key === 'ArrowDown') : e.keyCode === 40;
+        var isUp = e.key ? (e.key === 'ArrowUp') : e.keyCode === 38;
+        if (isDown || isUp) {
+            var activeEl = document.activeElement;
+            if (activeEl && (closest(activeEl, '.e-' + this.getModuleName() + '-wrapper') === this.getWrapper()
+                || closest(activeEl, '.e-menu-item') || closest(activeEl, '.e-menu-parent'))) {
+                e.preventDefault();
+            }
+        }
         if (!isDown) {
             return;
         }

package/src/tab/tab.js

@@ -873,6 +873,8 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.compileElement = function (ele, val, prop, index) {
         var templateFn;
+        var heightAdjustMode = this.heightAdjustMode;
+        var templateType = prop;
         if (typeof val === 'string') {
             val = val.trim();
             if (this.isVue) {
@@ -891,6 +893,9 @@ var Tab = /** @class */ (function (_super) {
         }
         if (!isNOU(templateFn) && templateFUN.length > 0) {
             [].slice.call(templateFUN).forEach(function (el) {
+                if (templateType === 'content' && heightAdjustMode === 'Fill' && el.style) {
+                    el.style.height = "100%";
+                }
                 ele.appendChild(el);
             });
         }
@@ -1069,17 +1074,9 @@ var Tab = /** @class */ (function (_super) {
         }
         else if (this.heightAdjustMode === 'Fill') {
             addClass([this.element], [CLS_FILL]);
-            var parent_1 = this.element.parentElement;
-            var heightVal = parent_1.style.height || parent_1.getAttribute('height');
-            while (parent_1 && !heightVal) {
-                heightVal = parent_1.style.height || parent_1.getAttribute('height');
-                if (!heightVal) {
-                    parent_1 = parent_1.parentElement;
-                }
-            }
-            setStyle(this.element, { 'height': heightVal != null ? heightVal : '100%' });
+            setStyle(this.element, { 'height': '100%' });
             this.loadContentElement();
-            this.cntEle.style.height = heightVal != null ? "calc(" + heightVal + " - " + this.hdrEle.offsetHeight + "px)" : 'calc(100vh - ' + (this.hdrEle.offsetHeight + this.hdrEle.scrollHeight) + 'px)';
+            this.cntEle.style.height = 'calc(100% - ' + this.hdrEle.offsetHeight + 'px)';
         }
         else if (this.heightAdjustMode === 'Auto') {
             if (this.isTemplate === true) {

package/styles/bds-lite.css

@@ -552,6 +552,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 12px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 0.5px var(--color-sf-border-primary) inset;
+          box-shadow: 0 0 0 0.5px var(--color-sf-border-primary) inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 0.5px var(--color-sf-border-primary) inset;
+          box-shadow: 0 0 0 0.5px var(--color-sf-border-primary) inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/bds.css

@@ -552,6 +552,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 12px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 0.5px var(--color-sf-border-primary) inset;
+          box-shadow: 0 0 0 0.5px var(--color-sf-border-primary) inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 0.5px var(--color-sf-border-primary) inset;
+          box-shadow: 0 0 0 0.5px var(--color-sf-border-primary) inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/bootstrap-dark-lite.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 10px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px rgb(36, 138.2, 255) inset;
+          box-shadow: 0 0 0 1px rgb(36, 138.2, 255) inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px rgb(36, 138.2, 255) inset;
+          box-shadow: 0 0 0 1px rgb(36, 138.2, 255) inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/bootstrap-dark.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 10px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px rgb(36, 138.2, 255) inset;
+          box-shadow: 0 0 0 1px rgb(36, 138.2, 255) inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px rgb(36, 138.2, 255) inset;
+          box-shadow: 0 0 0 1px rgb(36, 138.2, 255) inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/bootstrap-lite.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 10px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #66afe9 inset;
+          box-shadow: 0 0 0 1px #66afe9 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #66afe9 inset;
+          box-shadow: 0 0 0 1px #66afe9 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 12px;
 }

package/styles/bootstrap.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 10px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #66afe9 inset;
+          box-shadow: 0 0 0 1px #66afe9 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #66afe9 inset;
+          box-shadow: 0 0 0 1px #66afe9 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 12px;
 }

package/styles/bootstrap4-lite.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 10px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #66afe9 inset;
+          box-shadow: 0 0 0 1px #66afe9 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #66afe9 inset;
+          box-shadow: 0 0 0 1px #66afe9 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/bootstrap4.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 10px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #66afe9 inset;
+          box-shadow: 0 0 0 1px #66afe9 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #66afe9 inset;
+          box-shadow: 0 0 0 1px #66afe9 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/bootstrap5-dark-lite.css

@@ -500,6 +500,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 9px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0d6efd inset;
+          box-shadow: 0 0 0 1px #0d6efd inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0d6efd inset;
+          box-shadow: 0 0 0 1px #0d6efd inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/bootstrap5-dark.css

@@ -500,6 +500,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 9px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0d6efd inset;
+          box-shadow: 0 0 0 1px #0d6efd inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0d6efd inset;
+          box-shadow: 0 0 0 1px #0d6efd inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/bootstrap5-lite.css

@@ -500,6 +500,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 9px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0d6efd inset;
+          box-shadow: 0 0 0 1px #0d6efd inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0d6efd inset;
+          box-shadow: 0 0 0 1px #0d6efd inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/bootstrap5.3-lite.css

@@ -584,6 +584,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 9px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px var(--color-sf-primary) inset;
+          box-shadow: 0 0 0 1px var(--color-sf-primary) inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px var(--color-sf-primary) inset;
+          box-shadow: 0 0 0 1px var(--color-sf-primary) inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/bootstrap5.3.css

@@ -584,6 +584,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 9px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px var(--color-sf-primary) inset;
+          box-shadow: 0 0 0 1px var(--color-sf-primary) inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px var(--color-sf-primary) inset;
+          box-shadow: 0 0 0 1px var(--color-sf-primary) inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/bootstrap5.css

@@ -500,6 +500,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 9px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0d6efd inset;
+          box-shadow: 0 0 0 1px #0d6efd inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0d6efd inset;
+          box-shadow: 0 0 0 1px #0d6efd inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/fabric-dark-lite.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 12px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #dadada inset;
+          box-shadow: 0 0 0 1px #dadada inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #dadada inset;
+          box-shadow: 0 0 0 1px #dadada inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 13px;
 }

package/styles/fabric-dark.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 12px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #dadada inset;
+          box-shadow: 0 0 0 1px #dadada inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #dadada inset;
+          box-shadow: 0 0 0 1px #dadada inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 13px;
 }

package/styles/fabric-lite.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 12px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #666 inset;
+          box-shadow: 0 0 0 1px #666 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #666 inset;
+          box-shadow: 0 0 0 1px #666 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 13px;
 }

package/styles/fabric.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 12px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #666 inset;
+          box-shadow: 0 0 0 1px #666 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #666 inset;
+          box-shadow: 0 0 0 1px #666 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 13px;
 }

package/styles/fluent-dark-lite.css

@@ -495,6 +495,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 11px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0078d4 inset;
+          box-shadow: 0 0 0 1px #0078d4 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0078d4 inset;
+          box-shadow: 0 0 0 1px #0078d4 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/fluent-dark.css

@@ -495,6 +495,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 11px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0078d4 inset;
+          box-shadow: 0 0 0 1px #0078d4 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0078d4 inset;
+          box-shadow: 0 0 0 1px #0078d4 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/fluent-lite.css

@@ -495,6 +495,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 11px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0078d4 inset;
+          box-shadow: 0 0 0 1px #0078d4 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0078d4 inset;
+          box-shadow: 0 0 0 1px #0078d4 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/fluent.css

@@ -495,6 +495,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 11px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0078d4 inset;
+          box-shadow: 0 0 0 1px #0078d4 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0078d4 inset;
+          box-shadow: 0 0 0 1px #0078d4 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/fluent2-lite.css

@@ -606,6 +606,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 16px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 0.5px var(--color-sf-border) inset;
+          box-shadow: 0 0 0 0.5px var(--color-sf-border) inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 0.5px var(--color-sf-border) inset;
+          box-shadow: 0 0 0 0.5px var(--color-sf-border) inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/fluent2.css

@@ -606,6 +606,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 16px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 0.5px var(--color-sf-border) inset;
+          box-shadow: 0 0 0 0.5px var(--color-sf-border) inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 0.5px var(--color-sf-border) inset;
+          box-shadow: 0 0 0 0.5px var(--color-sf-border) inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/highcontrast-light-lite.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 12px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #757575 inset;
+          box-shadow: 0 0 0 1px #757575 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #757575 inset;
+          box-shadow: 0 0 0 1px #757575 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 13px;
 }

package/styles/highcontrast-light.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 12px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #757575 inset;
+          box-shadow: 0 0 0 1px #757575 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #757575 inset;
+          box-shadow: 0 0 0 1px #757575 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 13px;
 }

package/styles/highcontrast-lite.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 12px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #969696 inset;
+          box-shadow: 0 0 0 1px #969696 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #969696 inset;
+          box-shadow: 0 0 0 1px #969696 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 13px;
 }

package/styles/highcontrast.css

@@ -493,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 12px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #969696 inset;
+          box-shadow: 0 0 0 1px #969696 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #969696 inset;
+          box-shadow: 0 0 0 1px #969696 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 13px;
 }