@shoper/phoenix_design_system 1.18.23-1 → 1.18.23-11

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -1,12 +1,14 @@
 import { TemplateResult } from 'lit';
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import type { TSearchDisplayMode, TSearchSettings } from "./search_types";
+import { FocusTrapController } from "../../../controllers/focus_trap_controller/focus_trap_controller";
 export declare class HSearch extends PhoenixLightLitElement {
     settings: TSearchSettings;
     view: string;
     locale: string;
     isSearchIconFixEnabled: boolean;
     isSearchUxFixesFlagEnabled: boolean;
+    isSearchFocusTrapFixEnabled: boolean;
     displayMode: TSearchDisplayMode;
     moduleInstanceId: string;
     private _historyContextProvider;
@@ -17,9 +19,11 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _inputField;
     private _searchForm;
     private _togglerElement;
+    private _mobileDialogOpener;
     private _id;
     private _openSearchButtonAriaLabelId;
     private _searchContentContainerId;
+    mobileFocusTrapController: FocusTrapController;
     private _searchResultsRef;
     private _searchHistoryRef;
     private _searchMessageRef;
@@ -81,6 +85,8 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _isSuggesterLayerVisible;
     private _preventSubmitOnSearchClear;
     private _resetSearchOnFocusOutside;
+    private _activateMobileDialog;
+    private _deactivateMobileDialog;
     private _setupAriaAttributes;
     private _handleOpenSearch;
     private _handleOpenSearchWithKeyboard;

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

@@ -12,6 +12,8 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
 import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
 import { BREAKPOINTS } from '../../../global_constants.js';
 import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
+import { FOCUS_TRAP_STRATEGY_TYPES } from '../../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js';
+import { FocusTrapController } from '../../../controllers/focus_trap_controller/focus_trap_controller.js';
 import { MODAL_EVENTS } from '../../modal/modal_constants.js';
 import { SHEET_EVENTS } from '../../sheet/sheet_constants.js';
 import { when as n } from '../../../../../../external/lit-html/directives/when.js';
@@ -23,11 +25,17 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         this.view = DEFAULT_VIEW;
         this.isSearchIconFixEnabled = false;
         this.isSearchUxFixesFlagEnabled = false;
+        this.isSearchFocusTrapFixEnabled = false;
         this.displayMode = 'dropdown';
         this._togglerElement = null;
+        this._mobileDialogOpener = null;
         this._id = v4();
         this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
         this._searchContentContainerId = v4();
+        this.mobileFocusTrapController = new FocusTrapController(this, {
+            mode: FOCUS_TRAP_STRATEGY_TYPES.cyclic,
+            getContainer: () => this
+        });
         this._searchResultsRef = createRef();
         this._searchHistoryRef = createRef();
         this._searchMessageRef = createRef();
@@ -323,6 +331,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
             if (window.innerWidth > BREAKPOINTS.sm) {
                 const hasBeenOpened = this.classList.contains(SEARCH_CLASS_NAMES.mobileOpened);
                 this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
+                if (this.isSearchFocusTrapFixEnabled)
+                    this._deactivateMobileDialog();
                 if (hasBeenOpened && this.displayMode !== 'dropdown') {
                     const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
                     const searchOverlayTriggerName = (_a = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('[aria-haspopup="dialog"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('name');
@@ -338,6 +348,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         };
         this._openMobileView = () => {
             this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
+            if (this.isSearchFocusTrapFixEnabled)
+                this._activateMobileDialog();
         };
         this._isSuggesterLayerVisible = () => {
             var _a;
@@ -358,6 +370,19 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                 document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
             }
         };
+        this._activateMobileDialog = () => {
+            if (this.displayMode !== 'dropdown')
+                return;
+            this._mobileDialogOpener = document.activeElement;
+            this.setAttribute('role', 'dialog');
+            this.setAttribute('aria-modal', 'true');
+            this.mobileFocusTrapController.activate();
+        };
+        this._deactivateMobileDialog = () => {
+            this.removeAttribute('role');
+            this.removeAttribute('aria-modal');
+            this.mobileFocusTrapController.deactivate();
+        };
         this._setupAriaAttributes = () => {
             var _a;
             if (this._translations.openSearchButtonAriaLabel) {
@@ -366,6 +391,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         };
         this._handleOpenSearch = () => {
             this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
+            if (this.isSearchFocusTrapFixEnabled)
+                this._activateMobileDialog();
             const shouldShowMessage = this._searchPhrase !== '';
             this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
             const $searchInput = this.querySelector(`
@@ -374,7 +401,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
             $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
         };
         this._handleOpenSearchWithKeyboard = (ev) => {
-            if (ev.code !== 'Enter')
+            const isRepeated = this.isSearchFocusTrapFixEnabled ? ev.repeat : false;
+            if (ev.code !== 'Enter' || isRepeated)
                 return;
             ev.preventDefault();
             this._handleOpenSearch();
@@ -383,6 +411,10 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
     async connectedCallback() {
         super.connectedCallback();
         this._setupContext();
+        this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
+        this._setupInitialSearchPhrase();
+        this._setupListeners();
+        this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
         try {
             this._searchContextConsumer = new ContextConsumerController(this);
             this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
@@ -411,10 +443,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         catch (_a) {
             console.error('Search context is not provided');
         }
-        this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
-        this._setupInitialSearchPhrase();
-        this._setupListeners();
-        this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
     }
     disconnectedCallback() {
         var _a;
@@ -486,8 +514,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, this._handleSubmitForm);
         this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.close, () => {
             this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
+            if (this.isSearchFocusTrapFixEnabled)
+                this._deactivateMobileDialog();
             this._resetSearchView();
             this.isSearchUxFixesFlagEnabled && this._removeSearchKeyboardNavigation();
+            if (this.isSearchFocusTrapFixEnabled)
+                requestAnimationFrame(() => { var _a; return (_a = this._mobileDialogOpener) === null || _a === void 0 ? void 0 : _a.focus(); });
         });
         this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
             const contentLength = this._searchHistory.length;
@@ -606,13 +638,23 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         if (!this._togglerElement)
             return;
         this._togglerElement.addEventListener('click', this._handleOpenSearch);
-        this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
+        if (this.isSearchFocusTrapFixEnabled) {
+            this._togglerElement.addEventListener('keydown', this._handleOpenSearchWithKeyboard);
+        }
+        else {
+            this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
+        }
     }
     _teardownToggler() {
         if (!this._togglerElement)
             return;
         this._togglerElement.removeEventListener('click', this._handleOpenSearch);
-        this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
+        if (this.isSearchFocusTrapFixEnabled) {
+            this._togglerElement.removeEventListener('keydown', this._handleOpenSearchWithKeyboard);
+        }
+        else {
+            this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
+        }
     }
     render() {
         super.render();
@@ -622,7 +664,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                     tabindex="0"
                     aria-haspopup="dialog"
                     @click=${this._handleOpenSearch}
-                    @keyup=${this._handleOpenSearchWithKeyboard}
+                    @keyup=${this.isSearchFocusTrapFixEnabled ? undefined : this._handleOpenSearchWithKeyboard}
+                    @keydown=${this.isSearchFocusTrapFixEnabled ? this._handleOpenSearchWithKeyboard : undefined}
                 >
                     ${n(this._translations.openSearchButtonAriaLabel, () => html `
                             <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
@@ -692,6 +735,10 @@ __decorate([
     property({ type: Boolean, attribute: 'is-search-ux-fixes-flag-enabled' }),
     __metadata("design:type", Boolean)
 ], HSearch.prototype, "isSearchUxFixesFlagEnabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
+    __metadata("design:type", Boolean)
+], HSearch.prototype, "isSearchFocusTrapFixEnabled", void 0);
 __decorate([
     property({ type: String, attribute: 'display-mode' }),
     __metadata("design:type", String)

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -3,6 +3,7 @@ import { PropertyValues } from 'lit';
 export declare class HSearchInput extends PhoenixLightLitElement {
     input: HTMLInputElement | null;
     moduleInstanceId: string;
+    isSearchFocusTrapFixEnabled: boolean;
     private _isSearchPhraseCleared;
     connectedCallback(): void;
     firstUpdated(props: PropertyValues): void;

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

@@ -9,6 +9,7 @@ import { SEARCH_CLASS_NAMES, SEARCH_CUSTOM_EVENT_NAMES, SEARCH_COMPONENT_NAMES }
 let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
+        this.isSearchFocusTrapFixEnabled = false;
         this._isSearchPhraseCleared = false;
         this._setupAttributes = () => {
             var _a, _b, _c, _d;
@@ -68,36 +69,60 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
                 }
             });
         });
-        this.input.addEventListener('keyup', (ev) => {
-            if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
-                return;
-            if (ev.key !== 'Enter') {
+        if (this.isSearchFocusTrapFixEnabled) {
+            this.input.addEventListener('keydown', (ev) => {
+                if (ev.key !== 'Enter' || ev.repeat)
+                    return;
+                if (this._isSearchPhraseCleared) {
+                    this._isSearchPhraseCleared = false;
+                    return;
+                }
+                this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
+                    detail: { searchPhrase: ev.target.value }
+                });
+            });
+            this.input.addEventListener('keyup', debounce_1((ev) => {
+                if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
+                    return;
                 this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
                     detail: {
                         searchPhrase: ev.target.value
                     }
                 });
-                return;
-            }
-            if (this._isSearchPhraseCleared) {
-                this._isSearchPhraseCleared = false;
-                return;
-            }
-            this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
-                detail: {
-                    searchPhrase: ev.target.value
+            }, 200));
+        }
+        else {
+            this.input.addEventListener('keyup', (ev) => {
+                if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
+                    return;
+                if (ev.key !== 'Enter') {
+                    this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
+                        detail: {
+                            searchPhrase: ev.target.value
+                        }
+                    });
+                    return;
                 }
-            });
-        });
-        this.input.addEventListener('keyup', debounce_1((ev) => {
-            if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
-                return;
-            this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
-                detail: {
-                    searchPhrase: ev.target.value
+                if (this._isSearchPhraseCleared) {
+                    this._isSearchPhraseCleared = false;
+                    return;
                 }
+                this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
+                    detail: {
+                        searchPhrase: ev.target.value
+                    }
+                });
             });
