@shoper/phoenix_design_system 1.18.23-0 → 1.18.23-10

package/build/cjs/packages/phoenix/src/components/sheet/sheet.js.map

@@ -1 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+require('lit');
+var sentinel_focus_trap_strategy = require('./strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js');
+var cyclic_focus_trap_strategy = require('./strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js');
+var toggler_focus_trap_strategy = require('./strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js');
+var focus_trap_strategy_constants = require('./strategies/focus_trap_strategy_constants.js');
+
+var _a, _FocusTrapController_strategy, _FocusTrapController_createStrategy;
+class FocusTrapController {
+    constructor(host, props) {
+        _FocusTrapController_strategy.set(this, void 0);
+        tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_strategy, tslib_es6.__classPrivateFieldGet(FocusTrapController, _a, "m", _FocusTrapController_createStrategy).call(FocusTrapController, props), "f");
+        host.addController(this);
+    }
+    get strategy() {
+        return tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f");
+    }
+    hostConnected() {
+        tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").attach();
+    }
+    hostDisconnected() {
+        tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").detach();
+    }
+    activate() {
+        tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").activate();
+    }
+    deactivate() {
+        tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").deactivate();
+    }
+    getFocusableElements(container) {
+        return tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").getFocusableElements(container);
+    }
+}
+_a = FocusTrapController, _FocusTrapController_strategy = new WeakMap(), _FocusTrapController_createStrategy = function _FocusTrapController_createStrategy(props) {
+    switch (props.mode) {
+        case focus_trap_strategy_constants.FOCUS_TRAP_STRATEGY_TYPES.sentinel: return new sentinel_focus_trap_strategy.SentinelFocusTrapStrategy(props);
+        case focus_trap_strategy_constants.FOCUS_TRAP_STRATEGY_TYPES.cyclic: return new cyclic_focus_trap_strategy.CyclicFocusTrapStrategy(props);
+        case focus_trap_strategy_constants.FOCUS_TRAP_STRATEGY_TYPES.toggler: return new toggler_focus_trap_strategy.TogglerFocusTrapStrategy(props);
+    }
+};
+
+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;"}

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

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utilities = require('@dreamcommerce/utilities');
+
+class BaseFocusTrapStrategy {
+    constructor(getContainer) {
+        this.getContainer = getContainer;
+        this.active = false;
+        this.noAutofocus = false;
+        this._handleKeyDown = (ev) => {
+            if (!this.active || ev.code !== 'Tab')
+                return;
+            const container = this.getContainer();
+            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();
+                }
+            }
+        };
+    }
+    attach() {
+        document.addEventListener('keydown', this._handleKeyDown);
+    }
+    detach() {
+        document.removeEventListener('keydown', this._handleKeyDown);
+    }
+    activate() {
+        this.active = true;
+    }
+    deactivate() {
+        this.active = false;
+    }
+    getFocusableElements(container) {
+        return utilities.UiDomUtils.getFocusableElements(container).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);
+    }
+}
+
+exports.BaseFocusTrapStrategy = BaseFocusTrapStrategy;
+//# sourceMappingURL=base_focus_trap_strategy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base_focus_trap_strategy = require('../base_focus_trap_strategy.js');
+
+class CyclicFocusTrapStrategy extends base_focus_trap_strategy.BaseFocusTrapStrategy {
+    constructor({ getContainer }) {
+        super(getContainer);
+    }
+}
+
+exports.CyclicFocusTrapStrategy = CyclicFocusTrapStrategy;
+//# sourceMappingURL=cyclic_focus_trap_strategy.js.map

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

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

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const FOCUS_TRAP_STRATEGY_TYPES = {
+    cyclic: 'cyclic',
+    toggler: 'toggler',
+    sentinel: 'sentinel',
+};
+
+exports.FOCUS_TRAP_STRATEGY_TYPES = FOCUS_TRAP_STRATEGY_TYPES;
+//# sourceMappingURL=focus_trap_strategy_constants.js.map

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

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

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base_focus_trap_strategy = require('../base_focus_trap_strategy.js');
+
+class SentinelFocusTrapStrategy extends base_focus_trap_strategy.BaseFocusTrapStrategy {
+    constructor({ getContainer, noAutofocus = false }) {
+        super(getContainer);
+        this.noAutofocus = noAutofocus;
+    }
+    activate() {
+        this.active = true;
+        if (!this.noAutofocus) {
+            requestAnimationFrame(() => {
+                const container = this.getContainer();
+                if (!container)
+                    return;
+                const focusableElements = this.getFocusableElements(container);
+                const shouldSkipStartSentinel = focusableElements.length > 1;
+                const $firstFocusableContentElement = shouldSkipStartSentinel ? focusableElements[1] : focusableElements[0];
+                $firstFocusableContentElement === null || $firstFocusableContentElement === void 0 ? void 0 : $firstFocusableContentElement.focus();
+            });
+        }
+    }
+}
+
+exports.SentinelFocusTrapStrategy = SentinelFocusTrapStrategy;
+//# sourceMappingURL=sentinel_focus_trap_strategy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+var base_focus_trap_strategy = require('../base_focus_trap_strategy.js');
+
+var _TogglerFocusTrapStrategy_getToggler;
+class TogglerFocusTrapStrategy extends base_focus_trap_strategy.BaseFocusTrapStrategy {
+    constructor({ getContainer, getToggler }) {
+        super(getContainer);
+        _TogglerFocusTrapStrategy_getToggler.set(this, void 0);
+        this._handleKeyDown = (ev) => {
+            var _a;
+            if (!this.active || ev.code !== 'Tab')
+                return;
+            const container = this.getContainer();
+            const toggler = (_a = tslib_es6.__classPrivateFieldGet(this, _TogglerFocusTrapStrategy_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) {
+                if (toggler.contains($target))
+                    return this._focusLastContentElement(ev, focusableElements);
+                if ($target === focusableElements[0])
+                    return this._returnToToggler(ev, toggler);
+            }
+            else {
+                if (toggler.contains($target))
+                    return this._focusFirstContentElement(ev, focusableElements);
+                if ($target === focusableElements[focusableElements.length - 1])
+                    return this._returnToToggler(ev, toggler);
+            }
+        };
+        tslib_es6.__classPrivateFieldSet(this, _TogglerFocusTrapStrategy_getToggler, getToggler, "f");
+    }
+    _focusLastContentElement(ev, focusableElements) {
+        const last = focusableElements[focusableElements.length - 1];
+        if (!last)
+            return;
+        ev.preventDefault();
+        last.focus();
+    }
+    _focusFirstContentElement(ev, focusableElements) {
+        const first = focusableElements[0];
+        if (!first)
+            return;
+        ev.preventDefault();
+        first.focus();
+    }
+    _returnToToggler(ev, toggler) {
+        ev.preventDefault();
+        toggler.focus();
+    }
+}
+_TogglerFocusTrapStrategy_getToggler = new WeakMap();
+
+exports.TogglerFocusTrapStrategy = TogglerFocusTrapStrategy;
+//# sourceMappingURL=toggler_focus_trap_strategy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;
@@ -43,16 +44,8 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     private _observeScrollToggling;
     private _toggleScroll;
     private _closeDropdownOnEscape;
-    private _keepFocusWithinDropdownForwards;
-    private _handleFocusOnNextElementAfterDropdown;
-    private _handleFocusFromTogglerForwards;
-    private _handleFocusFromSentinelEndForwards;
-    private _keepFocusWithinDropdownBackwards;
-    private _handleDefaultFocusFromDropdownBackwards;
-    private _handleFocusFromTogglerBackwards;
-    private _handleFocusFromSentinelStartBackwards;
-    private _getTrulyFocusableElements;
-    private _isElementTrulyFocusable;
+    private _handleTabExitForward;
+    private _handleTabExitBackward;
     private _hoverToggle;
     private _isHoveredWithinDropdown;
     private _focusOnFirstContentElement;

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

@@ -12,6 +12,8 @@ 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 { FOCUS_TRAP_STRATEGY_TYPES } from '../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.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 +32,11 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this.preventFocusTrap = false;
         this.noAutoFocus = false;
         this._backdropController = new BackdropController();
+        this._focusTrapController = new FocusTrapController(this, {
+            mode: FOCUS_TRAP_STRATEGY_TYPES.toggler,
+            getContainer: () => { var _a; return (_a = this.$dropdownContent) !== null && _a !== void 0 ? _a : undefined; },
+            getToggler: () => { var _a; return (_a = this.$dropdownToggler) !== null && _a !== void 0 ? _a : undefined; }
+        });
         this._handleClickOutside = async (target) => {
             var _a, _b;
             if (!this.opened)
@@ -67,6 +74,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 +116,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);
@@ -137,32 +147,21 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                 return;
             await this.hide();
         };
