@shoper/phoenix_design_system 1.18.23-9 → 1.18.24-0

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

@@ -1,14 +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 } from '@lit/reactive-element/decorators.js';
+import { property, state } 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 { FocusTrapController } from '../../controllers/focus_trap_controller/focus_trap_controller.js';
-import { SHEET_OPENED_PROP, SHEETS_PORTAL_NAME, SHEET_EVENTS } from './sheet_constants.js';
+import { SHEET_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_SHEET, SHEETS_PORTAL_NAME, SHEET_EVENTS } from './sheet_constants.js';
 import { HSheetClose } from './sheet_close.js';
 
 var HSheet_1;
@@ -19,30 +20,52 @@ 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();
+        this._focusSentinelEnd = createRef();
         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();
-                    this._focusTrapController.activate();
+                    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);
-                    this._focusTrapController.deactivate();
                 }
             }
         };
         this._backdropController = new BackdropController();
-        this._focusTrapController = new FocusTrapController(this, {
-            mode: 'sentinel',
-            getContainer: () => this._contentRef.value
-        });
+        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._handleCloseFromCloseComponent = async (ev) => {
             var _a;
             ev.stopPropagation();
@@ -103,6 +126,7 @@ 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}"]`);
@@ -118,6 +142,7 @@ 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() {
@@ -126,12 +151,28 @@ 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;
     }
     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) => {
@@ -147,6 +188,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();
                     resolve();
                 }, transitionDuration);
             });
@@ -172,11 +214,11 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
         return html `
             <h-portal ?disabled="${!this.opened}" to="${SHEETS_PORTAL_NAME}" hidden>
                 <div class="sheet-wrapper ${this.class}">
-                    <div tabindex="0"></div>
+                    <div tabindex="0" ${ref(this._focusSentinelStart)}></div>
                     <div ${ref(this._contentRef)} class="sheet" role="dialog" aria-label="${this.sheetLabel}">
                         <div class="sheet__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
                     </div>
-                    <div tabindex="0"></div>
+                    <div tabindex="0" ${ref(this._focusSentinelEnd)}></div>
                 </div>
             </h-portal>
         `;
@@ -199,6 +241,18 @@ __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;"}
+{"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;"}

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

@@ -5,7 +5,8 @@ const SHEET_EVENTS = {
     opened: 'opened',
     closed: 'closed'
 };
-const SHEET_OPENED_PROP = 'opened';
+const SHEET_OPENED_PROP = 'opened';
+const FOCUSABLE_ELEMENTS_WITHIN_SHEET = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 
-export { SHEETS_PORTAL_NAME, SHEET_EVENTS, SHEET_OPENED_PROP };
+export { FOCUSABLE_ELEMENTS_WITHIN_SHEET, 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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/package.json

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

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

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-require('lit');
-var focus_trap_strategy_constants = require('./strategies/focus_trap_strategy_constants.js');
-
-var _FocusTrapController_strategy;
-class FocusTrapController {
-    constructor(host, { mode, ...strategyProps }) {
-        _FocusTrapController_strategy.set(this, void 0);
-        tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_strategy, new focus_trap_strategy_constants.FOCUS_TRAP_STRATEGY_STRATEGIES[mode](strategyProps), "f");
-        host.addController(this);
-    }
-    get strategy() {
-        return tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f");
-    }
-    hostConnected() {
-        tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").attach();
-    }
-    hostDisconnected() {
-        tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").detach();
-    }
-    activate() {
-        tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").activate();
-    }
-    deactivate() {
-        tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").deactivate();
-    }
-    getFocusableElements(container) {
-        return tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f").getFocusableElements(container);
-    }
-}
-_FocusTrapController_strategy = new WeakMap();
-
-exports.FocusTrapController = FocusTrapController;
-//# sourceMappingURL=focus_trap_controller.js.map

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

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

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

