@shoper/phoenix_design_system 1.18.23-1 → 1.18.23-10

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

@@ -9,6 +9,8 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
 import { BackdropController } from '../backdrop/controller/backdrop_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 { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
 import { HModalClose } from './modal_close.js';
 
@@ -21,6 +23,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
         this.transition = 'scale';
         this.modalLabel = '';
         this.noAutofocus = false;
+        this.isSearchFocusTrapFixEnabled = false;
         this._firstFocusableElement = undefined;
         this._focusableElements = null;
         this._lastFocusableElement = undefined;
@@ -36,22 +39,35 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
                     document.addEventListener('keydown', this._bindCloseOnEsc);
                     document.addEventListener(BACKDROP_EVENTS.clicked, this.close);
                     this._dispatchModalOpenedEvent();
-                    if (!this.noAutofocus) {
-                        setTimeout(() => {
-                            var _a;
-                            (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
-                            window.scrollTo(0, scrollY);
-                        }, 0);
+                    this._focusTrapController.activate();
+                    if (this.isSearchFocusTrapFixEnabled) {
+                        this._focusTrapController.activate();
+                    }
+                    else {
+                        if (!this.noAutofocus) {
+                            setTimeout(() => {
+                                var _a;
+                                (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                                window.scrollTo(0, scrollY);
+                            }, 0);
+                        }
                     }
                 },
                 false: () => {
                     HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
                     document.removeEventListener('keydown', this._bindCloseOnEsc);
                     document.removeEventListener(BACKDROP_EVENTS.clicked, this.close);
+                    if (this.isSearchFocusTrapFixEnabled)
+                        this._focusTrapController.deactivate();
                 }
             }
         };
         this._backdropController = new BackdropController();
+        this._focusTrapController = new FocusTrapController(this, {
+            mode: FOCUS_TRAP_STRATEGY_TYPES.sentinel,
+            getContainer: () => this._contentRef.value,
+            noAutofocus: this.noAutofocus
+        });
         this._keepFocusWithinModal = (ev) => {
             var _a;
             const isTabPressed = ev.code === 'Tab';
@@ -145,7 +161,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         HModal_1._appendModalsPortal();
-        document.addEventListener('keyup', this._keepFocusWithinModal);
+        if (!this.isSearchFocusTrapFixEnabled)
+            document.addEventListener('keyup', this._keepFocusWithinModal);
         document.addEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
     }
     disconnectedCallback() {
@@ -154,17 +171,23 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
             this.close();
         document.removeEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
         document.removeEventListener('keydown', this._bindCloseOnEsc);
-        document.removeEventListener('keyup', this._keepFocusWithinModal);
+        if (!this.isSearchFocusTrapFixEnabled)
+            document.removeEventListener('keyup', this._keepFocusWithinModal);
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this._firstFocusableElement = this._focusSentinelStart.value;
-        this._lastFocusableElement = this._focusSentinelEnd.value;
+        if (!this.isSearchFocusTrapFixEnabled) {
+            this._firstFocusableElement = this._focusSentinelStart.value;
+            this._lastFocusableElement = this._focusSentinelEnd.value;
+        }
     }
     updated(changedProps) {
         if (changedProps.has(MODAL_OPENED_PROP)) {
             this._propsChangeStrategies[MODAL_OPENED_PROP][String(this[MODAL_OPENED_PROP])]();
         }
+        if (this.isSearchFocusTrapFixEnabled && changedProps.has('noAutofocus')) {
+            this._focusTrapController.strategy.noAutofocus = this.noAutofocus;
+        }
     }
     _setFocusToFirstFocusableElementInModalOrCloseBtn() {
         if (this.noAutofocus)
@@ -193,7 +216,8 @@ 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._setFocusToFirstFocusableElementInModalOrCloseBtn();
+                    if (!this.isSearchFocusTrapFixEnabled)
+                        this._setFocusToFirstFocusableElementInModalOrCloseBtn();
                     resolve();
                 }, transitionDuration);
             });
@@ -252,6 +276,10 @@ __decorate([
     property({ type: Boolean, attribute: 'no-autofocus' }),
     __metadata("design:type", Object)
 ], HModal.prototype, "noAutofocus", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
+    __metadata("design:type", Boolean)
+], HModal.prototype, "isSearchFocusTrapFixEnabled", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)

package/build/esm/packages/phoenix/src/components/modal/modal.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/sheet/sheet.d.ts