-        this._keepFocusWithinDropdownForwards = (ev) => {
-            var _a, _b;
-            if (ev.shiftKey === true || !this.$dropdownContent || !this.opened)
-                return;
-            const $target = ev.target;
-            if (((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.preventFocusTrap) {
-                this._handleFocusOnNextElementAfterDropdown(ev);
-                return;
-            }
-            if ((_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.contains($target)) {
-                this._handleFocusFromTogglerForwards(ev);
+        this._handleTabExitForward = (ev) => {
+            if (ev.shiftKey || !this.$dropdownContent || !this.opened || !this.preventFocusTrap)
                 return;
+            if (this.$dropdownContent.contains(ev.target)) {
+                ev.preventDefault();
+                this.hide();
+                UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
             }
-            this._handleFocusFromSentinelEndForwards(ev, $target);
         };
-        this._keepFocusWithinDropdownBackwards = (ev) => {
-            if (!this.opened || !this.$dropdownContent)
+        this._handleTabExitBackward = (ev) => {
+            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);
-            }
+            ev.preventDefault();
+            this.hide();
+            UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
         };
         this._hoverToggle = async (ev) => {
             if (window.innerWidth < BREAKPOINTS.xs)
@@ -184,7 +183,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();
         };
@@ -213,13 +212,13 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             host: this,
             target: document.body,
             keys: ['tab'],
-            callback: this._keepFocusWithinDropdownForwards
+            callback: this._handleTabExitForward
         });
         new KeystrokesController({
             host: this,
             target: document.body,
             keys: [['shift', 'tab']],
-            callback: this._keepFocusWithinDropdownBackwards,
+            callback: this._handleTabExitBackward,
             containerSelectors: ['h-dropdown', 'h-dropdown-content']
         });
     }
@@ -296,74 +295,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(SCROLLABLE_CLASS_NAME);
         }
     }
