npm - @shoper/phoenix_design_system - Versions diffs - 1.15.11-1 → 1.15.11-11 - Mend

@shoper/phoenix_design_system 1.15.11-1 → 1.15.11-11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

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

@@ -7,7 +7,6 @@ var decorators = require('lit/decorators');
 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');
 var global_constants = require('../../global_constants.js');
 var dropdown_constants = require('./dropdown_constants.js');
 var toggle_element_aria_controller = require('../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
@@ -17,6 +16,8 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
         super();
         this.name = '';
         this.ariaHasPopup = 'menu';
+        this.ariaControls = '';
+        this.role = 'button';
         this._setupTogglerAria = () => {
             this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
             if (this._$dropdown.isOpened)
@@ -24,11 +25,14 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
                     host: this,
                     initialAriaExpandedValue: this._$dropdown.isOpened()
                 });
+            this.setAttribute('role', this.role);
             this.setAttribute('aria-haspopup', this.ariaHasPopup);
-            if (this._$dropdown.id)
-                this.setAttribute('aria-controls', this._$dropdown.id);
+            if (this.ariaControls || this._$dropdown.id)
+                this.setAttribute('aria-controls', this.ariaControls || this._$dropdown.id);
         };
         this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
+            if (ev.key !== 'Enter' && ev.key !== ' ')
+                return;
             ev.stopImmediatePropagation();
             this._dispatchToggleDropdownEvent(ev);
         };
@@ -47,7 +51,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
     connectedCallback() {
         var _a;
         super.connectedCallback();
-        this._btnController = new btn_controller.BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
+        this.addEventListener('keydown', this._dispatchToggleDropdownEventWithKeyboard);
         this._setupTogglerAria();
         const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(dropdown_constants.DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
         if (hasToggleOnHover) {
@@ -65,6 +69,14 @@ tslib_es6.__decorate([
     decorators.property({ type: String, attribute: 'aria-haspopup' }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdownToggler.prototype, "ariaHasPopup", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'aria-controls' }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdownToggler.prototype, "ariaControls", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdownToggler.prototype, "role", void 0);
 exports.HDropdownToggler = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-dropdown-toggler'),
     tslib_es6.__metadata("design:paramtypes", [])

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

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

package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED Viewed

@@ -9,6 +9,7 @@ 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 select_components_constatns = require('../select_components_constatns.js');
+var dropdown_constants = require('../../../../dropdown/dropdown_constants.js');
 var debounce = require('../../../../../../../../external/lodash/debounce.js');
 var select_search_constants = require('./select_search_constants.js');
@@ -52,8 +53,8 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
     connectedCallback() {
         super.connectedCallback();
         this.classList.add(select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch);
-        // to musisz zrobić inaczej, bo jest kilka selectów na stronie
-        this._$selectOptions = document.querySelector('h-options');
+        const $selectOptionsContainer = this.closest(dropdown_constants.DROPDOWN_CONTENT_NAME);
+        this._$selectOptions = $selectOptionsContainer === null || $selectOptionsContainer === void 0 ? void 0 : $selectOptionsContainer.querySelector('h-options');
         this.addEventListener('keydown', this._handleSearchKeydown);
     }
     render() {

package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/components/select_options.js CHANGED Viewed

@@ -26,6 +26,7 @@ exports.HOptions = class HOptions extends phoenix_light_lit_element.PhoenixLight
             });
         };
         this.setAttribute('role', 'listbox');
+        this.setAttribute('aria-labelledby', 'dsf');
         this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
         this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
     }

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

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

package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js ADDED Viewed

@@ -0,0 +1,98 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
+require('lit');
+var utilities = require('@dreamcommerce/utilities');
+var _SelectTogglerKeyboardController_host, _SelectTogglerKeyboardController__$toggler, _SelectTogglerKeyboardController_currentOptionIndex, _SelectTogglerKeyboardController__$options;
+class SelectTogglerKeyboardController {
+    constructor({ host, $toggler, $list, listItemSelector = '[role="option"]', }) {
+        _SelectTogglerKeyboardController_host.set(this, void 0);
+        _SelectTogglerKeyboardController__$toggler.set(this, void 0);
+        _SelectTogglerKeyboardController_currentOptionIndex.set(this, void 0);
+        _SelectTogglerKeyboardController__$options.set(this, void 0);
+        this._handleKeyboardNavigation = (ev) => {
+            const arrowKeys = ['ArrowUp', 'ArrowDown'];
+            if (arrowKeys.includes(ev.key)) {
+                this._openSelect(ev);
+                return;
+            }
+            if (ev.key === 'Home') {
+                this._openSelectAndGoToFirstElement(ev);
+                return;
+            }
+            if (ev.key === 'End') {
+                this._openSelectAndGoToLastElement(ev);
+                return;
+            }
+            if (ev.altKey || ev.shiftKey)
+                return;
+            const isAWriteableCharacter = ev.key.length === 1;
+            if (isAWriteableCharacter)
+                this._openSelectAndGoToMatchedElement(ev);
+        };
+        this._openSelect = (event) => {
+            var _a;
+            event.preventDefault();
+            (_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show();
+        };
+        this._openSelectAndGoToFirstElement = async (event) => {
+            var _a;
+            event.preventDefault();
+            await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
+            const $firstOption = this._getAvailableOptions()[0];
+            if ($firstOption)
+                this._navigate($firstOption);
+        };
+        this._openSelectAndGoToLastElement = async (event) => {
+            var _a;
+            event.preventDefault();
+            await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
+            const $availableOptions = this._getAvailableOptions();
+            const $lastOption = $availableOptions[$availableOptions.length - 1];
+            if ($lastOption)
+                this._navigate($lastOption);
+        };
+        this._openSelectAndGoToMatchedElement = async (event) => {
+            var _a;
+            event.preventDefault();
+            await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
+            const $matchedOption = this._getAvailableOptions().find(($option) => { var _a; return (_a = $option.innerText) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(event.key.toLowerCase()); });
+            if ($matchedOption)
+                this._navigate($matchedOption);
+        };
+        this._getAvailableOptions = () => {
+            return tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
+                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
+            });
+        };
+        this._findSelectedIndex = () => {
+            const selectedOptionIndex = this._getAvailableOptions().findIndex(($option) => $option.selected);
+            return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
+        };
+        this._navigate = ($newOption) => {
+            const $selectedOption = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f")[this._findSelectedIndex()];
+            utilities.UiDomUtils.makeUnnavigable($selectedOption);
+            const newOptionIndex = this._getAvailableOptions().findIndex(($option) => $newOption.value === $option.value);
+            tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").listBoxController.currentOptionIndex = newOptionIndex;
+            utilities.UiDomUtils.makeNavigable($newOption);
+            $newOption.focus();
+        };
+        tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
+        tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
+        tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
+        tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
+    }
+    hostConnected() {
+        tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
+    }
+    hostDisconnected() {
+        tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
+    }
+}
+_SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
+exports.SelectTogglerKeyboardController = SelectTogglerKeyboardController;
+//# sourceMappingURL=select_toggler_keyboard_controller.js.map