@@ -6,6 +6,7 @@ export declare class HSheet extends PhoenixLightLitElement {
     class: string;
     transition: string;
     sheetLabel: string;
+    isSearchFocusTrapFixEnabled: boolean;
     _firstFocusableElement: HTMLElement | undefined;
     _focusableElements: HTMLElement[] | null;
     _lastFocusableElement: HTMLElement | undefined;
@@ -16,6 +17,7 @@ export declare class HSheet extends PhoenixLightLitElement {
     private _propsChangeStrategies;
     private static openSheets;
     private _backdropController;
+    private _focusTrapController;
     private static _appendSheetPortal;
     static isSomeSheetOpen(): boolean;
     constructor();

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

@@ -9,6 +9,8 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
 import { BackdropController } from '../backdrop/controller/backdrop_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 { SHEET_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_SHEET, SHEETS_PORTAL_NAME, SHEET_EVENTS } from './sheet_constants.js';
 import { HSheetClose } from './sheet_close.js';
 
@@ -20,6 +22,7 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
         this.class = '';
         this.transition = 'scale';
         this.sheetLabel = '';
+        this.isSearchFocusTrapFixEnabled = false;
         this._firstFocusableElement = undefined;
         this._focusableElements = null;
         this._lastFocusableElement = undefined;
@@ -35,20 +38,31 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
                     document.addEventListener('keydown', this._bindCloseOnEsc);
                     document.addEventListener(BACKDROP_EVENTS.clicked, this.close);
                     this._dispatchSheetOpenedEvent();
-                    setTimeout(() => {
-                        var _a;
-                        (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
-                        window.scrollTo(0, scrollY);
-                    }, 0);
+                    if (this.isSearchFocusTrapFixEnabled) {
+                        this._focusTrapController.activate();
+                    }
+                    else {
+                        setTimeout(() => {
+                            var _a;
+                            (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                            window.scrollTo(0, scrollY);
+                        }, 0);
+                    }
                 },
                 false: () => {
                     HSheet_1.openSheets = HSheet_1.openSheets.filter((sheet) => sheet !== this);
                     document.removeEventListener('keydown', this._bindCloseOnEsc);
                     document.removeEventListener(BACKDROP_EVENTS.clicked, this.close);
+                    if (this.isSearchFocusTrapFixEnabled)
+                        this._focusTrapController.deactivate();
                 }
             }
         };
         this._backdropController = new BackdropController();
+        this._focusTrapController = new FocusTrapController(this, {
+            mode: FOCUS_TRAP_STRATEGY_TYPES.sentinel,
+            getContainer: () => this._contentRef.value
+        });
         this._keepFocusWithinSheet = (ev) => {
             var _a;
             const isTabPressed = ev.code === 'Tab';
@@ -142,7 +156,8 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         HSheet_1._appendSheetPortal();
-        document.addEventListener('keyup', this._keepFocusWithinSheet);
+        if (!this.isSearchFocusTrapFixEnabled)
+            document.addEventListener('keyup', this._keepFocusWithinSheet);
         document.addEventListener(SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
     }
     disconnectedCallback() {
@@ -151,12 +166,15 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
             this.close();
         document.removeEventListener(SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
         document.removeEventListener('keydown', this._bindCloseOnEsc);
-        document.removeEventListener('keyup', this._keepFocusWithinSheet);
+        if (!this.isSearchFocusTrapFixEnabled)
+            document.removeEventListener('keyup', this._keepFocusWithinSheet);
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this._firstFocusableElement = this._focusSentinelStart.value;
-        this._lastFocusableElement = this._focusSentinelEnd.value;
+        if (!this.isSearchFocusTrapFixEnabled) {
+            this._firstFocusableElement = this._focusSentinelStart.value;
+            this._lastFocusableElement = this._focusSentinelEnd.value;
+        }
     }
     updated(changedProps) {
         if (changedProps.has(SHEET_OPENED_PROP)) {
@@ -188,7 +206,8 @@ 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._setFocusToFirstFocusableElementInSheetOrCloseBtn();
+                    if (!this.isSearchFocusTrapFixEnabled)
+                        this._setFocusToFirstFocusableElementInSheetOrCloseBtn();
                     resolve();
                 }, transitionDuration);
             });
@@ -241,6 +260,10 @@ __decorate([
     property({ type: String, attribute: 'sheet-label' }),
     __metadata("design:type", Object)
 ], HSheet.prototype, "sheetLabel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
+    __metadata("design:type", Boolean)
+], HSheet.prototype, "isSearchFocusTrapFixEnabled", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)

