@shoper/phoenix_design_system 0.24.1 → 0.24.3

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

@@ -11,6 +11,7 @@ var portal_constants = require('../portal/portal_constants.js');
 var litHtml = require('lit-html');
 var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
 var decorators_js = require('@lit/reactive-element/decorators.js');
+var keystrokes_controller = require('../../controllers/keystrokes_controller/keystrokes_controller.js');
 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');
@@ -21,7 +22,7 @@ var relative_position_controller = require('../../controllers/relative_position_
 var HDropdown_1;
 exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.opened = false;
         this.direction = relative_position_controller_constants.DIRECTIONS.bottomCenter;
         this.toggleOnHover = false;
@@ -55,13 +56,13 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                     }, 0);
                     const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
                     setTimeout(() => {
-                        var _a, _b, _c;
+                        var _a, _b;
                         this._dispatchShowDropdownEvent();
                         (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
                         this._toggleScroll();
                         if (!this._lastFocusableElement)
                             this._lastFocusableElement = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.lastElementChild;
-                        this._focusOnNextSibling((_c = this.$dropdownContent) === null || _c === void 0 ? void 0 : _c.firstElementChild);
+                        utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
                         resolve();
                     }, transitionDuration);
                 });
@@ -132,20 +133,35 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                 return;
             await this.hide();
         };
-        this._handleFocusWithinDropdown = async (ev) => {
+        this._handleForwardFocus = async (ev) => {
+            const $focusableElementsWithinDropdownContent = utilities.UiDomUtils.getFocusableElements(this.$dropdownContent);
+            const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
+            const isActiveElementLastFocusableElement = document.activeElement === this._lastFocusableElement;
+            if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
+                this._focusOnNextElementAfterToggler(ev);
+        };
+        this._focusOnNextElementAfterToggler = async (ev) => {
+            ev.preventDefault();
+            const $focusableElements = utilities.UiDomUtils.getFocusableElements(document.body);
+            const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
+            const $nextElementToFocus = $focusableElements.find((currentElement, index) => {
+                if (index > indexOfDropdownToggler && !currentElement.closest(`${dropdown_constants.DROPDOWN_TOGGLER_NAME}[name="${this.name}"]`))
+                    return currentElement;
+                return null;
+            });
+            if ($nextElementToFocus)
+                $nextElementToFocus.focus();
+            await this._hideDropdownsSequentially();
+            await this.hide();
+        };
+        this._handleBackwardFocus = async (ev) => {
             var _a;
-            const hasTabBeenPressed = ev.key.toLowerCase() === 'tab';
-            if (hasTabBeenPressed && document.activeElement === this._lastFocusableElement) {
-                ev.preventDefault();
-                this._focusOnNextSibling(this.nextElementSibling || this);
-                await this._hideDropdownsSequentially();
-            }
             const $firstFocusableElement = this.$dropdownContent && utilities.UiDomUtils.getFocusableElement(this.$dropdownContent);
-            if (hasTabBeenPressed && ev.shiftKey && document.activeElement === $firstFocusableElement) {
-                ev.preventDefault();
-                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-                await this._hideDropdownsSequentially();
-            }
+            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)
@@ -169,6 +185,18 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                     : this._positionController.position();
             });
         };
+        new keystrokes_controller.KeystrokesController({
+            host: this,
+            target: document.body,
+            keys: ['tab'],
+            callback: this._handleForwardFocus
+        });
+        new keystrokes_controller.KeystrokesController({
+            host: this,
+            target: document.body,
+            keys: [['shift', 'tab']],
+            callback: this._handleBackwardFocus
+        });
     }
     connectedCallback() {
         var _a;
@@ -225,7 +253,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         document.addEventListener(dropdown_constants.DROPDOWN_EVENTS.hide, this.hide);
         window.addEventListener('resize', this._observeScrollToggling);
         document.addEventListener('keydown', this._closeDropdownOnEscape);
-        document.addEventListener('keydown', this._handleFocusWithinDropdown);
         if (this.toggleOnHover)
             document.addEventListener('mouseover', this._hoverToggle);
     }
@@ -245,17 +272,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);
         }
     }
-    _focusOnNextSibling(el) {
-        el.focus();
-        if (el === document.activeElement)
-            return;
-        if (el.firstElementChild) {
-            this._focusOnNextSibling(el.firstElementChild);
-            return;
-        }
-        if (el.nextElementSibling)
-            this._focusOnNextSibling(el.nextElementSibling);
-    }
     _isHoveredWithinDropdown(element) {
         var _a;
         if (element === this)
@@ -287,7 +303,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         window.removeEventListener('resize', this._observeScrollToggling);
         document.removeEventListener('keydown', this._closeDropdownOnEscape);
         document.removeEventListener(dropdown_constants.DROPDOWN_EVENTS.hide, this.hide);
-        document.removeEventListener('keydown', this._handleFocusWithinDropdown);
         if (this.toggleOnHover)
             document.removeEventListener('mouseover', this._hoverToggle);
         if (this.opened) {
@@ -334,6 +349,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdown.prototype, "_lastFocusableElement", void 0);
 exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-dropdown')
+    phoenix_custom_element.phoenixCustomElement('h-dropdown'),
+    tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HDropdown);
 //# sourceMappingURL=dropdown.js.map

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

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