-        }, 200));
+            this.input.addEventListener('keyup', debounce_1((ev) => {
+                if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
+                    return;
+                this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
+                    detail: {
+                        searchPhrase: ev.target.value
+                    }
+                });
+            }, 200));
+        }
         this.input.addEventListener('search', (ev) => {
             if (this.input.value !== '') {
                 return;
@@ -131,6 +156,10 @@ __decorate([
     property({ type: String, attribute: 'module-instance-id' }),
     __metadata("design:type", String)
 ], HSearchInput.prototype, "moduleInstanceId", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
+    __metadata("design:type", Boolean)
+], HSearchInput.prototype, "isSearchFocusTrapFixEnabled", void 0);
 __decorate([
     state(),
     __metadata("design:type", Boolean)

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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts

@@ -23,6 +23,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     optionsList?: TSelectOption[];
     noDeselect: boolean;
     assistiveTitleId: string;
+    isDevSelectPlaceholderFlagEnabled: boolean;
     isReactiveSelectionFlagEnabled: boolean;
     translations: Record<string, string>;
     private _selectOptionsId;

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

@@ -30,6 +30,7 @@ import { SelectTogglerKeyboardController } from './controllers/select_toggler_ke
 
 let HSelect = class HSelect extends PhoenixLightLitElement {
     constructor() {
+        var _a;
         super();
         this.multiple = false;
         this.opened = false;
@@ -38,6 +39,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this.type = SELECT_TYPES.select;
         this.noDeselect = false;
         this.assistiveTitleId = '';
+        this.isDevSelectPlaceholderFlagEnabled = false;
         this.isReactiveSelectionFlagEnabled = false;
         this.translations = {};
         this._selectOptionsId = v4();
@@ -49,7 +51,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._$dropdownContent = createRef();
         this.$dropdownToggler = createRef();
         this._selectContext = new ContextProviderController(this);
-        this.$placeholder = 'Select';
         this._updateOptions = () => {
             const $options = this._getOptions();
             this._$options = $options.reduce((acc, $option) => {
@@ -107,18 +108,28 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             });
         };
         this._updateLabelAria = (options) => {
-            var _a;
+            var _a, _b;
             if (!this.$searchLabel)
                 return;
             (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
-            const hasValidOptions = options.some((option) => !option.isPlaceholder);
-            if (!hasValidOptions)
-                return;
-            const valueLabelSpan = document.createElement('span');
-            valueLabelSpan.id = 'value-label';
-            valueLabelSpan.className = 'sr-only';
-            valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
-            this.$searchLabel.appendChild(valueLabelSpan);
+            if (this.isDevSelectPlaceholderFlagEnabled) {
+                const hasValidOptions = options.some((option) => !option.isPlaceholder);
+                if (!hasValidOptions)
+                    return;
+                const valueLabelSpan = document.createElement('span');
+                valueLabelSpan.id = 'value-label';
+                valueLabelSpan.className = 'sr-only';
+                valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
+                this.$searchLabel.appendChild(valueLabelSpan);
+            }
+            else {
+                this.$searchLabel.innerHTML = `
+                ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
+                <span id="value-label" class="sr-only">
+                    ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
+                </span>
+            `;
+            }
         };
         this._handleOptionClicked = ({ detail }) => {
             if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -170,6 +181,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         };
         const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
         $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
+        const $placeholderEl = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
+        this.$placeholder = $placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ? $placeholderEl : 'Select';
         if (this.multiple)
             this.type = SELECT_TYPES.multiple;
     }
@@ -215,7 +228,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         }
         if (changedProperties.has('optionsList')) {
             this._updateOptions();
-            this._addPlaceholderOptionIfNeeded();
+            if (this.isDevSelectPlaceholderFlagEnabled) {
+                this._addPlaceholderOptionIfNeeded();
+            }
         }
         if (this._$optionsList.value) {
             (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -248,7 +263,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
     }
     connectedCallback() {
-        var _a, _b;
+        var _a;
         super.connectedCallback();
         this.classList.add(SELECT_CSS_CLASSES.select);
         if (!this.searchDisabled) {
@@ -263,12 +278,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._selectController.options$.subscribe(this._optionsObserver);
         this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
         this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
-        const $placeholderEl = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
-        if ($placeholderEl && ((_b = $placeholderEl.textContent) === null || _b === void 0 ? void 0 : _b.trim())) {
-            this.$placeholder = $placeholderEl;
-        }
         this._updateOptions();
-        this._addPlaceholderOptionIfNeeded();
+        if (this.isDevSelectPlaceholderFlagEnabled) {
+            this._addPlaceholderOptionIfNeeded();
+        }
         this._setupEvents();
     }
     firstUpdated(changedProperties) {
@@ -498,7 +511,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
 
                     <div class=${SELECT_CSS_CLASSES.selectLabel}>
-                        ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}
+                        ${this.isDevSelectPlaceholderFlagEnabled
+            ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
+            : html `${this._getClonedPlaceholderElement()}`}
                     </div>
 
                     ${isSearchEnabled
@@ -614,6 +629,10 @@ __decorate([
     property({ type: String, attribute: 'assistive-title-id' }),
     __metadata("design:type", String)
 ], HSelect.prototype, "assistiveTitleId", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
     __metadata("design:type", Boolean)

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/modal/modal.d.ts

@@ -7,6 +7,7 @@ export declare class HModal extends PhoenixLightLitElement {
     transition: string;
     modalLabel: string;
     noAutofocus: boolean;
+    isSearchFocusTrapFixEnabled: boolean;
     _firstFocusableElement: HTMLElement | undefined;
     _focusableElements: HTMLElement[] | null;
     _lastFocusableElement: HTMLElement | undefined;
@@ -17,6 +18,7 @@ export declare class HModal extends PhoenixLightLitElement {
     private _propsChangeStrategies;
     private static openModals;
     private _backdropController;
+    private _focusTrapController;
     private static _appendModalsPortal;
     static isSomeModalOpen(): boolean;
     constructor();

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

@@ -9,6 +9,8 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
 import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
+import { FOCUS_TRAP_STRATEGY_TYPES } from '../../controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js';
+import { FocusTrapController } from '../../controllers/focus_trap_controller/focus_trap_controller.js';
 import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
 import { HModalClose } from './modal_close.js';
 
@@ -21,6 +23,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
         this.transition = 'scale';
         this.modalLabel = '';
         this.noAutofocus = false;
+        this.isSearchFocusTrapFixEnabled = false;
         this._firstFocusableElement = undefined;
         this._focusableElements = null;
         this._lastFocusableElement = undefined;
@@ -36,22 +39,35 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
                     document.addEventListener('keydown', this._bindCloseOnEsc);
                     document.addEventListener(BACKDROP_EVENTS.clicked, this.close);
                     this._dispatchModalOpenedEvent();
-                    if (!this.noAutofocus) {
-                        setTimeout(() => {
-                            var _a;
-                            (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
-                            window.scrollTo(0, scrollY);
-                        }, 0);
+                    this._focusTrapController.activate();
+                    if (this.isSearchFocusTrapFixEnabled) {
+                        this._focusTrapController.activate();
+                    }
+                    else {
+                        if (!this.noAutofocus) {
+                            setTimeout(() => {
+                                var _a;
+                                (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                                window.scrollTo(0, scrollY);
+                            }, 0);
+                        }
                     }
                 },
                 false: () => {
                     HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
                     document.removeEventListener('keydown', this._bindCloseOnEsc);
                     document.removeEventListener(BACKDROP_EVENTS.clicked, this.close);
+                    if (this.isSearchFocusTrapFixEnabled)
+                        this._focusTrapController.deactivate();
                 }
             }
         };
         this._backdropController = new BackdropController();
+        this._focusTrapController = new FocusTrapController(this, {
+            mode: FOCUS_TRAP_STRATEGY_TYPES.sentinel,
+            getContainer: () => this._contentRef.value,
+            noAutofocus: this.noAutofocus
+        });
         this._keepFocusWithinModal = (ev) => {
             var _a;
             const isTabPressed = ev.code === 'Tab';
@@ -145,7 +161,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         HModal_1._appendModalsPortal();
-        document.addEventListener('keyup', this._keepFocusWithinModal);
+        if (!this.isSearchFocusTrapFixEnabled)
+            document.addEventListener('keyup', this._keepFocusWithinModal);
         document.addEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
     }
     disconnectedCallback() {
@@ -154,17 +171,23 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
             this.close();
         document.removeEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
         document.removeEventListener('keydown', this._bindCloseOnEsc);
-        document.removeEventListener('keyup', this._keepFocusWithinModal);
+        if (!this.isSearchFocusTrapFixEnabled)
+            document.removeEventListener('keyup', this._keepFocusWithinModal);
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this._firstFocusableElement = this._focusSentinelStart.value;
-        this._lastFocusableElement = this._focusSentinelEnd.value;
+        if (!this.isSearchFocusTrapFixEnabled) {
+            this._firstFocusableElement = this._focusSentinelStart.value;
+            this._lastFocusableElement = this._focusSentinelEnd.value;
+        }
     }
     updated(changedProps) {
         if (changedProps.has(MODAL_OPENED_PROP)) {
             this._propsChangeStrategies[MODAL_OPENED_PROP][String(this[MODAL_OPENED_PROP])]();
         }
+        if (this.isSearchFocusTrapFixEnabled && changedProps.has('noAutofocus')) {
+            this._focusTrapController.strategy.noAutofocus = this.noAutofocus;
+        }
     }
     _setFocusToFirstFocusableElementInModalOrCloseBtn() {
         if (this.noAutofocus)
@@ -193,7 +216,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
                 setTimeout(() => {
                     var _a;
                     (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
-                    this._setFocusToFirstFocusableElementInModalOrCloseBtn();
+                    if (!this.isSearchFocusTrapFixEnabled)
+                        this._setFocusToFirstFocusableElementInModalOrCloseBtn();
                     resolve();
                 }, transitionDuration);
             });
@@ -252,6 +276,10 @@ __decorate([
     property({ type: Boolean, attribute: 'no-autofocus' }),
     __metadata("design:type", Object)
 ], HModal.prototype, "noAutofocus", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-search-focus-trap-fix-enabled' }),
+    __metadata("design:type", Boolean)
+], HModal.prototype, "isSearchFocusTrapFixEnabled", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)