@shoper/phoenix_design_system 1.11.10-0 → 1.11.10-10

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

@@ -12,15 +12,25 @@ 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();
-        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,})/;
@@ -28,7 +38,7 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
         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) {
@@ -46,14 +56,14 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
         return value;
     }
     _setupListeners() {
-        this._input.addEventListener('focusin', (ev) => {
+        this.input.addEventListener('focusin', (ev) => {
             this.emitCustomEvent(search_constants.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') {
@@ -74,8 +84,8 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
                 }
             });
         });
-        this._input.addEventListener('search', (ev) => {
-            if (this._input.value !== '') {
+        this.input.addEventListener('search', (ev) => {
+            if (this.input.value !== '') {
                 return;
             }
             this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.search, {
@@ -88,13 +98,13 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
             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_constants.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_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, {
                 detail: {
                     searchPhrase: ev.detail.searchPhrase

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

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

@@ -31,11 +31,14 @@ 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} ${this.initialItemIds.producers + index ===
+                        class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${String(this.initialItemIds.producers + index) ===
                 this.activeItemId
                 ? search_constants.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}"
@@ -56,9 +59,13 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Array)
 ], exports.HSearchProducerContent.prototype, "producers", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Number, attribute: 'active-item-id' }),
-    tslib_es6.__metadata("design:type", Number)
+    decorators.property({ type: String, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", String)
 ], 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)
@@ -71,6 +78,10 @@ tslib_es6.__decorate([
     decorators.property({ type: String, attribute: 'search-phrase' }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HSearchProducerContent.prototype, "searchPhrase", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchProducerContent.prototype, "producerAriaLabel", void 0);
 exports.HSearchProducerContent = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchProducerContent)
 ], exports.HSearchProducerContent);

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

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

@@ -44,11 +44,14 @@ 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} ${this.initialItemIds.products + index ===
+                        class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${String(this.initialItemIds.products + index) ===
                 this.activeItemId
                 ? search_constants.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}"
@@ -97,9 +100,13 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Object)
 ], exports.HSearchProductContent.prototype, "settings", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Number, attribute: 'active-item-id' }),
-    tslib_es6.__metadata("design:type", Number)
+    decorators.property({ type: String, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", String)
 ], 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)
@@ -108,6 +115,10 @@ tslib_es6.__decorate([
     decorators.property({ type: Object }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HSearchProductContent.prototype, "translations", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchProductContent.prototype, "productAriaLabel", void 0);
 exports.HSearchProductContent = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchProductContent)
 ], exports.HSearchProductContent);

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

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

@@ -7,6 +7,7 @@ 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');
@@ -14,6 +15,8 @@ var isEqual = require('../../../../../../../../external/lodash/isEqual.js');
 exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
+        this._loadMoreButtonId = v4['default']();
+        this._goToProductsForButtonId = v4['default']();
         this.searchPhrase = '';
         this.translations = {};
         this._productPage = 1;
@@ -67,11 +70,13 @@ 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}"
                         view="${this.view}"
                         module-instance-id="${this.moduleInstanceId}"
+                        .suggestionAriaLabel=${this.settings.suggesterItemAriaLabel}
                     >
                     </h-search-suggestion-content>`)}
                 ${when.when((_c = this.results.products) === null || _c === void 0 ? void 0 : _c.length, () => lit.html `
@@ -80,18 +85,26 @@ 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}
                             ></h-search-product-content>
 
                             ${when.when(this.settings.isLoadingMoreSearchResultsEnabled, () => when.when(this._areMoreProductsAvailable(), () => lit.html `<button
                                                 class="${search_constants.SEARCH_CLASS_NAMES.productButton}"
                                                 @click="${this.handleLoadMoreProducts}"
                                                 type="button"
+                                                data-search-item-id="${this.searchId}${this._loadMoreButtonId}"
                                             >
                                                 ${this.translations.loadMore}
                                             </button>`), () => lit.html `
-                                    <button class="${search_constants.SEARCH_CLASS_NAMES.productButton}" @click="${this.handleGoToProductsFor}" type="button">
+                                    <button
+                                        class="${search_constants.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>
                                 `)}
@@ -101,9 +114,11 @@ 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}"
+                            .producerAriaLabel=${this.settings.suggesterProducerItemAriaLabel}
                         ></h-search-producer-content>`)}
             `;
         });