@@ -37,7 +37,11 @@ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_ligh
     }
     render() {
         return lit.html `
-            <h-input-control controlName="${this.name}" type="${input_constants.INPUT_CONTROL_TYPES.hidden}" value="${this.selectedColors}"></h-input-control>
+            <h-input-control
+                controlName="${this.controlName}"
+                type="${input_constants.INPUT_CONTROL_TYPES.hidden}"
+                value="${this.selectedColors}"
+            ></h-input-control>
         `;
     }
 };
@@ -48,7 +52,7 @@ tslib_es6.__decorate([
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", String)
-], exports.HColorSwatchesControl.prototype, "name", void 0);
+], exports.HColorSwatchesControl.prototype, "controlName", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)

package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/messages/base_message.js

@@ -21,9 +21,9 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
         this.direction = relative_position_controller_constants.DIRECTIONS.topCenter;
         this.offset = base_message_constants.DEFAULT_MESSAGE_OFFSET;
         this._setupEventListeners = () => {
-            this.addEventListener('mouseenter', this._open);
-            this.addEventListener('mouseleave', this._close);
-            this.addEventListener('focus', this._open);
+            this.addEventListener('mouseenter', this.open);
+            this.addEventListener('mouseleave', this.close);
+            this.addEventListener('focus', this.open);
         };
         this._positionMessage = () => {
             requestAnimationFrame(() => {
@@ -31,7 +31,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
                 (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.setAttribute('direction', this._positionController.position());
             });
         };
-        this._open = () => {
+        this.open = () => {
             this._tooltipOpenTime = Date.now();
             clearTimeout(this._closeTimeout);
             this._openTimeout = setTimeout(() => {
@@ -40,7 +40,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
                 this.opened = true;
             }, base_message_constants.MESSAGE_SHOW_DELAY_IN_MS);
         };
-        this._close = () => {
+        this.close = () => {
             this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > base_message_constants.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
             clearTimeout(this._openTimeout);
             if (!this.opened)
@@ -62,31 +62,46 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
         this._handleFocusWithinMessage = (ev) => {
             var _a;
             if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`.${this._messageComponentName}`)) !== this)
-                this._close();
-            if (!document.activeElement)
+                this.close();
+            if (!document.activeElement || ev.shiftKey)
                 return;
             const $focusableElements = utilities.UiDomUtils.getFocusableElements(this);
             const activeElementIndex = $focusableElements.indexOf(document.activeElement);
-            // jeśli jest przedostatni, to następnym elementem jest sentinel
-            const isPenultimate = activeElementIndex + 1 === $focusableElements.length - 1;
-            if (!isPenultimate)
+            const isLastFocusableChild = activeElementIndex === $focusableElements.length - 1;
+            if (!isLastFocusableChild)
                 return;
-            this._close();
-            ev.preventDefault();
-            const $focusableParentElements = utilities.UiDomUtils.getFocusableElements(document.body);
-            const sentinelIndex = $focusableParentElements.indexOf(document.activeElement) + 1;
-            $focusableParentElements[sentinelIndex + 1].focus();
+            this.close();
+        };
+        this._handleReverseTab = () => {
+            const $focusableElements = utilities.UiDomUtils.getFocusableElements(document.body);
+            const activeElement = document.activeElement;
+            const indexOfCurrentlyFocusedElement = $focusableElements.indexOf(activeElement);
+            const $previousElement = $focusableElements[indexOfCurrentlyFocusedElement - 1];
+            const $previousElementMessageParent = $previousElement === null || $previousElement === void 0 ? void 0 : $previousElement.closest(`h-${this._messageComponentName}`);
+            if ($previousElementMessageParent === this)
+                return;
+            if ($previousElementMessageParent)
+                $previousElementMessageParent.open();
+            if (this._isBaseMessage(activeElement))
+                activeElement.close();
         };
         this._clickOutsideController = new click_outside_controller.ClickOutsideController({
             host: this,
             container: this,
-            action: this._close
+            action: this.close
         });
         new keystrokes_controller.KeystrokesController({
             host: this,
             keys: ['tab'],
+            target: this,
             callback: this._handleFocusWithinMessage
         });
+        new keystrokes_controller.KeystrokesController({
+            host: this,
+            keys: [['shift', 'tab']],
+            target: document.body,
+            callback: this._handleReverseTab
+        });
     }
     connectedCallback(messageComponentName = '') {
         super.connectedCallback();
@@ -113,6 +128,11 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
         $portalTarget.setAttribute(portal_constants.PORTAL_TARGET_NAME_PROP, base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME);
         document.body.appendChild($portalTarget);
     }
