@shoper/phoenix_design_system 1.11.11-6 → 1.11.11-8

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js

@@ -7,6 +7,7 @@ import { ICONS_SIZES } from '../../../../icon/icon_constants.js';
 import { Observer } from '../../../../../core/classes/observer/observer.js';
 import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
 import { createRef, ref } from 'lit-html/directives/ref.js';
+import v4 from '../../../../../../../../external/uuid/dist/esm-browser/v4.js';
 import { when as n } from '../../../../../../../../external/lit/external/lit-html/directives/when.js';
 import { SEARCH_CONTEXT_NAMES, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
 import { repeat as c } from '../../../../../../../../external/lit/external/lit-html/directives/repeat.js';
@@ -15,6 +16,7 @@ let HSearchHistory = class HSearchHistory extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this.buttonRef = createRef();
+        this._loadMoreButtonId = v4();
         this.history = [];
         this.translations = {};
     }
@@ -41,34 +43,23 @@ let HSearchHistory = class HSearchHistory extends PhoenixLightLitElement {
         return n((_a = this.history) === null || _a === void 0 ? void 0 : _a.length, () => html `<h3 class="${SEARCH_CLASS_NAMES.headline}">${this.translations.searchHistory}</h3>
 
                 <ul>
-                    ${c(this.history, (historyElement, index) => html `
-                        <li
-                            class="
-                                ${SEARCH_CLASS_NAMES.item}
-                                ${`${this.searchId}${index}` === this.activeItemId ? SEARCH_CLASS_NAMES.itemActive : ''}
-                            "
-                            role="row"
+                    ${c(this.history, (historyElement, index) => html ` <li
+                            class="${SEARCH_CLASS_NAMES.item} ${index === this.activeItemId ? SEARCH_CLASS_NAMES.itemActive : ''}"
                         >
                             <h-search-history-select
                                 item-label="${historyElement.label}"
                                 class="${SEARCH_CLASS_NAMES.historySelect}"
                                 data-suggested-value="${historyElement.label}"
-                                data-search-item-id="${this.searchId}${index}"
+                                data-search-item-id="${index}"
                                 module-instance-id="${this.moduleInstanceId}"
                                 aria-label=${this.translations.historyAriaLabel ? `${this.translations.historyAriaLabel} ${historyElement.label}` : undefined}
-                                role="gridcell"
                             >
                                 <h-icon icon-name="icon-clock"></h-icon>
 
                                 <span class="${SEARCH_CLASS_NAMES.historyItemValue}">${historyElement.label}</span>
                             </h-search-history-select>
 
-                            <h-search-history-remove
-                                data-search-item-id="${this.searchId}${index}-remove"
-                                data-search-grid-item
-                                item-id="${historyElement.id}"
-                                role="gridcell"
-                            >
+                            <h-search-history-remove item-id="${historyElement.id}">
                                 <h-icon
                                     icon-name="icon-x"
                                     clickable=${true}
@@ -81,7 +72,7 @@ let HSearchHistory = class HSearchHistory extends PhoenixLightLitElement {
 
                 <h-search-history-load-more
                     class="${SEARCH_CLASS_NAMES.historyLoadMore}"
-                    data-search-item-id="${this.searchId}-loadmore"
+                    data-search-item-id="${this._loadMoreButtonId}"
                     ${ref(this.buttonRef)}
                 >
                     ${this.translations.loadMore}
@@ -93,13 +84,9 @@ __decorate([
     __metadata("design:type", Array)
 ], HSearchHistory.prototype, "history", void 0);
 __decorate([
-    property({ type: String, attribute: 'active-item-id' }),
-    __metadata("design:type", String)
+    property({ type: Number, attribute: 'active-item-id' }),
+    __metadata("design:type", Number)
 ], HSearchHistory.prototype, "activeItemId", void 0);
-__decorate([
-    property({ type: String, attribute: 'search-id' }),
-    __metadata("design:type", String)
-], HSearchHistory.prototype, "searchId", void 0);
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/search/subcomponents/input/search_input.d.ts

@@ -7,5 +7,4 @@ export declare class HSearchInput extends PhoenixLightLitElement {
     private _setupInitialValue;
     private _deserializeInputPhrase;
     private _setupListeners;
-    private _setupAttributes;
 }

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

@@ -2,24 +2,12 @@ import { __decorate, __metadata } from '../../../../../../../../external/tslib/t
 import { property, state } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
-import { SEARCH_CLASS_NAMES, SEARCH_CUSTOM_EVENT_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
+import { SEARCH_CUSTOM_EVENT_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
 
 let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this._isSearchPhraseCleared = false;
-        this._setupAttributes = () => {
-            var _a, _b, _c, _d;
-            (_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');
-            (_d = this.input) === null || _d === void 0 ? void 0 : _d.setAttribute('aria-activedescendant', '');
-            requestAnimationFrame(() => {
-                var _a, _b;
-                const $searchContentContainer = (_a = this.closest('h-search')) === null || _a === void 0 ? void 0 : _a.querySelector(`.${SEARCH_CLASS_NAMES.container}`);
-                (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-controls', ($searchContentContainer === null || $searchContentContainer === void 0 ? void 0 : $searchContentContainer.id) || '');
-            });
-        };
     }
     connectedCallback() {
         super.connectedCallback();
@@ -29,7 +17,6 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
         }
         this._setupInitialValue();
         this._setupListeners();
-        this._setupAttributes();
     }
     _setupInitialValue() {
         const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
@@ -58,8 +45,7 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
         this.input.addEventListener('focusin', (ev) => {
             this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.focusin, {
                 detail: {
-                    searchPhrase: ev.target.value,
-                    relatedTarget: ev.relatedTarget
+                    searchPhrase: ev.target.value
                 }
             });
         });

package/build/esm/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,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/search/subcomponents/message/search_message.d.ts

@@ -7,7 +7,6 @@ export declare class HSearchMessage extends PhoenixLightLitElement {
     history: TSearchHistoryItem[];
     translations: Record<string, string>;
     moduleInstanceId: string;
-    private _searchButtonId;
     private _createEmptyResults;
     private _isNoResultsForSearchPhrase;
     private _hasHistoryAndEmptyPhrase;

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

@@ -3,7 +3,6 @@ import { html } from 'lit';
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
-import v4 from '../../../../../../../../external/uuid/dist/esm-browser/v4.js';
 import { when as n } from '../../../../../../../../external/lit/external/lit-html/directives/when.js';
 import { SEARCH_CUSTOM_EVENT_NAMES, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
 import isEqual_1 from '../../../../../../../../external/lodash/isEqual.js';
@@ -14,7 +13,6 @@ let HSearchMessage = class HSearchMessage extends PhoenixLightLitElement {
         this.searchPhrase = '';
         this.history = [];
         this.translations = {};
-        this._searchButtonId = v4();
     }
     _createEmptyResults() {
         return {
@@ -47,12 +45,7 @@ let HSearchMessage = class HSearchMessage extends PhoenixLightLitElement {
         return html `
             ${n(this._isNoResultsForSearchPhrase(), () => html `<p class="${SEARCH_CLASS_NAMES.messageNoResults}">
                         ${this.searchPhrase} -
-                        <button
-                            class="${SEARCH_CLASS_NAMES.messageText}"
-                            @click="${this.handleGoToResults}"
-                            type="button"
-                            data-search-item-id="${this._searchButtonId}"
-                        >
+                        <button class="${SEARCH_CLASS_NAMES.messageText}" @click="${this.handleGoToResults}" type="button">
                             ${this.translations.searchInStore}
                         </button>
                     </p>`, () => html `${n(this._hasHistoryAndEmptyPhrase(), () => html `<p class="${SEARCH_CLASS_NAMES.message} ${SEARCH_CLASS_NAMES.messageWithHistory}">

package/build/esm/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,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,2EAAmF;AAC7G;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,0BAA0B,2EAAmF;AAC7G;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;"}

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.d.ts

@@ -3,8 +3,7 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
 import { TProducer } from "../../search_types";
 export declare class HSearchProducerContent extends PhoenixLightLitElement {
     producers: TProducer[];
-    activeItemId: string;
-    searchId: string;
+    activeItemId: number;
     initialItemIds: Record<string, number>;
     translations: Record<string, string>;
     searchPhrase: string;

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

@@ -27,14 +27,13 @@ let HSearchProducerContent = class HSearchProducerContent extends PhoenixLightLi
                 ${c(this.producers, (producer, index) => {
             var _a, _b;
             return html `<li
-                        class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${String(this.initialItemIds.producers + index) ===
+                        class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${this.initialItemIds.producers + index ===
                 this.activeItemId
                 ? 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}"
@@ -55,13 +54,9 @@ __decorate([
     __metadata("design:type", Array)
 ], HSearchProducerContent.prototype, "producers", void 0);
 __decorate([
-    property({ type: String, attribute: 'active-item-id' }),
-    __metadata("design:type", String)
+    property({ type: Number, attribute: 'active-item-id' }),
+    __metadata("design:type", Number)
 ], HSearchProducerContent.prototype, "activeItemId", void 0);
-__decorate([
-    property({ type: String, attribute: 'search-id' }),
-    __metadata("design:type", String)
-], HSearchProducerContent.prototype, "searchId", void 0);
 __decorate([
     property({ type: Object, reflect: true }),
     __metadata("design:type", Object)

package/build/esm/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,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AAChG;AACA;AACA;AACA;AACA,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/search/subcomponents/results/search_product_content.d.ts

@@ -4,8 +4,7 @@ import type { TProduct, TSearchSettings } from "../../search_types";
 export declare class HSearchProductContent extends PhoenixLightLitElement {
     products: TProduct[];
     settings: TSearchSettings;
-    activeItemId: string;
-    searchId: string;
+    activeItemId: number;
     initialItemIds: Record<string, number>;
     translations: Record<string, string>;
     productAriaLabel?: string;

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

@@ -40,14 +40,13 @@ let HSearchProductContent = class HSearchProductContent extends PhoenixLightLitE
                 ${c(this.products, (product, index) => {
             var _a, _b;
             return html ` <li
-                        class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${String(this.initialItemIds.products + index) ===
+                        class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${this.initialItemIds.products + index ===
                 this.activeItemId
                 ? 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}"
@@ -96,13 +95,9 @@ __decorate([
     __metadata("design:type", Object)
 ], HSearchProductContent.prototype, "settings", void 0);
 __decorate([
-    property({ type: String, attribute: 'active-item-id' }),
-    __metadata("design:type", String)
+    property({ type: Number, attribute: 'active-item-id' }),
+    __metadata("design:type", Number)
 ], HSearchProductContent.prototype, "activeItemId", void 0);
-__decorate([
-    property({ type: String, attribute: 'search-id' }),
-    __metadata("design:type", String)
-], HSearchProductContent.prototype, "searchId", void 0);
 __decorate([
     property({ type: Object, reflect: true }),
     __metadata("design:type", Object)

package/build/esm/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,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AAChG;AACA;AACA;AACA;AACA,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/search/subcomponents/results/search_results.d.ts

@@ -9,8 +9,7 @@ export declare class HSearchResults extends PhoenixLightLitElement {
     settings: TSearchSettings;
     view: string;
     locale: string;
-    activeItemId: string;
-    searchId: string;
+    activeItemId: number;
     translations: Record<string, string>;
     moduleInstanceId: string;
     private _productPage;

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

@@ -66,7 +66,6 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
                 ${n(((_a = this.results.suggestions) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.results.categories) === null || _b === void 0 ? void 0 : _b.length), () => html ` <h-search-suggestion-content
                         class="${SEARCH_CLASS_NAMES.section}"
                         active-item-id="${this.activeItemId}"
-                        search-id="${this.searchId}"
                         .initialItemIds="${this._getInitialItemsIds()}"
                         .translations="${this.translations}"
                         locale="${this.locale}"
@@ -81,7 +80,6 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
                                 .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}
@@ -91,7 +89,7 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
                                                 class="${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>`), () => html `
@@ -99,7 +97,7 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
                                         class="${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>
@@ -110,7 +108,6 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
                             class="${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}"
@@ -141,13 +138,9 @@ __decorate([
     __metadata("design:type", String)
 ], HSearchResults.prototype, "locale", void 0);
 __decorate([
-    property({ type: String, attribute: 'active-item-id' }),
-    __metadata("design:type", String)
+    property({ type: Number, attribute: 'active-item-id' }),
+    __metadata("design:type", Number)
 ], HSearchResults.prototype, "activeItemId", void 0);
-__decorate([
-    property({ type: String, attribute: 'search-id' }),
-    __metadata("design:type", String)
-], HSearchResults.prototype, "searchId", void 0);
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/build/esm/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,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,2EAAmF;AAC7G;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;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,2EAAmF;AAC7G;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;"}

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.d.ts

@@ -4,8 +4,7 @@ export declare class HSearchSuggestionContent extends PhoenixLightLitElement {
     private _searchContextConsumer;
     private _searchContext$;
     private _searchContextObserver;
-    activeItemId: string;
-    searchId: string;
+    activeItemId: number;
     initialItemIds: Record<string, number>;
     translations: Record<string, string>;
     view: string;

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

@@ -103,16 +103,13 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
                 <ul>
                     ${c(this._suggestionsData, (suggestion, index) => html `<li
                                 @click=${() => this._handleSuggestion(suggestion.suggestionName, suggestion.type)}
-                                class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${String(index) === this.activeItemId
+                                class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${index === this.activeItemId
             ? 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"
                             >
                                 ${n(suggestion.type === SUGGESTIONS_TYPE.suggestion, () => html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
                                         <h-icon
@@ -135,13 +132,9 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
     }
 };
 __decorate([
-    property({ type: String, attribute: 'active-item-id' }),
-    __metadata("design:type", String)
+    property({ type: Number, attribute: 'active-item-id' }),
+    __metadata("design:type", Number)
 ], HSearchSuggestionContent.prototype, "activeItemId", void 0);
-__decorate([
-    property({ type: String, attribute: 'search-id' }),
-    __metadata("design:type", String)
-], HSearchSuggestionContent.prototype, "searchId", void 0);
 __decorate([
     property({ type: Object, reflect: true }),
     __metadata("design:type", Object)

package/build/esm/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,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/select/select.js

@@ -229,9 +229,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         SelectControlUtils.appendHTMLOption($option, $list, position);
     }
     updateOptionAriaAttribute($option) {
-        !$option.selected
-            ? $option.removeAttribute(this.multiple ? 'aria-checked' : 'aria-selected')
-            : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+        $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
     }
     _removeHTMLOptions(optionsValues) {
         this._$options = SelectControlUtils.removeHTMLOptions(Array.from(this._$options.values()), optionsValues);
@@ -296,6 +294,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 name="${this.controlName}"
                 offset=${this.offset}
                 content-width="full"
+                prevent-focus-trap
             >
                 <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
 

package/build/esm/packages/phoenix/src/components/form/select/select.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/keystrokes_controller/keystrokes_controller.d.ts

@@ -4,8 +4,9 @@ export declare class KeystrokesController implements ReactiveController {
     #private;
     private _keys;
     private _callback;
+    private _containerSelectors?;
     private _buffer;
-    constructor({ host, keys, callback, target }: TKeystrokesControllerProps);
+    constructor({ host, keys, callback, target, containerSelectors }: TKeystrokesControllerProps);
     hostConnected(): void;
     hostDisconnected(): void;
     private _clearBuffer;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/keystrokes_controller/keystrokes_controller_types.d.ts

@@ -4,4 +4,5 @@ export declare type TKeystrokesControllerProps = {
     keys: string[][] | string[] | string;
     callback: (ev: Event) => void;
     target: Element;
+    containerSelectors?: string[];
 };

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

@@ -98,11 +98,11 @@ export { HSearchInput } from './components/form/search/subcomponents/input/searc
 export { HSearchResults } from './components/form/search/subcomponents/results/search_results.js';
 export { HSearchHistoryLoadMore } from './components/form/search/subcomponents/history/search_history_load_more.js';
 export { HSearchHistory } from './components/form/search/subcomponents/history/search_history.js';
-export { HSearchClear } from './components/form/search/subcomponents/buttons/search_clear.js';
-export { HSearchMessage } from './components/form/search/subcomponents/message/search_message.js';
 export { HSearch } from './components/form/search/search.js';
 export { HSearchSubmit } from './components/form/search/subcomponents/buttons/search_submit.js';
+export { HSearchClear } from './components/form/search/subcomponents/buttons/search_clear.js';
 export { HSearchClose } from './components/form/search/subcomponents/buttons/search_close.js';
+export { HSearchMessage } from './components/form/search/subcomponents/message/search_message.js';
 export { HSearchHistoryRemove } from './components/form/search/subcomponents/history/search_history_remove.js';
 export { HSearchHistorySelect } from './components/form/search/subcomponents/history/search_history_select.js';
 export { HSearchSuggestionContent } from './components/form/search/subcomponents/results/search_suggestion_content.js';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.11.11-6",
+  "version": "1.11.11-8",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@splidejs/splide": "^4.0.7"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.19.0-2",
+    "@dreamcommerce/utilities": "^1.19.1-0",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",