@shoper/phoenix_design_system 1.11.9-0 → 1.11.9-2

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

@@ -12,7 +12,6 @@ var litHtml = require('lit-html');
 var global_constants = require('../../global_constants.js');
 var dropdown_constants = require('./dropdown_constants.js');
 var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
-var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
 var portal_constants = require('../portal/portal_constants.js');
 var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
 var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
@@ -30,8 +29,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this.transition = 'direction';
         this.offset = 0;
         this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
-        this.id = v4['default']();
-        this.preventFocusTrap = false;
         this._backdropController = new backdrop_controller.BackdropController();
         this._handleClickOutside = async (target) => {
             var _a, _b;
@@ -48,7 +45,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                 return;
             }
             await this.show();
-            this._focusOnFirstContentElement();
+            utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
         };
         this.show = async () => {
             if (this.opened)
@@ -139,24 +136,44 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                 return;
             await this.hide();
         };
-        this._keepFocusWithinDropdownForwards = (ev) => {
-            if (ev.shiftKey === true || !this.$dropdownContent)
+        this._handleForwardFocus = async (ev) => {
+            // if (!this.opened) this._handleFocusOnNextElement(ev);
+            if (!this.opened || ev.shiftKey)
                 return;
-            const $target = ev.target;
-            this._handleFocusFromTogglerForwards(ev, $target);
-            this._handleFocusFromSentinelEndForwards(ev, $target);
+            const $focusableElementsWithinDropdownContent = utilities.UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(dropdown_constants.DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
+            const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
+            const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
+            const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
+            if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
+                this._handleFocusOnNextElement(ev);
         };
-        this._keepFocusWithinDropdownBackwards = (ev) => {
-            if (!this.opened || !this.$dropdownContent)
+        this._handleFocusOnNextElement = async (ev) => {
+            var _a;
+            ev.preventDefault();
+            const $focusableElements = utilities.UiDomUtils.getFocusableElements(document.body);
+            const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
+            const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
+            await this._hideDropdownsSequentially();
+            await this.hide();
+            this._focusOnNextElementAfterToggler($nextElementToFocus);
+        };
+        this._focusOnNextElementAfterToggler = ($elementToFocus) => {
+            var _a;
+            const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(dropdown_constants.DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
+            if (isTogglerLastChildOfPreviousDropdown) {
+                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
                 return;
-            const $target = ev.target;
-            if (this.preventFocusTrap) {
-                this._handleDefaultFocusFromDropdownBackwards(ev);
-            }
-            else {
-                this._handleFocusFromTogglerBackwards(ev, $target);
-                this._handleFocusFromSentinelStartBackwards(ev, $target);
             }
+            $elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
+        };
+        this._handleBackwardFocus = async (ev) => {
+            var _a;
+            const $firstFocusableElement = this.$dropdownContent && utilities.UiDomUtils.getFocusableElement(this.$dropdownContent);
+            if (document.activeElement !== $firstFocusableElement)
+                return;
+            ev.preventDefault();
+            (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+            await this._hideDropdownsSequentially();
         };
         this._hoverToggle = async (ev) => {
             if (window.innerWidth < global_constants.BREAKPOINTS.xs)
@@ -168,19 +185,12 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
             if (isHoveredWithinDropdown && !this.opened) {
                 await this.show();
-                this._focusOnFirstContentElement();
+                utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
                 return;
             }
             if (!isHoveredWithinDropdown && this.opened)
                 await this._hideDropdownsSequentially();
         };
-        this._focusOnFirstContentElement = () => {
-            if (!this.$dropdownContent)
-                return;
-            const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
-            if ($firstFocusableElement)
-                $firstFocusableElement.focus();
-        };
         this.isOpened = () => this.opened;
         this._positionDropdownContent = () => {
             if (this.contentWidth === dropdown_constants.DROPDOWN_CONTENT_WIDTH.full)
@@ -206,14 +216,13 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             host: this,
             target: document.body,
             keys: ['tab'],
-            callback: this._keepFocusWithinDropdownForwards
+            callback: this._handleForwardFocus
         });
         new keystrokes_controller.KeystrokesController({
             host: this,
             target: document.body,
             keys: [['shift', 'tab']],
-            callback: this._keepFocusWithinDropdownBackwards,
-            containerSelectors: ['h-dropdown', 'h-dropdown-content']
+            callback: this._handleBackwardFocus
         });
     }
     async connectedCallback() {
@@ -289,71 +298,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(global_constants.SCROLLABLE_CLASS_NAME);
         }
     }
-    _handleFocusFromTogglerForwards(ev, $target) {
-        var _a;
-        if (!((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.opened || !this.$dropdownContent)
-            return;
-        ev.preventDefault();
-        this._getTrulyFocusableElements(this.$dropdownContent)[0].focus();
-    }
-    _handleFocusFromSentinelEndForwards(ev, $target) {
-        var _a;
-        if (!this.$dropdownContent)
-            return;
-        const $lastFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent).slice(-1)[0];
-        if (this.preventFocusTrap && document.activeElement) {
-            const $nextFocusableElement = utilities.UiDomUtils.getNextFocusableElement(document.activeElement);
-            if ($nextFocusableElement === $lastFocusableElement) {
-                this.hide();
-                utilities.UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
-            }
-            return;
-        }
-        if ($target !== $lastFocusableElement)
-            return;
-        ev.preventDefault();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    _handleDefaultFocusFromDropdownBackwards(ev) {
-        ev.preventDefault();
-        this.hide();
-        utilities.UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
-    }
-    _handleFocusFromTogglerBackwards(ev, $target) {
-        var _a;
-        if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.$dropdownContent)
-            return;
-        ev.preventDefault();
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
-        $lastFocusableElement.focus();
-    }
-    _handleFocusFromSentinelStartBackwards(ev, $target) {
-        var _a;
-        if (!this.$dropdownContent)
-            return;
-        const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
-        if ($target !== $firstFocusableElement)
-            return;
-        ev.preventDefault();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    _getTrulyFocusableElements($container) {
-        const focusableElements = utilities.UiDomUtils.getFocusableElements($container);
-        return focusableElements.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);
-    }
     _isHoveredWithinDropdown(element) {
         var _a;
         if (element === this)
@@ -377,8 +321,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             return;
         if (!this._hasScrollableClassInitially)
             this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(global_constants.SCROLLABLE_CLASS_NAME);
-        if (!this.preventFocusTrap)
-            this.$dropdownContent.setAttribute('aria-modal', 'true');
     }
     _getDropdownContentWidth() {
         const isMobileResolution = document.documentElement.clientWidth < global_constants.BREAKPOINTS.xs;
@@ -447,14 +389,6 @@ tslib_es6.__decorate([
     decorators_js.property({ type: String, attribute: 'mobile-position' }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HDropdown.prototype, "mobilePosition", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: String, attribute: 'id', reflect: true }),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HDropdown.prototype, "id", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean, attribute: 'prevent-focus-trap' }),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HDropdown.prototype, "preventFocusTrap", void 0);
 exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-dropdown'),
     tslib_es6.__metadata("design:paramtypes", [])

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

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

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
@@ -22,6 +23,10 @@ exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_elem
             element.setAttribute('role', 'menuitem');
         });
     }