+    _isBaseMessage($element) {
+        if (base_message_constants.MESSAGE_ELEMENTS.includes($element.localName))
+            return true;
+        return false;
+    }
 }
 tslib_es6.__decorate([
     decorators.property({ type: Boolean, reflect: true }),

package/build/cjs/packages/phoenix/src/components/messages/base_message.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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/messages/base_message_constants.js

@@ -9,6 +9,7 @@ const DEFAULT_MESSAGE_PORTAL_NAME = 'message-portal';
 const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
 const MESSAGE_REMOVED_CLASS_NAME = `removed`;
 const DEFAULT_MESSAGE_OFFSET = 10;
+const MESSAGE_ELEMENTS = [tooltip_constants.TOOLTIP_ELEMENT_NAME, hint_constants.HINT_ELEMENT_NAME];
 const MESSAGE_CONTENT_ELEMENTS = [tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME, hint_constants.HINT_CONTENT_ELEMENT_NAME];
 const MESSAGE_SHOW_DELAY_IN_MS = 100;
 const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
@@ -19,6 +20,7 @@ exports.DEFAULT_MESSAGE_PORTAL_NAME = DEFAULT_MESSAGE_PORTAL_NAME;
 exports.MESSAGE_CLOSE_DELAY_IN_MS = MESSAGE_CLOSE_DELAY_IN_MS;
 exports.MESSAGE_CONTENT_ELEMENTS = MESSAGE_CONTENT_ELEMENTS;
 exports.MESSAGE_CONTENT_SLOT_NAME = MESSAGE_CONTENT_SLOT_NAME;
+exports.MESSAGE_ELEMENTS = MESSAGE_ELEMENTS;
 exports.MESSAGE_REMOVED_CLASS_NAME = MESSAGE_REMOVED_CLASS_NAME;
 exports.MESSAGE_SHOW_DELAY_IN_MS = MESSAGE_SHOW_DELAY_IN_MS;
 exports.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;

package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js.map

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

@@ -24,7 +24,6 @@ exports.HHint = class HHint extends base_message.BaseMessage {
             <h-portal ?disabled="${!this.opened}" @portal.open="${this._positionMessage}" to="${this.portalTarget}" hidden>
                 ${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
             </h-portal>
-            <div tabindex="0"></div>
         `;
     }
 };

package/build/cjs/packages/phoenix/src/components/messages/hints/hint.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;"}
+{"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;"}

package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js

@@ -20,7 +20,6 @@ exports.HTooltip = class HTooltip extends base_message.BaseMessage {
             <h-portal ?disabled="${!this.opened}" @portal.open="${this._positionMessage}" to="${this.portalTarget}" hidden>
                 ${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
             </h-portal>
-            <div tabindex="0"></div>
         `;
     }
 };

package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.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;"}
+{"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;"}

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

@@ -44,7 +44,8 @@ exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitEle
         new keystrokes_controller.KeystrokesController({
             host: this,
             keys: ['ArrowRight', 'ArrowLeft'],
-            callback: this._handleArrowNavigation
+            callback: this._handleArrowNavigation,
+            target: this
         });
     }
     _getFocusedTabIndex() {

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

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

@@ -12,8 +12,9 @@ class BtnController {
         this.host.setAttribute('role', 'button');
         this._keystrokesController = new keystrokes_controller.KeystrokesController({
             host,
-            keys: [' ', 'enter'],
-            callback
+            keys: ['enter', ' '],
+            callback,
+            target: host
         });
     }
     hostConnected() { }

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

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

@@ -4,47 +4,91 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 require('lit');
-var keystrokes_controller_constants = require('./keystrokes_controller_constants.js');
 
-var _KeystrokesController_host;
+var _KeystrokesController_host, _KeystrokesController_target;
 class KeystrokesController {
-    constructor({ host, keys, callback }) {
+    constructor({ host, keys, callback, target }) {
         _KeystrokesController_host.set(this, void 0);
+        _KeystrokesController_target.set(this, void 0);
         this._buffer = [];
-        this._lastKeyTime = Date.now();
-        this._catchKeySequence = (ev) => {
-            // ev.stopImmediatePropagation();
+        this._clearBuffer = () => {
+            this._buffer = [];
+        };
+        this._saveKey = (ev) => {
             const key = ev.key.toLowerCase();
-            const currentTime = Date.now();
-            if (currentTime - this._lastKeyTime > keystrokes_controller_constants.KEYSTROKE_DELAY_IN_MS) {
-                this._buffer = [];
+            if (!this._buffer.includes(key))
+                this._buffer = [...this._buffer, key];
+            this._bindSavedKeysWithCallback(ev, this._buffer);
+        };
+        this._bindSavedKeysWithCallback = (ev, savedKeys) => {
+            if (typeof this._keys === 'string') {
+                this._bindWithOneKey(ev, savedKeys);
+                return;
             }
-            this._buffer.push(key);
-            this._lastKeyTime = currentTime;
-            this._bindKeysWithCallback(ev, this._buffer.join(''));
+            const areAllKeysPressed = this._isKeySequenceMultiple(this._keys)
+                ? this._areAllKeysPressedInMultipleSequences(this._keys, savedKeys)
+                : this._isOneOfTheKeysPressed(this._keys, savedKeys);
+            if (areAllKeysPressed)
+                this._callback(ev);
         };
-        this._bindKeysWithCallback = (ev, keySequence) => {
-            const isCorrectKeyPressed = !!this._keys.find((key) => {
-                return key.toLowerCase() === keySequence;
+        this._bindWithOneKey = (ev, savedKeys) => {
+            if (!savedKeys.includes(this._keys))
+                return;
+            this._callback(ev);
+        };
+        this._isKeySequenceMultiple = (keySequence) => {
+            const firstSequence = keySequence[0];
+            if (typeof firstSequence === 'object')
+                return true;
+            return false;
+        };
+        this._areAllKeysPressedInMultipleSequences = (keySequences, savedKeys) => {
+            return !!keySequences.find((keySequence) => {
+                return this._areAllKeysPressedInSingleSequence(keySequence, savedKeys);
             });
-            if (isCorrectKeyPressed) {
-                this._buffer = [];
-                this._callback(ev);
-            }
+        };
+        this._areAllKeysPressedInSingleSequence = (keySequence, savedKeys) => {
+            const indexesInSavedKeys = this._calculateIndexesInSavedKeys(keySequence, savedKeys);
+            if (indexesInSavedKeys.includes(-1))
+                return false;
+            const firstPressedKeyIndex = indexesInSavedKeys[0];
+            const lastPressedKeyIndex = indexesInSavedKeys[indexesInSavedKeys.length - 1];
+            const areKeysPressedSequentially = lastPressedKeyIndex - firstPressedKeyIndex === indexesInSavedKeys.length - 1;
+            return areKeysPressedSequentially;
+        };
+        this._isOneOfTheKeysPressed = (keys, savedKeys) => {
+            const indexesInSavedKeys = this._calculateIndexesInSavedKeys(keys, savedKeys);
+            return typeof indexesInSavedKeys.find((index) => index > -1) === 'number';
+        };
+        this._calculateIndexesInSavedKeys = (keySequence, savedKeys) => {
+            return keySequence.reduce((allIndexes, currentKeyInSequence) => {
+                return [...allIndexes, savedKeys.indexOf(currentKeyInSequence.toLowerCase())];
+            }, []);
+        };
+        // do ogrania jeszcze string czyli zapięcie się na jeden guzik
+        this._removeKey = (ev) => {
+            const key = ev.key.toLowerCase();
+            if (this._buffer.includes(key))
+                this._buffer = this._buffer.filter((currentSavedKey) => currentSavedKey !== key);
         };
         tslib_es6.__classPrivateFieldSet(this, _KeystrokesController_host, host, "f");
+        tslib_es6.__classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
         this._keys = keys;
         this._callback = callback;
         tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
+        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keydown', this._saveKey);
+        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keyup', this._removeKey);
     }
     hostConnected() {
-        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").addEventListener('keydown', this._catchKeySequence);
+        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").addEventListener('focusout', this._clearBuffer);
     }
     hostDisconnected() {
-        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").removeEventListener('keydown', this._catchKeySequence);
+        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").removeEventListener('focusout', this._clearBuffer);
+        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keydown', this._saveKey);
+        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keyup', this._removeKey);
     }
 }
-_KeystrokesController_host = new WeakMap();
+_KeystrokesController_host = new WeakMap(), _KeystrokesController_target = new WeakMap();
 
 exports.KeystrokesController = KeystrokesController;
 //# sourceMappingURL=keystrokes_controller.js.map

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

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

@@ -20,6 +20,7 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     private _backdropController;
     _lastFocusableElement: HTMLElement | undefined;
     private _rootDropdown?;
+    constructor();
     connectedCallback(): void;
     private static _appendDropdownPortal;
     private _findRootDropdown;
@@ -36,8 +37,9 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     private _observeScrollToggling;
     private _toggleScroll;
     private _closeDropdownOnEscape;
-    private _handleFocusWithinDropdown;
-    private _focusOnNextSibling;
+    private _handleForwardFocus;
+    private _focusOnNextElementAfterToggler;
+    private _handleBackwardFocus;
     private _hoverToggle;
     private _isHoveredWithinDropdown;
     private _setupInitialDropdownProperties;

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

@@ -7,8 +7,9 @@ import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal
 import { html } from 'lit-html';
 import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
 import { property } from '@lit/reactive-element/decorators.js';
+import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
 import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
-import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
+import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_TOGGLER_NAME, DROPDOWN_CONTENT_NAME } from './dropdown_constants.js';
 import { DIRECTIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import throttle_1 from '../../../../../external/lodash/throttle.js';
@@ -17,7 +18,7 @@ import { RelativePositionController } from '../../controllers/relative_position_
 var HDropdown_1;
 let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.opened = false;
         this.direction = DIRECTIONS.bottomCenter;
         this.toggleOnHover = false;
@@ -51,13 +52,13 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                     }, 0);
                     const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
                     setTimeout(() => {
-                        var _a, _b, _c;
+                        var _a, _b;
                         this._dispatchShowDropdownEvent();
                         (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
                         this._toggleScroll();
                         if (!this._lastFocusableElement)
                             this._lastFocusableElement = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.lastElementChild;
-                        this._focusOnNextSibling((_c = this.$dropdownContent) === null || _c === void 0 ? void 0 : _c.firstElementChild);
+                        UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
                         resolve();
                     }, transitionDuration);
                 });
@@ -128,20 +129,35 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                 return;
             await this.hide();
         };
-        this._handleFocusWithinDropdown = async (ev) => {
+        this._handleForwardFocus = async (ev) => {
+            const $focusableElementsWithinDropdownContent = UiDomUtils.getFocusableElements(this.$dropdownContent);
+            const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
+            const isActiveElementLastFocusableElement = document.activeElement === this._lastFocusableElement;
+            if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
+                this._focusOnNextElementAfterToggler(ev);
+        };
+        this._focusOnNextElementAfterToggler = async (ev) => {
+            ev.preventDefault();
+            const $focusableElements = UiDomUtils.getFocusableElements(document.body);
+            const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
+            const $nextElementToFocus = $focusableElements.find((currentElement, index) => {
+                if (index > indexOfDropdownToggler && !currentElement.closest(`${DROPDOWN_TOGGLER_NAME}[name="${this.name}"]`))
+                    return currentElement;
+                return null;
+            });
+            if ($nextElementToFocus)
+                $nextElementToFocus.focus();
+            await this._hideDropdownsSequentially();
+            await this.hide();
+        };
+        this._handleBackwardFocus = async (ev) => {
             var _a;
-            const hasTabBeenPressed = ev.key.toLowerCase() === 'tab';
-            if (hasTabBeenPressed && document.activeElement === this._lastFocusableElement) {
-                ev.preventDefault();
-                this._focusOnNextSibling(this.nextElementSibling || this);
-                await this._hideDropdownsSequentially();
-            }
             const $firstFocusableElement = this.$dropdownContent && UiDomUtils.getFocusableElement(this.$dropdownContent);
-            if (hasTabBeenPressed && ev.shiftKey && document.activeElement === $firstFocusableElement) {
-                ev.preventDefault();
-                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-                await this._hideDropdownsSequentially();
-            }
+            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)
@@ -165,6 +181,18 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                     : this._positionController.position();
             });
         };
+        new KeystrokesController({
+            host: this,
+            target: document.body,
+            keys: ['tab'],
+            callback: this._handleForwardFocus
+        });
+        new KeystrokesController({
+            host: this,
+            target: document.body,
+            keys: [['shift', 'tab']],
+            callback: this._handleBackwardFocus
+        });
     }
     connectedCallback() {
         var _a;
@@ -221,7 +249,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         document.addEventListener(DROPDOWN_EVENTS.hide, this.hide);
         window.addEventListener('resize', this._observeScrollToggling);
         document.addEventListener('keydown', this._closeDropdownOnEscape);
-        document.addEventListener('keydown', this._handleFocusWithinDropdown);
         if (this.toggleOnHover)
             document.addEventListener('mouseover', this._hoverToggle);
     }
@@ -241,17 +268,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(SCROLLABLE_CLASS_NAME);
         }
     }
