@shoper/phoenix_design_system 1.11.14-7 → 1.11.14-8

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

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

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

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

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

@@ -98,7 +98,7 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
                       label-text="${this.labelText}"
                       label-icon-name="${ifDefined_js.ifDefined(this.labelIconName)}"
                       aria-required="${this.required ? 'true' : 'false'}"
-                      focus-priority
+                      validation-container
                   />`
             : lit.nothing}
             ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)

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

@@ -118,12 +118,9 @@ exports.HInputControl = class HInputControl extends phoenix_light_lit_element.Ph
                 .value="${ifDefined_js.ifDefined(this.value)}"
                 placeholder="${ifDefined_js.ifDefined(this.placeholder)}"
                 ?disabled="${this.disabled}"
+                ?required="${this.required}"
                 ?readonly="${this.readonly}"
                 ?hidden="${this.hidden}"
-                ?autofocus="${this.autofocus}"
-                aria-required="${this.required ? 'true' : 'false'}"
-                aria-describedby="${this.ariaDescribedBy}"
-                aria-invalid="${this.error ? 'true' : 'false'}"
                 @mousedown="${this._handleMouseDownEvent}"
                 @mouseup="${this._handleMouseUpEvent}"
                 @blur="${this._handleBlurEvent}"
@@ -185,18 +182,6 @@ tslib_es6.__decorate([
     decorators.property({ type: String, attribute: 'valid-pattern' }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HInputControl.prototype, "validPattern", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: Boolean }),
-    tslib_es6.__metadata("design:type", Boolean)
-], exports.HInputControl.prototype, "autofocus", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: String, attribute: 'aria-describedby' }),
-    tslib_es6.__metadata("design:type", String)
-], exports.HInputControl.prototype, "ariaDescribedBy", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: Boolean }),
-    tslib_es6.__metadata("design:type", Boolean)
-], exports.HInputControl.prototype, "error", void 0);
 exports.HInputControl = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-input-control'),
     tslib_es6.__metadata("design:paramtypes", [])

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

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

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

@@ -247,7 +247,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
     }
     updateOptionAriaAttribute($option) {
-        $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
+        !$option.selected
+            ? $option.removeAttribute(this.multiple ? 'aria-checked' : 'aria-selected')
+            : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
     }
     _removeHTMLOptions(optionsValues) {
         this._$options = select_utils.SelectControlUtils.removeHTMLOptions(Array.from(this._$options.values()), optionsValues);
@@ -312,12 +314,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 name="${this.controlName}"
                 offset=${this.offset}
                 content-width="full"
-                prevent-focus-trap
             >
                 <h-dropdown-toggler
                     ${ref_js.ref(this._$dropdownToggler)}
                     name="${this.controlName}"
-                    focus-priority
+                    validation-container
                     aria-haspopup="listbox"
                     role="combobox"
                     aria-required="${this.required ? 'true' : 'false'}"
@@ -330,7 +331,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 <h-dropdown-content
                     class="${select_constants.SELECT_CSS_CLASSES.selectContent} ${this.error ? select_constants.SELECT_CSS_CLASSES.selectContentError : ''}"
                     ${ref_js.ref(this._$dropdownContent)}
-                    name="${this.controlName}"
+                    name=${this.controlName}
                     @focusin="${this._manageSelectFocusAria}"
                 >
                     <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>

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

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

@@ -6,6 +6,7 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 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 keystrokes_controller = require('../../controllers/keystrokes_controller/keystrokes_controller.js');
 var portal_constants = require('../portal/portal_constants.js');
 var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
 var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
@@ -18,7 +19,6 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
         this.portalTarget = base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME;
         this.direction = utilities.DIRECTIONS.topCenter;
         this.offset = base_message_constants.DEFAULT_MESSAGE_OFFSET;
-        this.tabindex = '0';
         this._setupEventListeners = () => {
             this.addEventListener('mouseenter', this.open);
             this.addEventListener('mouseleave', this.close);
@@ -59,11 +59,49 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
                 });
             }, this._shouldDelayClosing ? base_message_constants.MESSAGE_CLOSE_DELAY_IN_MS : 0);
         };
+        this._handleFocusWithinMessage = (ev) => {
+            var _a;
+            if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`.${this._messageComponentName}`)) !== this)
+                this.close();
+            if (!document.activeElement || ev.shiftKey)
+                return;
+            const $focusableElements = utilities.UiDomUtils.getFocusableElements(this);
+            const activeElementIndex = $focusableElements.indexOf(document.activeElement);
+            const isLastFocusableChild = activeElementIndex === $focusableElements.length - 1;
+            if (!isLastFocusableChild)
+                return;
+            this.close();
+        };
+        this._handleReverseTab = () => {
+            const $focusableElements = utilities.UiDomUtils.getFocusableElements(document.body);
+            const activeElement = document.activeElement;
+            const indexOfCurrentlyFocusedElement = $focusableElements.indexOf(activeElement);
+            const $previousElement = $focusableElements[indexOfCurrentlyFocusedElement - 1];
+            const $previousElementMessageParent = $previousElement === null || $previousElement === void 0 ? void 0 : $previousElement.closest(`h-${this._messageComponentName}`);
+            if ($previousElementMessageParent === this)
+                return;
+            if ($previousElementMessageParent)
+                $previousElementMessageParent.open();
+            if (this._isBaseMessage(activeElement))
+                activeElement.close();
+        };
         this._clickOutsideController = new click_outside_controller.ClickOutsideController({
             host: this,
             container: this,
             action: this.close
         });
+        new keystrokes_controller.KeystrokesController({
+            host: this,
+            keys: ['tab'],
+            target: this,
+            callback: this._handleFocusWithinMessage
+        });
+        new keystrokes_controller.KeystrokesController({
+            host: this,
+            keys: [['shift', 'tab']],
+            target: document.body,
+            callback: this._handleReverseTab
+        });
     }
     connectedCallback(messageComponentName = '') {
         super.connectedCallback();
@@ -79,7 +117,6 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
                 elementToPosition: this._$messageContent,
                 offset: this.offset
             });
-        this.setAttribute('tabindex', this.tabindex);
         this._setupEventListeners();
     }
     static _appendMessagePortal() {
@@ -90,6 +127,11 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
         $portalTarget.setAttribute(portal_constants.PORTAL_TARGET_NAME_PROP, base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME);
         document.body.appendChild($portalTarget);
     }
+    _isBaseMessage($element) {
+        if (base_message_constants.MESSAGE_ELEMENTS.includes($element.localName))
+            return true;
+        return false;
+    }
 }
 tslib_es6.__decorate([
     decorators.property({ type: Boolean, reflect: true }),
@@ -106,11 +148,7 @@ tslib_es6.__decorate([
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", Number)
-], BaseMessage.prototype, "offset", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: String }),
-    tslib_es6.__metadata("design:type", String)
-], BaseMessage.prototype, "tabindex", void 0);
+], BaseMessage.prototype, "offset", void 0);
 
 exports.BaseMessage = BaseMessage;
 //# sourceMappingURL=base_message.js.map

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

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

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

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

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

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

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

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

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

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

package/build/cjs/packages/phoenix/src/index.js

@@ -76,8 +76,8 @@ var toggle_button = require('./components/groups/toggle_button_group/toggle_butt
 var click_outside_controller_messages = require('./controllers/click_outside_controller/click_outside_controller_messages.js');
 var backdrop = require('./components/backdrop/backdrop.js');
 var color_swatches_control_constants = require('./components/form/color_swatches_control/color_swatches_control_constants.js');
-var color_swatches = require('./components/color_swatches/color_swatches.js');
 var color_item = require('./components/color_swatches/color_item/color_item.js');
+var color_swatches = require('./components/color_swatches/color_swatches.js');
 var color_swatches_control = require('./components/form/color_swatches_control/color_swatches_control.js');
 var show_more = require('./components/color_swatches/show-more/show_more.js');
 var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
@@ -464,16 +464,16 @@ Object.defineProperty(exports, 'HBackdrop', {
 	}
 });
 exports.COLOR_SWATCHES_CONTROL_EVENT_NAMES = color_swatches_control_constants.COLOR_SWATCHES_CONTROL_EVENT_NAMES;
-Object.defineProperty(exports, 'HColorSwatches', {
+Object.defineProperty(exports, 'HColorItem', {
 	enumerable: true,
 	get: function () {
-		return color_swatches.HColorSwatches;
+		return color_item.HColorItem;
 	}
 });
-Object.defineProperty(exports, 'HColorItem', {
+Object.defineProperty(exports, 'HColorSwatches', {
 	enumerable: true,
 	get: function () {
-		return color_item.HColorItem;
+		return color_swatches.HColorSwatches;
 	}
 });
 Object.defineProperty(exports, 'HColorSwatchesControl', {

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.d.ts

@@ -8,9 +8,12 @@ export declare class HColorItem extends PhoenixLightLitElement {
     selected: boolean;
     size?: TColorItemSize;
     unclickable: boolean;
-    private _$colorSwatches;
+    private _btnController;
+    constructor();
     connectedCallback(): void;
-    private _setupAriaAttributes;
-    private _setupClasses;
+    attributeChangedCallback(name: string, value: string | null, newValue: string | null): void;
+    private _syncAriaPressed;
+    private setupEvents;
     private setBgColor;
+    private _dispatchClickedEvent;
 }

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

@@ -3,40 +3,47 @@ import { property } from 'lit/decorators';
 import { ColorUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { COLOR_ITEM_CSS_CLASSES } from './color_item_constants.js';
+import { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
+import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_CSS_CLASSES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item_constants.js';
 
 let HColorItem = class HColorItem extends PhoenixLightLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.disabled = false;
         this.selected = false;
         this.unclickable = false;
-        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_CSS_CLASSES.colorItem);
-            if (this.size)
-                this.classList.add(COLOR_ITEM_CSS_CLASSES[this.size]);
+        this._dispatchClickedEvent = () => {
+            this.emitEvent(COLOR_ITEM_EVENT_NAMES.selected);
         };
+        this._btnController = new BtnController(this, this._dispatchClickedEvent);
     }
     connectedCallback() {
         super.connectedCallback();
-        this._setupAriaAttributes();
-        this._setupClasses();
+        this.setupEvents();
         this.style.backgroundColor = this.setBgColor(this.disabled);
-        if (this.unclickable) {
-            this.removeAttribute('tabindex');
-        }
-        else {
-            this.setAttribute('tabindex', '0');
-        }
+        this._syncAriaPressed();
+        this.setAttribute('aria-label', this.label ? this.label : this.color);
+        this.unclickable && this.removeAttribute('tabindex');
+        this.classList.add(COLOR_ITEM_CSS_CLASSES.colorItem);
         if (!this.value)
             this.value = this.color;
+        if (this.size)
+            this.classList.add(COLOR_ITEM_CSS_CLASSES[this.size]);
+    }
+    attributeChangedCallback(name, value, newValue) {
+        super.attributeChangedCallback(name, value, newValue);
+        switch (name) {
+            case 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 ? ColorUtils.hexToRgba(this.color, 0.5) : this.color;
@@ -71,7 +78,8 @@ __decorate([
     __metadata("design:type", Boolean)
 ], HColorItem.prototype, "unclickable", void 0);
 HColorItem = __decorate([
-    phoenixCustomElement('h-color-item')
+    phoenixCustomElement('h-color-item'),
+    __metadata("design:paramtypes", [])
 ], HColorItem);
 
 export { HColorItem };

package/build/esm/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,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;"}
+{"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;"}

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

@@ -1,4 +1,7 @@
 const colorItemBaseCssClass = 'color-item';
+const COLOR_ITEM_EVENT_NAMES = {
+    selected: 'colorItemSelected'
+};
 const COLOR_ITEM_SIZES = {
     s: 's',
     xs: 'xs'
@@ -10,5 +13,5 @@ const COLOR_ITEM_CSS_CLASSES = {
 };
 const COLOR_ITEM_SELECTED_ATTRIBUTE = 'selected';
 
-export { COLOR_ITEM_CSS_CLASSES, COLOR_ITEM_SELECTED_ATTRIBUTE, COLOR_ITEM_SIZES };
+export { COLOR_ITEM_CSS_CLASSES, COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE, COLOR_ITEM_SIZES };
 //# sourceMappingURL=color_item_constants.js.map

package/build/esm/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;"}
+{"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;"}

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

@@ -15,23 +15,13 @@ export declare class HColorSwatches extends PhoenixLightLitElement {
     private _hideItems;
     private _showAllItemsEvent;
     private _setupEvents;
-    private _setupCheckboxGroupEvents;
-    private _setupRadioGroupEvents;
-    private _setupColorClickEvents;
     private _handleColorClicked;
-    private _handleTabNavigation;
-    private _handleRadioNavigation;
-    private _focusOnSelectedColor;
-    private _handleChangeToNextColorItem;
-    private _handleChangeToPreviousColorItem;
-    private _handleColorChange;
     private _toggleColorItem;
     private _handleColorClickedForMultipleMode;
-    private _handleColorChangeForSingleMode;
+    private _handleColorClickedForSingleMode;
     private _toggleSelectedAttribute;
     private _isColorAlreadyExistInArray;
     private _removeExistingColorFromArray;
     private _dispatchColorChangeEvent;
-    disconnectedCallback(): void;
     protected render(): TemplateResult;
 }