-    _handleFocusOnNextElementAfterDropdown(ev) {
-        ev.preventDefault();
-        this.hide();
-        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;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;"}

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

@@ -1,12 +1,14 @@
 import { TemplateResult } from 'lit';
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import type { TSearchDisplayMode, TSearchSettings } from "./search_types";
+import { FocusTrapController } from "../../../controllers/focus_trap_controller/focus_trap_controller";
 export declare class HSearch extends PhoenixLightLitElement {
     settings: TSearchSettings;
     view: string;
     locale: string;
     isSearchIconFixEnabled: boolean;
     isSearchUxFixesFlagEnabled: boolean;
+    isSearchFocusTrapFixEnabled: boolean;
     displayMode: TSearchDisplayMode;
     moduleInstanceId: string;
     private _historyContextProvider;
@@ -17,9 +19,11 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _inputField;
     private _searchForm;
     private _togglerElement;
+    private _mobileDialogOpener;
     private _id;
     private _openSearchButtonAriaLabelId;
     private _searchContentContainerId;
+    mobileFocusTrapController: FocusTrapController;
     private _searchResultsRef;
     private _searchHistoryRef;
     private _searchMessageRef;
@@ -81,6 +85,8 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _isSuggesterLayerVisible;
     private _preventSubmitOnSearchClear;
     private _resetSearchOnFocusOutside;
+    private _activateMobileDialog;
+    private _deactivateMobileDialog;
     private _setupAriaAttributes;
     private _handleOpenSearch;
     private _handleOpenSearchWithKeyboard;