-    _focusOnNextSibling(el) {
-        el.focus();
-        if (el === document.activeElement)
-            return;
-        if (el.firstElementChild) {
-            this._focusOnNextSibling(el.firstElementChild);
-            return;
-        }
-        if (el.nextElementSibling)
-            this._focusOnNextSibling(el.nextElementSibling);
-    }
     _isHoveredWithinDropdown(element) {
         var _a;
         if (element === this)
@@ -283,7 +299,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         window.removeEventListener('resize', this._observeScrollToggling);
         document.removeEventListener('keydown', this._closeDropdownOnEscape);
         document.removeEventListener(DROPDOWN_EVENTS.hide, this.hide);
-        document.removeEventListener('keydown', this._handleFocusWithinDropdown);
         if (this.toggleOnHover)
             document.removeEventListener('mouseover', this._hoverToggle);
         if (this.opened) {
@@ -330,7 +345,8 @@ __decorate([
     __metadata("design:type", Object)
 ], HDropdown.prototype, "_lastFocusableElement", void 0);
 HDropdown = HDropdown_1 = __decorate([
-    phoenixCustomElement('h-dropdown')
+    phoenixCustomElement('h-dropdown'),
+    __metadata("design:paramtypes", [])
 ], HDropdown);
 
 export { HDropdown };

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

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

@@ -2,7 +2,7 @@ import { TemplateResult } from 'lit';
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HColorSwatchesControl extends PhoenixLightLitElement {
     controlId: string;
-    name: string;
+    controlName: string;
     disabled: boolean;
     required: boolean;
     error: boolean;

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

@@ -33,7 +33,11 @@ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitE
     }
     render() {
         return html `
-            <h-input-control controlName="${this.name}" type="${INPUT_CONTROL_TYPES.hidden}" value="${this.selectedColors}"></h-input-control>
+            <h-input-control
+                controlName="${this.controlName}"
+                type="${INPUT_CONTROL_TYPES.hidden}"
+                value="${this.selectedColors}"
+            ></h-input-control>
         `;
     }
 };
@@ -44,7 +48,7 @@ __decorate([
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], HColorSwatchesControl.prototype, "name", void 0);
+], HColorSwatchesControl.prototype, "controlName", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)

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

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

