@shoper/phoenix_design_system 1.18.23-0 → 1.18.23-2

package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js

@@ -0,0 +1,200 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+require('lit');
+var utilities = require('@dreamcommerce/utilities');
+
+var _FocusTrapController_getContainer, _FocusTrapController_getToggler, _FocusTrapController_cyclicKeydown, _FocusTrapController_active, _FocusTrapController_sentinelStart, _FocusTrapController_sentinelEnd;
+class FocusTrapController {
+    constructor({ host, getContainer, noAutofocus = false, getToggler, cyclicKeydown = false }) {
+        _FocusTrapController_getContainer.set(this, void 0);
+        _FocusTrapController_getToggler.set(this, void 0);
+        _FocusTrapController_cyclicKeydown.set(this, void 0);
+        _FocusTrapController_active.set(this, false);
+        _FocusTrapController_sentinelStart.set(this, void 0);
+        _FocusTrapController_sentinelEnd.set(this, void 0);
+        // ─── Sentinel mode ───────────────────────────────────────────────────────
+        this._handleSentinelModeKeyUp = (ev) => {
+            var _a;
+            if (!tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_active, "f") || ev.code !== 'Tab')
+                return;
+            const container = tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getContainer, "f").call(this);
+            if (!container)
+                return;
+            if (ev.shiftKey) {
+                if (document.activeElement === tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_sentinelStart, "f")) {
+                    const focusableElements = this._getFocusableElements(container);
+                    (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+                    ev.preventDefault();
+                }
+            }
+            else if (document.activeElement === tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_sentinelEnd, "f")) {
+                utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(container);
+                ev.preventDefault();
+            }
+        };
+        // ─── Cyclic keydown mode ─────────────────────────────────────────────────
+        //
+        // No sentinel elements. Tab past the last focusable element wraps to the
+        // first; Shift+Tab past the first wraps to the last. Uses keydown +
+        // preventDefault so the browser never moves focus outside the container.
+        this._handleCyclicKeyDown = (ev) => {
+            if (!tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_active, "f") || ev.code !== 'Tab')
+                return;
+            const container = tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getContainer, "f").call(this);
+            if (!container)
+                return;
+            const focusableElements = this._getFocusableElements(container);
+            if (focusableElements.length === 0)
+                return;
+            const $target = ev.target;
+            if (ev.shiftKey) {
+                if ($target === focusableElements[0]) {
+                    ev.preventDefault();
+                    focusableElements[focusableElements.length - 1].focus();
+                }
+            }
+            else {
+                if ($target === focusableElements[focusableElements.length - 1]) {
+                    ev.preventDefault();
+                    focusableElements[0].focus();
+                }
+            }
+        };
+        // ─── Toggler mode ────────────────────────────────────────────────────────
+        //
+        // Cycle: toggler → content[0] → … → content[last] → toggler (and reverse).
+        // Uses keydown + preventDefault so the browser never moves focus on its own.
+        this._handleTogglerModeKeyDown = (ev) => {
+            var _a;
+            if (!tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_active, "f") || ev.code !== 'Tab')
+                return;
+            const container = tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getContainer, "f").call(this);
+            const toggler = (_a = tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getToggler, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
+            if (!container || !toggler)
+                return;
+            const $target = ev.target;
+            const focusableElements = this._getFocusableElements(container);
+            if (ev.shiftKey) {
+                // Shift+Tab on toggler → last content element
+                if (toggler.contains($target)) {
+                    const last = focusableElements[focusableElements.length - 1];
+                    if (!last)
+                        return;
+                    ev.preventDefault();
+                    last.focus();
+                    return;
+                }
+                // Shift+Tab on first content element → toggler
+                if ($target === focusableElements[0]) {
+                    ev.preventDefault();
+                    toggler.focus();
+                }
+            }
+            else {
+                // Tab on toggler → first content element
+                if (toggler.contains($target)) {
+                    const first = focusableElements[0];
+                    if (!first)
+                        return;
+                    ev.preventDefault();
+                    first.focus();
+                    return;
+                }
+                // Tab on last content element → toggler
+                if ($target === focusableElements[focusableElements.length - 1]) {
+                    ev.preventDefault();
+                    toggler.focus();
+                }
+            }
+        };
+        tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_getContainer, getContainer, "f");
+        tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_getToggler, getToggler, "f");
+        tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_cyclicKeydown, cyclicKeydown, "f");
+        this.noAutofocus = noAutofocus;
+        host.addController(this);
+    }
+    hostConnected() {
+        if (tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_cyclicKeydown, "f")) {
+            document.addEventListener('keydown', this._handleCyclicKeyDown);
+        }
+        else if (tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getToggler, "f")) {
+            document.addEventListener('keydown', this._handleTogglerModeKeyDown);
+        }
+        else {
+            document.addEventListener('keyup', this._handleSentinelModeKeyUp);
+        }
+    }
+    hostDisconnected() {
+        if (tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_cyclicKeydown, "f")) {
+            document.removeEventListener('keydown', this._handleCyclicKeyDown);
+        }
+        else if (tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getToggler, "f")) {
+            document.removeEventListener('keydown', this._handleTogglerModeKeyDown);
+        }
+        else {
+            document.removeEventListener('keyup', this._handleSentinelModeKeyUp);
+        }
+    }
+    /** Sentinel mode only: call once in firstUpdated with the two bookend elements. */
+    setSentinels(start, end) {
+        tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_sentinelStart, start, "f");
+        tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_sentinelEnd, end, "f");
+    }
+    activate() {
+        tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_active, true, "f");
+        // Sentinel mode: move focus to sentinelStart to prime the trap.
+        if (!tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getToggler, "f") && !this.noAutofocus) {
+            const scrollY = window.scrollY;
+            setTimeout(() => {
+                var _a;
+                (_a = tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_sentinelStart, "f")) === null || _a === void 0 ? void 0 : _a.focus();
+                window.scrollTo(0, scrollY);
+            }, 0);
+        }
+    }
+    deactivate() {
+        tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_active, false, "f");
+    }
+    /**
+     * Sentinel mode: move focus to the first real interactive element after the
+     * open transition completes (skips sentinelStart at index 0).
+     */
+    focusFirst() {
+        if (this.noAutofocus)
+            return;
+        requestAnimationFrame(() => {
+            const container = tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_getContainer, "f").call(this);
+            if (!container)
+                return;
+            const focusableElements = this._getFocusableElements(container);
+            if (focusableElements.length > 0) {
+                focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
+            }
+        });
+    }
+    _getFocusableElements(container) {
+        return utilities.UiDomUtils.getFocusableElements(container).filter(($el) => this._isElementTrulyFocusable($el));
+    }
+    getFocusableElements(container) {
+        return this._getFocusableElements(container);
+    }
+    _isElementTrulyFocusable($el) {
+        const style = window.getComputedStyle($el);
+        if (style.display === 'none' || style.visibility === 'hidden') {
+            return false;
+        }
+        if ($el.nodeName === 'H-PORTAL')
+            return true;
+        const $parent = $el.parentElement;
+        if (!$parent)
+            return true;
+        return this._isElementTrulyFocusable($parent);
+    }
+}
+_FocusTrapController_getContainer = new WeakMap(), _FocusTrapController_getToggler = new WeakMap(), _FocusTrapController_cyclicKeydown = new WeakMap(), _FocusTrapController_active = new WeakMap(), _FocusTrapController_sentinelStart = new WeakMap(), _FocusTrapController_sentinelEnd = new WeakMap();
+
+exports.FocusTrapController = FocusTrapController;
+//# sourceMappingURL=focus_trap_controller.js.map

