@shoper/phoenix_design_system 1.18.23-0 → 1.18.23-2

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

@@ -1,15 +1,15 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { property, state } from '@lit/reactive-element/decorators.js';
+import { property } from '@lit/reactive-element/decorators.js';
 import '@lit/reactive-element';
 import { html } from 'lit-html';
 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 { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
+import { FocusTrapController } from '../../controllers/focus_trap_controller/focus_trap_controller.js';
+import { MODAL_OPENED_PROP, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
 import { HModalClose } from './modal_close.js';
 
 var HModal_1;
@@ -21,9 +21,6 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
         this.transition = 'scale';
         this.modalLabel = '';
         this.noAutofocus = false;
-        this._firstFocusableElement = undefined;
-        this._focusableElements = null;
-        this._lastFocusableElement = undefined;
         this._focusedToggler = null;
         this._contentRef = createRef();
         this._focusSentinelStart = createRef();
@@ -31,44 +28,26 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
         this._propsChangeStrategies = {
             [MODAL_OPENED_PROP]: {
                 true: () => {
-                    const scrollY = window.scrollY;
                     HModal_1.openModals = [...HModal_1.openModals, this];
                     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();
                 },
                 false: () => {
                     HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
                     document.removeEventListener('keydown', this._bindCloseOnEsc);
                     document.removeEventListener(BACKDROP_EVENTS.clicked, this.close);
+                    this._focusTrapController.deactivate();
                 }
             }
         };
         this._backdropController = new BackdropController();
-        this._keepFocusWithinModal = (ev) => {
-            var _a;
-            const isTabPressed = ev.code === 'Tab';
-            if (isTabPressed && this._contentRef.value) {
-                if (ev.shiftKey) {
-                    if (document.activeElement === this._firstFocusableElement) {
-                        const focusableElements = UiDomUtils.getFocusableElements(this._contentRef.value);
-                        (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-                        ev.preventDefault();
-                    }
-                }
-                else if (document.activeElement === this._lastFocusableElement) {
-                    UiDomUtils.setFocusToFirstFocusableElementInContainer(this._contentRef.value);
-                    ev.preventDefault();
-                }
-            }
-        };
+        this._focusTrapController = new FocusTrapController({
+            host: this,
+            getContainer: () => this._contentRef.value,
+            noAutofocus: this.noAutofocus
+        });
         this._handleCloseFromCloseComponent = async (ev) => {
             var _a;
             ev.stopPropagation();
@@ -129,7 +108,6 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
             });
         };
         this.hidden = true;
-        this._focusableElements = [...this.querySelectorAll(FOCUSABLE_ELEMENTS_WITHIN_MODAL)];
     }
     static _appendModalsPortal() {
         const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${MODALS_PORTAL_NAME}"]`);
@@ -145,7 +123,6 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         HModal_1._appendModalsPortal();
-        document.addEventListener('keyup', this._keepFocusWithinModal);
         document.addEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
     }
     disconnectedCallback() {
@@ -154,29 +131,18 @@ 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);
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this._firstFocusableElement = this._focusSentinelStart.value;
-        this._lastFocusableElement = this._focusSentinelEnd.value;
+        this._focusTrapController.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])]();
         }
-    }
-    _setFocusToFirstFocusableElementInModalOrCloseBtn() {
-        if (this.noAutofocus)
-            return;
-        requestAnimationFrame(() => {
-            if (this._contentRef.value) {
-                const focusableElements = UiDomUtils.getFocusableElements(this._contentRef.value);
-                if (focusableElements.length > 0) {
-                    focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
-                }
-            }
-        });
+        if (changedProps.has('noAutofocus')) {
+            this._focusTrapController.noAutofocus = this.noAutofocus;
+        }
     }
     async open() {
         this._focusedToggler = document.activeElement;
@@ -193,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._setFocusToFirstFocusableElementInModalOrCloseBtn();
+                    this._focusTrapController.focusFirst();
                     resolve();
                 }, transitionDuration);
             });
