@shoper/phoenix_design_system 1.15.10 → 1.15.11-1

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

@@ -32,6 +32,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
         this.id = v4['default']();
         this.preventFocusTrap = false;
+        this.noAutoFocus = false;
         this._backdropController = new backdrop_controller.BackdropController();
         this._handleClickOutside = async (target) => {
             var _a, _b;
@@ -48,7 +49,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                 return;
             }
             await this.show();
-            this._focusOnFirstContentElement();
+            if (!this.noAutoFocus)
+                this._focusOnFirstContentElement();
         };
         this.show = async () => {
             if (this.opened)
@@ -176,7 +178,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
             if (isHoveredWithinDropdown && !this.opened) {
                 await this.show();
-                this._focusOnFirstContentElement();
+                if (!this.noAutoFocus)
+                    this._focusOnFirstContentElement();
                 return;
             }
             if (!isHoveredWithinDropdown && this.opened)
@@ -466,6 +469,10 @@ tslib_es6.__decorate([
     decorators_js.property({ type: Boolean, attribute: 'prevent-focus-trap' }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdown.prototype, "preventFocusTrap", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, attribute: 'no-autofocus' }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "noAutoFocus", void 0);
 exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-dropdown'),
     tslib_es6.__metadata("design:paramtypes", [])

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

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

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

@@ -16,6 +16,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
     constructor() {
         super();
         this.name = '';
+        this.ariaHasPopup = 'menu';
         this._setupTogglerAria = () => {
             this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
             if (this._$dropdown.isOpened)
@@ -23,7 +24,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
                     host: this,
                     initialAriaExpandedValue: this._$dropdown.isOpened()
                 });
-            this.setAttribute('aria-haspopup', 'true');
+            this.setAttribute('aria-haspopup', this.ariaHasPopup);
             if (this._$dropdown.id)
                 this.setAttribute('aria-controls', this._$dropdown.id);
         };
@@ -60,6 +61,10 @@ tslib_es6.__decorate([
     decorators.property({ type: String, reflect: true }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdownToggler.prototype, "name", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'aria-haspopup' }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdownToggler.prototype, "ariaHasPopup", 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

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

package/build/cjs/packages/phoenix/src/components/form/input/input_copy_button.js

@@ -12,7 +12,7 @@ var input_constants = require('./input_constants.js');
 
 exports.HInputCopyButton = class HInputCopyButton extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.hasBeenCopied = false;
         this.copyValue = '';
         this._$inputToCopy = null;
@@ -34,13 +34,13 @@ exports.HInputCopyButton = class HInputCopyButton extends phoenix_light_lit_elem
             this.copyValue = '';
             this.hasBeenCopied = false;
         };
+        this._btnController = new btn_controller.BtnController(this, this._handleCopyToClipboard);
     }
     connectedCallback() {
         super.connectedCallback();
         this._$inputToCopy = document.querySelector(`#${this.inputId}`);
         if (!this._$inputToCopy)
             return;
-        this._btnController = new btn_controller.BtnController(this, this._handleCopyToClipboard);
         this.addEventListener('click', this._handleCopyToClipboard);
     }
     async _copyToClipboard() {
@@ -94,6 +94,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Object)
 ], exports.HInputCopyButton.prototype, "copyValue", void 0);
 exports.HInputCopyButton = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-input-copy-button')
+    phoenix_custom_element.phoenixCustomElement('h-input-copy-button'),
+    tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HInputCopyButton);
 //# sourceMappingURL=input_copy_button.js.map

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

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

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
 var lit = require('lit');
 var decorators = require('lit/decorators');