package/build/esm/packages/phoenix/src/components/sheet/sheet.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts

@@ -0,0 +1,13 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { TFocusTrapProps } from './focus_trap_controller_types';
+import { IBaseFocusTrapStrategy } from './strategies/base_focus_trap_strategy_types';
+export declare class FocusTrapController implements ReactiveController {
+    #private;
+    constructor(host: ReactiveControllerHost, props: TFocusTrapProps);
+    get strategy(): IBaseFocusTrapStrategy;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    activate(): void;
+    deactivate(): void;
+    getFocusableElements(container: HTMLElement): HTMLElement[];
+}

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

@@ -0,0 +1,43 @@
+import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
+import 'lit';
+import { SentinelFocusTrapStrategy } from './strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy.js';
+import { CyclicFocusTrapStrategy } from './strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js';
+import { TogglerFocusTrapStrategy } from './strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy.js';
+import { FOCUS_TRAP_STRATEGY_TYPES } from './strategies/focus_trap_strategy_constants.js';
+
+var _a, _FocusTrapController_strategy, _FocusTrapController_createStrategy;
+class FocusTrapController {
+    constructor(host, props) {
+        _FocusTrapController_strategy.set(this, void 0);
+        __classPrivateFieldSet(this, _FocusTrapController_strategy, __classPrivateFieldGet(FocusTrapController, _a, "m", _FocusTrapController_createStrategy).call(FocusTrapController, props), "f");
+        host.addController(this);
+    }
+    get strategy() {
+        return __classPrivateFieldGet(this, _FocusTrapController_strategy, "f");
+    }
+    hostConnected() {
+        __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").attach();
+    }
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").detach();
+    }
+    activate() {
+        __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").activate();
+    }
+    deactivate() {
+        __classPrivateFieldGet(this, _FocusTrapController_strategy, "f").deactivate();
+    }
+    getFocusableElements(container) {
+        return __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_TYPES.sentinel: return new SentinelFocusTrapStrategy(props);
+        case FOCUS_TRAP_STRATEGY_TYPES.cyclic: return new CyclicFocusTrapStrategy(props);
+        case FOCUS_TRAP_STRATEGY_TYPES.toggler: return new TogglerFocusTrapStrategy(props);
+    }
+};
+
+export { FocusTrapController };
+//# sourceMappingURL=focus_trap_controller.js.map

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

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

@@ -0,0 +1,14 @@
+import { TCyclicFocusTrapStrategyProps } from "./strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types";
+import { FOCUS_TRAP_STRATEGY_TYPES } from "./strategies/focus_trap_strategy_constants";
+import { TSentinelFocusTrapStrategyProps } from "./strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types";
+import { TTogglerFocusTrapStrategyProps } from "./strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types";
+export declare type TSentinelFocusTrapProps = TSentinelFocusTrapStrategyProps & {
+    mode: typeof FOCUS_TRAP_STRATEGY_TYPES.sentinel;
+};
+export declare type TCyclicFocusTrapProps = TCyclicFocusTrapStrategyProps & {
+    mode: typeof FOCUS_TRAP_STRATEGY_TYPES.cyclic;
+};
+export declare type TTogglerFocusTrapProps = TTogglerFocusTrapStrategyProps & {
+    mode: typeof FOCUS_TRAP_STRATEGY_TYPES.toggler;
+};
+export declare type TFocusTrapProps = TSentinelFocusTrapProps | TCyclicFocusTrapProps | TTogglerFocusTrapProps;

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

@@ -0,0 +1,5 @@
+import "./strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types";
+import "./strategies/focus_trap_strategy_constants";
+import "./strategies/sentinel_focus_trap_strategy/sentinel_focus_trap_strategy_types";
+import "./strategies/toggler_focus_trap_strategy/toggler_focus_trap_strategy_types";
+//# sourceMappingURL=focus_trap_controller_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"focus_trap_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/focus_trap_controller/focus_trap_controller_types.ts"],"names":[],"mappings":"AAAA,OAA8C,0EAA0E,CAAC;AACzH,OAA0C,4CAA4C,CAAC;AACvF,OAAgD,8EAA8E,CAAC;AAC/H,OAA+C,4EAA4E,CAAC"}

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