package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts

@@ -26,6 +26,7 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     private _dropdownContentChildrenHeight;
     private _hasScrollableClassInitially;
     private _backdropController;
+    private _focusTrapController;
     constructor();
     connectedCallback(): Promise<void>;
     private static _appendDropdownPortal;
@@ -45,14 +46,8 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     private _closeDropdownOnEscape;
     private _keepFocusWithinDropdownForwards;
     private _handleFocusOnNextElementAfterDropdown;
-    private _handleFocusFromTogglerForwards;
-    private _handleFocusFromSentinelEndForwards;
     private _keepFocusWithinDropdownBackwards;
     private _handleDefaultFocusFromDropdownBackwards;
-    private _handleFocusFromTogglerBackwards;
-    private _handleFocusFromSentinelStartBackwards;
-    private _getTrulyFocusableElements;
-    private _isElementTrulyFocusable;
     private _hoverToggle;
     private _isHoveredWithinDropdown;
     private _focusOnFirstContentElement;

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js

@@ -12,6 +12,7 @@ import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
+import { FocusTrapController } from '../../controllers/focus_trap_controller/focus_trap_controller.js';
 import throttle_1 from '../../../../../external/lodash/throttle.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
 
@@ -30,6 +31,11 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this.preventFocusTrap = false;
         this.noAutoFocus = false;
         this._backdropController = new BackdropController();
+        this._focusTrapController = new FocusTrapController({
+            host: this,
+            getContainer: () => { var _a; return (_a = this.$dropdownContent) !== null && _a !== void 0 ? _a : undefined; },
+            getToggler: () => this.$dropdownToggler
+        });
         this._handleClickOutside = async (target) => {
             var _a, _b;
             if (!this.opened)
@@ -67,6 +73,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                         this._dispatchShowDropdownEvent();
                         (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_CSS_CLASSES.show}-${this.transition}-start`, `${DROPDOWN_CONTENT_CSS_CLASSES.show}-${this.transition}-end`);
                         this._toggleScroll();
+                        if (!this.preventFocusTrap)
+                            this._focusTrapController.activate();
                         resolve();
                     }, transitionDuration);
                 });
@@ -107,6 +115,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                         var _a;
                         (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-start`, `${DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-end`);
                         this.opened = false;