package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/select.js CHANGED Viewed

@@ -18,6 +18,7 @@ var observable_directive = require('../../../directives/observable_directive.js'
 var select_toggler = require('./components/toggler/select_toggler.js');
 var ref_js = require('lit-html/directives/ref.js');
 var context_provider_controller = require('../../../core/context/context_provider_controller.js');
+var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
 var dropdown_content = require('../../dropdown/dropdown_content.js');
 var dropdown_toggler = require('../../dropdown/dropdown_toggler.js');
 var dropdown = require('../../dropdown/dropdown.js');
@@ -29,6 +30,7 @@ var select_utils = require('./select_utils.js');
 var select_controller = require('./controllers/select_controller.js');
 var select_option_mapper = require('./model/select_option_mapper.js');
 var repeat = require('lit/directives/repeat');
+var select_toggler_keyboard_controller = require('./controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js');
 exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -41,13 +43,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this.type = select_constants.SELECT_TYPES.select;
         this.noDeselect = false;
         this.ariaLabelledby = '';
+        this._selectOptionsId = v4['default']();
         this._searchValue = '';
         this._$options = new Map();
-        this._$dropdown = ref_js.createRef();
+        this.$dropdown = ref_js.createRef();
         this.$search = ref_js.createRef();
         this._$optionsList = ref_js.createRef();
         this._$dropdownContent = ref_js.createRef();
-        this._$dropdownToggler = ref_js.createRef();
+        this.$dropdownToggler = ref_js.createRef();
         this._selectContext = new context_provider_controller.ContextProviderController(this);
         this._updateOptions = () => {
             const $options = this._getOptions();
@@ -132,11 +135,15 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             });
         };
         this._handleDropdownHidden = () => {
-            var _a, _b;
+            var _a, _b, _c;
             this._searchValue = '';
             this.opened = false;
-            (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
-            (_b = this._$dropdownToggler.value) === null || _b === void 0 ? void 0 : _b.focus();
+            (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
+            const isBodyActive = document.activeElement === document.body;
+            const isInnerElementActive = (_b = this._$dropdownContent.value) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement);
+            if (isInnerElementActive || isBodyActive) {
+                (_c = this.$dropdownToggler.value) === null || _c === void 0 ? void 0 : _c.focus();
+            }
         };
         this._manageSelectFocusAria = (ev) => {
             var _a;
@@ -145,14 +152,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 return;
             const optionId = $target.id;
             if (optionId) {
-                (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
+                (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
             }
         };
         this._closeSelect = () => {
             var _a;
             if (!this.opened)
                 return;
-            (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
+            (_a = this.$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
         };
         this._clearOptions = () => {
             this._selectController.deselectAll();
@@ -196,7 +203,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         return Array.from(this._$options.values());
     }
     updated(changedProperties) {
-        var _a;
+        var _a, _b;
         super.updated(changedProperties);
         if (changedProperties.has('opened')) {
             if (this.opened) {
@@ -220,6 +227,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         if (this.listBoxController) {
             this.listBoxController.calculateSelectedOptionIndex();
         }
+        if (this._$optionsList.value && this.$dropdownToggler.value) {
+            (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
+            this._selectTogglerKeyboardController = new select_toggler_keyboard_controller.SelectTogglerKeyboardController({
+                host: this,
+                $toggler: this.$dropdownToggler.value,
+                $list: this._$optionsList.value
+            });
+        }
     }
     _focusElementAfterSelectOpened() {
         var _a;
@@ -346,7 +361,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
         return lit.html `
             <h-dropdown
-                ${ref_js.ref(this._$dropdown)}
+                ${ref_js.ref(this.$dropdown)}
                 @showed=${() => (this.opened = true)}
                 @hidden=${this._handleDropdownHidden}
                 name="${this.controlName}"
@@ -356,7 +371,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 no-autofocus
             >
                 <h-dropdown-toggler
-                    ${ref_js.ref(this._$dropdownToggler)}
+                    ${ref_js.ref(this.$dropdownToggler)}
                     name="${this.controlName}"
                     validation-container
                     aria-haspopup="listbox"
@@ -364,6 +379,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                     aria-required="${this.required ? 'true' : 'false'}"
                     aria-activedescendant
                     aria-labelledby="${this.ariaLabelledby}"
+                    role="combobox"
+                    aria-controls="${this._selectOptionsId}"
                 >
                     ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
                 </h-dropdown-toggler>
@@ -389,6 +406,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                     <h-options
                         class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult() ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty : ''}"
+                        aria-labelledby="${this.ariaLabelledby}"
+                        id="${this._selectOptionsId}"
                         ${ref_js.ref(this._$optionsList)}
                         @optionClicked=${this._handleOptionClicked}
                         @optionUpdated=${this._handleOptionUpdated}

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

	@@ -1 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/list_box_controller/list_box_keyboard_controller.js CHANGED Viewed

@@ -7,12 +7,11 @@ require('lit');
 var utilities = require('@dreamcommerce/utilities');
 var list_box_controller_constants = require('./list_box_controller_constants.js');
-var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
+var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
 class ListBoxKeyboardController {
     constructor({ host, $list, listItemSelector = '[role="option"]', orientation = list_box_controller_constants.LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS.vertical }) {
         _ListBoxKeyboardController_host.set(this, void 0);
         _ListBoxKeyboardController__$list.set(this, void 0);
-        _ListBoxKeyboardController_currentOptionIndex.set(this, void 0);
         _ListBoxKeyboardController__$options.set(this, void 0);
         _ListBoxKeyboardController_listItemSelector.set(this, void 0);
         _ListBoxKeyboardController_keys.set(this, void 0);
@@ -34,13 +33,13 @@ class ListBoxKeyboardController {
             if (newOptionIndex === undefined) {
                 newOptionIndex = this._findCurrentIndex();
             }
-            if (newOptionIndex === tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
+            if (newOptionIndex === this.currentOptionIndex)
                 return;
             if (prevOptionIndex !== undefined) {
                 const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
                 $prevOption && utilities.UiDomUtils.makeUnnavigable($prevOption);
             }
-            tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
+            this.currentOptionIndex = newOptionIndex;
             const $focusedOption = $availableOptions[newOptionIndex];
             if ($focusedOption) {
                 utilities.UiDomUtils.makeNavigable($focusedOption);
@@ -63,7 +62,7 @@ class ListBoxKeyboardController {
         };
         this.calculateSelectedOptionIndex = () => {
             const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
-            tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, selectedOptionIndex !== -1 ? selectedOptionIndex : 0, "f");
+            this.currentOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
         };
         tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
         tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -78,54 +77,54 @@ class ListBoxKeyboardController {
         tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
             if (event.target !== tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
                 return;
-            if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
+            if (this.currentOptionIndex === undefined)
                 return;
-            const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f")];
+            const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[this.currentOptionIndex];
             utilities.UiDomUtils.makeUnnavigable($prevOption);
-            tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, undefined, "f");
+            this.currentOptionIndex = undefined;
         });
         tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").forEach(($option) => utilities.UiDomUtils.makeUnnavigable($option));
     }
     _getPrevOptionIndex() {
-        if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
+        if (this.currentOptionIndex === undefined)
             return undefined;
-        if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
-            return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
-        if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
-            return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
+        if (this.currentOptionIndex <= 0)
+            return this.currentOptionIndex;
+        if (this.currentOptionIndex <= 0)
+            return this.currentOptionIndex;
         const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
             return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
         });
-        if (!!$availableOptions[tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1])
-            return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
+        if (!!$availableOptions[this.currentOptionIndex - 1])
+            return this.currentOptionIndex - 1;
         // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
         const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
         if (newIndexOfCurrentlySelectedOption)
             return newIndexOfCurrentlySelectedOption - 1;
-        return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
+        return this.currentOptionIndex - 1;
     }
     _getNextOptionIndex() {
-        if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
+        if (this.currentOptionIndex === undefined)
             return undefined;
         const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
             return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
         });
-        if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
-            return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
-        if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1) {
+        if (this.currentOptionIndex === $availableOptions.length - 1)
+            return this.currentOptionIndex;
+        if (this.currentOptionIndex > $availableOptions.length - 1) {
             // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
             const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
             if (newIndexOfCurrentlySelectedOption)
                 return newIndexOfCurrentlySelectedOption + 1;
             return 0;
         }
-        return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
+        return this.currentOptionIndex + 1;
     }
     hostDisconnected() {
         tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
     }
 }
-_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
+_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
 exports.ListBoxKeyboardController = ListBoxKeyboardController;
 //# sourceMappingURL=list_box_keyboard_controller.js.map

package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map CHANGED Viewed

	@@ -1 +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;~~"}
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;"}

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

@@ -2,6 +2,8 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/pho
 export declare class HDropdownToggler extends PhoenixLightLitElement {
     name: string;
     ariaHasPopup: string;
+    ariaControls: string;
+    role: string;
     private _btnController;
     private _toggleElementAriaController;
     private _$dropdown;

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

@@ -3,7 +3,6 @@ import { property } from 'lit/decorators';
 import '@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 { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
@@ -13,6 +12,8 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
         super();
         this.name = '';
         this.ariaHasPopup = 'menu';
+        this.ariaControls = '';
+        this.role = 'button';
         this._setupTogglerAria = () => {
             this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
             if (this._$dropdown.isOpened)
@@ -20,11 +21,14 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
                     host: this,
                     initialAriaExpandedValue: this._$dropdown.isOpened()
                 });
+            this.setAttribute('role', this.role);
             this.setAttribute('aria-haspopup', this.ariaHasPopup);
-            if (this._$dropdown.id)
-                this.setAttribute('aria-controls', this._$dropdown.id);
+            if (this.ariaControls || this._$dropdown.id)
+                this.setAttribute('aria-controls', this.ariaControls || this._$dropdown.id);
         };
         this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
+            if (ev.key !== 'Enter' && ev.key !== ' ')
+                return;
             ev.stopImmediatePropagation();
             this._dispatchToggleDropdownEvent(ev);
         };
@@ -43,7 +47,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
     connectedCallback() {
         var _a;
         super.connectedCallback();
-        this._btnController = new BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
+        this.addEventListener('keydown', this._dispatchToggleDropdownEventWithKeyboard);
         this._setupTogglerAria();
         const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
         if (hasToggleOnHover) {
@@ -61,6 +65,14 @@ __decorate([
     property({ type: String, attribute: 'aria-haspopup' }),
     __metadata("design:type", Object)
 ], HDropdownToggler.prototype, "ariaHasPopup", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-controls' }),
+    __metadata("design:type", Object)
+], HDropdownToggler.prototype, "ariaControls", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HDropdownToggler.prototype, "role", void 0);
 HDropdownToggler = __decorate([
     phoenixCustomElement('h-dropdown-toggler'),
     __metadata("design:paramtypes", [])

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

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

package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED Viewed

@@ -5,6 +5,7 @@ import '@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 { SELECT_SEARCH_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
+import { DROPDOWN_CONTENT_NAME } from '../../../../dropdown/dropdown_constants.js';
 import debounce_1 from '../../../../../../../../external/lodash/debounce.js';
 import { SELECT_SEARCH_CSS_CLASSES } from './select_search_constants.js';
@@ -48,8 +49,8 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         this.classList.add(SELECT_SEARCH_CSS_CLASSES.selectSearch);
-        // to musisz zrobić inaczej, bo jest kilka selectów na stronie
-        this._$selectOptions = document.querySelector('h-options');
+        const $selectOptionsContainer = this.closest(DROPDOWN_CONTENT_NAME);
+        this._$selectOptions = $selectOptionsContainer === null || $selectOptionsContainer === void 0 ? void 0 : $selectOptionsContainer.querySelector('h-options');
         this.addEventListener('keydown', this._handleSearchKeydown);
     }
     render() {

package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/components/select_options.js CHANGED Viewed

@@ -22,6 +22,7 @@ let HOptions = class HOptions extends PhoenixLightLitElement {
             });
         };
         this.setAttribute('role', 'listbox');
+        this.setAttribute('aria-labelledby', 'dsf');
         this.addEventListener(SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
         this.addEventListener(SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { TSelectTogglerKeyboardControllerConstructorOptions } from './select_toggler_keyboard_controller_types';
+export declare class SelectTogglerKeyboardController {
+    #private;
+    constructor({ host, $toggler, $list, listItemSelector, }: TSelectTogglerKeyboardControllerConstructorOptions);
+    hostConnected(): void;
+    private _handleKeyboardNavigation;
+    private _openSelect;
+    private _openSelectAndGoToFirstElement;
+    private _openSelectAndGoToLastElement;
+    private _openSelectAndGoToMatchedElement;
+    private _getAvailableOptions;
+    private _findSelectedIndex;
+    private _navigate;
+    hostDisconnected(): void;
+}

package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js ADDED Viewed

@@ -0,0 +1,94 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../../../../external/tslib/tslib.es6.js';
+import 'lit';
+import { UiDomUtils } from '@dreamcommerce/utilities';
+var _SelectTogglerKeyboardController_host, _SelectTogglerKeyboardController__$toggler, _SelectTogglerKeyboardController_currentOptionIndex, _SelectTogglerKeyboardController__$options;
+class SelectTogglerKeyboardController {
+    constructor({ host, $toggler, $list, listItemSelector = '[role="option"]', }) {
+        _SelectTogglerKeyboardController_host.set(this, void 0);
+        _SelectTogglerKeyboardController__$toggler.set(this, void 0);
+        _SelectTogglerKeyboardController_currentOptionIndex.set(this, void 0);
+        _SelectTogglerKeyboardController__$options.set(this, void 0);
+        this._handleKeyboardNavigation = (ev) => {
+            const arrowKeys = ['ArrowUp', 'ArrowDown'];
+            if (arrowKeys.includes(ev.key)) {
+                this._openSelect(ev);
+                return;
+            }
+            if (ev.key === 'Home') {
+                this._openSelectAndGoToFirstElement(ev);
+                return;
+            }
+            if (ev.key === 'End') {
+                this._openSelectAndGoToLastElement(ev);
+                return;
+            }
+            if (ev.altKey || ev.shiftKey)
+                return;
+            const isAWriteableCharacter = ev.key.length === 1;
+            if (isAWriteableCharacter)
+                this._openSelectAndGoToMatchedElement(ev);
+        };
+        this._openSelect = (event) => {
+            var _a;
+            event.preventDefault();
+            (_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show();
+        };
+        this._openSelectAndGoToFirstElement = async (event) => {
+            var _a;
+            event.preventDefault();
+            await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
+            const $firstOption = this._getAvailableOptions()[0];
+            if ($firstOption)
+                this._navigate($firstOption);
+        };
+        this._openSelectAndGoToLastElement = async (event) => {
+            var _a;
+            event.preventDefault();
+            await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
+            const $availableOptions = this._getAvailableOptions();
+            const $lastOption = $availableOptions[$availableOptions.length - 1];
+            if ($lastOption)
+                this._navigate($lastOption);
+        };
+        this._openSelectAndGoToMatchedElement = async (event) => {
+            var _a;
+            event.preventDefault();
+            await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
+            const $matchedOption = this._getAvailableOptions().find(($option) => { var _a; return (_a = $option.innerText) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(event.key.toLowerCase()); });
+            if ($matchedOption)
+                this._navigate($matchedOption);
+        };
+        this._getAvailableOptions = () => {
+            return __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
+                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
+            });
+        };
+        this._findSelectedIndex = () => {
+            const selectedOptionIndex = this._getAvailableOptions().findIndex(($option) => $option.selected);
+            return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
+        };
+        this._navigate = ($newOption) => {
+            const $selectedOption = __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f")[this._findSelectedIndex()];
+            UiDomUtils.makeUnnavigable($selectedOption);
+            const newOptionIndex = this._getAvailableOptions().findIndex(($option) => $newOption.value === $option.value);
+            __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").listBoxController.currentOptionIndex = newOptionIndex;
+            UiDomUtils.makeNavigable($newOption);
+            $newOption.focus();
+        };
+        __classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
+        __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
+        __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
+        __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
+    }
+    hostConnected() {
+        __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
+    }
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
+    }
+}
+_SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
+export { SelectTogglerKeyboardController };
+//# sourceMappingURL=select_toggler_keyboard_controller.js.map

package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,qDAAyD;AACxH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { ReactiveControllerHost } from 'lit';
+import { HSelect } from "../../select";
+export declare type TSelectTogglerKeyboardControllerConstructorOptions = {
+    host: ReactiveControllerHost & HSelect;
+    $toggler: HTMLElement;
+    $list: HTMLElement;
+    listItemSelector?: string;
+};

package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js ADDED Viewed

@@ -0,0 +1,3 @@
+import 'lit';
+import '@phoenixRoot/components/form/select/select';
+//# sourceMappingURL=select_toggler_keyboard_controller_types.js.map

package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"select_toggler_keyboard_controller_types.js","sourceRoot":"","sources":["../../../../../../../../../../src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.ts"],"names":[],"mappings":"AAAA,OAAuC,KAAK,CAAC;AAC7C,OAAwB,4CAA4C,CAAC"}

package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 import { PropertyValues, TemplateResult } from 'lit';
+import { HDropdown } from "../../dropdown/dropdown";
+import { HDropdownToggler } from "../../dropdown/dropdown_toggler";
 import { HOption } from "./components/option/select_option";
 import { HSelectSearch } from "./components/search/select_search";
 import { ListBoxKeyboardController } from "../../../controllers/list_box_controller/list_box_keyboard_controller";
@@ -21,6 +23,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     optionsList?: TSelectOption[];
     noDeselect: boolean;
     ariaLabelledby: string;
+    private _selectOptionsId;
     get selectedIndex(): number;
     set selectedIndex(index: number);
     get selectedOptions(): (HOption | undefined)[];
@@ -30,13 +33,14 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _searchValue;
     private _selectController;
     private _$options;
-    private _$dropdown;
+    $dropdown: import("lit-html/directives/ref.js").Ref<HDropdown>;
     $search: import("lit-html/directives/ref.js").Ref<HSelectSearch>;
     private _$optionsList;
     private _$dropdownContent;
-    private _$dropdownToggler;
+    $dropdownToggler: import("lit-html/directives/ref.js").Ref<HDropdownToggler>;
     private _selectContext;
     listBoxController: ListBoxKeyboardController;
+    private _selectTogglerKeyboardController;
     private _optionsObserver;
     private _selectedOptionsAriaObserver;
     private $placeholder;

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

@@ -14,6 +14,7 @@ import { observe } from '../../../directives/observable_directive.js';
 import { HSelectToggler } from './components/toggler/select_toggler.js';
 import { createRef, ref } from 'lit-html/directives/ref.js';
 import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
+import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
 import { HDropdownContent } from '../../dropdown/dropdown_content.js';
 import { HDropdownToggler } from '../../dropdown/dropdown_toggler.js';
 import { HDropdown } from '../../dropdown/dropdown.js';
@@ -25,6 +26,7 @@ import { SelectControlUtils } from './select_utils.js';
 import { SelectController } from './controllers/select_controller.js';
 import { SelectOptionMapper } from './model/select_option_mapper.js';
 import { repeat } from 'lit/directives/repeat';
+import { SelectTogglerKeyboardController } from './controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js';
 let HSelect = class HSelect extends PhoenixLightLitElement {
     constructor() {
@@ -37,13 +39,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this.type = SELECT_TYPES.select;
         this.noDeselect = false;
         this.ariaLabelledby = '';
+        this._selectOptionsId = v4();
         this._searchValue = '';
         this._$options = new Map();
-        this._$dropdown = createRef();
+        this.$dropdown = createRef();
         this.$search = createRef();
         this._$optionsList = createRef();
         this._$dropdownContent = createRef();
-        this._$dropdownToggler = createRef();
+        this.$dropdownToggler = createRef();
         this._selectContext = new ContextProviderController(this);
         this._updateOptions = () => {
             const $options = this._getOptions();
@@ -128,11 +131,15 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             });
         };
         this._handleDropdownHidden = () => {
-            var _a, _b;
+            var _a, _b, _c;
             this._searchValue = '';
             this.opened = false;
-            (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
-            (_b = this._$dropdownToggler.value) === null || _b === void 0 ? void 0 : _b.focus();
+            (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
+            const isBodyActive = document.activeElement === document.body;
+            const isInnerElementActive = (_b = this._$dropdownContent.value) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement);
+            if (isInnerElementActive || isBodyActive) {
+                (_c = this.$dropdownToggler.value) === null || _c === void 0 ? void 0 : _c.focus();
+            }
         };
         this._manageSelectFocusAria = (ev) => {
             var _a;
@@ -141,14 +148,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 return;
             const optionId = $target.id;
             if (optionId) {
-                (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
+                (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
             }
         };
         this._closeSelect = () => {
             var _a;
             if (!this.opened)
                 return;
-            (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
+            (_a = this.$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
         };
         this._clearOptions = () => {
             this._selectController.deselectAll();
@@ -192,7 +199,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         return Array.from(this._$options.values());
     }
     updated(changedProperties) {
-        var _a;
+        var _a, _b;
         super.updated(changedProperties);
         if (changedProperties.has('opened')) {
             if (this.opened) {
@@ -216,6 +223,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         if (this.listBoxController) {
             this.listBoxController.calculateSelectedOptionIndex();
         }
+        if (this._$optionsList.value && this.$dropdownToggler.value) {
+            (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
+            this._selectTogglerKeyboardController = new SelectTogglerKeyboardController({
+                host: this,
+                $toggler: this.$dropdownToggler.value,
+                $list: this._$optionsList.value
+            });
+        }
     }
     _focusElementAfterSelectOpened() {
         var _a;
@@ -342,7 +357,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
         return html `
             <h-dropdown
-                ${ref(this._$dropdown)}
+                ${ref(this.$dropdown)}
                 @showed=${() => (this.opened = true)}
                 @hidden=${this._handleDropdownHidden}
                 name="${this.controlName}"
@@ -352,7 +367,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 no-autofocus
             >
                 <h-dropdown-toggler
-                    ${ref(this._$dropdownToggler)}
+                    ${ref(this.$dropdownToggler)}
                     name="${this.controlName}"
                     validation-container
                     aria-haspopup="listbox"
@@ -360,6 +375,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     aria-required="${this.required ? 'true' : 'false'}"
                     aria-activedescendant
                     aria-labelledby="${this.ariaLabelledby}"
+                    role="combobox"
+                    aria-controls="${this._selectOptionsId}"
                 >
                     ${this.getSlot(SELECT_SLOT_NAMES.toggler)}
                 </h-dropdown-toggler>
@@ -385,6 +402,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     <h-options
                         class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult() ? SELECT_CSS_CLASSES.selectOptionsEmpty : ''}"
+                        aria-labelledby="${this.ariaLabelledby}"
+                        id="${this._selectOptionsId}"
                         ${ref(this._$optionsList)}
                         @optionClicked=${this._handleOptionClicked}
                         @optionUpdated=${this._handleOptionUpdated}

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

	@@ -1 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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,eAAe,wDAA4D;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/list_box_controller/list_box_keyboard_controller.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { IListboxController, TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
 export declare class ListBoxKeyboardController implements IListboxController {
     #private;
+    currentOptionIndex: number | undefined;
     constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
     hostConnected(): void;
     private _handleKeyboardNavigation;

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED Viewed

@@ -3,12 +3,11 @@ import 'lit';
 import { UiDomUtils } from '@dreamcommerce/utilities';
 import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from './list_box_controller_constants.js';
-var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
+var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
 class ListBoxKeyboardController {
     constructor({ host, $list, listItemSelector = '[role="option"]', orientation = LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS.vertical }) {
         _ListBoxKeyboardController_host.set(this, void 0);
         _ListBoxKeyboardController__$list.set(this, void 0);
-        _ListBoxKeyboardController_currentOptionIndex.set(this, void 0);
         _ListBoxKeyboardController__$options.set(this, void 0);
         _ListBoxKeyboardController_listItemSelector.set(this, void 0);
         _ListBoxKeyboardController_keys.set(this, void 0);
@@ -30,13 +29,13 @@ class ListBoxKeyboardController {
             if (newOptionIndex === undefined) {
                 newOptionIndex = this._findCurrentIndex();
             }
-            if (newOptionIndex === __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
+            if (newOptionIndex === this.currentOptionIndex)
                 return;
             if (prevOptionIndex !== undefined) {
                 const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
                 $prevOption && UiDomUtils.makeUnnavigable($prevOption);
             }
-            __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
+            this.currentOptionIndex = newOptionIndex;
             const $focusedOption = $availableOptions[newOptionIndex];
             if ($focusedOption) {
                 UiDomUtils.makeNavigable($focusedOption);
@@ -59,7 +58,7 @@ class ListBoxKeyboardController {
         };
         this.calculateSelectedOptionIndex = () => {
             const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
-            __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, selectedOptionIndex !== -1 ? selectedOptionIndex : 0, "f");
+            this.currentOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
         };
         __classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
         __classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -74,54 +73,54 @@ class ListBoxKeyboardController {
         __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
             if (event.target !== __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
                 return;
-            if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
+            if (this.currentOptionIndex === undefined)
                 return;
-            const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f")];
+            const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[this.currentOptionIndex];
             UiDomUtils.makeUnnavigable($prevOption);
-            __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, undefined, "f");
+            this.currentOptionIndex = undefined;
         });
         __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").forEach(($option) => UiDomUtils.makeUnnavigable($option));
     }
     _getPrevOptionIndex() {
-        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
+        if (this.currentOptionIndex === undefined)
             return undefined;
-        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
-            return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
-        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
-            return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
+        if (this.currentOptionIndex <= 0)
+            return this.currentOptionIndex;
+        if (this.currentOptionIndex <= 0)
+            return this.currentOptionIndex;
         const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
             return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
         });
-        if (!!$availableOptions[__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1])
-            return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
+        if (!!$availableOptions[this.currentOptionIndex - 1])
+            return this.currentOptionIndex - 1;
         // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
         const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
         if (newIndexOfCurrentlySelectedOption)
             return newIndexOfCurrentlySelectedOption - 1;
-        return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
+        return this.currentOptionIndex - 1;
     }
     _getNextOptionIndex() {
-        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
+        if (this.currentOptionIndex === undefined)
             return undefined;
         const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
             return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
         });
-        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
-            return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
-        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1) {
+        if (this.currentOptionIndex === $availableOptions.length - 1)
+            return this.currentOptionIndex;
+        if (this.currentOptionIndex > $availableOptions.length - 1) {
             // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
             const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
             if (newIndexOfCurrentlySelectedOption)
                 return newIndexOfCurrentlySelectedOption + 1;
             return 0;
         }
-        return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
+        return this.currentOptionIndex + 1;
     }
     hostDisconnected() {
         __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
     }
 }
-_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
+_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
 export { ListBoxKeyboardController };
 //# sourceMappingURL=list_box_keyboard_controller.js.map

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map CHANGED Viewed

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

package/package.json CHANGED Viewed

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