@shoper/phoenix_design_system 1.15.5 → 1.15.6-0

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/controllers/list_box_controller/list_box_keyboard_controller.js

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

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

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

package/build/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;
 }