@shoper/phoenix_design_system 1.11.10-0 → 1.11.10-10

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

@@ -2,21 +2,31 @@ 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_CUSTOM_EVENT_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
+import { SEARCH_CLASS_NAMES, 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, _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_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();
-        this._input = this.querySelector('input[type="search"]');
-        if (!this._input) {
+        this.input = this.querySelector('input[type="search"]');
+        if (!this.input) {
             throw new Error('Search input not found');
         }
         this._setupInitialValue();
         this._setupListeners();
+        this._setupAttributes();
     }
     _setupInitialValue() {
         const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
@@ -24,7 +34,7 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
         if (!searchPhraseRegArray)
             return;
         const searchQuery = searchPhraseRegArray[1].replace(/\+/g, ' ');
-        this._input.value = decodeURIComponent(this._deserializeInputPhrase(searchQuery));
+        this.input.value = decodeURIComponent(this._deserializeInputPhrase(searchQuery));
     }
     _deserializeInputPhrase(value) {
         if (value.indexOf('%2f') !== -1) {
@@ -42,14 +52,14 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
         return value;
     }
     _setupListeners() {
-        this._input.addEventListener('focusin', (ev) => {
+        this.input.addEventListener('focusin', (ev) => {
             this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.focusin, {
                 detail: {
                     searchPhrase: ev.target.value
                 }
             });
         });
-        this._input.addEventListener('keyup', (ev) => {
+        this.input.addEventListener('keyup', (ev) => {
             if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
                 return;
             if (ev.key !== 'Enter') {
@@ -70,8 +80,8 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
                 }
             });
         });
-        this._input.addEventListener('search', (ev) => {
-            if (this._input.value !== '') {
+        this.input.addEventListener('search', (ev) => {
+            if (this.input.value !== '') {
                 return;
             }
             this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.search, {
@@ -84,13 +94,13 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
             if (!ev.detail || ev.detail.moduleInstanceId !== this.moduleInstanceId)
                 return;
             this._isSearchPhraseCleared = true;
-            this._input.value = '';
-            this._input.focus();
+            this.input.value = '';
+            this.input.focus();
         });
         document.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.updateSearchPhrase, (ev) => {
             if (!ev.detail || ev.detail.moduleInstanceId !== this.moduleInstanceId)
                 return;
-            this._input.value = ev.detail.searchPhrase;
+            this.input.value = ev.detail.searchPhrase;
             this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
                 detail: {
                     searchPhrase: ev.detail.searchPhrase

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

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

@@ -3,10 +3,12 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
 import { TProducer } from "../../search_types";
 export declare class HSearchProducerContent extends PhoenixLightLitElement {
     producers: TProducer[];
-    activeItemId: number;
+    activeItemId: string;
+    searchId: string;
     initialItemIds: Record<string, number>;
     translations: Record<string, string>;
     searchPhrase: string;
+    producerAriaLabel?: string;
     private _getMatchedPhrase;
     protected render(): TemplateResult;
 }

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

@@ -27,11 +27,14 @@ 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} ${this.initialItemIds.producers + index ===
+                        class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${String(this.initialItemIds.producers + index) ===
                 this.activeItemId
                 ? SEARCH_CLASS_NAMES.itemActive
                 : ''}"
-                        data-search-item-id="${this.initialItemIds.producers + index}"
+                        data-search-item-id="${this.searchId}${this.initialItemIds.producers + index}"
+                        aria-label=${this.producerAriaLabel ? `${this.producerAriaLabel} ${producer.name}` : undefined}
+                        tabindex="0"
+                        role="option"
                     >
                         <a
                             href="${producer.url}"
@@ -52,9 +55,13 @@ __decorate([
     __metadata("design:type", Array)
 ], HSearchProducerContent.prototype, "producers", void 0);
 __decorate([
-    property({ type: Number, attribute: 'active-item-id' }),
-    __metadata("design:type", Number)
+    property({ type: String, attribute: 'active-item-id' }),
+    __metadata("design:type", String)
 ], 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)
@@ -67,6 +74,10 @@ __decorate([
     property({ type: String, attribute: 'search-phrase' }),
     __metadata("design:type", String)
 ], HSearchProducerContent.prototype, "searchPhrase", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSearchProducerContent.prototype, "producerAriaLabel", void 0);
 HSearchProducerContent = __decorate([
     phoenixCustomElement(SEARCH_COMPONENT_NAMES.searchProducerContent)
 ], HSearchProducerContent);

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

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

@@ -4,9 +4,11 @@ import type { TProduct, TSearchSettings } from "../../search_types";
 export declare class HSearchProductContent extends PhoenixLightLitElement {
     products: TProduct[];
     settings: TSearchSettings;
-    activeItemId: number;
+    activeItemId: string;
+    searchId: string;
     initialItemIds: Record<string, number>;
     translations: Record<string, string>;
+    productAriaLabel?: string;
     getProductRateHtml: (productRate: number) => TemplateResult;
     private _getShortenProductName;
     private _getPercentPromotion;

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

@@ -40,11 +40,14 @@ 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} ${this.initialItemIds.products + index ===
+                        class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${String(this.initialItemIds.products + index) ===
                 this.activeItemId
                 ? SEARCH_CLASS_NAMES.itemActive
                 : ''}"
-                        data-search-item-id="${this.initialItemIds.products + index}"
+                        data-search-item-id="${this.searchId}${this.initialItemIds.products + index}"
+                        aria-label=${this.productAriaLabel ? `${this.productAriaLabel} ${product.name}` : undefined}
+                        tabindex="0"
+                        role="option"
                     >
                         <a
                             href="${product.url}"
@@ -93,9 +96,13 @@ __decorate([
     __metadata("design:type", Object)
 ], HSearchProductContent.prototype, "settings", void 0);
 __decorate([
-    property({ type: Number, attribute: 'active-item-id' }),
-    __metadata("design:type", Number)
+    property({ type: String, attribute: 'active-item-id' }),
+    __metadata("design:type", String)
 ], 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)
@@ -104,6 +111,10 @@ __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
 ], HSearchProductContent.prototype, "translations", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSearchProductContent.prototype, "productAriaLabel", void 0);
 HSearchProductContent = __decorate([
     phoenixCustomElement(SEARCH_COMPONENT_NAMES.searchProductContent)
 ], HSearchProductContent);

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

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

@@ -2,12 +2,15 @@ import { TemplateResult } from 'lit';
 import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import type { TSearchResults, TSearchSettings } from "../../search_types";
 export declare class HSearchResults extends PhoenixLightLitElement {
+    private _loadMoreButtonId;
+    private _goToProductsForButtonId;
     results: TSearchResults;
     searchPhrase: string;
     settings: TSearchSettings;
     view: string;
     locale: string;
-    activeItemId: number;
+    activeItemId: string;
+    searchId: string;
     translations: Record<string, string>;
     moduleInstanceId: string;
     private _productPage;

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

@@ -3,6 +3,7 @@ import { html } from 'lit';
 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 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, EMPTY_SEARCH_RESULTS } from '../../search_constants.js';
 import isEqual_1 from '../../../../../../../../external/lodash/isEqual.js';
@@ -10,6 +11,8 @@ import isEqual_1 from '../../../../../../../../external/lodash/isEqual.js';
 let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
+        this._loadMoreButtonId = v4();
+        this._goToProductsForButtonId = v4();
         this.searchPhrase = '';
         this.translations = {};
         this._productPage = 1;
@@ -63,11 +66,13 @@ 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}"
                         view="${this.view}"
                         module-instance-id="${this.moduleInstanceId}"
+                        .suggestionAriaLabel=${this.settings.suggesterItemAriaLabel}
                     >
                     </h-search-suggestion-content>`)}
                 ${n((_c = this.results.products) === null || _c === void 0 ? void 0 : _c.length, () => html `
@@ -76,18 +81,26 @@ 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}
                             ></h-search-product-content>
 
                             ${n(this.settings.isLoadingMoreSearchResultsEnabled, () => n(this._areMoreProductsAvailable(), () => html `<button
                                                 class="${SEARCH_CLASS_NAMES.productButton}"
                                                 @click="${this.handleLoadMoreProducts}"
                                                 type="button"
+                                                data-search-item-id="${this.searchId}${this._loadMoreButtonId}"
                                             >
                                                 ${this.translations.loadMore}
                                             </button>`), () => html `
-                                    <button class="${SEARCH_CLASS_NAMES.productButton}" @click="${this.handleGoToProductsFor}" type="button">
+                                    <button
+                                        class="${SEARCH_CLASS_NAMES.productButton}"
+                                        @click="${this.handleGoToProductsFor}"
+                                        type="button"
+                                        data-search-item-id="${this.searchId}${this._goToProductsForButtonId}"
+                                    >
                                         ${this.translations.goToProductsFor}: <strong>${this._getSearchPhrase()}</strong>
                                     </button>
                                 `)}
@@ -97,9 +110,11 @@ 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}"
+                            .producerAriaLabel=${this.settings.suggesterProducerItemAriaLabel}
                         ></h-search-producer-content>`)}
             `;
         });
@@ -126,9 +141,13 @@ __decorate([
     __metadata("design:type", String)
 ], HSearchResults.prototype, "locale", void 0);
 __decorate([
-    property({ type: Number, attribute: 'active-item-id' }),
-    __metadata("design:type", Number)
+    property({ type: String, attribute: 'active-item-id' }),
+    __metadata("design:type", String)
 ], 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,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;"}
+{"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;"}

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

@@ -4,12 +4,14 @@ export declare class HSearchSuggestionContent extends PhoenixLightLitElement {
     private _searchContextConsumer;
     private _searchContext$;
     private _searchContextObserver;
-    activeItemId: number;
+    activeItemId: string;
+    searchId: string;
     initialItemIds: Record<string, number>;
     translations: Record<string, string>;
     view: string;
     locale: string;
     moduleInstanceId: string;
+    suggestionAriaLabel?: string;
     private _searchPhrase;
     private _suggestionsData;
     connectedCallback(): Promise<void>;

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

@@ -103,11 +103,16 @@ 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} ${index === this.activeItemId
+                                class="${SEARCH_CLASS_NAMES.item} ${SEARCH_CLASS_NAMES.itemHoverable} ${String(index) === this.activeItemId
             ? SEARCH_CLASS_NAMES.itemActive
             : ''}"
                                 data-suggested-value="${suggestion.suggestionName}"
-                                data-search-item-id="${index}"
+                                data-search-item-id="${this.searchId}${index}"
+                                aria-label="${this.suggestionAriaLabel ?
+            `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
+            ''}"
+                                tabindex="0"
+                                role="option"
                             >
                                 ${n(suggestion.type === SUGGESTIONS_TYPE.suggestion, () => html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
                                         <h-icon
@@ -130,9 +135,13 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
     }
 };
 __decorate([
-    property({ type: Number, attribute: 'active-item-id' }),
-    __metadata("design:type", Number)
+    property({ type: String, attribute: 'active-item-id' }),
+    __metadata("design:type", String)
 ], 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)
@@ -153,6 +162,10 @@ __decorate([
     property({ type: String, attribute: 'module-instance-id' }),
     __metadata("design:type", String)
 ], HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)

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

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

@@ -297,7 +297,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 offset=${this.offset}
                 content-width="full"
             >
-                <h-dropdown-toggler name=${this.controlName} focus-priority> ${this.getSlot(SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
+                <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
 
                 <h-dropdown-content
                     class="${SELECT_CSS_CLASSES.selectContent} ${this.error ? SELECT_CSS_CLASSES.selectContentError : ''}"

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

@@ -95,10 +95,10 @@ export { HDisplayStepper } from './components/form/input_stepper/display_stepper
 export { HButtonStepper } from './components/form/input_stepper/button_stepper.js';
 export { DEFAULT_VIEW, EMPTY_SEARCH_RESULTS, SCROLL_DIRECTIONS, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES, SEARCH_CONFIGURATION, SEARCH_CONTEXT_NAMES, SEARCH_CUSTOM_EVENT_NAMES, SEARCH_PORTAL_DESTINATIONS, SEARCH_SLOT_NAMES, SUGGESTIONS_TYPE } from './components/form/search/search_constants.js';
 export { HSearchInput } from './components/form/search/subcomponents/input/search_input.js';
-export { HSearch } from './components/form/search/search.js';
+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 { HSearchResults } from './components/form/search/subcomponents/results/search_results.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';

package/package.json

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