@shoper/phoenix_design_system 1.15.4 → 1.15.6-0

package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.js

@@ -7,47 +7,40 @@ var decorators = require('lit/decorators');
 var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
-var btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
 var color_item_constants = require('./color_item_constants.js');
 
 exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
-        super();
+        super(...arguments);
         this.disabled = false;
         this.selected = false;
         this.unclickable = false;
-        this._dispatchClickedEvent = () => {
-            this.emitEvent(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected);
+        this._$colorSwatches = null;
+        this._setupAriaAttributes = () => {
+            var _a;
+            this._$colorSwatches = this.closest('h-color-swatches');
+            this.setAttribute('role', ((_a = this._$colorSwatches) === null || _a === void 0 ? void 0 : _a.multiple) ? 'checkbox' : 'radio');
+            this.setAttribute('aria-label', this.label ? this.label : this.color);
+        };
+        this._setupClasses = () => {
+            this.classList.add(color_item_constants.COLOR_ITEM_CSS_CLASSES.colorItem);
+            if (this.size)
+                this.classList.add(color_item_constants.COLOR_ITEM_CSS_CLASSES[this.size]);
         };
-        this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent);
     }
     connectedCallback() {
         super.connectedCallback();
-        this.setupEvents();
+        this._setupAriaAttributes();
+        this._setupClasses();
         this.style.backgroundColor = this.setBgColor(this.disabled);
-        this._syncAriaPressed();
-        this.setAttribute('aria-label', this.label ? this.label : this.color);
-        this.unclickable && this.removeAttribute('tabindex');
-        this.classList.add(color_item_constants.COLOR_ITEM_CSS_CLASSES.colorItem);
+        if (this.unclickable) {
+            this.removeAttribute('tabindex');
+        }
+        else {
+            this.setAttribute('tabindex', '0');
+        }
         if (!this.value)
             this.value = this.color;
-        if (this.size)
-            this.classList.add(color_item_constants.COLOR_ITEM_CSS_CLASSES[this.size]);
-    }
-    attributeChangedCallback(name, value, newValue) {
-        super.attributeChangedCallback(name, value, newValue);
-        switch (name) {
-            case color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE: {
-                this._syncAriaPressed();
-                break;
-            }
-        }
-    }
-    _syncAriaPressed() {
-        this.selected ? this.setAttribute('aria-pressed', '') : this.removeAttribute('aria-pressed');
-    }
-    setupEvents() {
-        !this.unclickable && this.addEventListener('click', this._dispatchClickedEvent);
     }
     setBgColor(itemIsDisabled) {
         return itemIsDisabled ? utilities.ColorUtils.hexToRgba(this.color, 0.5) : this.color;
@@ -82,7 +75,6 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HColorItem.prototype, "unclickable", void 0);
 exports.HColorItem = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-color-item'),
-    tslib_es6.__metadata("design:paramtypes", [])
+    phoenix_custom_element.phoenixCustomElement('h-color-item')
 ], exports.HColorItem);
 //# sourceMappingURL=color_item.js.map

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

package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js