+    render() {
+        super.render();
+        return lit.html ` <div role="dialog">${this.getSlot('content')}</div> `;
+    }
 };
 tslib_es6.__decorate([
     decorators.property({ type: String }),

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

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

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
-require('@dreamcommerce/utilities');
+var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
@@ -16,17 +16,6 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
     constructor() {
         super();
         this.name = '';
-        this._setupTogglerAria = () => {
-            this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
-            if (this._$dropdown.isOpened)
-                this._toggleElementAriaController = new toggle_element_aria_controller.ToggleElementAriaController({
-                    host: this,
-                    initialAriaExpandedValue: this._$dropdown.isOpened()
-                });
-            this.setAttribute('aria-haspopup', 'true');
-            if (this._$dropdown.id)
-                this.setAttribute('aria-controls', this._$dropdown.id);
-        };
         this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
             ev.stopImmediatePropagation();
             this._dispatchToggleDropdownEvent(ev);
@@ -40,6 +29,18 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
             ev.preventDefault();
             this.emitCustomEvent(dropdown_constants.DROPDOWN_EVENTS.toggle);
         };
+        this._handleFocusToOpenedDropdown = async (ev) => {
+            if (ev.target !== this)
+                return;
+            const isOpened = this._$dropdown.isOpened();
+            if (!isOpened)
+                return;
+            const $dropdownContent = document.querySelector(`${dropdown_constants.DROPDOWN_CONTENT_NAME}[name="${this.name}"]`);
+            if (!$dropdownContent)
+                return;
+            ev.preventDefault();
+            utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer($dropdownContent);
+        };
         this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
         this.className = `${dropdown_constants.DROPDOWN_CSS_CLASSES.toggler} ${this.className}`;
     }
@@ -47,7 +48,13 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
         var _a;
         super.connectedCallback();
         this._btnController = new btn_controller.BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
-        this._setupTogglerAria();
+        this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
+        if (this._$dropdown.isOpened)
+            this._toggleElementAriaController = new toggle_element_aria_controller.ToggleElementAriaController({
+                host: this,
+                initialAriaExpandedValue: this._$dropdown.isOpened()
+            });
+        document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
         const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(dropdown_constants.DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
         if (hasToggleOnHover) {
             this.addEventListener('click', this._dispatchToggleDropdownEventOnMobile);
@@ -55,6 +62,10 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
         }
         this.addEventListener('click', this._dispatchToggleDropdownEvent);
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
+    }
 };
 tslib_es6.__decorate([
     decorators.property({ type: String, reflect: true }),

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

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

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

@@ -154,7 +154,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
             this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage, false);
             document.addEventListener('keyup', this._bindKeys);
         });