@@ -1,6 +1,7 @@
+import { IBaseMessage } from './base_message_types';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import type { TDirection } from "../../controllers/relative_position_controller/relative_position_controller_types";
-export declare class BaseMessage extends PhoenixLightLitElement {
+export declare class BaseMessage extends PhoenixLightLitElement implements IBaseMessage {
     opened: boolean;
     portalTarget: string;
     direction: TDirection;
@@ -18,7 +19,9 @@ export declare class BaseMessage extends PhoenixLightLitElement {
     private static _appendMessagePortal;
     private _setupEventListeners;
     protected _positionMessage: () => void;
-    private _open;
-    private _close;
+    open: () => void;
+    close: () => void;
     private _handleFocusWithinMessage;
+    private _handleReverseTab;
+    private _isBaseMessage;
 }

package/build/esm/packages/phoenix/src/components/messages/base_message.js

@@ -7,7 +7,7 @@ import { KeystrokesController } from '../../controllers/keystrokes_controller/ke
 import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
-import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS } from './base_message_constants.js';
+import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_ELEMENTS } from './base_message_constants.js';
 
 class BaseMessage extends PhoenixLightLitElement {
     constructor() {
@@ -17,9 +17,9 @@ class BaseMessage extends PhoenixLightLitElement {
         this.direction = DIRECTIONS.topCenter;
         this.offset = DEFAULT_MESSAGE_OFFSET;
         this._setupEventListeners = () => {
-            this.addEventListener('mouseenter', this._open);
-            this.addEventListener('mouseleave', this._close);
-            this.addEventListener('focus', this._open);
+            this.addEventListener('mouseenter', this.open);
+            this.addEventListener('mouseleave', this.close);
+            this.addEventListener('focus', this.open);
         };
         this._positionMessage = () => {
             requestAnimationFrame(() => {
@@ -27,7 +27,7 @@ class BaseMessage extends PhoenixLightLitElement {
                 (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.setAttribute('direction', this._positionController.position());
             });
         };
-        this._open = () => {
+        this.open = () => {
             this._tooltipOpenTime = Date.now();
             clearTimeout(this._closeTimeout);
             this._openTimeout = setTimeout(() => {
@@ -36,7 +36,7 @@ class BaseMessage extends PhoenixLightLitElement {
                 this.opened = true;
             }, MESSAGE_SHOW_DELAY_IN_MS);
         };
-        this._close = () => {
+        this.close = () => {
             this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
             clearTimeout(this._openTimeout);
             if (!this.opened)
@@ -58,31 +58,46 @@ class BaseMessage extends PhoenixLightLitElement {
         this._handleFocusWithinMessage = (ev) => {
             var _a;
             if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`.${this._messageComponentName}`)) !== this)
-                this._close();
-            if (!document.activeElement)
+                this.close();
+            if (!document.activeElement || ev.shiftKey)
                 return;
             const $focusableElements = UiDomUtils.getFocusableElements(this);
             const activeElementIndex = $focusableElements.indexOf(document.activeElement);
-            // jeśli jest przedostatni, to następnym elementem jest sentinel
-            const isPenultimate = activeElementIndex + 1 === $focusableElements.length - 1;
-            if (!isPenultimate)
+            const isLastFocusableChild = activeElementIndex === $focusableElements.length - 1;
+            if (!isLastFocusableChild)
                 return;
-            this._close();
-            ev.preventDefault();
-            const $focusableParentElements = UiDomUtils.getFocusableElements(document.body);
-            const sentinelIndex = $focusableParentElements.indexOf(document.activeElement) + 1;
-            $focusableParentElements[sentinelIndex + 1].focus();
+            this.close();
+        };
+        this._handleReverseTab = () => {
+            const $focusableElements = UiDomUtils.getFocusableElements(document.body);
+            const activeElement = document.activeElement;
+            const indexOfCurrentlyFocusedElement = $focusableElements.indexOf(activeElement);
+            const $previousElement = $focusableElements[indexOfCurrentlyFocusedElement - 1];
+            const $previousElementMessageParent = $previousElement === null || $previousElement === void 0 ? void 0 : $previousElement.closest(`h-${this._messageComponentName}`);
+            if ($previousElementMessageParent === this)
+                return;
+            if ($previousElementMessageParent)
+                $previousElementMessageParent.open();
+            if (this._isBaseMessage(activeElement))
+                activeElement.close();
         };
         this._clickOutsideController = new ClickOutsideController({
             host: this,
             container: this,
-            action: this._close
+            action: this.close
         });
         new KeystrokesController({
             host: this,
             keys: ['tab'],
+            target: this,
             callback: this._handleFocusWithinMessage
         });
+        new KeystrokesController({
+            host: this,
+            keys: [['shift', 'tab']],
+            target: document.body,
+            callback: this._handleReverseTab
+        });
     }
     connectedCallback(messageComponentName = '') {
         super.connectedCallback();
@@ -109,6 +124,11 @@ class BaseMessage extends PhoenixLightLitElement {
         $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_MESSAGE_PORTAL_NAME);
         document.body.appendChild($portalTarget);
     }
+    _isBaseMessage($element) {
+        if (MESSAGE_ELEMENTS.includes($element.localName))
+            return true;
+        return false;
+    }
 }
 __decorate([
     property({ type: Boolean, reflect: true }),

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

package/build/esm/packages/phoenix/src/components/messages/base_message_constants.d.ts

@@ -2,6 +2,7 @@ export declare const DEFAULT_MESSAGE_PORTAL_NAME = "message-portal";
 export declare const MESSAGE_CONTENT_SLOT_NAME = "message-content";
 export declare const MESSAGE_REMOVED_CLASS_NAME = "removed";
 export declare const DEFAULT_MESSAGE_OFFSET = 10;
+export declare const MESSAGE_ELEMENTS: string[];
 export declare const MESSAGE_CONTENT_ELEMENTS: string[];
 export declare const MESSAGE_SHOW_DELAY_IN_MS = 100;
 export declare const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;

package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js

@@ -1,14 +1,15 @@
-import { HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
-import { TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
+import { HINT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
+import { TOOLTIP_ELEMENT_NAME, TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
 
 const DEFAULT_MESSAGE_PORTAL_NAME = 'message-portal';
 const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
 const MESSAGE_REMOVED_CLASS_NAME = `removed`;
 const DEFAULT_MESSAGE_OFFSET = 10;
+const MESSAGE_ELEMENTS = [TOOLTIP_ELEMENT_NAME, HINT_ELEMENT_NAME];
 const MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
 const MESSAGE_SHOW_DELAY_IN_MS = 100;
 const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
 const MESSAGE_CLOSE_DELAY_IN_MS = 500;
 
-export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS };
+export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_ELEMENTS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS };
 //# sourceMappingURL=base_message_constants.js.map

package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map

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

package/build/esm/packages/phoenix/src/components/messages/base_message_types.d.ts

@@ -0,0 +1,4 @@
+export interface IBaseMessage {
+    open: () => void;
+    close: () => void;
+}

package/build/esm/packages/phoenix/src/components/messages/base_message_types.js

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

package/build/esm/packages/phoenix/src/components/messages/base_message_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base_message_types.js","sourceRoot":"","sources":["../../../../../../../src/components/messages/base_message_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/phoenix/src/components/messages/hints/hint.js

@@ -20,7 +20,6 @@ let HHint = class HHint extends BaseMessage {
             <h-portal ?disabled="${!this.opened}" @portal.open="${this._positionMessage}" to="${this.portalTarget}" hidden>
                 ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
             </h-portal>
-            <div tabindex="0"></div>
         `;
     }
 };

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

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js

@@ -16,7 +16,6 @@ let HTooltip = class HTooltip extends BaseMessage {
             <h-portal ?disabled="${!this.opened}" @portal.open="${this._positionMessage}" to="${this.portalTarget}" hidden>
                 ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
             </h-portal>
-            <div tabindex="0"></div>
         `;
     }
 };

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js.map

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

package/build/esm/packages/phoenix/src/components/portal/portal_constants.d.ts

@@ -5,6 +5,7 @@ export declare const PORTAL_EVENTS: {
     close: string;
 };
 export declare const PORTAL_TARGET_NAME_PROP = "name";
+export declare const PORTAL_COMPONENT_NAME = "h-portal";
 export declare const PORTAL_TARGET_COMPONENT_NAME = "h-portal-target";
 export declare const PORTAL_TARGET_ATTRIBUTE_NAME = "portal-target";
 declare global {

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

@@ -40,7 +40,8 @@ let HTabs = class HTabs extends PhoenixLightLitElement {
         new KeystrokesController({
             host: this,
             keys: ['ArrowRight', 'ArrowLeft'],
-            callback: this._handleArrowNavigation
+            callback: this._handleArrowNavigation,
+            target: this
         });
     }
     _getFocusedTabIndex() {

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

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

@@ -8,8 +8,9 @@ class BtnController {
         this.host.setAttribute('role', 'button');
         this._keystrokesController = new KeystrokesController({
             host,
-            keys: [' ', 'enter'],
-            callback
+            keys: ['enter', ' '],
+            callback,
+            target: host
         });
     }
     hostConnected() { }

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

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

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

@@ -5,10 +5,17 @@ export declare class KeystrokesController implements ReactiveController {
     private _keys;
     private _callback;
     private _buffer;
-    private _lastKeyTime;
-    constructor({ host, keys, callback }: TKeystrokesControllerProps);
+    constructor({ host, keys, callback, target }: TKeystrokesControllerProps);
     hostConnected(): void;
     hostDisconnected(): void;
-    private _catchKeySequence;
-    private _bindKeysWithCallback;
+    private _clearBuffer;
+    private _saveKey;
+    private _bindSavedKeysWithCallback;
+    private _bindWithOneKey;
+    private _isKeySequenceMultiple;
+    private _areAllKeysPressedInMultipleSequences;
+    private _areAllKeysPressedInSingleSequence;
+    private _isOneOfTheKeysPressed;
+    private _calculateIndexesInSavedKeys;
+    private _removeKey;
 }

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

@@ -1,46 +1,90 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
-import { KEYSTROKE_DELAY_IN_MS } from './keystrokes_controller_constants.js';
 
-var _KeystrokesController_host;
+var _KeystrokesController_host, _KeystrokesController_target;
 class KeystrokesController {
-    constructor({ host, keys, callback }) {
+    constructor({ host, keys, callback, target }) {
         _KeystrokesController_host.set(this, void 0);
+        _KeystrokesController_target.set(this, void 0);
         this._buffer = [];
-        this._lastKeyTime = Date.now();
-        this._catchKeySequence = (ev) => {
-            // ev.stopImmediatePropagation();
+        this._clearBuffer = () => {
+            this._buffer = [];
+        };
+        this._saveKey = (ev) => {
             const key = ev.key.toLowerCase();
-            const currentTime = Date.now();
-            if (currentTime - this._lastKeyTime > KEYSTROKE_DELAY_IN_MS) {
-                this._buffer = [];
+            if (!this._buffer.includes(key))
+                this._buffer = [...this._buffer, key];
+            this._bindSavedKeysWithCallback(ev, this._buffer);
+        };
+        this._bindSavedKeysWithCallback = (ev, savedKeys) => {
+            if (typeof this._keys === 'string') {
+                this._bindWithOneKey(ev, savedKeys);
+                return;
             }
-            this._buffer.push(key);
-            this._lastKeyTime = currentTime;
-            this._bindKeysWithCallback(ev, this._buffer.join(''));
+            const areAllKeysPressed = this._isKeySequenceMultiple(this._keys)
+                ? this._areAllKeysPressedInMultipleSequences(this._keys, savedKeys)
+                : this._isOneOfTheKeysPressed(this._keys, savedKeys);
+            if (areAllKeysPressed)
+                this._callback(ev);
         };
-        this._bindKeysWithCallback = (ev, keySequence) => {
-            const isCorrectKeyPressed = !!this._keys.find((key) => {
-                return key.toLowerCase() === keySequence;
+        this._bindWithOneKey = (ev, savedKeys) => {
+            if (!savedKeys.includes(this._keys))
+                return;
+            this._callback(ev);
+        };
+        this._isKeySequenceMultiple = (keySequence) => {
+            const firstSequence = keySequence[0];
+            if (typeof firstSequence === 'object')
+                return true;
+            return false;
+        };
+        this._areAllKeysPressedInMultipleSequences = (keySequences, savedKeys) => {
+            return !!keySequences.find((keySequence) => {
+                return this._areAllKeysPressedInSingleSequence(keySequence, savedKeys);
             });
-            if (isCorrectKeyPressed) {
-                this._buffer = [];
-                this._callback(ev);
-            }
+        };
+        this._areAllKeysPressedInSingleSequence = (keySequence, savedKeys) => {
+            const indexesInSavedKeys = this._calculateIndexesInSavedKeys(keySequence, savedKeys);
+            if (indexesInSavedKeys.includes(-1))
+                return false;
+            const firstPressedKeyIndex = indexesInSavedKeys[0];
+            const lastPressedKeyIndex = indexesInSavedKeys[indexesInSavedKeys.length - 1];
+            const areKeysPressedSequentially = lastPressedKeyIndex - firstPressedKeyIndex === indexesInSavedKeys.length - 1;
+            return areKeysPressedSequentially;
+        };
+        this._isOneOfTheKeysPressed = (keys, savedKeys) => {
+            const indexesInSavedKeys = this._calculateIndexesInSavedKeys(keys, savedKeys);
+            return typeof indexesInSavedKeys.find((index) => index > -1) === 'number';
+        };
+        this._calculateIndexesInSavedKeys = (keySequence, savedKeys) => {
+            return keySequence.reduce((allIndexes, currentKeyInSequence) => {
+                return [...allIndexes, savedKeys.indexOf(currentKeyInSequence.toLowerCase())];
+            }, []);
+        };
+        // do ogrania jeszcze string czyli zapięcie się na jeden guzik
+        this._removeKey = (ev) => {
+            const key = ev.key.toLowerCase();
+            if (this._buffer.includes(key))
+                this._buffer = this._buffer.filter((currentSavedKey) => currentSavedKey !== key);
         };
         __classPrivateFieldSet(this, _KeystrokesController_host, host, "f");
+        __classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
         this._keys = keys;
         this._callback = callback;
         __classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
+        __classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keydown', this._saveKey);
+        __classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keyup', this._removeKey);
     }
     hostConnected() {
-        __classPrivateFieldGet(this, _KeystrokesController_host, "f").addEventListener('keydown', this._catchKeySequence);
+        __classPrivateFieldGet(this, _KeystrokesController_host, "f").addEventListener('focusout', this._clearBuffer);
     }
     hostDisconnected() {
-        __classPrivateFieldGet(this, _KeystrokesController_host, "f").removeEventListener('keydown', this._catchKeySequence);
+        __classPrivateFieldGet(this, _KeystrokesController_host, "f").removeEventListener('focusout', this._clearBuffer);
+        __classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keydown', this._saveKey);
+        __classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keyup', this._removeKey);
     }
 }
-_KeystrokesController_host = new WeakMap();
+_KeystrokesController_host = new WeakMap(), _KeystrokesController_target = new WeakMap();
 
 export { KeystrokesController };
 //# sourceMappingURL=keystrokes_controller.js.map

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

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

@@ -1,6 +1,7 @@
 import { TWebComponentsContextControllerHost } from "../../core/context/context_controller_types";
 export declare type TKeystrokesControllerProps = {
     host: TWebComponentsContextControllerHost;
-    keys: string[];
+    keys: string[][] | string[] | string;
     callback: (ev: Event) => void;
+    target: Element;
 };

package/package.json

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

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

@@ -1,8 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const KEYSTROKE_DELAY_IN_MS = 500;
-
-exports.KEYSTROKE_DELAY_IN_MS = KEYSTROKE_DELAY_IN_MS;
-//# sourceMappingURL=keystrokes_controller_constants.js.map

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

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

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

@@ -1 +0,0 @@
-export declare const KEYSTROKE_DELAY_IN_MS = 500;

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

@@ -1,4 +0,0 @@
-const KEYSTROKE_DELAY_IN_MS = 500;
-
-export { KEYSTROKE_DELAY_IN_MS };
-//# sourceMappingURL=keystrokes_controller_constants.js.map

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

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