@@ -1,66 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var utilities = require('@dreamcommerce/utilities');
-
-class BaseFocusTrapStrategy {
-    constructor(getContainer) {
-        this.getContainer = getContainer;
-        this.active = false;
-        this.noAutofocus = false;
-        this._handleKeyDown = (ev) => {
-            if (!this.active || ev.code !== 'Tab')
-                return;
-            const container = this.getContainer();
-            if (!container)
-                return;
-            const focusableElements = this.getFocusableElements(container);
-            if (focusableElements.length === 0)
-                return;
-            const $target = ev.target;
-            if (ev.shiftKey) {
-                if ($target === focusableElements[0]) {
-                    ev.preventDefault();
-                    focusableElements[focusableElements.length - 1].focus();
-                }
-            }
-            else {
-                if ($target === focusableElements[focusableElements.length - 1]) {
-                    ev.preventDefault();
-                    focusableElements[0].focus();
-                }
-            }
-        };
-    }
-    attach() {
-        document.addEventListener('keydown', this._handleKeyDown);
-    }
-    detach() {
-        document.removeEventListener('keydown', this._handleKeyDown);
-    }
-    activate() {
-        this.active = true;
-    }
-    deactivate() {
-        this.active = false;
-    }
-    getFocusableElements(container) {
-        return utilities.UiDomUtils.getFocusableElements(container).filter(($el) => this._isElementTrulyFocusable($el));
-    }
-    _isElementTrulyFocusable($el) {
-        const style = window.getComputedStyle($el);
-        if (style.display === 'none' || style.visibility === 'hidden') {
-            return false;
-        }
-        if ($el.nodeName === 'H-PORTAL')
-            return true;
-        const $parent = $el.parentElement;
-        if (!$parent)
-            return true;
-        return this._isElementTrulyFocusable($parent);
-    }
-}
-
-exports.BaseFocusTrapStrategy = BaseFocusTrapStrategy;
-//# sourceMappingURL=base_focus_trap_strategy.js.map

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

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

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

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

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

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

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

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var cyclic_focus_trap_strategy = require('./cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js');
-var toggler_focus_trap_strategy = require('./toggler_focus_trap_strategy/toggler_focus_trap_strategy.js');
-var sentinel_focus_trap_strategy = require('./sentinel_focus_trap_strategy/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]: cyclic_focus_trap_strategy.CyclicFocusTrapStrategy,
-    [FOCUS_TRAP_STRATEGY_TYPES.toggler]: toggler_focus_trap_strategy.TogglerFocusTrapStrategy,
-    [FOCUS_TRAP_STRATEGY_TYPES.sentinel]: sentinel_focus_trap_strategy.SentinelFocusTrapStrategy,
-};
-
-exports.FOCUS_TRAP_STRATEGY_STRATEGIES = FOCUS_TRAP_STRATEGY_STRATEGIES;
-exports.FOCUS_TRAP_STRATEGY_TYPES = FOCUS_TRAP_STRATEGY_TYPES;
-//# sourceMappingURL=focus_trap_strategy_constants.js.map

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

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

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

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

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

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

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

@@ -1,62 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
-var base_focus_trap_strategy = require('../base_focus_trap_strategy.js');
-
-var _TogglerFocusTrapStrategy_getToggler;
-class TogglerFocusTrapStrategy extends base_focus_trap_strategy.BaseFocusTrapStrategy {
-    constructor({ getContainer, getToggler }) {
-        super(getContainer);
-        _TogglerFocusTrapStrategy_getToggler.set(this, void 0);
-        this._handleKeyDown = (ev) => {
-            var _a;
-            if (!this.active || ev.code !== 'Tab')
-                return;
-            const container = this.getContainer();
-            const toggler = (_a = tslib_es6.__classPrivateFieldGet(this, _TogglerFocusTrapStrategy_getToggler, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
-            if (!container || !toggler)
-                return;
-            const $target = ev.target;
-            const focusableElements = this.getFocusableElements(container);
-            if (ev.shiftKey) {
-                // Shift+Tab on toggler → last content element
-                if (toggler.contains($target)) {
-                    const last = focusableElements[focusableElements.length - 1];
-                    if (!last)
-                        return;
-                    ev.preventDefault();
-                    last.focus();
-                    return;
-                }
-                // Shift+Tab on first content element → toggler
-                if ($target === focusableElements[0]) {
-                    ev.preventDefault();
-                    toggler.focus();
-                }
-            }
-            else {
-                // Tab on toggler → first content element
-                if (toggler.contains($target)) {
-                    const first = focusableElements[0];
-                    if (!first)
-                        return;
-                    ev.preventDefault();
-                    first.focus();
-                    return;
-                }
-                // Tab on last content element → toggler
-                if ($target === focusableElements[focusableElements.length - 1]) {
-                    ev.preventDefault();
-                    toggler.focus();
-                }
-            }
-        };
-        tslib_es6.__classPrivateFieldSet(this, _TogglerFocusTrapStrategy_getToggler, getToggler, "f");
-    }
-}
-_TogglerFocusTrapStrategy_getToggler = new WeakMap();
-
-exports.TogglerFocusTrapStrategy = TogglerFocusTrapStrategy;
-//# sourceMappingURL=toggler_focus_trap_strategy.js.map

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

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

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

@@ -1,13 +0,0 @@
-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<TProps extends TFocusTrapProps = TFocusTrapProps> implements ReactiveController {
-    #private;
-    constructor(host: ReactiveControllerHost, { mode, ...strategyProps }: TProps);
-    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

@@ -1,34 +0,0 @@
-import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
-import 'lit';
-import { FOCUS_TRAP_STRATEGY_STRATEGIES } from './strategies/focus_trap_strategy_constants.js';
-
-var _FocusTrapController_strategy;
-class FocusTrapController {
-    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() {
-        __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);
-    }
-}
-_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 +0,0 @@
-{"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,15 +0,0 @@
-export declare type TSentinelFocusTrapProps = {
-    mode: 'sentinel';
-    getContainer: () => HTMLElement | undefined;
-    noAutofocus?: 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 +0,0 @@
-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 +0,0 @@
-{"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/base_focus_trap_strategy.d.ts

@@ -1,14 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,8 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,6 +0,0 @@
-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);
-}