@shoper/phoenix_design_system 1.11.11-2 → 1.11.11-21

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js

@@ -12,15 +12,6 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
     constructor() {
         super(...arguments);
         this._isSearchPhraseCleared = false;
-        this._setupAttributes = () => {
-            var _a, _b, _c, _d, _e, _f;
-            (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'combobox');
-            (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-autocomplete', 'none');
-            (_c = this.input) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-haspopup', 'grid');
-            const $searchContentContainer = (_d = this.closest('h-search')) === null || _d === void 0 ? void 0 : _d.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.container}`);
-            (_e = this.input) === null || _e === void 0 ? void 0 : _e.setAttribute('aria-controls', ($searchContentContainer === null || $searchContentContainer === void 0 ? void 0 : $searchContentContainer.id) || '');
-            (_f = this.input) === null || _f === void 0 ? void 0 : _f.setAttribute('aria-activedescendant', '');
-        };
     }
     connectedCallback() {
         super.connectedCallback();
@@ -30,7 +21,6 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
         }
         this._setupInitialValue();
         this._setupListeners();
-        this._setupAttributes();
     }
     _setupInitialValue() {
         const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
@@ -59,8 +49,7 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
         this.input.addEventListener('focusin', (ev) => {
             this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.focusin, {
                 detail: {
-                    searchPhrase: ev.target.value,
-                    relatedTarget: ev.relatedTarget
+                    searchPhrase: ev.target.value
                 }
             });
         });

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map

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

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/message/search_message.js

@@ -7,7 +7,6 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 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 v4 = require('../../../../../../../../external/uuid/dist/esm-browser/v4.js');
 var when = require('../../../../../../../../external/lit/external/lit-html/directives/when.js');
 var search_constants = require('../../search_constants.js');
 var isEqual = require('../../../../../../../../external/lodash/isEqual.js');
@@ -18,7 +17,6 @@ exports.HSearchMessage = class HSearchMessage extends phoenix_light_lit_element.
         this.searchPhrase = '';
         this.history = [];
         this.translations = {};
-        this._searchButtonId = v4['default']();
     }
     _createEmptyResults() {
         return {
@@ -51,12 +49,7 @@ exports.HSearchMessage = class HSearchMessage extends phoenix_light_lit_element.
         return lit.html `
             ${when.when(this._isNoResultsForSearchPhrase(), () => lit.html `<p class="${search_constants.SEARCH_CLASS_NAMES.messageNoResults}">
                         ${this.searchPhrase} -
-                        <button
-                            class="${search_constants.SEARCH_CLASS_NAMES.messageText}"
-                            @click="${this.handleGoToResults}"
-                            type="button"
-                            data-search-item-id="${this._searchButtonId}"
-                        >
+                        <button class="${search_constants.SEARCH_CLASS_NAMES.messageText}" @click="${this.handleGoToResults}" type="button">
                             ${this.translations.searchInStore}
                         </button>
                     </p>`, () => lit.html `${when.when(this._hasHistoryAndEmptyPhrase(), () => lit.html `<p class="${search_constants.SEARCH_CLASS_NAMES.message} ${search_constants.SEARCH_CLASS_NAMES.messageWithHistory}">

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/message/search_message.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,iBAAiB,8DAAkE;AACnF,mBAAmB,2EAAmF;AACtG;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js

@@ -31,14 +31,13 @@ exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_li
                 ${repeat.repeat(this.producers, (producer, index) => {
             var _a, _b;
             return lit.html `<li
-                        class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${String(this.initialItemIds.producers + index) ===
+                        class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${this.initialItemIds.producers + index ===
                 this.activeItemId
                 ? search_constants.SEARCH_CLASS_NAMES.itemActive
                 : ''}"
-                        data-search-item-id="${this.searchId}${this.initialItemIds.producers + index}"
+                        data-search-item-id="${this.initialItemIds.producers + index}"
                         aria-label=${this.producerAriaLabel ? `${this.producerAriaLabel} ${producer.name}` : undefined}
                         tabindex="0"
-                        role="option"
                     >
                         <a
                             href="${producer.url}"
@@ -59,13 +58,9 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Array)
 ], exports.HSearchProducerContent.prototype, "producers", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: String, attribute: 'active-item-id' }),
-    tslib_es6.__metadata("design:type", String)
+    decorators.property({ type: Number, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", Number)
 ], exports.HSearchProducerContent.prototype, "activeItemId", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: String, attribute: 'search-id' }),
-    tslib_es6.__metadata("design:type", String)
-], exports.HSearchProducerContent.prototype, "searchId", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Object, reflect: true }),
     tslib_es6.__metadata("design:type", Object)

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js

@@ -44,14 +44,13 @@ exports.HSearchProductContent = class HSearchProductContent extends phoenix_ligh
                 ${repeat.repeat(this.products, (product, index) => {
             var _a, _b;
             return lit.html ` <li
-                        class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${String(this.initialItemIds.products + index) ===
+                        class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${this.initialItemIds.products + index ===
                 this.activeItemId
                 ? search_constants.SEARCH_CLASS_NAMES.itemActive
                 : ''}"
-                        data-search-item-id="${this.searchId}${this.initialItemIds.products + index}"
+                        data-search-item-id="${this.initialItemIds.products + index}"
                         aria-label=${this.productAriaLabel ? `${this.productAriaLabel} ${product.name}` : undefined}
                         tabindex="0"
-                        role="option"
                     >
                         <a
                             href="${product.url}"
@@ -100,13 +99,9 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Object)
 ], exports.HSearchProductContent.prototype, "settings", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: String, attribute: 'active-item-id' }),
-    tslib_es6.__metadata("design:type", String)
+    decorators.property({ type: Number, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", Number)
 ], exports.HSearchProductContent.prototype, "activeItemId", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: String, attribute: 'search-id' }),
-    tslib_es6.__metadata("design:type", String)
-], exports.HSearchProductContent.prototype, "searchId", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Object, reflect: true }),
     tslib_es6.__metadata("design:type", Object)

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js

