@shoper/phoenix_design_system 1.15.5 → 1.15.6

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/messages/base_message.js

@@ -6,7 +6,6 @@ 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');
@@ -19,11 +18,15 @@ 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.mouseonly = false;
+        this.tabindex = '-1';
         this._setupEventListeners = () => {
             this.addEventListener('mouseenter', this.open);
             this.addEventListener('mouseleave', this.close);
-            this.addEventListener('focusin', this.open);
-            this.addEventListener('focusout', this.close);
+            if (!this.mouseonly) {
+                this.addEventListener('focusin', this.open);
+                this.addEventListener('focusout', this.close);
+            }
         };
         this._positionMessage = () => {
             requestAnimationFrame(() => {
@@ -59,49 +62,11 @@ 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();
@@ -117,6 +82,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
                 elementToPosition: this._$messageContent,
                 offset: this.offset
             });
+        this.setAttribute('tabindex', this.tabindex);
         this._setupEventListeners();
     }
     static _appendMessagePortal() {
@@ -127,11 +93,6 @@ 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 }),
@@ -148,7 +109,15 @@ tslib_es6.__decorate([
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", Number)
-], BaseMessage.prototype, "offset", void 0);
+], BaseMessage.prototype, "offset", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], BaseMessage.prototype, "mouseonly", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], BaseMessage.prototype, "tabindex", 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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}

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

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

