@shoper/phoenix_design_system 1.18.23-4 → 1.18.23-6

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();

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

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

@@ -43,8 +43,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
             }
         };
         this._backdropController = new BackdropController();
-        this._focusTrapController = new FocusTrapController({
-            host: this,
+        this._focusTrapController = new FocusTrapController(this, {
+            mode: 'sentinel',
             getContainer: () => this._contentRef.value,
             noAutofocus: this.noAutofocus
         });
@@ -134,14 +134,14 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
     }
     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_OPENED_PROP)) {
             this._propsChangeStrategies[MODAL_OPENED_PROP][String(this[MODAL_OPENED_PROP])]();
         }
         if (changedProps.has('noAutofocus')) {
-            this._focusTrapController.noAutofocus = this.noAutofocus;
+            this._focusTrapController.strategy.noAutofocus = this.noAutofocus;
         }
     }
     async open() {
@@ -159,7 +159,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
                 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/esm/packages/phoenix/src/components/sheet/sheet.js

@@ -42,8 +42,8 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
             }
         };
         this._backdropController = new BackdropController();
-        this._focusTrapController = new FocusTrapController({
-            host: this,
+        this._focusTrapController = new FocusTrapController(this, {
+            mode: 'sentinel',
             getContainer: () => this._contentRef.value
         });
         this._handleCloseFromCloseComponent = async (ev) => {
@@ -132,7 +132,7 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
     }
     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_OPENED_PROP)) {
@@ -154,7 +154,7 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
                 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/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.d.ts

@@ -1,24 +1,17 @@
-import { ReactiveController } from 'lit';
-import { TFocusTrapControllerProps } from './focus_trap_controller_types';
-export declare class FocusTrapController implements ReactiveController {
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { SentinelFocusTrapStrategy } from './strategies/sentinel_focus_trap_strategy';
+import type { CyclicFocusTrapStrategy } from './strategies/cyclic_focus_trap_strategy';
+import type { TogglerFocusTrapStrategy } from './strategies/toggler_focus_trap_strategy';
+import type { TFocusTrapProps, TSentinelFocusTrapProps, TCyclicFocusTrapProps } from './focus_trap_controller_types';
+declare type StrategyFor<T extends TFocusTrapProps> = T extends TSentinelFocusTrapProps ? SentinelFocusTrapStrategy : T extends TCyclicFocusTrapProps ? CyclicFocusTrapStrategy : TogglerFocusTrapStrategy;
+export declare class FocusTrapController<TProps extends TFocusTrapProps = TFocusTrapProps> implements ReactiveController {
     #private;
-    noAutofocus: boolean;
-    constructor({ host, getContainer, noAutofocus, getToggler, cyclicKeydown }: TFocusTrapControllerProps);
+    constructor(host: ReactiveControllerHost, { mode, ...strategyProps }: TProps);
+    get strategy(): StrategyFor<TProps>;
     hostConnected(): void;
     hostDisconnected(): void;
-    /** Sentinel mode only: call once in firstUpdated with the two bookend elements. */
-    setSentinels(start: HTMLElement, end: HTMLElement): void;
     activate(): void;
     deactivate(): void;
-    /**
-     * Sentinel mode: move focus to the first real interactive element after the
-     * open transition completes (skips sentinelStart at index 0).
-     */
-    focusFirst(): void;
-    private _getFocusableElements;
     getFocusableElements(container: HTMLElement): HTMLElement[];
-    private _isElementTrulyFocusable;
-    private _handleSentinelModeKeyUp;
-    private _handleCyclicKeyDown;
-    private _handleTogglerModeKeyDown;
 }
+export {};

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

@@ -1,196 +1,34 @@
-import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
-import { UiDomUtils } from '@dreamcommerce/utilities';
+import { FOCUS_TRAP_STRATEGY_STRATEGIES } from './strategies/focus_trap_strategy_constants.js';
 
-var _FocusTrapController_getContainer, _FocusTrapController_getToggler, _FocusTrapController_cyclicKeydown, _FocusTrapController_active, _FocusTrapController_sentinelStart, _FocusTrapController_sentinelEnd;
+var _FocusTrapController_strategy;
 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 (!__classPrivateFieldGet(this, _FocusTrapController_active, "f") || ev.code !== 'Tab')
-                return;
-            const container = __classPrivateFieldGet(this, _FocusTrapController_getContainer, "f").call(this);
-            if (!container)
-                return;
-            if (ev.shiftKey) {
-                if (document.activeElement === __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 === __classPrivateFieldGet(this, _FocusTrapController_sentinelEnd, "f")) {
-                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 (!__classPrivateFieldGet(this, _FocusTrapController_active, "f") || ev.code !== 'Tab')
-                return;
-            const container = __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 (!__classPrivateFieldGet(this, _FocusTrapController_active, "f") || ev.code !== 'Tab')
-                return;
-            const container = __classPrivateFieldGet(this, _FocusTrapController_getContainer, "f").call(this);
-            const toggler = (_a = __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();
-                }
-            }
-        };
-        __classPrivateFieldSet(this, _FocusTrapController_getContainer, getContainer, "f");
-        __classPrivateFieldSet(this, _FocusTrapController_getToggler, getToggler, "f");
-        __classPrivateFieldSet(this, _FocusTrapController_cyclicKeydown, cyclicKeydown, "f");
-        this.noAutofocus = noAutofocus;
+    constructor(host, { mode, ...strategyProps }) {
+        _FocusTrapController_strategy.set(this, void 0);
+        __classPrivateFieldSet(this, _FocusTrapController_strategy, new FOCUS_TRAP_STRATEGY_STRATEGIES[mode](strategyProps), "f");
         host.addController(this);
     }
+    get strategy() {
+        return __classPrivateFieldGet(this, _FocusTrapController_strategy, "f");
+    }
     hostConnected() {
-        if (__classPrivateFieldGet(this, _FocusTrapController_cyclicKeydown, "f")) {
-            document.addEventListener('keydown', this._handleCyclicKeyDown);
-        }
-        else if (__classPrivateFieldGet(this, _FocusTrapController_getToggler, "f")) {
-            document.addEventListener('keydown', this._handleTogglerModeKeyDown);
-        }
-        else {
-            document.addEventListener('keyup', this._handleSentinelModeKeyUp);
-        }
+        __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").attach();
     }
     hostDisconnected() {
-        if (__classPrivateFieldGet(this, _FocusTrapController_cyclicKeydown, "f")) {
-            document.removeEventListener('keydown', this._handleCyclicKeyDown);
-        }
-        else if (__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) {
-        __classPrivateFieldSet(this, _FocusTrapController_sentinelStart, start, "f");
-        __classPrivateFieldSet(this, _FocusTrapController_sentinelEnd, end, "f");
+        __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").detach();
     }
     activate() {
-        __classPrivateFieldSet(this, _FocusTrapController_active, true, "f");
-        // Sentinel mode: move focus to sentinelStart to prime the trap.
-        if (!__classPrivateFieldGet(this, _FocusTrapController_getToggler, "f") && !this.noAutofocus) {
-            const scrollY = window.scrollY;
-            setTimeout(() => {
-                var _a;
-                (_a = __classPrivateFieldGet(this, _FocusTrapController_sentinelStart, "f")) === null || _a === void 0 ? void 0 : _a.focus();
-                window.scrollTo(0, scrollY);
-            }, 0);
-        }
+        __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").activate();
     }
     deactivate() {
-        __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 = __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 UiDomUtils.getFocusableElements(container).filter(($el) => this._isElementTrulyFocusable($el));
+        __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 __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();
 
 export { FocusTrapController };
 //# sourceMappingURL=focus_trap_controller.js.map

package/build/esm/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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/focus_trap_controller/focus_trap_controller_types.d.ts

@@ -1,14 +1,15 @@
-import { ReactiveControllerHost } from 'lit';
-export declare type TFocusTrapControllerProps = {
-    host: ReactiveControllerHost & HTMLElement;
+export declare type TSentinelFocusTrapProps = {
+    mode: 'sentinel';
     getContainer: () => HTMLElement | undefined;
     noAutofocus?: boolean;
-    /** When provided, enables toggler mode: focus cycles between the toggler and the container's focusable elements. */
-    getToggler?: () => HTMLElement | null | undefined;
-    /**
-     * When true, enables cyclic keydown mode: Tab past the last focusable element wraps to the
-     * first, and Shift+Tab past the first wraps to the last. No sentinel DOM elements required.
-     * Use this when the host element is not portaled and `inert` is not applied to background content.
-     */
-    cyclicKeydown?: boolean;
 };
+export declare type TCyclicFocusTrapProps = {
+    mode: 'cyclic';
+    getContainer: () => HTMLElement | undefined;
+};
+export declare type TTogglerFocusTrapProps = {
+    mode: 'toggler';
+    getContainer: () => HTMLElement | undefined;
+    getToggler: () => HTMLElement | null | undefined;
+};
+export declare type TFocusTrapProps = TSentinelFocusTrapProps | TCyclicFocusTrapProps | TTogglerFocusTrapProps;

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js

@@ -1,2 +1,2 @@
-import 'lit';
+export {};
 //# sourceMappingURL=focus_trap_controller_types.js.map

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus_trap_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/focus_trap_controller/focus_trap_controller_types.ts"],"names":[],"mappings":"AAAA,OAAuC,KAAK,CAAC"}
+{"version":3,"file":"focus_trap_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/focus_trap_controller/focus_trap_controller_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy.d.ts

@@ -0,0 +1,21 @@
+import { FocusTrapStrategy } from './focus_trap_strategy';
+import { ICyclicFocusTrapStrategy } from './focus_trap_strategy_types';
+export declare type TCyclicFocusTrapStrategyProps = {
+    getContainer: () => HTMLElement | undefined;
+};
+/**
+ * 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).
+ */
+export declare class CyclicFocusTrapStrategy extends FocusTrapStrategy implements ICyclicFocusTrapStrategy {
+    constructor({ getContainer }: TCyclicFocusTrapStrategyProps);
+    attach(): void;
+    detach(): void;
+    private _handleKeyDown;
+}

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

@@ -0,0 +1,49 @@
+import { FocusTrapStrategy } from './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 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);
+    }
+}
+
+export { CyclicFocusTrapStrategy };
+//# sourceMappingURL=cyclic_focus_trap_strategy.js.map

package/build/esm/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;"}

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.d.ts

@@ -0,0 +1,12 @@
+import { IFocusTrapStrategy } from './focus_trap_strategy_types';
+export declare abstract class FocusTrapStrategy implements IFocusTrapStrategy {
+    protected readonly getContainer: () => HTMLElement | undefined;
+    protected active: boolean;
+    constructor(getContainer: () => HTMLElement | undefined);
+    abstract attach(): void;
+    abstract detach(): void;
+    activate(): void;
+    deactivate(): void;
+    getFocusableElements(container: HTMLElement): HTMLElement[];
+    private _isElementTrulyFocusable;
+}

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

@@ -0,0 +1,32 @@
+import { UiDomUtils } from '@dreamcommerce/utilities';
+
+class FocusTrapStrategy {
+    constructor(getContainer) {
+        this.getContainer = getContainer;
+        this.active = false;
+    }
+    activate() {
+        this.active = true;
+    }
+    deactivate() {
+        this.active = false;
+    }
+    getFocusableElements(container) {
+        return 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);
+    }
+}
+
+export { FocusTrapStrategy };
+//# sourceMappingURL=focus_trap_strategy.js.map

package/build/esm/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;"}

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.d.ts

@@ -0,0 +1,13 @@
+import { CyclicFocusTrapStrategy } from './cyclic_focus_trap_strategy';
+import { TogglerFocusTrapStrategy } from './toggler_focus_trap_strategy';
+import { SentinelFocusTrapStrategy } from './sentinel_focus_trap_strategy';
+export declare const FOCUS_TRAP_STRATEGY_TYPES: {
+    readonly cyclic: "cyclic";
+    readonly toggler: "toggler";
+    readonly sentinel: "sentinel";
+};
+export declare const FOCUS_TRAP_STRATEGY_STRATEGIES: {
+    readonly cyclic: typeof CyclicFocusTrapStrategy;
+    readonly toggler: typeof TogglerFocusTrapStrategy;
+    readonly sentinel: typeof SentinelFocusTrapStrategy;
+};

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

@@ -0,0 +1,17 @@
+import { CyclicFocusTrapStrategy } from './cyclic_focus_trap_strategy.js';
+import { TogglerFocusTrapStrategy } from './toggler_focus_trap_strategy.js';
+import { SentinelFocusTrapStrategy } from './sentinel_focus_trap_strategy.js';
+
+const FOCUS_TRAP_STRATEGY_TYPES = {
+    cyclic: 'cyclic',
+    toggler: 'toggler',
+    sentinel: 'sentinel',
+};
+const FOCUS_TRAP_STRATEGY_STRATEGIES = {
+    [FOCUS_TRAP_STRATEGY_TYPES.cyclic]: CyclicFocusTrapStrategy,
+    [FOCUS_TRAP_STRATEGY_TYPES.toggler]: TogglerFocusTrapStrategy,
+    [FOCUS_TRAP_STRATEGY_TYPES.sentinel]: SentinelFocusTrapStrategy,
+};
+
+export { FOCUS_TRAP_STRATEGY_STRATEGIES, FOCUS_TRAP_STRATEGY_TYPES };
+//# sourceMappingURL=focus_trap_strategy_constants.js.map

package/build/esm/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;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_types.d.ts

@@ -0,0 +1,15 @@
+export interface IFocusTrapStrategy {
+    attach(): void;
+    detach(): void;
+    activate(): void;
+    deactivate(): void;
+    getFocusableElements(container: HTMLElement): HTMLElement[];
+}
+export interface ICyclicFocusTrapStrategy extends IFocusTrapStrategy {
+}
+export interface ITogglerFocusTrapStrategy extends IFocusTrapStrategy {
+}
+export interface ISentinelFocusTrapStrategy extends IFocusTrapStrategy {
+    setSentinels(start: HTMLElement, end: HTMLElement): void;
+    focusFirst(): void;
+}

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=focus_trap_strategy_types.js.map

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus_trap_strategy_types.js","sourceRoot":"","sources":["../../../../../../../../src/controllers/focus_trap_controller/strategies/focus_trap_strategy_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.d.ts

@@ -0,0 +1,32 @@
+import { FocusTrapStrategy } from './focus_trap_strategy';
+import { ISentinelFocusTrapStrategy } from './focus_trap_strategy_types';
+export declare type TSentinelFocusTrapStrategyProps = {
+    getContainer: () => HTMLElement | undefined;
+    noAutofocus?: boolean;
+};
+/**
+ * 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.
+ */
+export declare class SentinelFocusTrapStrategy extends FocusTrapStrategy implements ISentinelFocusTrapStrategy {
+    #private;
+    noAutofocus: boolean;
+    constructor({ getContainer, noAutofocus }: TSentinelFocusTrapStrategyProps);
+    /** Call once in firstUpdated with the two bookend sentinel elements. */
+    setSentinels(start: HTMLElement, end: HTMLElement): void;
+    /**
+     * Move focus to the first real interactive element after the open transition
+     * completes (skips sentinelStart at index 0).
+     */
+    focusFirst(): void;
+    attach(): void;
+    detach(): void;
+    activate(): void;
+    private _handleKeyUp;
+}