@shoper/phoenix_design_system 1.11.11-0 → 1.11.11-10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -233,9 +233,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         select_utils.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 = select_utils.SelectControlUtils.removeHTMLOptions(Array.from(this._$options.values()), optionsValues);
@@ -300,6 +298,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 name="${this.controlName}"
                 offset=${this.offset}
                 content-width="full"
+                prevent-focus-trap
             >
                 <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
 

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/keystrokes_controller/keystrokes_controller.js

@@ -7,11 +7,21 @@ require('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) => {
@@ -79,6 +89,7 @@ class KeystrokesController {
         tslib_es6.__classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
         this._keys = keys;
         this._callback = callback;
+        this._containerSelectors = containerSelectors;
         tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
     }
     hostConnected() {

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

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

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

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

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts

@@ -15,6 +15,8 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     contentWidth: TDropdownContentWidth;
     portalTarget: string;
     mobilePosition: TMobileElementPosition;
+    id: string;
+    preventFocusTrap: boolean;
     $dropdownToggler: HDropdownToggler | null;
     $dropdownContent: HDropdownContent | null;
     $nestedDropdownContentElements?: HDropdownContent[];
@@ -40,12 +42,19 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     private _observeScrollToggling;
     private _toggleScroll;
     private _closeDropdownOnEscape;
-    private _handleForwardFocus;
-    private _handleFocusOnNextElement;
-    private _focusOnNextElementAfterToggler;
-    private _handleBackwardFocus;
+    private _keepFocusWithinDropdownForwards;
+    private _handleFocusOnNextElementAfterDropdown;
+    private _handleFocusFromTogglerForwards;
+    private _handleFocusFromSentinelEndForwards;
+    private _keepFocusWithinDropdownBackwards;
+    private _handleDefaultFocusFromDropdownBackwards;
+    private _handleFocusFromTogglerBackwards;
+    private _handleFocusFromSentinelStartBackwards;
+    private _getTrulyFocusableElements;
+    private _isElementTrulyFocusable;
     private _hoverToggle;
     private _isHoveredWithinDropdown;
+    private _focusOnFirstContentElement;
     private _setupInitialDropdownProperties;
     isOpened: () => boolean;
     private _positionDropdownContent;

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js

@@ -6,8 +6,9 @@ import { property } from '@lit/reactive-element/decorators.js';
 import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
 import { html } from 'lit-html';
 import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
-import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
+import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
 import { RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
+import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
@@ -25,6 +26,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this.transition = 'direction';
         this.offset = 0;
         this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
+        this.id = v4();
+        this.preventFocusTrap = false;
         this._backdropController = new BackdropController();
         this._handleClickOutside = async (target) => {
             var _a, _b;
@@ -41,7 +44,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                 return;
             }
             await this.show();
-            UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
+            this._focusOnFirstContentElement();
         };
         this.show = async () => {
             if (this.opened)
@@ -132,44 +135,32 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                 return;
             await this.hide();
         };
-        this._handleForwardFocus = async (ev) => {
-            // if (!this.opened) this._handleFocusOnNextElement(ev);
-            if (!this.opened || ev.shiftKey)
+        this._keepFocusWithinDropdownForwards = (ev) => {
+            var _a, _b;
+            if (ev.shiftKey === true || !this.$dropdownContent || !this.opened)
                 return;
-            const $focusableElementsWithinDropdownContent = UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
-            const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
-            const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
-            const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
-            if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
-                this._handleFocusOnNextElement(ev);
-        };
-        this._handleFocusOnNextElement = async (ev) => {
-            var _a;
-            ev.preventDefault();
-            const $focusableElements = UiDomUtils.getFocusableElements(document.body);
-            const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
-            const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
-            await this._hideDropdownsSequentially();
-            await this.hide();
-            this._focusOnNextElementAfterToggler($nextElementToFocus);
-        };
-        this._focusOnNextElementAfterToggler = ($elementToFocus) => {
-            var _a;
-            const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
-            if (isTogglerLastChildOfPreviousDropdown) {
-                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+            const $target = ev.target;
+            if (((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.preventFocusTrap) {
+                this._handleFocusOnNextElementAfterDropdown(ev);
+                return;
+            }
+            if ((_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.contains($target)) {
+                this._handleFocusFromTogglerForwards(ev);
                 return;
             }
-            $elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
+            this._handleFocusFromSentinelEndForwards(ev, $target);
         };
-        this._handleBackwardFocus = async (ev) => {
-            var _a;
-            const $firstFocusableElement = this.$dropdownContent && UiDomUtils.getFocusableElement(this.$dropdownContent);
-            if (document.activeElement !== $firstFocusableElement)
+        this._keepFocusWithinDropdownBackwards = (ev) => {
+            if (!this.opened || !this.$dropdownContent)
                 return;
-            ev.preventDefault();
-            (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-            await this._hideDropdownsSequentially();
+            const $target = ev.target;
+            if (this.preventFocusTrap) {
+                this._handleDefaultFocusFromDropdownBackwards(ev);
+            }
+            else {
+                this._handleFocusFromTogglerBackwards(ev, $target);
+                this._handleFocusFromSentinelStartBackwards(ev, $target);
+            }
         };
         this._hoverToggle = async (ev) => {
             if (window.innerWidth < BREAKPOINTS.xs)
@@ -181,12 +172,19 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
             if (isHoveredWithinDropdown && !this.opened) {
                 await this.show();
-                UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
+                this._focusOnFirstContentElement();
                 return;
             }
             if (!isHoveredWithinDropdown && this.opened)
                 await this._hideDropdownsSequentially();
         };
+        this._focusOnFirstContentElement = () => {
+            if (!this.$dropdownContent)
+                return;
+            const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
+            if ($firstFocusableElement)
+                $firstFocusableElement.focus();
+        };
         this.isOpened = () => this.opened;
         this._positionDropdownContent = () => {
             if (this.contentWidth === DROPDOWN_CONTENT_WIDTH.full)
@@ -212,13 +210,14 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             host: this,
             target: document.body,
             keys: ['tab'],
-            callback: this._handleForwardFocus
+            callback: this._keepFocusWithinDropdownForwards
         });
         new KeystrokesController({
             host: this,
             target: document.body,
             keys: [['shift', 'tab']],
-            callback: this._handleBackwardFocus
+            callback: this._keepFocusWithinDropdownBackwards,
+            containerSelectors: ['h-dropdown', 'h-dropdown-content']
         });
     }
     async connectedCallback() {
@@ -294,6 +293,74 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(SCROLLABLE_CLASS_NAME);
         }
     }
+    _handleFocusOnNextElementAfterDropdown(ev) {
+        ev.preventDefault();
+        this.hide();
+        UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
+        return;
+    }
+    _handleFocusFromTogglerForwards(ev) {
+        if (!this.$dropdownContent)
+            return;
+        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
+        if (trulyFocusableElements.length === 0)
+            return;
+        ev.preventDefault();
+        trulyFocusableElements[0].focus();
+    }
+    _handleFocusFromSentinelEndForwards(ev, $target) {
+        var _a;
+        if (!this.$dropdownContent)
+            return;
+        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
+        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
+        if ($target !== $lastFocusableElement)
+            return;
+        ev.preventDefault();
+        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    _handleDefaultFocusFromDropdownBackwards(ev) {
+        ev.preventDefault();
+        this.hide();
+        UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
+    }
+    _handleFocusFromTogglerBackwards(ev, $target) {
+        var _a;
+        if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.$dropdownContent)
+            return;
+        ev.preventDefault();
+        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
+        if (trulyFocusableElements.length === 0)
+            return;
+        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
+        $lastFocusableElement.focus();
+    }
+    _handleFocusFromSentinelStartBackwards(ev, $target) {
+        var _a;
+        if (!this.$dropdownContent)
+            return;
+        const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
+        if ($target !== $firstFocusableElement)
+            return;
+        ev.preventDefault();
+        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    _getTrulyFocusableElements($container) {
+        const focusableElements = UiDomUtils.getFocusableElements($container);
+        return focusableElements.filter(($el) => this._isElementTrulyFocusable($el));
+    }
+    _isElementTrulyFocusable($el) {
+        const style = window.getComputedStyle($el);
+        if (style.display === 'none' || style.visibility === 'hidden') {
+            return false;
+        }
+        if ($el.nodeName === 'H-PORTAL')
+            return true;
+        const $parent = $el.parentElement;
+        if (!$parent)
+            return true;
+        return this._isElementTrulyFocusable($parent);
+    }
     _isHoveredWithinDropdown(element) {
         var _a;
         if (element === this)
@@ -317,6 +384,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             return;
         if (!this._hasScrollableClassInitially)
             this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(SCROLLABLE_CLASS_NAME);
+        if (!this.preventFocusTrap)
+            this.$dropdownContent.setAttribute('aria-modal', 'true');
     }
     _getDropdownContentWidth() {
         const isMobileResolution = document.documentElement.clientWidth < BREAKPOINTS.xs;
@@ -385,6 +454,14 @@ __decorate([
     property({ type: String, attribute: 'mobile-position' }),
     __metadata("design:type", String)
 ], HDropdown.prototype, "mobilePosition", void 0);
+__decorate([
+    property({ type: String, attribute: 'id', reflect: true }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "id", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'prevent-focus-trap' }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "preventFocusTrap", void 0);
 HDropdown = HDropdown_1 = __decorate([
     phoenixCustomElement('h-dropdown'),
     __metadata("design:paramtypes", [])