@@ -70,7 +70,6 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
                 ${when.when(((_a = this.results.suggestions) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.results.categories) === null || _b === void 0 ? void 0 : _b.length), () => lit.html ` <h-search-suggestion-content
                         class="${search_constants.SEARCH_CLASS_NAMES.section}"
                         active-item-id="${this.activeItemId}"
-                        search-id="${this.searchId}"
                         .initialItemIds="${this._getInitialItemsIds()}"
                         .translations="${this.translations}"
                         locale="${this.locale}"
@@ -85,7 +84,6 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
                                 .products="${this.results.products}"
                                 .settings="${this.settings}"
                                 active-item-id="${this.activeItemId}"
-                                search-id="${this.searchId}"
                                 .initialItemIds="${this._getInitialItemsIds()}"
                                 .translations="${this.translations}"
                                 .productAriaLabel=${this.settings.suggesterProductItemAriaLabel}
@@ -95,7 +93,7 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
                                                 class="${search_constants.SEARCH_CLASS_NAMES.productButton}"
                                                 @click="${this.handleLoadMoreProducts}"
                                                 type="button"
-                                                data-search-item-id="${this.searchId}${this._loadMoreButtonId}"
+                                                data-search-item-id="${this._loadMoreButtonId}"
                                             >
                                                 ${this.translations.loadMore}
                                             </button>`), () => lit.html `
@@ -103,7 +101,7 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
                                         class="${search_constants.SEARCH_CLASS_NAMES.productButton}"
                                         @click="${this.handleGoToProductsFor}"
                                         type="button"
-                                        data-search-item-id="${this.searchId}${this._goToProductsForButtonId}"
+                                        data-search-item-id="${this._goToProductsForButtonId}"
                                     >
                                         ${this.translations.goToProductsFor}: <strong>${this._getSearchPhrase()}</strong>
                                     </button>
@@ -114,7 +112,6 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
                             class="${search_constants.SEARCH_CLASS_NAMES.section}"
                             .producers="${this.results.producers}"
                             active-item-id="${this.activeItemId}"
-                            search-id="${this.searchId}"
                             .initialItemIds="${this._getInitialItemsIds()}"
                             .translations="${this.translations}"
                             search-phrase="${this.searchPhrase}"
@@ -145,13 +142,9 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", String)
 ], exports.HSearchResults.prototype, "locale", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: String, attribute: 'active-item-id' }),
-    tslib_es6.__metadata("design:type", String)
+    decorators.property({ type: Number, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", Number)
 ], exports.HSearchResults.prototype, "activeItemId", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: String, attribute: 'search-id' }),
-    tslib_es6.__metadata("design:type", String)
-], exports.HSearchResults.prototype, "searchId", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Object }),
     tslib_es6.__metadata("design:type", Object)

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,iBAAiB,8DAAkE;AACnF,mBAAmB,2EAAmF;AACtG;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,iBAAiB,8DAAkE;AACnF,mBAAmB,2EAAmF;AACtG;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js

@@ -107,16 +107,13 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
                 <ul>
                     ${repeat.repeat(this._suggestionsData, (suggestion, index) => lit.html `<li
                                 @click=${() => this._handleSuggestion(suggestion.suggestionName, suggestion.type)}