+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');
@@ -15,6 +16,32 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
     constructor() {
         super(...arguments);
         this.value = '';
+        this._$selectOptions = null;
+        this._handleSearchKeydown = (ev) => {
+            if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
+                return;
+            this._handleFocusOptionOnArrowNavigation();
+            this._handleDispatchEventOnOptionsList(ev);
+        };
+        this._handleDispatchEventOnOptionsList = (ev) => {
+            var _a;
+            const arrowNavigationEvent = new KeyboardEvent('keydown', {
+                key: ev.key
+            });
+            (_a = this._$selectOptions) === null || _a === void 0 ? void 0 : _a.dispatchEvent(arrowNavigationEvent);
+        };
+        this._handleFocusOptionOnArrowNavigation = () => {
+            const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
+            const $availableOptions = $options.filter(($option) => {
+                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
+            });
+            const $firstOption = $availableOptions.find(($option) => {
+                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
+            });
+            const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
+            const $optionToFocus = $selectedOption || $firstOption;
+            $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
+        };
         this._handleInputChange = debounce['default'](({ target }) => {
             this.value = target.value;
             this.emitCustomEvent(select_components_constatns.SELECT_SEARCH_EVENT_NAMES.search, {
@@ -25,6 +52,9 @@ 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');
+        this.addEventListener('keydown', this._handleSearchKeydown);
     }
     render() {
         return lit.html `

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
-var utilities = require('@dreamcommerce/utilities');
+require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../../core/decorators/phoenix_custom_element.js');
 var select_components_constatns = require('./select_components_constatns.js');
@@ -26,7 +26,6 @@ exports.HOptions = class HOptions extends phoenix_light_lit_element.PhoenixLight
             });
         };
         this.setAttribute('role', 'listbox');
-        utilities.UiDomUtils.makeNavigable(this);
         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

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

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

@@ -44,7 +44,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._searchValue = '';
         this._$options = new Map();
         this._$dropdown = ref_js.createRef();
-        this._$search = ref_js.createRef();
+        this.$search = ref_js.createRef();
         this._$optionsList = ref_js.createRef();
         this._$dropdownContent = ref_js.createRef();
         this._$dropdownToggler = ref_js.createRef();
@@ -105,6 +105,18 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 this.updateOptionAriaAttribute($option);
             });
         };
+        this._updateLabelAria = (options) => {
+            var _a, _b;
+            if (!this.$searchLabel)
+                return;
+            (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
+            this.$searchLabel.innerHTML = `
+            ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
+            <span id="value-label" class="sr-only">
+                ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
+            </span>
+        `;
+        };
         this._handleOptionClicked = ({ detail }) => {
             if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
                 return;
@@ -120,10 +132,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             });
         };
         this._handleDropdownHidden = () => {
-            var _a;
+            var _a, _b;
             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();
         };
         this._manageSelectFocusAria = (ev) => {
             var _a;
@@ -183,6 +196,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         return Array.from(this._$options.values());
     }
     updated(changedProperties) {
+        var _a;
         super.updated(changedProperties);
         if (changedProperties.has('opened')) {
             if (this.opened) {
@@ -196,28 +210,44 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         if (changedProperties.has('optionsList')) {
             this._updateOptions();
         }
-        if (this._$optionsList.value && !this._listBoxController)
-            this._listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
+        if (this._$optionsList.value) {
+            (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
+            this.listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
                 host: this,
                 $list: this._$optionsList.value
             });
+        }
+        if (this.listBoxController) {
+            this.listBoxController.calculateSelectedOptionIndex();
+        }
     }
     _focusElementAfterSelectOpened() {
-        var _a, _b;
-        const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
-        $searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
+        var _a;
+        const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
+        const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
+        const $firstOption = $options.find(($option) => {
+            return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
+        });
+        const $selectedOption = this.selectedOptions[0];
+        const $optionToFocus = $selectedOption || $firstOption;
+        $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
     }
     connectedCallback() {
+        var _a;
         super.connectedCallback();
         this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
         if (!this.searchDisabled) {
             this.classList.add(select_constants.SELECT_CSS_CLASSES.selectWithSearch);
         }
+        this.$searchLabel = document.querySelector(`[id="${this.ariaLabelledby}"]`);
+        (_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
         this._selectController = this.multiple ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
         this._selectContext.provide(select_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
         this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
         this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
         this._selectController.options$.subscribe(this._optionsObserver);
+        this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
+        this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
         this._updateOptions();
         this._setupEvents();
     }
@@ -247,6 +277,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
     }
     updateOptionAriaAttribute($option) {
+        if (!this.multiple) {
+            const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
+            $options.forEach(($option) => ($option.removeAttribute('aria-selected')));
+        }
         $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
     }
     _removeHTMLOptions(optionsValues) {
@@ -256,6 +290,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         const option = this._selectController.getOption(value);
         if (!option)
             return;
+        const $selectedOption = this._$options.get(option.value);
+        const $selectedOptionLink = $selectedOption === null || $selectedOption === void 0 ? void 0 : $selectedOption.querySelector('a');
+        if ($selectedOptionLink) {
+            $selectedOptionLink.click();
+            return;
+        }
         this.noDeselect ? this._selectController.select(option) : this._selectController.toggle(option);
         if (!this.multiple)
             this._closeSelect();
@@ -313,6 +353,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 offset=${this.offset}
                 content-width="full"
                 prevent-focus-trap
+                no-autofocus
             >
                 <h-dropdown-toggler
                     ${ref_js.ref(this._$dropdownToggler)}
@@ -340,7 +381,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                     ${isSearchEnabled
             ? lit.html ` <h-select-search
                               class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
-                              ${ref_js.ref(this._$search)}
+                              ${ref_js.ref(this.$search)}
                               .value=${this._searchValue}
                               @search=${this._handleSearch}
                           ></h-select-search>`

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

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 require('lit');
 var utilities = require('@dreamcommerce/utilities');
-var keystrokes_controller = require('../keystrokes_controller/keystrokes_controller.js');
 var list_box_controller_constants = require('./list_box_controller_constants.js');
 
 var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
@@ -17,25 +16,54 @@ class ListBoxKeyboardController {
         _ListBoxKeyboardController__$options.set(this, void 0);
         _ListBoxKeyboardController_listItemSelector.set(this, void 0);
         _ListBoxKeyboardController_keys.set(this, void 0);
+        this._handleKeyboardNavigation = (ev) => {
+            if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
+                this._handleArrowNavigation(ev);
+                return;
+            }
+            this._handleWriteableCharacter(ev);
+        };
         this._handleArrowNavigation = (event) => {
             event.preventDefault();
             const { key } = event;
-            const prevOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
+            const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
+                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
+            });
+            const prevOptionIndex = this._findCurrentIndex();
             let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
             if (newOptionIndex === undefined) {
-                const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
-                newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
+                newOptionIndex = this._findCurrentIndex();
             }
             if (newOptionIndex === tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
                 return;
             if (prevOptionIndex !== undefined) {
                 const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
-                utilities.UiDomUtils.makeUnnavigable($prevOption);
+                $prevOption && utilities.UiDomUtils.makeUnnavigable($prevOption);
             }
             tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
-            const $focusedOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
-            utilities.UiDomUtils.makeNavigable($focusedOption);
-            $focusedOption.focus();
+            const $focusedOption = $availableOptions[newOptionIndex];
+            if ($focusedOption) {
+                utilities.UiDomUtils.makeNavigable($focusedOption);
+                $focusedOption.focus();
+            }
+        };
+        this._findCurrentIndex = () => {
+            const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
+                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
+            });
+            const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
+            return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
+        };
+        this._handleWriteableCharacter = (ev) => {
+            var _a;
+            const $searchInput = (_a = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
+            if (!$searchInput)
+                return;
+            $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
+        };
+        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");
         };
         tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
         tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -45,12 +73,7 @@ class ListBoxKeyboardController {
         tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
     }
     hostConnected() {
-        new keystrokes_controller.KeystrokesController({
-            host: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
-            keys: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
-            callback: this._handleArrowNavigation,
-            target: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
-        });
+        tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('keydown', this._handleKeyboardNavigation);
         utilities.UiDomUtils.makeNavigable(tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
         tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
             if (event.target !== tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
@@ -68,15 +91,39 @@ class ListBoxKeyboardController {
             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");
+        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;
+        // 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;
     }
     _getNextOptionIndex() {
         if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
             return undefined;
-        if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
+        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) {
+            // 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;
     }
+    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();
 

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

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

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

@@ -17,6 +17,7 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     mobilePosition: TMobileElementPosition;
     id: string;
     preventFocusTrap: boolean;
+    noAutoFocus: boolean;
     $dropdownToggler: HDropdownToggler | null;
     $dropdownContent: HDropdownContent | null;
     $nestedDropdownContentElements?: HDropdownContent[];

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

@@ -28,6 +28,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
         this.id = v4();
         this.preventFocusTrap = false;
+        this.noAutoFocus = false;
         this._backdropController = new BackdropController();
         this._handleClickOutside = async (target) => {
             var _a, _b;
@@ -44,7 +45,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                 return;
             }
             await this.show();
-            this._focusOnFirstContentElement();
+            if (!this.noAutoFocus)
+                this._focusOnFirstContentElement();
         };
         this.show = async () => {
             if (this.opened)
@@ -172,7 +174,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
             if (isHoveredWithinDropdown && !this.opened) {
                 await this.show();
-                this._focusOnFirstContentElement();
+                if (!this.noAutoFocus)
+                    this._focusOnFirstContentElement();
                 return;
             }
             if (!isHoveredWithinDropdown && this.opened)
@@ -462,6 +465,10 @@ __decorate([
     property({ type: Boolean, attribute: 'prevent-focus-trap' }),
     __metadata("design:type", Object)
 ], HDropdown.prototype, "preventFocusTrap", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-autofocus' }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "noAutoFocus", void 0);
 HDropdown = HDropdown_1 = __decorate([
     phoenixCustomElement('h-dropdown'),
     __metadata("design:paramtypes", [])

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

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

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

@@ -12,6 +12,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
     constructor() {
         super();
         this.name = '';
+        this.ariaHasPopup = 'menu';
         this._setupTogglerAria = () => {
             this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
             if (this._$dropdown.isOpened)
@@ -19,7 +20,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
                     host: this,
                     initialAriaExpandedValue: this._$dropdown.isOpened()
                 });
-            this.setAttribute('aria-haspopup', 'true');
+            this.setAttribute('aria-haspopup', this.ariaHasPopup);
             if (this._$dropdown.id)
                 this.setAttribute('aria-controls', this._$dropdown.id);
         };
@@ -56,6 +57,10 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], HDropdownToggler.prototype, "name", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-haspopup' }),
+    __metadata("design:type", Object)
+], HDropdownToggler.prototype, "ariaHasPopup", void 0);
 HDropdownToggler = __decorate([
     phoenixCustomElement('h-dropdown-toggler'),
     __metadata("design:paramtypes", [])

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

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

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

@@ -7,6 +7,7 @@ export declare class HInputCopyButton extends PhoenixLightLitElement {
     copyValue: string;
     private _$inputToCopy;
     private _btnController;
+    constructor();
     connectedCallback(): void;
     private _handleCopyToClipboard;
     private _copyToClipboard;

package/build/esm/packages/phoenix/src/components/form/input/input_copy_button.js

@@ -8,7 +8,7 @@ import { INPUT_CONTROL_EVENTS } from './input_constants.js';
 
 let HInputCopyButton = class HInputCopyButton extends PhoenixLightLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.hasBeenCopied = false;
         this.copyValue = '';
         this._$inputToCopy = null;
@@ -30,13 +30,13 @@ let HInputCopyButton = class HInputCopyButton extends PhoenixLightLitElement {
             this.copyValue = '';
             this.hasBeenCopied = false;
         };
+        this._btnController = new BtnController(this, this._handleCopyToClipboard);
     }
     connectedCallback() {
         super.connectedCallback();
         this._$inputToCopy = document.querySelector(`#${this.inputId}`);
         if (!this._$inputToCopy)
             return;
-        this._btnController = new BtnController(this, this._handleCopyToClipboard);
         this.addEventListener('click', this._handleCopyToClipboard);
     }
     async _copyToClipboard() {
@@ -90,7 +90,8 @@ __decorate([
     __metadata("design:type", Object)
 ], HInputCopyButton.prototype, "copyValue", void 0);
 HInputCopyButton = __decorate([
-    phoenixCustomElement('h-input-copy-button')
+    phoenixCustomElement('h-input-copy-button'),
+    __metadata("design:paramtypes", [])
 ], HInputCopyButton);
 
 export { HInputCopyButton };

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

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

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

@@ -2,7 +2,11 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
 import { TemplateResult } from 'lit';
 export declare class HSelectSearch extends PhoenixLightLitElement {
     value: string;
+    private _$selectOptions;
     connectedCallback(): void;
+    private _handleSearchKeydown;
+    private _handleDispatchEventOnOptionsList;
+    private _handleFocusOptionOnArrowNavigation;
     private _handleInputChange;
     protected render(): TemplateResult;
 }

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

@@ -1,6 +1,7 @@
 import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
 import { html } from 'lit';
 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 { SELECT_SEARCH_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
@@ -11,6 +12,32 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this.value = '';
+        this._$selectOptions = null;
+        this._handleSearchKeydown = (ev) => {
+            if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
+                return;
+            this._handleFocusOptionOnArrowNavigation();
+            this._handleDispatchEventOnOptionsList(ev);
+        };
+        this._handleDispatchEventOnOptionsList = (ev) => {
+            var _a;
+            const arrowNavigationEvent = new KeyboardEvent('keydown', {
+                key: ev.key
+            });
+            (_a = this._$selectOptions) === null || _a === void 0 ? void 0 : _a.dispatchEvent(arrowNavigationEvent);
+        };
+        this._handleFocusOptionOnArrowNavigation = () => {
+            const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
+            const $availableOptions = $options.filter(($option) => {
+                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
+            });
+            const $firstOption = $availableOptions.find(($option) => {
+                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
+            });
+            const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
+            const $optionToFocus = $selectedOption || $firstOption;
+            $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
+        };
         this._handleInputChange = debounce_1(({ target }) => {
             this.value = target.value;
             this.emitCustomEvent(SELECT_SEARCH_EVENT_NAMES.search, {
@@ -21,6 +48,9 @@ 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');
+        this.addEventListener('keydown', this._handleSearchKeydown);
     }
     render() {
         return html `

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

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

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

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from '../../../../../../../external/tslib/tslib.es6.js';
-import { UiDomUtils } from '@dreamcommerce/utilities';
+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_OPTIONS_EVENT_NAMES, SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from './select_components_constatns.js';
@@ -22,7 +22,6 @@ let HOptions = class HOptions extends PhoenixLightLitElement {
             });
         };
         this.setAttribute('role', 'listbox');
-        UiDomUtils.makeNavigable(this);
         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

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

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

@@ -1,5 +1,7 @@
 import { PropertyValues, TemplateResult } from 'lit';
 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";
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import { SelectOption } from "./model/select_option";
 import type { TSelectType } from "./select_types";
@@ -29,14 +31,16 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _selectController;
     private _$options;
     private _$dropdown;
-    private _$search;
+    $search: import("lit-html/directives/ref.js").Ref<HSelectSearch>;
     private _$optionsList;
     private _$dropdownContent;
     private _$dropdownToggler;
     private _selectContext;
-    private _listBoxController;
+    listBoxController: ListBoxKeyboardController;
     private _optionsObserver;
+    private _selectedOptionsAriaObserver;
     private $placeholder;
+    private $searchLabel;
     constructor();
     updated(changedProperties: PropertyValues): void;
     private _focusElementAfterSelectOpened;
@@ -47,6 +51,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _setupEvents;
     private _handleOptionDeselect;
     private _updateOptionsView;
+    private _updateLabelAria;
     private _appendNewHTMLOption;
     updateOptionAriaAttribute($option: HOption): void;
     private _removeHTMLOptions;

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

@@ -40,7 +40,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._searchValue = '';
         this._$options = new Map();
         this._$dropdown = createRef();
-        this._$search = createRef();
+        this.$search = createRef();
         this._$optionsList = createRef();
         this._$dropdownContent = createRef();
         this._$dropdownToggler = createRef();
@@ -101,6 +101,18 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 this.updateOptionAriaAttribute($option);
             });
         };
+        this._updateLabelAria = (options) => {
+            var _a, _b;
+            if (!this.$searchLabel)
+                return;
+            (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
+            this.$searchLabel.innerHTML = `
+            ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
+            <span id="value-label" class="sr-only">
+                ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
+            </span>
+        `;
+        };
         this._handleOptionClicked = ({ detail }) => {
             if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
                 return;
@@ -116,10 +128,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             });
         };
         this._handleDropdownHidden = () => {
-            var _a;
+            var _a, _b;
             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();
         };
         this._manageSelectFocusAria = (ev) => {
             var _a;
@@ -179,6 +192,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         return Array.from(this._$options.values());
     }
     updated(changedProperties) {
+        var _a;
         super.updated(changedProperties);
         if (changedProperties.has('opened')) {
             if (this.opened) {
@@ -192,28 +206,44 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         if (changedProperties.has('optionsList')) {
             this._updateOptions();
         }
-        if (this._$optionsList.value && !this._listBoxController)
-            this._listBoxController = new ListBoxKeyboardController({
+        if (this._$optionsList.value) {
+            (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
+            this.listBoxController = new ListBoxKeyboardController({
                 host: this,
                 $list: this._$optionsList.value
             });
+        }
+        if (this.listBoxController) {
+            this.listBoxController.calculateSelectedOptionIndex();
+        }
     }
     _focusElementAfterSelectOpened() {
-        var _a, _b;
-        const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
-        $searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
+        var _a;
+        const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
+        const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
+        const $firstOption = $options.find(($option) => {
+            return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
+        });
+        const $selectedOption = this.selectedOptions[0];
+        const $optionToFocus = $selectedOption || $firstOption;
+        $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
     }
     connectedCallback() {
+        var _a;
         super.connectedCallback();
         this.classList.add(SELECT_CSS_CLASSES.select);
         if (!this.searchDisabled) {
             this.classList.add(SELECT_CSS_CLASSES.selectWithSearch);
         }
+        this.$searchLabel = document.querySelector(`[id="${this.ariaLabelledby}"]`);
+        (_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
         this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
         this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
         this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
         this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
         this._selectController.options$.subscribe(this._optionsObserver);
+        this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
+        this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
         this._updateOptions();
         this._setupEvents();
     }
@@ -243,6 +273,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         SelectControlUtils.appendHTMLOption($option, $list, position);
     }
     updateOptionAriaAttribute($option) {
+        if (!this.multiple) {
+            const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
+            $options.forEach(($option) => ($option.removeAttribute('aria-selected')));
+        }
         $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
     }
     _removeHTMLOptions(optionsValues) {
@@ -252,6 +286,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const option = this._selectController.getOption(value);
         if (!option)
             return;
+        const $selectedOption = this._$options.get(option.value);
+        const $selectedOptionLink = $selectedOption === null || $selectedOption === void 0 ? void 0 : $selectedOption.querySelector('a');
+        if ($selectedOptionLink) {
+            $selectedOptionLink.click();
+            return;
+        }
         this.noDeselect ? this._selectController.select(option) : this._selectController.toggle(option);
         if (!this.multiple)
             this._closeSelect();
@@ -309,6 +349,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 offset=${this.offset}
                 content-width="full"
                 prevent-focus-trap
+                no-autofocus
             >
                 <h-dropdown-toggler
                     ${ref(this._$dropdownToggler)}
@@ -336,7 +377,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     ${isSearchEnabled
             ? html ` <h-select-search
                               class=${SELECT_CSS_CLASSES.selectSearch}
-                              ${ref(this._$search)}
+                              ${ref(this.$search)}
                               .value=${this._searchValue}
                               @search=${this._handleSearch}
                           ></h-select-search>`

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

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

@@ -1,10 +1,14 @@
 import { Any } from 'ts-toolbelt';
-import { ReactiveControllerHost } from 'lit';
+import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from "./list_box_controller_constants";
+import { HSelect } from "../../components/form/select/select";
 export declare type TListBoxKeyboardNavigationDirection = Any.Keys<typeof LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS>;
 export declare type TListBoxKeyboardControllerConstructorOptions = {
-    host: ReactiveControllerHost & HTMLElement;
+    host: ReactiveControllerHost & HSelect;
     $list: HTMLElement;
     listItemSelector?: string;
     orientation?: TListBoxKeyboardNavigationDirection;
 };
+export interface IListboxController extends ReactiveController {
+    calculateSelectedOptionIndex(): void;
+}

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js

@@ -1,4 +1,5 @@
 import 'ts-toolbelt';
 import 'lit';
 import '@phoenixRoot/controllers/list_box_controller/list_box_controller_constants';
+import '@phoenixRoot/components/form/select/select';
 //# sourceMappingURL=list_box_controller_types.js.map

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAuC,KAAK,CAAC;AAC7C,OAAwD,4EAA4E,CAAC"}
+{"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAA2D,KAAK,CAAC;AACjE,OAAwD,4EAA4E,CAAC;AACrI,OAAwB,4CAA4C,CAAC"}

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts

@@ -1,10 +1,14 @@
-import { ReactiveController } from 'lit';
-import { TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
-export declare class ListBoxKeyboardController implements ReactiveController {
+import { IListboxController, TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
+export declare class ListBoxKeyboardController implements IListboxController {
     #private;
     constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
     hostConnected(): void;
+    private _handleKeyboardNavigation;
     private _handleArrowNavigation;
+    private _findCurrentIndex;
+    private _handleWriteableCharacter;
+    calculateSelectedOptionIndex: () => void;
     private _getPrevOptionIndex;
     private _getNextOptionIndex;
+    hostDisconnected(): void;
 }

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

@@ -1,7 +1,6 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
 import { UiDomUtils } from '@dreamcommerce/utilities';
-import { KeystrokesController } from '../keystrokes_controller/keystrokes_controller.js';
 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;
@@ -13,25 +12,54 @@ class ListBoxKeyboardController {
         _ListBoxKeyboardController__$options.set(this, void 0);
         _ListBoxKeyboardController_listItemSelector.set(this, void 0);
         _ListBoxKeyboardController_keys.set(this, void 0);
+        this._handleKeyboardNavigation = (ev) => {
+            if (__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
+                this._handleArrowNavigation(ev);
+                return;
+            }
+            this._handleWriteableCharacter(ev);
+        };
         this._handleArrowNavigation = (event) => {
             event.preventDefault();
             const { key } = event;
-            const prevOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
+            const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
+                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
+            });
+            const prevOptionIndex = this._findCurrentIndex();
             let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
             if (newOptionIndex === undefined) {
-                const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
-                newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
+                newOptionIndex = this._findCurrentIndex();
             }
             if (newOptionIndex === __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
                 return;
             if (prevOptionIndex !== undefined) {
                 const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
-                UiDomUtils.makeUnnavigable($prevOption);
+                $prevOption && UiDomUtils.makeUnnavigable($prevOption);
             }
             __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
-            const $focusedOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
-            UiDomUtils.makeNavigable($focusedOption);
-            $focusedOption.focus();
+            const $focusedOption = $availableOptions[newOptionIndex];
+            if ($focusedOption) {
+                UiDomUtils.makeNavigable($focusedOption);
+                $focusedOption.focus();
+            }
+        };
+        this._findCurrentIndex = () => {
+            const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
+                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
+            });
+            const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
+            return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
+        };
+        this._handleWriteableCharacter = (ev) => {
+            var _a;
+            const $searchInput = (_a = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
+            if (!$searchInput)
+                return;
+            $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
+        };
+        this.calculateSelectedOptionIndex = () => {
+            const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
+            __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, selectedOptionIndex !== -1 ? selectedOptionIndex : 0, "f");
         };
         __classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
         __classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -41,12 +69,7 @@ class ListBoxKeyboardController {
         __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
     }
     hostConnected() {
-        new KeystrokesController({
-            host: __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
-            keys: __classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
-            callback: this._handleArrowNavigation,
-            target: __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
-        });
+        __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('keydown', this._handleKeyboardNavigation);
         UiDomUtils.makeNavigable(__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
         __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
             if (event.target !== __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
@@ -64,15 +87,39 @@ class ListBoxKeyboardController {
             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");
+        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;
+        // 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;
     }
     _getNextOptionIndex() {
         if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
             return undefined;
-        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
+        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) {
+            // 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;
     }
+    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();
 

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

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

package/package.json

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