@@ -130,9 +145,13 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", String)
 ], exports.HSearchResults.prototype, "locale", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Number, attribute: 'active-item-id' }),
-    tslib_es6.__metadata("design:type", Number)
+    decorators.property({ type: String, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", String)
 ], 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,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;"}
+{"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;"}

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

@@ -107,11 +107,16 @@ 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} ${index === this.activeItemId
+                                class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${String(index) === this.activeItemId
             ? search_constants.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"
                             >
                                 ${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion, () => lit.html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
                                         <h-icon
@@ -134,9 +139,13 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
     }
 };
 tslib_es6.__decorate([
-    decorators.property({ type: Number, attribute: 'active-item-id' }),
-    tslib_es6.__metadata("design:type", Number)
+    decorators.property({ type: String, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", String)
 ], 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)
@@ -157,6 +166,10 @@ tslib_es6.__decorate([
     decorators.property({ type: String, attribute: 'module-instance-id' }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", String)

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

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

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

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

@@ -99,10 +99,10 @@ var display_stepper = require('./components/form/input_stepper/display_stepper.j
 var button_stepper = require('./components/form/input_stepper/button_stepper.js');
 var search_constants = require('./components/form/search/search_constants.js');
 var search_input = require('./components/form/search/subcomponents/input/search_input.js');
-var search = require('./components/form/search/search.js');
+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_results = require('./components/form/search/subcomponents/results/search_results.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');
@@ -592,10 +592,10 @@ Object.defineProperty(exports, 'HSearchInput', {
 		return search_input.HSearchInput;
 	}
 });
-Object.defineProperty(exports, 'HSearch', {
+Object.defineProperty(exports, 'HSearchResults', {
 	enumerable: true,
 	get: function () {
-		return search.HSearch;
+		return search_results.HSearchResults;
 	}
 });
 Object.defineProperty(exports, 'HSearchHistoryLoadMore', {
@@ -610,10 +610,10 @@ Object.defineProperty(exports, 'HSearchHistory', {
 		return search_history.HSearchHistory;
 	}
 });
-Object.defineProperty(exports, 'HSearchResults', {
+Object.defineProperty(exports, 'HSearch', {
 	enumerable: true,
 	get: function () {
-		return search_results.HSearchResults;
+		return search.HSearch;
 	}
 });
 Object.defineProperty(exports, 'HSearchSubmit', {

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

@@ -93,7 +93,6 @@ let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
                       control-id="${this.controlId}"
                       label-text="${this.labelText}"
                       label-icon-name="${ifDefined(this.labelIconName)}"
-                      focus-priority
                   />`
             : nothing}
             ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/search.d.ts

@@ -12,6 +12,10 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _searchContextObserver;
     private _searchInput;
     private _inputField;
+    private _id;
+    private _searchContentContainerId;
+    private _searchResultsRef;
+    private _searchHistoryRef;
     private _shouldShowHistory;
     private _shouldShowResults;
     private _shouldShowMessage;
@@ -22,6 +26,7 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _historyContext;
     private _activeItemId;
     private _translations;
+    private _containerRole;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     private _setupContext;
@@ -34,11 +39,26 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _displayHistorySuggestions;
     private _hideHistorySuggestionsAndResults;
     private _displayResults;
+    private _handleToggleHistoryAndResults;
+    private _toggleSearchInputAttributes;
+    private _toggleSearchContainerAttributes;
     private _bindKeys;
-    private _getSearchItemsCount;
-    private _scroll;
+    private _focusOnPreviousElementBeforeSearchInput;
+    private _focusOnNextElementAfterSearchInput;
+    private _preventScrollingOnSearchContentBrowsing;
+    private _handleForwardListFocus;
+    private _handleForwardGridFocus;
+    private _handleForwardFocus;
+    private _handleMoveToInputFieldOnArrowLeft;
+    private _handleMoveToInputFieldOnArrowRight;
+    private _handleBackwardListFocus;
+    private _handleBackwardGridFocus;
+    private _handleBackwardFocus;
     private _handleChooseSearchItem;
     private _resetSearchView;
+    private _setActiveItemId;
+    private _handleFocusOnInputWithMarkerEnd;
+    private _handleFocusOnInputWithMarkerStart;
     private _submitSearchPhrase;
     private _hideSuggesterOnClickOutside;
     private _switchTypeOfSearchView;