package/build/cjs/packages/phoenix/src/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_item = require('./components/color_swatches/color_item/color_item.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_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, 'HColorItem', {
+Object.defineProperty(exports, 'HColorSwatches', {
 	enumerable: true,
 	get: function () {
-		return color_item.HColorItem;
+		return color_swatches.HColorSwatches;
 	}
 });
-Object.defineProperty(exports, 'HColorSwatches', {
+Object.defineProperty(exports, 'HColorItem', {
 	enumerable: true,
 	get: function () {
-		return color_swatches.HColorSwatches;
+		return color_item.HColorItem;
 	}
 });
 Object.defineProperty(exports, 'HColorSwatchesControl', {

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

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

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

@@ -3,47 +3,40 @@ 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 { 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';
+import { COLOR_ITEM_CSS_CLASSES } from './color_item_constants.js';
 
 let HColorItem = class HColorItem extends PhoenixLightLitElement {
     constructor() {
-        super();
+        super(...arguments);
         this.disabled = false;
         this.selected = false;
         this.unclickable = false;
-        this._dispatchClickedEvent = () => {
-            this.emitEvent(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_CSS_CLASSES.colorItem);
+            if (this.size)
+                this.classList.add(COLOR_ITEM_CSS_CLASSES[this.size]);
         };
-        this._btnController = new 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_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_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;
@@ -78,8 +71,7 @@ __decorate([
     __metadata("design:type", Boolean)
 ], HColorItem.prototype, "unclickable", void 0);
 HColorItem = __decorate([
-    phoenixCustomElement('h-color-item'),
-    __metadata("design:paramtypes", [])
+    phoenixCustomElement('h-color-item')
 ], 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;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;"}

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

@@ -1,7 +1,4 @@
 const colorItemBaseCssClass = 'color-item';
-const COLOR_ITEM_EVENT_NAMES = {
-    selected: 'colorItemSelected'
-};
 const COLOR_ITEM_SIZES = {
     s: 's',
     xs: 'xs'
@@ -13,5 +10,5 @@ const COLOR_ITEM_CSS_CLASSES = {
 };
 const COLOR_ITEM_SELECTED_ATTRIBUTE = 'selected';
 
-export { COLOR_ITEM_CSS_CLASSES, COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE, COLOR_ITEM_SIZES };
+export { COLOR_ITEM_CSS_CLASSES, 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;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;"}

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

@@ -15,13 +15,23 @@ 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 _handleColorClickedForSingleMode;
+    private _handleColorChangeForSingleMode;
     private _toggleSelectedAttribute;
     private _isColorAlreadyExistInArray;
     private _removeExistingColorFromArray;
     private _dispatchColorChangeEvent;
+    disconnectedCallback(): void;
     protected render(): TemplateResult;
 }

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

@@ -1,12 +1,13 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators';
-import { ArrayUtils } from '@dreamcommerce/utilities';
+import { UiDomUtils, ArrayUtils } 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 { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
 import 'lit-html';
-import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_TAG_NAME, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
-import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
+import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
+import { COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
 
 let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
     constructor() {
@@ -14,8 +15,87 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         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 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 = UiDomUtils.getFocusableElement(this);
+                UiDomUtils.getPreviousFocusableElement($firstFocusableColor).focus();
+                return;
+            }
+            const $LastFocusableColor = UiDomUtils.getLastFocusableElement(this);
+            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 = UiDomUtils.getPreviousFocusableElement(document.activeElement);
+                if (this.contains($previousFocusableElement) && this.selectedColors.length > 0) {
+                    ev.preventDefault();
+                    this.selectedColors[0].focus();
+                }
+                return;
+            }
+            const $nextFocusableElement = 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);
         };
@@ -52,6 +132,8 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.setAttribute('role', this.multiple ? 'group' : 'radiogroup');
+        this._$colorSwatchesChildren = [...this.children];
         this._setupEvents();
         this._addCssClasses();
         this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
@@ -64,11 +146,9 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
     }
     _hideItems(numberOfVisibleColors) {
-        var _a;
-        this._$colorSwatchesChildren = (_a = document.querySelector(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_HIDDEN_ATTRIBUTE, '');
             }
@@ -79,17 +159,40 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
             var _a;
             if (!this._$colorSwatchesChildren)
                 return;
-            Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild) => {
+            this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
                 $colorSwatchesChild.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
             });
             (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
         });
     }
-    _setupEvents() {
-        this.addEventListener(COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
+    _handleChangeToNextColorItem({ target }) {
+        const $colorItem = target;
+        const $nextFocusableElement = UiDomUtils.getNextFocusableElement($colorItem);
+        let $nextColorItem;
+        if (!this.contains($nextFocusableElement)) {
+            $nextColorItem = UiDomUtils.getFocusableElement(this);
+        }
+        else {
+            $nextColorItem = $nextFocusableElement;
+        }
+        $nextColorItem.focus();
+        this._handleColorChange($nextColorItem);
+    }
+    _handleChangeToPreviousColorItem({ target }) {
+        const $colorItem = target;
+        const $previousFocusableElement = UiDomUtils.getPreviousFocusableElement($colorItem);
+        let $previousColorItem;
+        if (!this.contains($previousFocusableElement)) {
+            $previousColorItem = 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)
@@ -97,17 +200,20 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
             : 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_SELECTED_ATTRIBUTE);
+            $previouslySelected.setAttribute('aria-checked', 'false');
+        }
         this.selectedColors = $previouslySelected === $colorItem ? [] : [$colorItem];
     }
     _toggleSelectedAttribute($colorItem) {
         $colorItem.hasAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
             ? $colorItem.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
             : $colorItem.setAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+        $colorItem.setAttribute('aria-checked', 'true');
     }
     _isColorAlreadyExistInArray($colorItem) {
         return this.selectedColors.includes($colorItem);
@@ -116,6 +222,10 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
         this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.body.removeEventListener('keydown', this._focusOnSelectedColor);
+    }
     render() {
         return html `
             ${this.getSlot('default')}

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

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

@@ -1,5 +1,4 @@
 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,
@@ -12,5 +11,5 @@ const COLOR_SWATCHES_EVENT_NAMES = {
 };
 const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
 
-export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE, COLOR_SWATCHES_TAG_NAME };
+export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE };
 //# sourceMappingURL=color_swatches_constants.js.map

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

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

@@ -6,6 +6,8 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
     portalTarget: string;
     direction: TDirection;
     offset: number;
+    mouseonly: boolean;
+    tabindex: string;
     private _positionController;
     private _clickOutsideController;
     private _$messageContent;
@@ -21,7 +23,4 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
     protected _positionMessage: () => void;
     open: () => void;
     close: () => void;
-    private _handleFocusWithinMessage;
-    private _handleReverseTab;
-    private _isBaseMessage;
 }

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

@@ -1,12 +1,11 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import { DIRECTIONS, UiDomUtils } from '@dreamcommerce/utilities';
+import { DIRECTIONS } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
-import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
-import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_ELEMENTS } from './base_message_constants.js';
+import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS } from './base_message_constants.js';
 
 class BaseMessage extends PhoenixLightLitElement {
     constructor() {
@@ -15,11 +14,15 @@ class BaseMessage extends PhoenixLightLitElement {
         this.portalTarget = DEFAULT_MESSAGE_PORTAL_NAME;
         this.direction = DIRECTIONS.topCenter;
         this.offset = DEFAULT_MESSAGE_OFFSET;
+        this.mouseonly = false;
+        this.tabindex = '-1';
         this._setupEventListeners = () => {
             this.addEventListener('mouseenter', this.open);
             this.addEventListener('mouseleave', this.close);
-            this.addEventListener('focusin', this.open);
-            this.addEventListener('focusout', this.close);
+            if (!this.mouseonly) {
+                this.addEventListener('focusin', this.open);
+                this.addEventListener('focusout', this.close);
+            }
         };
         this._positionMessage = () => {
             requestAnimationFrame(() => {
@@ -55,49 +58,11 @@ class BaseMessage extends PhoenixLightLitElement {
                 });
             }, this._shouldDelayClosing ? 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 = UiDomUtils.getFocusableElements(this);
-            const activeElementIndex = $focusableElements.indexOf(document.activeElement);
-            const isLastFocusableChild = activeElementIndex === $focusableElements.length - 1;
-            if (!isLastFocusableChild)
-                return;
-            this.close();
-        };
-        this._handleReverseTab = () => {
-            const $focusableElements = UiDomUtils.getFocusableElements(document.body);
-            const activeElement = document.activeElement;
-            const indexOfCurrentlyFocusedElement = $focusableElements.indexOf(activeElement);
-            const $previousElement = $focusableElements[indexOfCurrentlyFocusedElement - 1];
-            const $previousElementMessageParent = $previousElement === null || $previousElement === void 0 ? void 0 : $previousElement.closest(`h-${this._messageComponentName}`);
-            if ($previousElementMessageParent === this)
-                return;
-            if ($previousElementMessageParent)
-                $previousElementMessageParent.open();
-            if (this._isBaseMessage(activeElement))
-                activeElement.close();
-        };
         this._clickOutsideController = new ClickOutsideController({
             host: this,
             container: this,
             action: this.close
         });
-        new KeystrokesController({
-            host: this,
-            keys: ['tab'],
-            target: this,
-            callback: this._handleFocusWithinMessage
-        });
-        new KeystrokesController({
-            host: this,
-            keys: [['shift', 'tab']],
-            target: document.body,
-            callback: this._handleReverseTab
-        });
     }
     connectedCallback(messageComponentName = '') {
         super.connectedCallback();
@@ -113,6 +78,7 @@ class BaseMessage extends PhoenixLightLitElement {
                 elementToPosition: this._$messageContent,
                 offset: this.offset
             });
+        this.setAttribute('tabindex', this.tabindex);
         this._setupEventListeners();
     }
     static _appendMessagePortal() {
@@ -123,11 +89,6 @@ class BaseMessage extends PhoenixLightLitElement {
         $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_MESSAGE_PORTAL_NAME);
         document.body.appendChild($portalTarget);
     }
-    _isBaseMessage($element) {
-        if (MESSAGE_ELEMENTS.includes($element.localName))
-            return true;
-        return false;
-    }
 }
 __decorate([
     property({ type: Boolean, reflect: true }),
@@ -144,7 +105,15 @@ __decorate([
 __decorate([
     property({ type: String }),
     __metadata("design:type", Number)
-], BaseMessage.prototype, "offset", void 0);
+], BaseMessage.prototype, "offset", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], BaseMessage.prototype, "mouseonly", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BaseMessage.prototype, "tabindex", void 0);
 
 export { BaseMessage };
 //# sourceMappingURL=base_message.js.map

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

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

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

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

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

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

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

@@ -72,8 +72,8 @@ export { HToggleButton } from './components/groups/toggle_button_group/toggle_bu
 export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
 export { HBackdrop } from './components/backdrop/backdrop.js';
 export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './components/form/color_swatches_control/color_swatches_control_constants.js';
-export { HColorItem } from './components/color_swatches/color_item/color_item.js';
 export { HColorSwatches } from './components/color_swatches/color_swatches.js';
+export { HColorItem } from './components/color_swatches/color_item/color_item.js';
 export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
 export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';

package/package.json

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