-                                class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${String(index) === this.activeItemId
+                                class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${index === this.activeItemId
             ? search_constants.SEARCH_CLASS_NAMES.itemActive
             : ''}"
                                 data-suggested-value="${suggestion.suggestionName}"
-                                data-search-item-id="${this.searchId}${index}"
-                                aria-label="${this.suggestionAriaLabel ?
-            `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
-            ''}"
+                                data-search-item-id="${index}"
+                                aria-label=${this.suggestionAriaLabel ? `${this.suggestionAriaLabel} ${suggestion.suggestionName}` : undefined}
                                 tabindex="0"
-                                role="option"
                             >
                                 ${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion, () => lit.html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
                                         <h-icon
@@ -139,13 +136,9 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
     }
 };
 tslib_es6.__decorate([
-    decorators.property({ type: String, attribute: 'active-item-id' }),
-    tslib_es6.__metadata("design:type", String)
+    decorators.property({ type: Number, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", Number)
 ], exports.HSearchSuggestionContent.prototype, "activeItemId", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: String, attribute: 'search-id' }),
-    tslib_es6.__metadata("design:type", String)
-], exports.HSearchSuggestionContent.prototype, "searchId", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Object, reflect: true }),
     tslib_es6.__metadata("design:type", Object)

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -6,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,10 +18,12 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
         this.portalTarget = base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME;
         this.direction = utilities.DIRECTIONS.topCenter;
         this.offset = base_message_constants.DEFAULT_MESSAGE_OFFSET;
+        this.tabindex = '0';
         this._setupEventListeners = () => {
             this.addEventListener('mouseenter', this.open);
             this.addEventListener('mouseleave', this.close);
-            this.addEventListener('focus', this.open);
+            this.addEventListener('focusin', this.open);
+            this.addEventListener('focusout', this.close);
         };
         this._positionMessage = () => {
             requestAnimationFrame(() => {
@@ -58,49 +59,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();
@@ -116,7 +79,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
                 elementToPosition: this._$messageContent,
                 offset: this.offset
             });
-        this.setAttribute('tabindex', '0');
+        this.setAttribute('tabindex', this.tabindex);
         this._setupEventListeners();
     }
     static _appendMessagePortal() {
@@ -127,11 +90,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 +106,11 @@ 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: 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;"}

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');
@@ -102,11 +102,11 @@ var search_input = require('./components/form/search/subcomponents/input/search_
 var search_results = require('./components/form/search/subcomponents/results/search_results.js');
 var search_history_load_more = require('./components/form/search/subcomponents/history/search_history_load_more.js');
 var search_history = require('./components/form/search/subcomponents/history/search_history.js');
-var search_clear = require('./components/form/search/subcomponents/buttons/search_clear.js');
-var search_message = require('./components/form/search/subcomponents/message/search_message.js');
 var search = require('./components/form/search/search.js');
 var search_submit = require('./components/form/search/subcomponents/buttons/search_submit.js');
+var search_clear = require('./components/form/search/subcomponents/buttons/search_clear.js');
 var search_close = require('./components/form/search/subcomponents/buttons/search_close.js');
+var search_message = require('./components/form/search/subcomponents/message/search_message.js');
 var search_history_remove = require('./components/form/search/subcomponents/history/search_history_remove.js');
 var search_history_select = require('./components/form/search/subcomponents/history/search_history_select.js');
 var search_suggestion_content = require('./components/form/search/subcomponents/results/search_suggestion_content.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', {
@@ -610,34 +610,34 @@ Object.defineProperty(exports, 'HSearchHistory', {
 		return search_history.HSearchHistory;
 	}
 });
-Object.defineProperty(exports, 'HSearchClear', {
+Object.defineProperty(exports, 'HSearch', {
 	enumerable: true,
 	get: function () {
-		return search_clear.HSearchClear;
+		return search.HSearch;
 	}
 });
-Object.defineProperty(exports, 'HSearchMessage', {
+Object.defineProperty(exports, 'HSearchSubmit', {
 	enumerable: true,
 	get: function () {
-		return search_message.HSearchMessage;
+		return search_submit.HSearchSubmit;
 	}
 });
-Object.defineProperty(exports, 'HSearch', {
+Object.defineProperty(exports, 'HSearchClear', {
 	enumerable: true,
 	get: function () {
-		return search.HSearch;
+		return search_clear.HSearchClear;
 	}
 });
-Object.defineProperty(exports, 'HSearchSubmit', {
+Object.defineProperty(exports, 'HSearchClose', {
 	enumerable: true,
 	get: function () {
-		return search_submit.HSearchSubmit;
+		return search_close.HSearchClose;
 	}
 });
-Object.defineProperty(exports, 'HSearchClose', {
+Object.defineProperty(exports, 'HSearchMessage', {
 	enumerable: true,
 	get: function () {
-		return search_close.HSearchClose;
+		return search_message.HSearchMessage;
 	}
 });
 Object.defineProperty(exports, 'HSearchHistoryRemove', {

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