@momentum-design/components 0.133.24 → 0.133.26

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

@@ -111,6 +111,13 @@ declare class Searchpopover extends Searchfield {
      * @internal
      */
     protected get scrollContainer(): HTMLElement | null;
+    /**
+     * Handles the popover hidden event by focusing the input element.
+     * This replaces `focus-back-to-trigger` since the trigger is a non-focusable div.
+     * Only moves focus to the input if focus is currently within the searchpopover component.
+     * If focus is outside the component, it is left unchanged.
+     */
+    private handlePopoverHidden;
     protected renderInputElement(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/searchpopover/searchpopover.component.js

@@ -129,6 +129,18 @@ class Searchpopover extends Searchfield {
         var _a, _b;
         return (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="filters-container"]')) !== null && _b !== void 0 ? _b : null;
     }
+    /**
+     * Handles the popover hidden event by focusing the input element.
+     * This replaces `focus-back-to-trigger` since the trigger is a non-focusable div.
+     * Only moves focus to the input if focus is currently within the searchpopover component.
+     * If focus is outside the component, it is left unchanged.
+     */
+    handlePopoverHidden() {
+        var _a;
+        if (this === document.activeElement || this.contains(document.activeElement)) {
+            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
     renderInputElement() {
         var _a, _b;
         const placeholderText = this.hasChips ? '' : this.placeholder;
@@ -188,8 +200,8 @@ class Searchpopover extends Searchfield {
         ?visible=${this.displayPopover}
         hide-on-outside-click
         hide-on-escape
-        focus-back-to-trigger
         size
+        @hidden=${this.handlePopoverHidden}
         placement="${this.placement}"
         aria-label="${ifDefined(this.popoverAriaLabel)}"
         disable-aria-expanded

package/dist/custom-elements.json

@@ -40425,6 +40425,12 @@
                 "module": "components/input/input.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handlePopoverHidden",
+              "privacy": "private",
+              "description": "Handles the popover hidden event by focusing the input element.\nThis replaces `focus-back-to-trigger` since the trigger is a non-focusable div.\nOnly moves focus to the input if focus is currently within the searchpopover component.\nIf focus is outside the component, it is left unchanged."
+            },
             {
               "kind": "field",
               "name": "helpText",

package/dist/utils/dom.d.ts

@@ -7,6 +7,12 @@ type FindFocusableOptions = {
     excludedElements?: HTMLElement[];
     /** Selectors to include in the search. */
     includeSelectors?: string[];
+    /**
+     * When true, elements with `tabindex="-1"` and their subtrees are excluded from the search.
+     * This supports composite widget patterns (e.g., roving tabindex in lists) where
+     * inactive items and their children should not be reachable via Tab navigation.
+     */
+    stopAtNonTabbable?: boolean;
 };
 /**
  * nodeB precedes nodeA in either a pre-order depth-first traversal of a tree containing both

package/dist/utils/dom.js

@@ -166,17 +166,21 @@ export const isFocusable = (element) => !isDisabled(element) && isTabbable(eleme
  * @returns The list of focusable elements.
  */
 export const findFocusable = (root, options = {}) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (!root) {
         return [];
     }
     const excludesSet = new Set((_a = options === null || options === void 0 ? void 0 : options.excludedElements) !== null && _a !== void 0 ? _a : []);
     const includeSelectors = (_b = options === null || options === void 0 ? void 0 : options.includeSelectors) !== null && _b !== void 0 ? _b : [];
+    const stopAtNonTabbable = (_c = options === null || options === void 0 ? void 0 : options.stopAtNonTabbable) !== null && _c !== void 0 ? _c : false;
     const matches = new Set();
     const focusableCheck = (element) => {
         if (!(element instanceof HTMLSlotElement) && (isHidden(element) || isDisabled(element))) {
             return 'stop';
         }
+        if (stopAtNonTabbable && !(element instanceof HTMLSlotElement) && element.getAttribute('tabindex') === '-1') {
+            return 'stop';
+        }
         return isMatchAny(element, includeSelectors) || (isTabbable(element) && isInteractiveElement(element))
             ? 'focusable'
             : 'continue';
@@ -211,6 +215,11 @@ export const findFocusable = (root, options = {}) => {
                 const assignedNodes = element.assignedElements({ flatten: true });
                 assignedNodes.forEach(node => {
                     if (node instanceof HTMLElement) {
+                        // When stopAtNonTabbable is enabled, skip non-tabbable slotted elements and their
+                        // subtrees to support composite widget patterns (e.g., roving tabindex in lists)
+                        if (stopAtNonTabbable && !(node instanceof HTMLSlotElement) && node.getAttribute('tabindex') === '-1') {
+                            return;
+                        }
                         finder(node);
                     }
                 });

package/dist/utils/mixins/focus/FocusTrapMixin.js

@@ -55,7 +55,7 @@ export const FocusTrapMixin = (superClass) => {
         setFocusableElements() {
             if (!this.shadowRoot)
                 return;
-            this.focusableElements = findFocusable(this.shadowRoot);
+            this.focusableElements = findFocusable(this.shadowRoot, { stopAtNonTabbable: true });
         }
         /**
          * Sets the initial focus within the container.

package/package.json

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