-        this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keydown, (ev) => {
+        this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, (ev) => {
             const shouldShowMessage = ev.detail.searchPhrase !== '';
             this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage);
         });
@@ -281,7 +281,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
                 class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon"
                 tabindex="0"
                 @click=${this._handleOpenSearch}
-                @keydown=${this._handleOpenSearchWithKeyboard}
+                @keyup=${this._handleOpenSearchWithKeyboard}
             >
                 <h-icon icon-name="icon-search" size=${icon_constants.ICONS_SIZES.l}></h-icon>
                 <div class="labeled-icon__signature">${this._translations.search}</div>

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

@@ -30,7 +30,7 @@ const SEARCH_CUSTOM_EVENT_NAMES = {
     search: 'search',
     updateSearchPhrase: 'updateSearchPhrase',
     focusin: 'searchFocusIn',
-    keydown: 'searchKeyDown'
+    keyup: 'searchKeyUp'
 };
 const baseSearchCssClass = 'search';
 const SEARCH_CLASS_NAMES = {

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

@@ -57,7 +57,7 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
             if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
                 return;
             if (ev.key !== 'Enter') {
-                this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keydown, {
+                this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, {
                     detail: {
                         searchPhrase: ev.target.value
                     }
@@ -95,7 +95,7 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
             if (!ev.detail || ev.detail.moduleInstanceId !== this.moduleInstanceId)
                 return;
             this._input.value = ev.detail.searchPhrase;
-            this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keydown, {
+            this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, {
                 detail: {
                     searchPhrase: ev.detail.searchPhrase
                 }

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

@@ -233,7 +233,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
     }
     updateOptionAriaAttribute($option) {
-        $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
+        !$option.selected
+            ? $option.removeAttribute(this.multiple ? 'aria-checked' : 'aria-selected')
+            : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
     }
     _removeHTMLOptions(optionsValues) {
         this._$options = select_utils.SelectControlUtils.removeHTMLOptions(Array.from(this._$options.values()), optionsValues);
@@ -298,7 +300,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 name="${this.controlName}"
                 offset=${this.offset}
                 content-width="full"
-                prevent-focus-trap
             >
                 <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
 

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

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

@@ -7,21 +7,11 @@ require('lit');
 
 var _KeystrokesController_host, _KeystrokesController_target;
 class KeystrokesController {
-    constructor({ host, keys, callback, target, containerSelectors }) {
+    constructor({ host, keys, callback, target }) {
         _KeystrokesController_host.set(this, void 0);
         _KeystrokesController_target.set(this, void 0);
         this._buffer = [];
-        this._clearBuffer = (ev) => {
-            if (!this._containerSelectors) {
-                this._buffer = [];
-                return;
-            }
-            const $newFocusedElement = ev.relatedTarget;
-            if ($newFocusedElement) {
-                const isNewFocusedElementAChild = !!this._containerSelectors.find((containerSelector) => !!$newFocusedElement.closest(containerSelector));
-                if (isNewFocusedElementAChild)
-                    return;
-            }
+        this._clearBuffer = () => {
             this._buffer = [];
         };
         this._saveKey = (ev) => {
@@ -89,7 +79,6 @@ class KeystrokesController {
         tslib_es6.__classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
         this._keys = keys;
         this._callback = callback;
-        this._containerSelectors = containerSelectors;
         tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
     }
     hostConnected() {

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

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

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

@@ -15,8 +15,6 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     contentWidth: TDropdownContentWidth;
     portalTarget: string;
     mobilePosition: TMobileElementPosition;
-    id: string;
-    preventFocusTrap: boolean;
     $dropdownToggler: HDropdownToggler | null;
     $dropdownContent: HDropdownContent | null;
     $nestedDropdownContentElements?: HDropdownContent[];
@@ -42,18 +40,12 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     private _observeScrollToggling;
     private _toggleScroll;
     private _closeDropdownOnEscape;
-    private _keepFocusWithinDropdownForwards;
-    private _handleFocusFromTogglerForwards;
-    private _handleFocusFromSentinelEndForwards;
-    private _keepFocusWithinDropdownBackwards;
-    private _handleDefaultFocusFromDropdownBackwards;
-    private _handleFocusFromTogglerBackwards;
-    private _handleFocusFromSentinelStartBackwards;
-    private _getTrulyFocusableElements;
-    private _isElementTrulyFocusable;
+    private _handleForwardFocus;
+    private _handleFocusOnNextElement;
+    private _focusOnNextElementAfterToggler;
+    private _handleBackwardFocus;
     private _hoverToggle;
     private _isHoveredWithinDropdown;
-    private _focusOnFirstContentElement;
     private _setupInitialDropdownProperties;
     isOpened: () => boolean;
     private _positionDropdownContent;

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

@@ -6,9 +6,8 @@ import { property } from '@lit/reactive-element/decorators.js';
 import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
 import { html } from 'lit-html';
 import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
-import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
+import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
 import { RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
-import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
@@ -26,8 +25,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this.transition = 'direction';
         this.offset = 0;
         this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
-        this.id = v4();
-        this.preventFocusTrap = false;
         this._backdropController = new BackdropController();
         this._handleClickOutside = async (target) => {
             var _a, _b;
@@ -44,7 +41,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                 return;
             }
             await this.show();
-            this._focusOnFirstContentElement();
+            UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
         };
         this.show = async () => {
             if (this.opened)
@@ -135,24 +132,44 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                 return;
             await this.hide();
         };
-        this._keepFocusWithinDropdownForwards = (ev) => {
-            if (ev.shiftKey === true || !this.$dropdownContent)
+        this._handleForwardFocus = async (ev) => {
+            // if (!this.opened) this._handleFocusOnNextElement(ev);
+            if (!this.opened || ev.shiftKey)
                 return;
-            const $target = ev.target;
-            this._handleFocusFromTogglerForwards(ev, $target);
-            this._handleFocusFromSentinelEndForwards(ev, $target);
+            const $focusableElementsWithinDropdownContent = UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
+            const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
+            const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
+            const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
+            if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
+                this._handleFocusOnNextElement(ev);
         };
-        this._keepFocusWithinDropdownBackwards = (ev) => {
-            if (!this.opened || !this.$dropdownContent)
+        this._handleFocusOnNextElement = async (ev) => {
+            var _a;
+            ev.preventDefault();
+            const $focusableElements = UiDomUtils.getFocusableElements(document.body);
+            const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
+            const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
+            await this._hideDropdownsSequentially();
+            await this.hide();
+            this._focusOnNextElementAfterToggler($nextElementToFocus);
+        };
+        this._focusOnNextElementAfterToggler = ($elementToFocus) => {
+            var _a;
+            const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
+            if (isTogglerLastChildOfPreviousDropdown) {
+                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
                 return;
-            const $target = ev.target;
-            if (this.preventFocusTrap) {
-                this._handleDefaultFocusFromDropdownBackwards(ev);
-            }
-            else {
-                this._handleFocusFromTogglerBackwards(ev, $target);
-                this._handleFocusFromSentinelStartBackwards(ev, $target);
             }
+            $elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
+        };
+        this._handleBackwardFocus = async (ev) => {
+            var _a;
+            const $firstFocusableElement = this.$dropdownContent && UiDomUtils.getFocusableElement(this.$dropdownContent);
+            if (document.activeElement !== $firstFocusableElement)
+                return;
+            ev.preventDefault();
+            (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+            await this._hideDropdownsSequentially();
         };
         this._hoverToggle = async (ev) => {
             if (window.innerWidth < BREAKPOINTS.xs)
@@ -164,19 +181,12 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
             if (isHoveredWithinDropdown && !this.opened) {
                 await this.show();
-                this._focusOnFirstContentElement();
+                UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
                 return;
             }
             if (!isHoveredWithinDropdown && this.opened)
                 await this._hideDropdownsSequentially();
         };
-        this._focusOnFirstContentElement = () => {
-            if (!this.$dropdownContent)
-                return;
-            const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
-            if ($firstFocusableElement)
-                $firstFocusableElement.focus();
-        };
         this.isOpened = () => this.opened;
         this._positionDropdownContent = () => {
             if (this.contentWidth === DROPDOWN_CONTENT_WIDTH.full)
@@ -202,14 +212,13 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             host: this,
             target: document.body,
             keys: ['tab'],
-            callback: this._keepFocusWithinDropdownForwards
+            callback: this._handleForwardFocus
         });
         new KeystrokesController({
             host: this,
             target: document.body,
             keys: [['shift', 'tab']],
-            callback: this._keepFocusWithinDropdownBackwards,
-            containerSelectors: ['h-dropdown', 'h-dropdown-content']
+            callback: this._handleBackwardFocus
         });
     }
     async connectedCallback() {
@@ -285,71 +294,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(SCROLLABLE_CLASS_NAME);
         }
     }
-    _handleFocusFromTogglerForwards(ev, $target) {
-        var _a;
-        if (!((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.opened || !this.$dropdownContent)
-            return;
-        ev.preventDefault();
-        this._getTrulyFocusableElements(this.$dropdownContent)[0].focus();
-    }
-    _handleFocusFromSentinelEndForwards(ev, $target) {
-        var _a;
-        if (!this.$dropdownContent)
-            return;
-        const $lastFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent).slice(-1)[0];
-        if (this.preventFocusTrap && document.activeElement) {
-            const $nextFocusableElement = UiDomUtils.getNextFocusableElement(document.activeElement);
-            if ($nextFocusableElement === $lastFocusableElement) {
-                this.hide();
-                UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
-            }
-            return;
-        }
-        if ($target !== $lastFocusableElement)
-            return;
-        ev.preventDefault();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    _handleDefaultFocusFromDropdownBackwards(ev) {
-        ev.preventDefault();
-        this.hide();
-        UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
-    }
-    _handleFocusFromTogglerBackwards(ev, $target) {
-        var _a;
-        if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.$dropdownContent)
-            return;
-        ev.preventDefault();
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
-        $lastFocusableElement.focus();
-    }
-    _handleFocusFromSentinelStartBackwards(ev, $target) {
-        var _a;
-        if (!this.$dropdownContent)
-            return;
-        const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
-        if ($target !== $firstFocusableElement)
-            return;
-        ev.preventDefault();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    _getTrulyFocusableElements($container) {
-        const focusableElements = UiDomUtils.getFocusableElements($container);
-        return focusableElements.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);
-    }
     _isHoveredWithinDropdown(element) {
         var _a;
         if (element === this)
@@ -373,8 +317,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             return;
         if (!this._hasScrollableClassInitially)
             this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(SCROLLABLE_CLASS_NAME);
-        if (!this.preventFocusTrap)
-            this.$dropdownContent.setAttribute('aria-modal', 'true');
     }
     _getDropdownContentWidth() {
         const isMobileResolution = document.documentElement.clientWidth < BREAKPOINTS.xs;
@@ -443,14 +385,6 @@ __decorate([
     property({ type: String, attribute: 'mobile-position' }),
     __metadata("design:type", String)
 ], HDropdown.prototype, "mobilePosition", void 0);
-__decorate([
-    property({ type: String, attribute: 'id', reflect: true }),
-    __metadata("design:type", Object)
-], HDropdown.prototype, "id", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'prevent-focus-trap' }),
-    __metadata("design:type", Object)
-], HDropdown.prototype, "preventFocusTrap", void 0);
 HDropdown = HDropdown_1 = __decorate([
     phoenixCustomElement('h-dropdown'),
     __metadata("design:paramtypes", [])

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.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,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts

@@ -1,6 +1,8 @@
+import { TemplateResult } from 'lit';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HDropdownContent extends PhoenixLightLitElement {
     name: string;
     constructor();
     connectedCallback(): void;
+    protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
@@ -18,6 +19,10 @@ let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
             element.setAttribute('role', 'menuitem');
         });
     }
+    render() {
+        super.render();
+        return html ` <div role="dialog">${this.getSlot('content')}</div> `;
+    }
 };
 __decorate([
     property({ type: String }),

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts

@@ -6,8 +6,9 @@ export declare class HDropdownToggler extends PhoenixLightLitElement {
     private _$dropdown;
     constructor();
     connectedCallback(): void;
-    private _setupTogglerAria;
     private _dispatchToggleDropdownEventWithKeyboard;
     private _dispatchToggleDropdownEventOnMobile;
     private _dispatchToggleDropdownEvent;
+    private _handleFocusToOpenedDropdown;
+    disconnectedCallback(): void;
 }

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js

@@ -1,28 +1,17 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import '@dreamcommerce/utilities';
+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 { BtnController } from '../../controllers/btn_controller/btn_controller.js';
 import { BREAKPOINTS } from '../../global_constants.js';
-import { DROPDOWN_CONTAINER_NAME, DROPDOWN_EVENTS, DROPDOWN_CSS_CLASSES, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME } from './dropdown_constants.js';
+import { DROPDOWN_EVENTS, DROPDOWN_CONTENT_NAME, DROPDOWN_CSS_CLASSES, DROPDOWN_CONTAINER_NAME, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME } from './dropdown_constants.js';
 import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
 
 let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
     constructor() {
         super();
         this.name = '';
-        this._setupTogglerAria = () => {
-            this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
-            if (this._$dropdown.isOpened)
-                this._toggleElementAriaController = new ToggleElementAriaController({
-                    host: this,
-                    initialAriaExpandedValue: this._$dropdown.isOpened()
-                });
-            this.setAttribute('aria-haspopup', 'true');
-            if (this._$dropdown.id)
-                this.setAttribute('aria-controls', this._$dropdown.id);
-        };
         this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
             ev.stopImmediatePropagation();
             this._dispatchToggleDropdownEvent(ev);
@@ -36,6 +25,18 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
             ev.preventDefault();
             this.emitCustomEvent(DROPDOWN_EVENTS.toggle);
         };
+        this._handleFocusToOpenedDropdown = async (ev) => {
+            if (ev.target !== this)
+                return;
+            const isOpened = this._$dropdown.isOpened();
+            if (!isOpened)
+                return;
+            const $dropdownContent = document.querySelector(`${DROPDOWN_CONTENT_NAME}[name="${this.name}"]`);
+            if (!$dropdownContent)
+                return;
+            ev.preventDefault();
+            UiDomUtils.setFocusToFirstFocusableElementInContainer($dropdownContent);
+        };
         this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
         this.className = `${DROPDOWN_CSS_CLASSES.toggler} ${this.className}`;
     }
@@ -43,7 +44,13 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
         var _a;
         super.connectedCallback();
         this._btnController = new BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
-        this._setupTogglerAria();
+        this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
+        if (this._$dropdown.isOpened)
+            this._toggleElementAriaController = new ToggleElementAriaController({
+                host: this,
+                initialAriaExpandedValue: this._$dropdown.isOpened()
+            });
+        document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
         const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
         if (hasToggleOnHover) {
             this.addEventListener('click', this._dispatchToggleDropdownEventOnMobile);
@@ -51,6 +58,10 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
         }
         this.addEventListener('click', this._dispatchToggleDropdownEvent);
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
+    }
 };
 __decorate([
     property({ type: String, reflect: true }),

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.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;"}
+{"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;"}

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

@@ -150,7 +150,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
             this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage, false);
             document.addEventListener('keyup', this._bindKeys);
         });
-        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.keydown, (ev) => {
+        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.keyup, (ev) => {
             const shouldShowMessage = ev.detail.searchPhrase !== '';
             this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage);
         });
@@ -277,7 +277,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                 class="${SEARCH_CLASS_NAMES.icon} labeled-icon"
                 tabindex="0"
                 @click=${this._handleOpenSearch}
-                @keydown=${this._handleOpenSearchWithKeyboard}
+                @keyup=${this._handleOpenSearchWithKeyboard}
             >
                 <h-icon icon-name="icon-search" size=${ICONS_SIZES.l}></h-icon>
                 <div class="labeled-icon__signature">${this._translations.search}</div>

package/build/esm/packages/phoenix/src/components/form/search/search_constants.d.ts

@@ -27,7 +27,7 @@ export declare const SEARCH_CUSTOM_EVENT_NAMES: {
     readonly search: "search";
     readonly updateSearchPhrase: "updateSearchPhrase";
     readonly focusin: "searchFocusIn";
-    readonly keydown: "searchKeyDown";
+    readonly keyup: "searchKeyUp";
 };
 export declare const SEARCH_CLASS_NAMES: {
     readonly searchBar: "search__bar";

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

@@ -26,7 +26,7 @@ const SEARCH_CUSTOM_EVENT_NAMES = {
     search: 'search',
     updateSearchPhrase: 'updateSearchPhrase',
     focusin: 'searchFocusIn',
-    keydown: 'searchKeyDown'
+    keyup: 'searchKeyUp'
 };
 const baseSearchCssClass = 'search';
 const SEARCH_CLASS_NAMES = {

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

@@ -53,7 +53,7 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
             if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
                 return;
             if (ev.key !== 'Enter') {
-                this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keydown, {
+                this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
                     detail: {
                         searchPhrase: ev.target.value
                     }
@@ -91,7 +91,7 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
             if (!ev.detail || ev.detail.moduleInstanceId !== this.moduleInstanceId)
                 return;
             this._input.value = ev.detail.searchPhrase;
-            this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keydown, {
+            this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
                 detail: {
                     searchPhrase: ev.detail.searchPhrase
                 }

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

@@ -229,7 +229,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         SelectControlUtils.appendHTMLOption($option, $list, position);
     }
     updateOptionAriaAttribute($option) {
-        $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
+        !$option.selected
+            ? $option.removeAttribute(this.multiple ? 'aria-checked' : 'aria-selected')
+            : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
     }
     _removeHTMLOptions(optionsValues) {
         this._$options = SelectControlUtils.removeHTMLOptions(Array.from(this._$options.values()), optionsValues);
@@ -294,7 +296,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 name="${this.controlName}"
                 offset=${this.offset}
                 content-width="full"
-                prevent-focus-trap
             >
                 <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
 

package/build/esm/packages/phoenix/src/components/form/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/keystrokes_controller/keystrokes_controller.d.ts

@@ -4,9 +4,8 @@ export declare class KeystrokesController implements ReactiveController {
     #private;
     private _keys;
     private _callback;
-    private _containerSelectors?;
     private _buffer;
-    constructor({ host, keys, callback, target, containerSelectors }: TKeystrokesControllerProps);
+    constructor({ host, keys, callback, target }: TKeystrokesControllerProps);
     hostConnected(): void;
     hostDisconnected(): void;
     private _clearBuffer;

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

@@ -3,21 +3,11 @@ import 'lit';
 
 var _KeystrokesController_host, _KeystrokesController_target;
 class KeystrokesController {
-    constructor({ host, keys, callback, target, containerSelectors }) {
+    constructor({ host, keys, callback, target }) {
         _KeystrokesController_host.set(this, void 0);
         _KeystrokesController_target.set(this, void 0);
         this._buffer = [];
-        this._clearBuffer = (ev) => {
-            if (!this._containerSelectors) {
-                this._buffer = [];
-                return;
-            }
-            const $newFocusedElement = ev.relatedTarget;
-            if ($newFocusedElement) {
-                const isNewFocusedElementAChild = !!this._containerSelectors.find((containerSelector) => !!$newFocusedElement.closest(containerSelector));
-                if (isNewFocusedElementAChild)
-                    return;
-            }
+        this._clearBuffer = () => {
             this._buffer = [];
         };
         this._saveKey = (ev) => {
@@ -85,7 +75,6 @@ class KeystrokesController {
         __classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
         this._keys = keys;
         this._callback = callback;
-        this._containerSelectors = containerSelectors;
         __classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
     }
     hostConnected() {

package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js.map

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

package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller_types.d.ts

@@ -4,5 +4,4 @@ export declare type TKeystrokesControllerProps = {
     keys: string[][] | string[] | string;
     callback: (ev: Event) => void;
     target: Element;
-    containerSelectors?: string[];
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.11.9-0",
+  "version": "1.11.9-2",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@splidejs/splide": "^4.0.7"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.19.0-0",
+    "@dreamcommerce/utilities": "^1.19.0",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",