@@ -0,0 +1,14 @@
+import { IBaseFocusTrapStrategy } from './base_focus_trap_strategy_types';
+export declare abstract class BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
+    protected readonly getContainer: () => HTMLElement | undefined;
+    protected active: boolean;
+    noAutofocus: boolean;
+    constructor(getContainer: () => HTMLElement | undefined);
+    attach(): void;
+    detach(): void;
+    activate(): void;
+    deactivate(): void;
+    getFocusableElements(container: HTMLElement): HTMLElement[];
+    protected _handleKeyDown: (ev: KeyboardEvent) => void;
+    private _isElementTrulyFocusable;
+}

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

@@ -0,0 +1,62 @@
+import { UiDomUtils } from '@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 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 { BaseFocusTrapStrategy };
+//# sourceMappingURL=base_focus_trap_strategy.js.map

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

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

@@ -0,0 +1,8 @@
+export interface IBaseFocusTrapStrategy {
+    noAutofocus: boolean;
+    attach(): void;
+    detach(): void;
+    activate(): void;
+    deactivate(): void;
+    getFocusableElements(container: HTMLElement): HTMLElement[];
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy';
+import { IBaseFocusTrapStrategy } from '../base_focus_trap_strategy_types';
+import { TCyclicFocusTrapStrategyProps } from './cyclic_focus_trap_strategy_types';
+export declare class CyclicFocusTrapStrategy extends BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
+    constructor({ getContainer }: TCyclicFocusTrapStrategyProps);
+}

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

@@ -0,0 +1,10 @@
+import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy.js';
+
+class CyclicFocusTrapStrategy extends BaseFocusTrapStrategy {
+    constructor({ getContainer }) {
+        super(getContainer);
+    }
+}
+
+export { CyclicFocusTrapStrategy };
+//# sourceMappingURL=cyclic_focus_trap_strategy.js.map

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

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

@@ -0,0 +1,3 @@
+export declare type TCyclicFocusTrapStrategyProps = {
+    getContainer: () => HTMLElement | undefined;
+};

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

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

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

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

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

@@ -0,0 +1,5 @@
+export declare const FOCUS_TRAP_STRATEGY_TYPES: {
+    readonly cyclic: "cyclic";
+    readonly toggler: "toggler";
+    readonly sentinel: "sentinel";
+};

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

@@ -0,0 +1,8 @@
+const FOCUS_TRAP_STRATEGY_TYPES = {
+    cyclic: 'cyclic',
+    toggler: 'toggler',
+    sentinel: 'sentinel',
+};
+
+export { 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;"}

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

@@ -0,0 +1,7 @@
+import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy';
+import { IBaseFocusTrapStrategy } from '../base_focus_trap_strategy_types';
+import { TSentinelFocusTrapStrategyProps } from './sentinel_focus_trap_strategy_types';
+export declare class SentinelFocusTrapStrategy extends BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
+    constructor({ getContainer, noAutofocus }: TSentinelFocusTrapStrategyProps);
+    activate(): void;
+}

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

@@ -0,0 +1,25 @@
+import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy.js';
+
+class SentinelFocusTrapStrategy extends 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();
+            });
+        }
+    }
+}
+
+export { SentinelFocusTrapStrategy };
+//# sourceMappingURL=sentinel_focus_trap_strategy.js.map

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

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

@@ -0,0 +1,4 @@
+export declare type TSentinelFocusTrapStrategyProps = {
+    getContainer: () => HTMLElement | undefined;
+    noAutofocus?: boolean;
+};

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy';
+import { IBaseFocusTrapStrategy } from '../base_focus_trap_strategy_types';
+import { TTogglerFocusTrapStrategyProps } from './toggler_focus_trap_strategy_types';
+export declare class TogglerFocusTrapStrategy extends BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
+    #private;
+    constructor({ getContainer, getToggler }: TTogglerFocusTrapStrategyProps);
+    protected _handleKeyDown: (ev: KeyboardEvent) => void;
+    private _focusLastContentElement;
+    private _focusFirstContentElement;
+    private _returnToToggler;
+}

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

@@ -0,0 +1,56 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../../../external/tslib/tslib.es6.js';
+import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy.js';
+
+var _TogglerFocusTrapStrategy_getToggler;
+class TogglerFocusTrapStrategy extends 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 = __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);
+            }
+        };
+        __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();
+
+export { TogglerFocusTrapStrategy };
+//# sourceMappingURL=toggler_focus_trap_strategy.js.map

package/build/esm/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,+DAA+D,kDAAsD;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}