@shoper/phoenix_design_system 1.18.23-4 → 1.18.23-5

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

@@ -35,8 +35,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this.preventFocusTrap = false;
         this.noAutoFocus = false;
         this._backdropController = new backdrop_controller.BackdropController();
-        this._focusTrapController = new focus_trap_controller.FocusTrapController({
-            host: this,
+        this._focusTrapController = new focus_trap_controller.FocusTrapController(this, {
+            mode: 'toggler',
             getContainer: () => { var _a; return (_a = this.$dropdownContent) !== null && _a !== void 0 ? _a : undefined; },
             getToggler: () => this.$dropdownToggler
         });

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

@@ -34,11 +34,9 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         this._id = v4['default']();
         this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
         this._searchContentContainerId = v4['default']();
-        this._mobileFocusTrapController = new focus_trap_controller.FocusTrapController({
-            host: this,
-            getContainer: () => this,
-            noAutofocus: true,
-            cyclicKeydown: true
+        this._mobileFocusTrapController = new focus_trap_controller.FocusTrapController(this, {
+            mode: 'cyclic',
+            getContainer: () => this
         });
         this._searchResultsRef = ref_js.createRef();
         this._searchHistoryRef = ref_js.createRef();

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/modal/modal.js

@@ -47,8 +47,8 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
             }
         };
         this._backdropController = new backdrop_controller.BackdropController();
-        this._focusTrapController = new focus_trap_controller.FocusTrapController({
-            host: this,
+        this._focusTrapController = new focus_trap_controller.FocusTrapController(this, {
+            mode: 'sentinel',
             getContainer: () => this._contentRef.value,
             noAutofocus: this.noAutofocus
         });
@@ -138,14 +138,14 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this._focusTrapController.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
+        this._focusTrapController.strategy.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
     }
     updated(changedProps) {
         if (changedProps.has(modal_constants.MODAL_OPENED_PROP)) {
             this._propsChangeStrategies[modal_constants.MODAL_OPENED_PROP][String(this[modal_constants.MODAL_OPENED_PROP])]();
         }
         if (changedProps.has('noAutofocus')) {
-            this._focusTrapController.noAutofocus = this.noAutofocus;
+            this._focusTrapController.strategy.noAutofocus = this.noAutofocus;
         }
     }
     async open() {
@@ -163,7 +163,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
                 setTimeout(() => {
                     var _a;
                     (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
-                    this._focusTrapController.focusFirst();
+                    this._focusTrapController.strategy.focusFirst();
                     resolve();
                 }, transitionDuration);
             });

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

@@ -46,8 +46,8 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
             }
         };
         this._backdropController = new backdrop_controller.BackdropController();
-        this._focusTrapController = new focus_trap_controller.FocusTrapController({
-            host: this,
+        this._focusTrapController = new focus_trap_controller.FocusTrapController(this, {
+            mode: 'sentinel',
             getContainer: () => this._contentRef.value
         });
         this._handleCloseFromCloseComponent = async (ev) => {
@@ -136,7 +136,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this._focusTrapController.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
+        this._focusTrapController.strategy.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
     }
     updated(changedProps) {
         if (changedProps.has(sheet_constants.SHEET_OPENED_PROP)) {
@@ -158,7 +158,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
                 setTimeout(() => {
                     var _a;
                     (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_show-${this.transition}-start`, `sheet_show-${this.transition}-end`);
-                    this._focusTrapController.focusFirst();
+                    this._focusTrapController.strategy.focusFirst();
                     resolve();
                 }, transitionDuration);
             });

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

@@ -4,197 +4,53 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 require('lit');
-var utilities = require('@dreamcommerce/utilities');
+var sentinel_focus_trap_strategy = require('./strategies/sentinel_focus_trap_strategy.js');
+var cyclic_focus_trap_strategy = require('./strategies/cyclic_focus_trap_strategy.js');
+var toggler_focus_trap_strategy = require('./strategies/toggler_focus_trap_strategy.js');
 
-var _FocusTrapController_getContainer, _FocusTrapController_getToggler, _FocusTrapController_cyclicKeydown, _FocusTrapController_active, _FocusTrapController_sentinelStart, _FocusTrapController_sentinelEnd;
+var _FocusTrapController_strategy;
+function createStrategy(props) {
+    switch (props.mode) {
+        case 'sentinel': return new sentinel_focus_trap_strategy.SentinelFocusTrapStrategy({ getContainer: props.getContainer, noAutofocus: props.noAutofocus });
+        case 'cyclic': return new cyclic_focus_trap_strategy.CyclicFocusTrapStrategy(props.getContainer);
+        case 'toggler': return new toggler_focus_trap_strategy.TogglerFocusTrapStrategy({ getContainer: props.getContainer, getToggler: props.getToggler });
+    }
+}
+/**
+ * A thin Lit ReactiveController that owns the lifecycle of a FocusTrapStrategy.
+ *
+ * Pass a discriminated-union `props` object with `mode: 'sentinel' | 'cyclic' | 'toggler'`
+ * and the required options for that mode. The controller creates the correct strategy
+ * internally and exposes it as a typed `.strategy` property for mode-specific API access
+ * (e.g. `controller.strategy.setSentinels(...)` when mode is 'sentinel').
+ */
 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;
+    constructor(host, props) {
+        _FocusTrapController_strategy.set(this, void 0);
+        tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_strategy, createStrategy(props), "f");
         host.addController(this);
     }
+    /** The underlying strategy instance, typed to match the mode passed at construction. */
+    get strategy() {
+        return tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f");
+    }
     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);
-        }
+        tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").attach();
     }
     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");
+        tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").detach();
     }
     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);
-        }
+        tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").activate();
     }
     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));
+        tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").deactivate();
     }
     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);
+        return tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").getFocusableElements(container);
     }
 }
-_FocusTrapController_getContainer = new WeakMap(), _FocusTrapController_getToggler = new WeakMap(), _FocusTrapController_cyclicKeydown = new WeakMap(), _FocusTrapController_active = new WeakMap(), _FocusTrapController_sentinelStart = new WeakMap(), _FocusTrapController_sentinelEnd = new WeakMap();
+_FocusTrapController_strategy = 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

@@ -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;"}
+{"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;"}

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

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var focus_trap_strategy = require('./focus_trap_strategy.js');
+
+/**
+ * Cyclic keydown focus trap.
+ *
+ * No sentinel DOM 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.
+ *
+ * Suitable when the host is not portaled and `inert` is not applied to background content
+ * (e.g. a full-screen search overlay on mobile).
+ */
+class CyclicFocusTrapStrategy extends focus_trap_strategy.FocusTrapStrategy {
+    constructor(getContainer) {
+        super(getContainer);
+        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);
+    }
+}
+
+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.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;"}

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

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utilities = require('@dreamcommerce/utilities');
+
+class FocusTrapStrategy {
+    constructor(getContainer) {
+        this.getContainer = getContainer;
+        this.active = false;
+    }
+    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.FocusTrapStrategy = FocusTrapStrategy;
+//# sourceMappingURL=focus_trap_strategy.js.map

package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/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;"}

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

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var utilities = require('@dreamcommerce/utilities');
+var focus_trap_strategy = require('./focus_trap_strategy.js');
+
+var _SentinelFocusTrapStrategy_sentinelStart, _SentinelFocusTrapStrategy_sentinelEnd;
+/**
+ * Sentinel mode focus trap.
+ *
+ * Uses two inert bookend elements (sentinelStart / sentinelEnd) to detect when focus
+ * escapes the container and cycle it back. Appropriate for modal dialogs and sheets where
+ * background content is marked `inert`, giving the browser an extra safety net.
+ *
+ * Reacts on `keyup` so that the browser's native focus movement has already completed
+ * before we redirect it.
+ */
+class SentinelFocusTrapStrategy extends focus_trap_strategy.FocusTrapStrategy {
+    constructor({ getContainer, noAutofocus = false }) {
+        super(getContainer);
+        _SentinelFocusTrapStrategy_sentinelStart.set(this, void 0);
+        _SentinelFocusTrapStrategy_sentinelEnd.set(this, void 0);
+        this._handleKeyUp = (ev) => {
+            var _a;
+            if (!this.active || ev.code !== 'Tab')
+                return;
+            const container = this.getContainer();
+            if (!container)
+                return;
+            if (ev.shiftKey) {
+                if (document.activeElement === tslib_es6.__classPrivateFieldGet(this, _SentinelFocusTrapStrategy_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, _SentinelFocusTrapStrategy_sentinelEnd, "f")) {
+                utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(container);
+                ev.preventDefault();
+            }
+        };
+        this.noAutofocus = noAutofocus;
+    }
+    /** Call once in firstUpdated with the two bookend sentinel elements. */
+    setSentinels(start, end) {
+        tslib_es6.__classPrivateFieldSet(this, _SentinelFocusTrapStrategy_sentinelStart, start, "f");
+        tslib_es6.__classPrivateFieldSet(this, _SentinelFocusTrapStrategy_sentinelEnd, end, "f");
+    }
+    /**
+     * 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 = this.getContainer();
+            if (!container)
+                return;
+            const focusableElements = this.getFocusableElements(container);
+            if (focusableElements.length > 0) {
+                focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
+            }
+        });
+    }
+    attach() {
+        document.addEventListener('keyup', this._handleKeyUp);
+    }
+    detach() {
+        document.removeEventListener('keyup', this._handleKeyUp);
+    }
+    activate() {
+        this.active = true;
+        if (!this.noAutofocus) {
+            const scrollY = window.scrollY;
+            setTimeout(() => {
+                var _a;
+                (_a = tslib_es6.__classPrivateFieldGet(this, _SentinelFocusTrapStrategy_sentinelStart, "f")) === null || _a === void 0 ? void 0 : _a.focus();
+                window.scrollTo(0, scrollY);
+            }, 0);
+        }
+    }
+}
+_SentinelFocusTrapStrategy_sentinelStart = new WeakMap(), _SentinelFocusTrapStrategy_sentinelEnd = new WeakMap();
+
+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.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var focus_trap_strategy = require('./focus_trap_strategy.js');
+
+var _TogglerFocusTrapStrategy_getToggler;
+/**
+ * Toggler mode focus trap.
+ *
+ * Focus cycles: toggler → content[0] → … → content[last] → toggler (and reverse).
+ * Uses `keydown` + `preventDefault` so the browser never moves focus on its own.
+ *
+ * Suitable for dropdowns where the toggler button should stay in the Tab cycle
+ * alongside the dropdown content.
+ */
+class TogglerFocusTrapStrategy extends focus_trap_strategy.FocusTrapStrategy {
+    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) {
+                // 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, _TogglerFocusTrapStrategy_getToggler, getToggler, "f");
+    }
+    attach() {
+        document.addEventListener('keydown', this._handleKeyDown);
+    }
+    detach() {
+        document.removeEventListener('keydown', this._handleKeyDown);
+    }
+}
+_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.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.js

@@ -31,8 +31,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this.preventFocusTrap = false;
         this.noAutoFocus = false;
         this._backdropController = new BackdropController();
-        this._focusTrapController = new FocusTrapController({
-            host: this,
+        this._focusTrapController = new FocusTrapController(this, {
+            mode: 'toggler',
             getContainer: () => { var _a; return (_a = this.$dropdownContent) !== null && _a !== void 0 ? _a : undefined; },
             getToggler: () => this.$dropdownToggler
         });

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

@@ -30,11 +30,9 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         this._id = v4();
         this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
         this._searchContentContainerId = v4();
-        this._mobileFocusTrapController = new FocusTrapController({
-            host: this,
-            getContainer: () => this,
-            noAutofocus: true,
-            cyclicKeydown: true
+        this._mobileFocusTrapController = new FocusTrapController(this, {
+            mode: 'cyclic',
+            getContainer: () => this
         });
         this._searchResultsRef = createRef();
         this._searchHistoryRef = createRef();