@momentum-design/components 0.139.2 → 0.139.3

package/dist/components/tablist/tablist.component.d.ts

@@ -82,6 +82,7 @@ declare class TabList extends TabList_base {
      * @internal
      */
     private showBackwardArrowButton;
+    private readonly boundHandleFocus;
     /**
      * @internal
      */

package/dist/components/tablist/tablist.component.js

@@ -126,6 +126,9 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
          * @internal
          */
         this.showBackwardArrowButton = false;
+        this.boundHandleFocus = (event) => {
+            void this.handleFocus(event);
+        };
         // This must be initialized after the destroyed event listener
         // to keep the element in the itemStore in order to move the focus correctly
         this.itemsStore = new ElementStore(this, {
@@ -168,12 +171,12 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
         if (!this.activeTabId) {
             this.activeTabId = (_a = getFirstTab(this.navItems)) === null || _a === void 0 ? void 0 : _a.tabId;
         }
-        (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.addEventListener('focusin', this.handleFocus.bind(this));
+        (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.addEventListener('focusin', this.boundHandleFocus);
     }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
-        (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.removeEventListener('focusin', this.handleFocus);
+        (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.removeEventListener('focusin', this.boundHandleFocus);
     }
     /**
      * Override focus to delegate to the active tab.
@@ -205,6 +208,11 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
         if (event.relatedTarget instanceof Tab || !(event.target instanceof Tab)) {
             return;
         }
+        // After scrolling with arrow buttons, focus moves from the button to the clicked tab.
+        // Do not redirect that focus back to the currently active tab.
+        if (event.relatedTarget instanceof Button) {
+            return;
+        }
         const activeTab = getActiveTab(this.navItems || []);
         if (!(activeTab instanceof Tab)) {
             return;

package/dist/custom-elements.json

@@ -48481,6 +48481,12 @@
                 "module": "utils/mixins/TabListComponentMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundHandleFocus",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "dataAriaLabel",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.139.2",
+  "version": "0.139.3",
   "engines": {
     "node": ">=24.0.0",
     "npm": ">=8.0.0"