@@ -252,18 +218,6 @@ __decorate([
     property({ type: Boolean, attribute: 'no-autofocus' }),
     __metadata("design:type", Object)
 ], HModal.prototype, "noAutofocus", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HModal.prototype, "_firstFocusableElement", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HModal.prototype, "_focusableElements", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HModal.prototype, "_lastFocusableElement", void 0);
 HModal = HModal_1 = __decorate([
     phoenixCustomElement('h-modal'),
     __metadata("design:paramtypes", [])

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

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

@@ -5,8 +5,7 @@ const MODAL_EVENTS = {
     opened: 'opened',
     closed: 'closed'
 };
-const MODAL_OPENED_PROP = 'opened';
-const FOCUSABLE_ELEMENTS_WITHIN_MODAL = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+const MODAL_OPENED_PROP = 'opened';
 
-export { FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS, MODAL_OPENED_PROP };
+export { MODALS_PORTAL_NAME, MODAL_EVENTS, MODAL_OPENED_PROP };
 //# sourceMappingURL=modal_constants.js.map

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

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

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

@@ -6,9 +6,6 @@ export declare class HSheet extends PhoenixLightLitElement {
     class: string;
     transition: string;
     sheetLabel: string;
-    _firstFocusableElement: HTMLElement | undefined;
-    _focusableElements: HTMLElement[] | null;
-    _lastFocusableElement: HTMLElement | undefined;
     private _focusedToggler;
     private _contentRef;
     private _focusSentinelStart;
@@ -16,6 +13,7 @@ export declare class HSheet extends PhoenixLightLitElement {
     private _propsChangeStrategies;
     private static openSheets;
     private _backdropController;
+    private _focusTrapController;
     private static _appendSheetPortal;
     static isSomeSheetOpen(): boolean;
     constructor();
@@ -23,8 +21,6 @@ export declare class HSheet extends PhoenixLightLitElement {
     disconnectedCallback(): void;
     firstUpdated(props: PropertyValues): void;
     updated(changedProps: Map<string, any>): void;
-    private _setFocusToFirstFocusableElementInSheetOrCloseBtn;
-    private _keepFocusWithinSheet;
     private _handleCloseFromCloseComponent;
     private _bindCloseOnEsc;
     open(): Promise<void>;

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

@@ -1,15 +1,15 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { property, state } from '@lit/reactive-element/decorators.js';
+import { property } from '@lit/reactive-element/decorators.js';
 import '@lit/reactive-element';
 import { html } from 'lit-html';
 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 { SHEET_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_SHEET, SHEETS_PORTAL_NAME, SHEET_EVENTS } from './sheet_constants.js';
+import { FocusTrapController } from '../../controllers/focus_trap_controller/focus_trap_controller.js';
+import { SHEET_OPENED_PROP, SHEETS_PORTAL_NAME, SHEET_EVENTS } from './sheet_constants.js';
 import { HSheetClose } from './sheet_close.js';
 
 var HSheet_1;
@@ -20,9 +20,6 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
         this.class = '';
         this.transition = 'scale';
         this.sheetLabel = '';
-        this._firstFocusableElement = undefined;
-        this._focusableElements = null;
-        this._lastFocusableElement = undefined;
         this._focusedToggler = null;
         this._contentRef = createRef();
         this._focusSentinelStart = createRef();
@@ -30,42 +27,25 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
         this._propsChangeStrategies = {
             [SHEET_OPENED_PROP]: {
                 true: () => {
-                    const scrollY = window.scrollY;
                     HSheet_1.openSheets = [...HSheet_1.openSheets, this];
                     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);
+                    this._focusTrapController.activate();
                 },
                 false: () => {
                     HSheet_1.openSheets = HSheet_1.openSheets.filter((sheet) => sheet !== this);
                     document.removeEventListener('keydown', this._bindCloseOnEsc);
                     document.removeEventListener(BACKDROP_EVENTS.clicked, this.close);
+                    this._focusTrapController.deactivate();
                 }
             }
         };
         this._backdropController = new BackdropController();
-        this._keepFocusWithinSheet = (ev) => {
-            var _a;
-            const isTabPressed = ev.code === 'Tab';
-            if (isTabPressed && this._contentRef.value) {
-                if (ev.shiftKey) {
-                    if (document.activeElement === this._firstFocusableElement) {
-                        const focusableElements = UiDomUtils.getFocusableElements(this._contentRef.value);
-                        (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-                        ev.preventDefault();
-                    }
-                }
-                else if (document.activeElement === this._lastFocusableElement) {
-                    UiDomUtils.setFocusToFirstFocusableElementInContainer(this._contentRef.value);
-                    ev.preventDefault();
-                }
-            }
-        };
+        this._focusTrapController = new FocusTrapController({
+            host: this,
+            getContainer: () => this._contentRef.value
+        });
         this._handleCloseFromCloseComponent = async (ev) => {
             var _a;
             ev.stopPropagation();
@@ -126,7 +106,6 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
             });
         };
         this.hidden = true;
-        this._focusableElements = [...this.querySelectorAll(FOCUSABLE_ELEMENTS_WITHIN_SHEET)];
     }
     static _appendSheetPortal() {
         const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${SHEETS_PORTAL_NAME}"]`);
@@ -142,7 +121,6 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         HSheet_1._appendSheetPortal();
-        document.addEventListener('keyup', this._keepFocusWithinSheet);
         document.addEventListener(SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
     }
     disconnectedCallback() {
@@ -151,28 +129,16 @@ 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);
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this._firstFocusableElement = this._focusSentinelStart.value;
-        this._lastFocusableElement = this._focusSentinelEnd.value;
+        this._focusTrapController.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
     }
     updated(changedProps) {
         if (changedProps.has(SHEET_OPENED_PROP)) {
             this._propsChangeStrategies[SHEET_OPENED_PROP][String(this[SHEET_OPENED_PROP])]();
         }
     }
-    _setFocusToFirstFocusableElementInSheetOrCloseBtn() {
-        requestAnimationFrame(() => {
-            if (this._contentRef.value) {
-                const focusableElements = UiDomUtils.getFocusableElements(this._contentRef.value);
-                if (focusableElements.length > 0) {
-                    focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
-                }
-            }
-        });
-    }
     async open() {
         this._focusedToggler = document.activeElement;
         return new Promise((resolve) => {
@@ -188,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._setFocusToFirstFocusableElementInSheetOrCloseBtn();
+                    this._focusTrapController.focusFirst();
                     resolve();
                 }, transitionDuration);
             });
@@ -241,18 +207,6 @@ __decorate([
     property({ type: String, attribute: 'sheet-label' }),
     __metadata("design:type", Object)
 ], HSheet.prototype, "sheetLabel", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HSheet.prototype, "_firstFocusableElement", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HSheet.prototype, "_focusableElements", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HSheet.prototype, "_lastFocusableElement", void 0);
 HSheet = HSheet_1 = __decorate([
     phoenixCustomElement('h-sheet'),
     __metadata("design:paramtypes", [])

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

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

@@ -5,8 +5,7 @@ const SHEET_EVENTS = {
     opened: 'opened',
     closed: 'closed'
 };
-const SHEET_OPENED_PROP = 'opened';
-const FOCUSABLE_ELEMENTS_WITHIN_SHEET = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+const SHEET_OPENED_PROP = 'opened';
 
-export { FOCUSABLE_ELEMENTS_WITHIN_SHEET, SHEETS_PORTAL_NAME, SHEET_EVENTS, SHEET_OPENED_PROP };
+export { SHEETS_PORTAL_NAME, SHEET_EVENTS, SHEET_OPENED_PROP };
 //# sourceMappingURL=sheet_constants.js.map

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

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

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

@@ -0,0 +1,24 @@
+import { ReactiveController } from 'lit';
+import { TFocusTrapControllerProps } from './focus_trap_controller_types';
+export declare class FocusTrapController implements ReactiveController {
+    #private;
+    noAutofocus: boolean;
+    constructor({ host, getContainer, noAutofocus, getToggler, cyclicKeydown }: TFocusTrapControllerProps);
+    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;
+}

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

@@ -0,0 +1,196 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
+import 'lit';
+import { UiDomUtils } from '@dreamcommerce/utilities';
+
+var _FocusTrapController_getContainer, _FocusTrapController_getToggler, _FocusTrapController_cyclicKeydown, _FocusTrapController_active, _FocusTrapController_sentinelStart, _FocusTrapController_sentinelEnd;
+class FocusTrapController {
+    constructor({ host, getContainer, noAutofocus = false, getToggler, cyclicKeydown = false }) {
+        _FocusTrapController_getContainer.set(this, void 0);
+        _FocusTrapController_getToggler.set(this, void 0);
+        _FocusTrapController_cyclicKeydown.set(this, void 0);
+        _FocusTrapController_active.set(this, false);
+        _FocusTrapController_sentinelStart.set(this, void 0);
+        _FocusTrapController_sentinelEnd.set(this, void 0);
+        // ─── Sentinel mode ───────────────────────────────────────────────────────
+        this._handleSentinelModeKeyUp = (ev) => {
+            var _a;
+            if (!__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;
+        host.addController(this);
+    }
+    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);
+        }
+    }
+    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");
+    }
+    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);
+        }
+    }
+    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));
+    }
+    getFocusableElements(container) {
+        return this._getFocusableElements(container);
+    }
+    _isElementTrulyFocusable($el) {
+        const style = window.getComputedStyle($el);
+        if (style.display === 'none' || style.visibility === 'hidden') {
+            return false;
+        }
+        if ($el.nodeName === 'H-PORTAL')
+            return true;
+        const $parent = $el.parentElement;
+        if (!$parent)
+            return true;
+        return this._isElementTrulyFocusable($parent);
+    }
+}
+_FocusTrapController_getContainer = new WeakMap(), _FocusTrapController_getToggler = new WeakMap(), _FocusTrapController_cyclicKeydown = new WeakMap(), _FocusTrapController_active = new WeakMap(), _FocusTrapController_sentinelStart = new WeakMap(), _FocusTrapController_sentinelEnd = new WeakMap();
+
+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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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 { ReactiveControllerHost } from 'lit';
+export declare type TFocusTrapControllerProps = {
+    host: ReactiveControllerHost & HTMLElement;
+    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;
+};

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

@@ -0,0 +1,2 @@
+import 'lit';
+//# 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,OAAuC,KAAK,CAAC"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.18.23-0",
+  "version": "1.18.23-2",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",