+                        this._focusTrapController.deactivate();
                         this._dispatchHideDropdownEvent();
                         resolve();
                     }, transitionDuration);
@@ -138,31 +147,16 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             await this.hide();
         };
         this._keepFocusWithinDropdownForwards = (ev) => {
-            var _a, _b;
-            if (ev.shiftKey === true || !this.$dropdownContent || !this.opened)
+            if (ev.shiftKey || !this.$dropdownContent || !this.opened || !this.preventFocusTrap)
                 return;
-            const $target = ev.target;
-            if (((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.preventFocusTrap) {
+            if (this.$dropdownContent.contains(ev.target)) {
                 this._handleFocusOnNextElementAfterDropdown(ev);
-                return;
             }
-            if ((_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.contains($target)) {
-                this._handleFocusFromTogglerForwards(ev);
-                return;
-            }
-            this._handleFocusFromSentinelEndForwards(ev, $target);
         };
         this._keepFocusWithinDropdownBackwards = (ev) => {
-            if (!this.opened || !this.$dropdownContent)
+            if (!this.opened || !this.$dropdownContent || !this.preventFocusTrap)
                 return;
-            const $target = ev.target;
-            if (this.preventFocusTrap) {
-                this._handleDefaultFocusFromDropdownBackwards(ev);
-            }
-            else {
-                this._handleFocusFromTogglerBackwards(ev, $target);
-                this._handleFocusFromSentinelStartBackwards(ev, $target);
-            }
+            this._handleDefaultFocusFromDropdownBackwards(ev);
         };
         this._hoverToggle = async (ev) => {
             if (window.innerWidth < BREAKPOINTS.xs)
@@ -184,7 +178,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this._focusOnFirstContentElement = () => {
             if (!this.$dropdownContent)
                 return;
-            const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
+            const $firstFocusableElement = this._focusTrapController.getFocusableElements(this.$dropdownContent)[0];
             if ($firstFocusableElement)
                 $firstFocusableElement.focus();
         };
@@ -302,68 +296,11 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
         return;
     }
-    _handleFocusFromTogglerForwards(ev) {
-        if (!this.$dropdownContent)
-            return;
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        if (trulyFocusableElements.length === 0)
-            return;
-        ev.preventDefault();
-        trulyFocusableElements[0].focus();
-    }
-    _handleFocusFromSentinelEndForwards(ev, $target) {
-        var _a;
-        if (!this.$dropdownContent)
-            return;
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
-        if ($target !== $lastFocusableElement)
-            return;
-        ev.preventDefault();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-    }
     _handleDefaultFocusFromDropdownBackwards(ev) {
         ev.preventDefault();
         this.hide();
         UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
     }
-    _handleFocusFromTogglerBackwards(ev, $target) {
-        var _a;
-        if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.$dropdownContent)
-            return;
-        ev.preventDefault();
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        if (trulyFocusableElements.length === 0)
-            return;
-        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
-        $lastFocusableElement.focus();
-    }
-    _handleFocusFromSentinelStartBackwards(ev, $target) {
-        var _a;
-        if (!this.$dropdownContent)
-            return;
-        const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
-        if ($target !== $firstFocusableElement)
-            return;
-        ev.preventDefault();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    _getTrulyFocusableElements($container) {
-        const focusableElements = UiDomUtils.getFocusableElements($container);
-        return focusableElements.filter(($el) => this._isElementTrulyFocusable($el));
-    }
-    _isElementTrulyFocusable($el) {
-        const style = window.getComputedStyle($el);
-        if (style.display === 'none' || style.visibility === 'hidden') {
-            return false;
-        }
-        if ($el.nodeName === 'H-PORTAL')
-            return true;
-        const $parent = $el.parentElement;
-        if (!$parent)
-            return true;
-        return this._isElementTrulyFocusable($parent);
-    }
     _isHoveredWithinDropdown(element) {
         var _a;
         if (element === this)

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/search/search.d.ts

@@ -19,7 +19,9 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _togglerElement;
     private _id;
     private _openSearchButtonAriaLabelId;
+    private _searchIconId;
     private _searchContentContainerId;
+    private _mobileFocusTrapController;
     private _searchResultsRef;
     private _searchHistoryRef;
     private _searchMessageRef;
@@ -81,6 +83,8 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _isSuggesterLayerVisible;
     private _preventSubmitOnSearchClear;
     private _resetSearchOnFocusOutside;
+    private _activateMobileDialog;
+    private _deactivateMobileDialog;
     private _setupAriaAttributes;
     private _handleOpenSearch;
     private _handleOpenSearchWithKeyboard;

package/build/esm/packages/phoenix/src/components/form/search/search.js

@@ -12,6 +12,7 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
 import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
 import { BREAKPOINTS } from '../../../global_constants.js';
 import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
+import { FocusTrapController } from '../../../controllers/focus_trap_controller/focus_trap_controller.js';
 import { MODAL_EVENTS } from '../../modal/modal_constants.js';
 import { SHEET_EVENTS } from '../../sheet/sheet_constants.js';
 import { when as n } from '../../../../../../external/lit-html/directives/when.js';
@@ -27,7 +28,14 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         this._togglerElement = null;
         this._id = v4();
         this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
+        this._searchIconId = `${this._id}-search-icon`;
         this._searchContentContainerId = v4();
+        this._mobileFocusTrapController = new FocusTrapController({
+            host: this,
+            getContainer: () => this,
+            noAutofocus: true,
+            cyclicKeydown: true
+        });
         this._searchResultsRef = createRef();
         this._searchHistoryRef = createRef();
         this._searchMessageRef = createRef();
@@ -323,6 +331,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
             if (window.innerWidth > BREAKPOINTS.sm) {
                 const hasBeenOpened = this.classList.contains(SEARCH_CLASS_NAMES.mobileOpened);
                 this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
+                this._deactivateMobileDialog();
                 if (hasBeenOpened && this.displayMode !== 'dropdown') {
                     const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
                     const searchOverlayTriggerName = (_a = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('[aria-haspopup="dialog"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('name');
@@ -338,6 +347,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         };
         this._openMobileView = () => {
             this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
+            this._activateMobileDialog();
         };
         this._isSuggesterLayerVisible = () => {
             var _a;
@@ -358,6 +368,20 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                 document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
             }
         };
+        this._activateMobileDialog = () => {
+            if (this.displayMode !== 'dropdown')
+                return;
+            this.setAttribute('role', 'dialog');
+            this.setAttribute('aria-modal', 'true');
+            this.setAttribute('aria-labelledby', this._searchIconId);
+            this._mobileFocusTrapController.activate();
+        };
+        this._deactivateMobileDialog = () => {
+            this.removeAttribute('role');
+            this.removeAttribute('aria-modal');
+            this.removeAttribute('aria-labelledby');
+            this._mobileFocusTrapController.deactivate();
+        };
         this._setupAriaAttributes = () => {
             var _a;
             if (this._translations.openSearchButtonAriaLabel) {
@@ -366,6 +390,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         };
         this._handleOpenSearch = () => {
             this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
+            this._activateMobileDialog();
             const shouldShowMessage = this._searchPhrase !== '';
             this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
             const $searchInput = this.querySelector(`
@@ -486,6 +511,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, this._handleSubmitForm);
         this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.close, () => {
             this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
+            this._deactivateMobileDialog();
             this._resetSearchView();
             this.isSearchUxFixesFlagEnabled && this._removeSearchKeyboardNavigation();
         });
@@ -618,6 +644,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         super.render();
         return html `
             ${n(!this.isSearchIconFixEnabled, () => html ` <div
+                    id="${this._searchIconId}"
                     class="${SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
                     tabindex="0"
                     aria-haspopup="dialog"

package/build/esm/packages/phoenix/src/components/form/search/search.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/modal/modal.d.ts

@@ -7,9 +7,6 @@ export declare class HModal extends PhoenixLightLitElement {
     transition: string;
     modalLabel: string;
     noAutofocus: boolean;
-    _firstFocusableElement: HTMLElement | undefined;
-    _focusableElements: HTMLElement[] | null;
-    _lastFocusableElement: HTMLElement | undefined;
     private _focusedToggler;
     private _contentRef;
     private _focusSentinelStart;
@@ -17,6 +14,7 @@ export declare class HModal extends PhoenixLightLitElement {
     private _propsChangeStrategies;
     private static openModals;
     private _backdropController;
+    private _focusTrapController;
     private static _appendModalsPortal;
     static isSomeModalOpen(): boolean;
     constructor();
@@ -24,8 +22,6 @@ export declare class HModal extends PhoenixLightLitElement {
     disconnectedCallback(): void;
     firstUpdated(props: PropertyValues): void;
     updated(changedProps: Map<string, any>): void;
-    private _setFocusToFirstFocusableElementInModalOrCloseBtn;
-    private _keepFocusWithinModal;
     private _handleCloseFromCloseComponent;
     private _bindCloseOnEsc;
     open(): Promise<void>;