@@ -3,9 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const colorItemBaseCssClass = 'color-item';
-const COLOR_ITEM_EVENT_NAMES = {
-    selected: 'colorItemSelected'
-};
 const COLOR_ITEM_SIZES = {
     s: 's',
     xs: 'xs'
@@ -18,7 +15,6 @@ const COLOR_ITEM_CSS_CLASSES = {
 const COLOR_ITEM_SELECTED_ATTRIBUTE = 'selected';
 
 exports.COLOR_ITEM_CSS_CLASSES = COLOR_ITEM_CSS_CLASSES;
-exports.COLOR_ITEM_EVENT_NAMES = COLOR_ITEM_EVENT_NAMES;
 exports.COLOR_ITEM_SELECTED_ATTRIBUTE = COLOR_ITEM_SELECTED_ATTRIBUTE;
 exports.COLOR_ITEM_SIZES = COLOR_ITEM_SIZES;
 //# sourceMappingURL=color_item_constants.js.map

package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js.map

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

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

@@ -8,6 +8,7 @@ var decorators = require('lit/decorators');
 var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var keystrokes_controller = require('../../controllers/keystrokes_controller/keystrokes_controller.js');
 require('lit-html');
 var color_swatches_constants = require('./color_swatches_constants.js');
 var color_item_constants = require('./color_item/color_item_constants.js');
@@ -18,8 +19,87 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         this.multiple = false;
         this.selectedColors = [];
         this.showMoreBtnText = 'Pokaż wszystkie kolory';
-        this._handleColorClicked = ({ target }) => {
-            const $colorItem = target;
+        this._setupEvents = () => {
+            if (this.getAttribute('role') === 'group') {
+                this._setupCheckboxGroupEvents();
+            }
+            else {
+                this._setupRadioGroupEvents();
+            }
+        };
+        this._setupCheckboxGroupEvents = () => {
+            this._setupColorClickEvents();
+        };
+        this._setupRadioGroupEvents = () => {
+            document.body.addEventListener('keydown', this._focusOnSelectedColor);
+            this.addEventListener('keydown', this._handleTabNavigation);
+            this.addEventListener('keyup', this._handleRadioNavigation);
+            this._setupColorClickEvents();
+        };
+        this._setupColorClickEvents = () => {
+            if (!this._$colorSwatchesChildren)
+                return;
+            this._$colorSwatchesChildren.forEach(($colorItem) => {
+                $colorItem.addEventListener('click', this._handleColorClicked);
+                new keystrokes_controller.KeystrokesController({
+                    host: this,
+                    keys: [' '],
+                    callback: this._handleColorClicked,
+                    target: $colorItem
+                });
+            });
+        };
+        this._handleColorClicked = (ev) => {
+            ev.preventDefault();
+            const $colorItem = ev.target;
+            if ($colorItem.unclickable)
+                return;
+            this._toggleColorItem($colorItem);
+            this._dispatchColorChangeEvent($colorItem);
+        };
+        this._handleTabNavigation = (ev) => {
+            if (ev.key !== 'Tab')
+                return;
+            ev.preventDefault();
+            if (ev.shiftKey) {
+                const $firstFocusableColor = utilities.UiDomUtils.getFocusableElement(this);
+                utilities.UiDomUtils.getPreviousFocusableElement($firstFocusableColor).focus();
+                return;
+            }
+            const $LastFocusableColor = utilities.UiDomUtils.getLastFocusableElement(this);
+            utilities.UiDomUtils.getNextFocusableElement($LastFocusableColor).focus();
+        };
+        this._handleRadioNavigation = (ev) => {
+            const changeToNextKeys = ['ArrowDown', 'ArrowRight'];
+            const changeToPreviousKeys = ['ArrowUp', 'ArrowLeft'];
+            if (!changeToNextKeys.includes(ev.key) && !changeToPreviousKeys.includes(ev.key))
+                return;
+            ev.preventDefault();
+            if (changeToNextKeys.includes(ev.key)) {
+                this._handleChangeToNextColorItem(ev);
+            }
+            if (changeToPreviousKeys.includes(ev.key)) {
+                this._handleChangeToPreviousColorItem(ev);
+            }
+        };
+        this._focusOnSelectedColor = (ev) => {
+            if (ev.key !== 'Tab' || this.multiple)
+                return;
+            if (ev.shiftKey) {
+                const $previousFocusableElement = utilities.UiDomUtils.getPreviousFocusableElement(document.activeElement);
+                if (this.contains($previousFocusableElement) && this.selectedColors.length > 0) {
+                    ev.preventDefault();
+                    this.selectedColors[0].focus();
+                }
+                return;
+            }
+            const $nextFocusableElement = utilities.UiDomUtils.getNextFocusableElement(document.activeElement);
+            if (this.contains($nextFocusableElement) && this.selectedColors.length > 0) {
+                ev.preventDefault();
+                this.selectedColors[0].focus();
+            }
+        };
+        this._handleColorChange = ($colorItem) => {
             this._toggleColorItem($colorItem);
             this._dispatchColorChangeEvent($colorItem);
         };
@@ -56,6 +136,8 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
     }
     connectedCallback() {
         super.connectedCallback();
+        this.setAttribute('role', this.multiple ? 'group' : 'radiogroup');
+        this._$colorSwatchesChildren = [...this.children];
         this._setupEvents();
         this._addCssClasses();
         this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
@@ -68,11 +150,9 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
     }
     _hideItems(numberOfVisibleColors) {
-        var _a;
-        this._$colorSwatchesChildren = (_a = document.querySelector(color_swatches_constants.COLOR_SWATCHES_TAG_NAME)) === null || _a === void 0 ? void 0 : _a.children;
         if (!this._$colorSwatchesChildren)
             return;
-        Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild, index) => {
+        this._$colorSwatchesChildren.forEach(($colorSwatchesChild, index) => {
             if (index > numberOfVisibleColors - 1) {
                 $colorSwatchesChild.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
             }
@@ -83,17 +163,40 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
             var _a;
             if (!this._$colorSwatchesChildren)
                 return;
-            Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild) => {
+            this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
                 $colorSwatchesChild.removeAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
             });
             (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
         });
     }
-    _setupEvents() {
-        this.addEventListener(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
+    _handleChangeToNextColorItem({ target }) {
+        const $colorItem = target;
+        const $nextFocusableElement = utilities.UiDomUtils.getNextFocusableElement($colorItem);
+        let $nextColorItem;
+        if (!this.contains($nextFocusableElement)) {
+            $nextColorItem = utilities.UiDomUtils.getFocusableElement(this);
+        }
+        else {
+            $nextColorItem = $nextFocusableElement;
+        }
+        $nextColorItem.focus();
+        this._handleColorChange($nextColorItem);
+    }
+    _handleChangeToPreviousColorItem({ target }) {
+        const $colorItem = target;
+        const $previousFocusableElement = utilities.UiDomUtils.getPreviousFocusableElement($colorItem);
+        let $previousColorItem;
+        if (!this.contains($previousFocusableElement)) {
+            $previousColorItem = utilities.UiDomUtils.getLastFocusableElement(this);
+        }
+        else {
+            $previousColorItem = $previousFocusableElement;
+        }
+        $previousColorItem.focus();
+        this._handleColorChange($previousColorItem);
     }
     _toggleColorItem($colorItem) {
-        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
+        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorChangeForSingleMode($colorItem);
     }
     _handleColorClickedForMultipleMode($colorItem) {
         !this._isColorAlreadyExistInArray($colorItem)
@@ -101,17 +204,20 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
             : this._removeExistingColorFromArray($colorItem);
         this._toggleSelectedAttribute($colorItem);
     }
-    _handleColorClickedForSingleMode($colorItem) {
+    _handleColorChangeForSingleMode($colorItem) {
         const $previouslySelected = this.selectedColors[0];
         this._toggleSelectedAttribute($colorItem);
-        if ($previouslySelected && $previouslySelected !== $colorItem)
+        if ($previouslySelected && $previouslySelected !== $colorItem) {
             $previouslySelected.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE);
+            $previouslySelected.setAttribute('aria-checked', 'false');
+        }
         this.selectedColors = $previouslySelected === $colorItem ? [] : [$colorItem];
     }
     _toggleSelectedAttribute($colorItem) {
         $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
             ? $colorItem.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
             : $colorItem.setAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+        $colorItem.setAttribute('aria-checked', 'true');
     }
     _isColorAlreadyExistInArray($colorItem) {
         return this.selectedColors.includes($colorItem);
@@ -120,6 +226,10 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
         this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.body.removeEventListener('keydown', this._focusOnSelectedColor);
+    }
     render() {
         return lit.html `
             ${this.getSlot('default')}

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

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const colorSwatchesBaseCssClass = 'color-swatches';
-const COLOR_SWATCHES_TAG_NAME = 'h-color-swatches';
 const COLOR_ITEM_TAG_NAME = 'h-color-item';
 const COLOR_SWATCHES_CSS_CLASSES = {
     colorSwatches: colorSwatchesBaseCssClass,
@@ -20,5 +19,4 @@ exports.COLOR_ITEM_TAG_NAME = COLOR_ITEM_TAG_NAME;
 exports.COLOR_SWATCHES_CSS_CLASSES = COLOR_SWATCHES_CSS_CLASSES;
 exports.COLOR_SWATCHES_EVENT_NAMES = COLOR_SWATCHES_EVENT_NAMES;
 exports.COLOR_SWATCHES_HIDDEN_ATTRIBUTE = COLOR_SWATCHES_HIDDEN_ATTRIBUTE;
-exports.COLOR_SWATCHES_TAG_NAME = COLOR_SWATCHES_TAG_NAME;
 //# sourceMappingURL=color_swatches_constants.js.map

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map

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

package/build/cjs/packages/phoenix/src/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/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,19 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 this.updateOptionAriaAttribute($option);
             });
         };
+        this._updateLabelAria = (options) => {
+            var _a;
+            const ariaLabel = document.querySelector(`[id="${this.ariaLabelledby}"]`);
+            (_a = ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
+            if (ariaLabel) {
+                ariaLabel.innerHTML = `
+                ${ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.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 +133,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 +197,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,16 +211,27 @@ 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() {
         super.connectedCallback();
@@ -218,6 +244,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         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.options$.subscribe(this._selectedOptionsAriaObserver);
         this._updateOptions();
         this._setupEvents();
     }
@@ -247,6 +275,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) {
@@ -313,6 +345,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 +373,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;"}