From 4d8003f3370b452ab0d8fb74236ca3df28d66a60 Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Thu, 23 Apr 2026 14:38:00 +0200
Subject: [PATCH 01/11] Update floating menu style to better match design

---
 addon/components/o-s-s/infinite-select.hbs | 2 +-
 app/styles/base/_floating-menu.less        | 9 +++++----
 app/styles/base/_infinite-select.less      | 7 ++++++-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/addon/components/o-s-s/infinite-select.hbs b/addon/components/o-s-s/infinite-select.hbs
index 2f8b6a692..a1721bd04 100644
--- a/addon/components/o-s-s/infinite-select.hbs
+++ b/addon/components/o-s-s/infinite-select.hbs
@@ -91,7 +91,7 @@
       @skin={{@action.skin}}
       @icon={{@action.icon}}
       {{on "click" @action.onClick}}
-      class="width-pc-100"
+      class="fx-1 margin-left-px-6 margin-right-px-6"
       data-control-name="infinite-select-footer-action-button"
     />
   {{/if}}
diff --git a/app/styles/base/_floating-menu.less b/app/styles/base/_floating-menu.less
index df9e2dc42..bfbbe2822 100644
--- a/app/styles/base/_floating-menu.less
+++ b/app/styles/base/_floating-menu.less
@@ -18,9 +18,10 @@
 }
 
 .upf-floating-menu {
-  background-color: #ffffff;
-  border-radius: var(--border-radius-sm);
-  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.2);
+  background-color: var(--color-white);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--box-shadow-md);
 
   display: flex;
   flex-direction: column;
@@ -28,7 +29,7 @@
   overflow: hidden auto;
   max-height: var(--floating-max-height, 250px);
   max-width: 350px;
-  padding: var(--spacing-px-6);
+  padding: var(--spacing-px-9) var(--spacing-px-6);
   margin-top: var(--spacing-px-12);
   position: absolute;
   z-index: 1100;
diff --git a/app/styles/base/_infinite-select.less b/app/styles/base/_infinite-select.less
index 62104850a..dc847ce7a 100644
--- a/app/styles/base/_infinite-select.less
+++ b/app/styles/base/_infinite-select.less
@@ -3,6 +3,10 @@
   width: 100%;
   overscroll-behavior: contain;
 
+  .upf-infinite-select--search {
+    margin: var(--spacing-px-3) var(--spacing-px-6) 0 var(--spacing-px-6);
+  }
+
   ul {
     padding: 0;
   }
@@ -26,6 +30,7 @@
 
 .upf-infinite-select__container {
   position: relative;
+  overflow: auto;
 }
 
 .upf-infinite-select__items-container {
@@ -66,7 +71,7 @@
   padding: var(--spacing-px-6);
   gap: var(--spacing-px-6);
 
-  &.upf-power-select__dropdown  {
+  &.upf-power-select__dropdown {
     overflow: auto;
   }
 

From 0b67b73a1e031d6b85eda18c7fec5f763b7f7568 Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Thu, 23 Apr 2026 14:40:11 +0200
Subject: [PATCH 02/11] Update country-selector with new style

---
 addon/components/o-s-s/country-selector.hbs   | 16 ++++------
 addon/components/o-s-s/country-selector.ts    |  6 ++--
 app/styles/country-selector.less              | 22 ++-----------
 .../components/o-s-s/country-selector-test.ts | 31 +++++++++++++++++++
 4 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/addon/components/o-s-s/country-selector.hbs b/addon/components/o-s-s/country-selector.hbs
index 43756bfef..1521e1c4c 100644
--- a/addon/components/o-s-s/country-selector.hbs
+++ b/addon/components/o-s-s/country-selector.hbs
@@ -37,16 +37,12 @@
         {{on "click" this.noop}}
       >
         <:option as |item|>
-          <div class="fx-row fx-xalign-center {{if (eq this.selectedCountry item) 'row-selected'}}">
-            {{#if item.id}}
-              <div class="fflag fflag-{{item.id}} ff-sm ff-rounded"></div>
-            {{/if}}
-            <span class="text-color-default-light margin-left-xx-sm">{{item.name}}</span>
-            {{#if (eq this.selectedCountry item)}}
-              <div class="fx-1"></div>
-              <OSS::Icon @icon="fa-check" class="font-color-primary-500 padding-right-px-6" />
-            {{/if}}
-          </div>
+          <OSS::InfiniteSelect::Option
+            @title={{item.name}}
+            @prefixCountry={{item.id}}
+            @selected={{eq this.selectedCountry item}}
+            @onSelect={{fn this.onItemSelected item}}
+          />
         </:option>
       </OSS::InfiniteSelect>
     {{/in-element}}
diff --git a/addon/components/o-s-s/country-selector.ts b/addon/components/o-s-s/country-selector.ts
index ac71d830f..60b97903b 100644
--- a/addon/components/o-s-s/country-selector.ts
+++ b/addon/components/o-s-s/country-selector.ts
@@ -129,12 +129,12 @@ export default class OSSCountrySelector extends BaseDropdown<OSSCountrySelectorA
   }
 
   @action
-  onItemSelected(value: Item, preventFocus: boolean = false): void {
-    this.closeDropdown(preventFocus);
+  onItemSelected(value: Item): void {
+    this.closeDropdown();
     this.args.onChange(value);
   }
 
   private _matchValueWithSourceList(): void {
-    if (this.selectedCountry) this.onItemSelected(this.selectedCountry, true);
+    if (this.selectedCountry) this.args.onChange(this.selectedCountry);
   }
 }
diff --git a/app/styles/country-selector.less b/app/styles/country-selector.less
index a978f756e..09f4e6806 100644
--- a/app/styles/country-selector.less
+++ b/app/styles/country-selector.less
@@ -22,27 +22,9 @@
     }
   }
 
-  .row-selected span {
-    .text-color-default;
-  }
-
-  .upf-infinite-select {
-    max-width: 100%;
-
-    padding: var(--spacing-px-12);
-    margin-top: var(--spacing-px-6);
+  &__dropdown {
     .upf-infinite-select__item {
-      &:focus {
-        background-color: var(--color-gray-100);
-      }
-
-      &:focus-visible {
-        outline: none;
-      }
-    }
-
-    .row-selected span {
-      color: var(--color-gray-900);
+      padding: 0;
     }
   }
 
diff --git a/tests/integration/components/o-s-s/country-selector-test.ts b/tests/integration/components/o-s-s/country-selector-test.ts
index 82c9bf4cd..82310fdda 100644
--- a/tests/integration/components/o-s-s/country-selector-test.ts
+++ b/tests/integration/components/o-s-s/country-selector-test.ts
@@ -115,6 +115,37 @@ module('Integration | Component | o-s-s/country-selector', function (hooks) {
       await click('[data-control-name="country-selector-input"]');
       assert.dom('.upf-infinite-select__item' + ' .fflag.fflag-US').exists();
     });
+
+    module('Selected item highlighting', () => {
+      test('The selected country has the selected class', async function (assert) {
+        await render(
+          hbs`<OSS::CountrySelector @onChange={{this.onchange}} @sourceList={{this.countries}} @value="FR" />`
+        );
+        await click('[data-control-name="country-selector-input"]');
+
+        assert.dom('.oss-infinite-select-option--selected').exists({ count: 1 });
+        assert.dom('.oss-infinite-select-option--selected .oss-infinite-select-option__title').hasText('France');
+      });
+
+      test('The selected country has a check icon', async function (assert) {
+        await render(
+          hbs`<OSS::CountrySelector @onChange={{this.onchange}} @sourceList={{this.countries}} @value="FR" />`
+        );
+        await click('[data-control-name="country-selector-input"]');
+
+        assert.dom('.oss-infinite-select-option--selected .fa-check').exists({ count: 1 });
+      });
+
+      test('The selected province has the selected class', async function (assert) {
+        await render(
+          hbs`<OSS::CountrySelector @onChange={{this.onchange}} @sourceList={{this.provinces}} @value="AL" />`
+        );
+        await click('[data-control-name="country-selector-input"]');
+
+        assert.dom('.oss-infinite-select-option--selected').exists({ count: 1 });
+        assert.dom('.oss-infinite-select-option--selected .oss-infinite-select-option__title').hasText('Alabama');
+      });
+    });
   });
 
   test('If @sourceList contains ids, then the country placeholder is displayed', async function (assert) {

From b872e204bdeb7763ac49de20e7942e999fd8f0ac Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Thu, 23 Apr 2026 15:25:49 +0200
Subject: [PATCH 03/11] Update phone-number with new style

---
 addon/components/o-s-s/phone-number-input.hbs  | 18 +++++++-----------
 app/styles/phone-number-input.less             | 12 ++----------
 .../o-s-s/phone-number-input-test.ts           | 17 +++++++++++++++++
 3 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/addon/components/o-s-s/phone-number-input.hbs b/addon/components/o-s-s/phone-number-input.hbs
index 1a291c5c9..b47288e81 100644
--- a/addon/components/o-s-s/phone-number-input.hbs
+++ b/addon/components/o-s-s/phone-number-input.hbs
@@ -50,17 +50,13 @@
         {{on "click" this.noop}}
       >
         <:option as |country|>
-          <div class="fx-row fx-xalign-center {{if (eq this.selectedCountry country) 'row-selected'}}">
-            <div class="fflag fflag-{{country.id}} ff-sm ff-rounded"></div>
-            <span class="text-color-default-light margin-left-xx-sm">{{country.name}}</span>
-            <span class="text-color-default-light margin-left-xxx-sm fx-1">(+{{get
-                country.countryCallingCodes
-                0
-              }})</span>
-            {{#if (eq this.selectedCountry country)}}
-              <OSS::Icon @icon="fa-check" class="font-color-primary-500" />
-            {{/if}}
-          </div>
+          <OSS::InfiniteSelect::Option
+            @title={{country.name}}
+            @prefixCountry={{country.id}}
+            @suffixHint={{concat "(+" (get country.countryCallingCodes 0) ")"}}
+            @selected={{eq this.selectedCountry country}}
+            @onSelect={{fn this.onSelect country}}
+          />
         </:option>
       </OSS::InfiniteSelect>
     {{/in-element}}
diff --git a/app/styles/phone-number-input.less b/app/styles/phone-number-input.less
index 3f8290504..cd5f27640 100644
--- a/app/styles/phone-number-input.less
+++ b/app/styles/phone-number-input.less
@@ -1,17 +1,9 @@
 .phone-number-container {
   position: relative;
 
-  .upf-infinite-select {
-    max-width: 100%;
-    padding: var(--spacing-px-12);
-    margin-top: var(--spacing-px-6);
-
+  &__dropdown {
     .upf-infinite-select__item {
-      padding: var(--spacing-px-6);
-    }
-
-    .row-selected span {
-      color: var(--color-gray-900);
+      padding: 0;
     }
   }
 
diff --git a/tests/integration/components/o-s-s/phone-number-input-test.ts b/tests/integration/components/o-s-s/phone-number-input-test.ts
index b91b92a36..a41c46636 100644
--- a/tests/integration/components/o-s-s/phone-number-input-test.ts
+++ b/tests/integration/components/o-s-s/phone-number-input-test.ts
@@ -78,6 +78,23 @@ module('Integration | Component | o-s-s/phone-number-input', function (hooks) {
       assert.equal(clickableRows.length, 2);
       assert.dom(clickableRows[0]).hasText('France (+33)');
     });
+
+    module('Selected country highlighting', () => {
+      test('The selected country has the selected class', async function (assert) {
+        await render(hbs`<OSS::PhoneNumberInput @prefix="+33" @number="" @onChange={{this.onChange}} />`);
+        await click('.country-selector');
+
+        assert.dom('.oss-infinite-select-option--selected').exists({ count: 1 });
+        assert.dom('.oss-infinite-select-option--selected .oss-infinite-select-option__title').hasText('France');
+      });
+
+      test('The selected country has a check icon', async function (assert) {
+        await render(hbs`<OSS::PhoneNumberInput @prefix="+33" @number="" @onChange={{this.onChange}} />`);
+        await click('.country-selector');
+
+        assert.dom('.oss-infinite-select-option--selected .fa-check').exists({ count: 1 });
+      });
+    });
   });
 
   module('Phone Number Input', (hooks) => {

From c456cebd560f12f9497ec343d097a40127c38db1 Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Thu, 23 Apr 2026 15:36:13 +0200
Subject: [PATCH 04/11] Update currency-input with new style

---
 addon/components/o-s-s/currency-input.hbs     | 16 ++++++-----
 app/styles/currency-input.less                | 16 +----------
 .../components/o-s-s/currency-input-test.ts   | 27 +++++++++++++++++++
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/addon/components/o-s-s/currency-input.hbs b/addon/components/o-s-s/currency-input.hbs
index 6fc3738aa..2f31d17bc 100644
--- a/addon/components/o-s-s/currency-input.hbs
+++ b/addon/components/o-s-s/currency-input.hbs
@@ -63,13 +63,15 @@
       {{on-click-outside this.hideCurrencySelector}}
     >
       <:option as |currency|>
-        <div class="fx-row fx-xalign-center {{if (eq this.selectedCurrency currency) 'row-selected'}}">
-          <span class="symbol text-color-default-light margin-left-xx-sm">{{currency.symbol}}</span>
-          <span class="text-color-default-light margin-left-xx-sm fx-1">{{currency.code}}</span>
-          {{#if (eq this.selectedCurrency currency)}}
-            <OSS::Icon @icon="fa-check" class="font-color-primary-500 padding-right-px-6" />
-          {{/if}}
-        </div>
+        <OSS::InfiniteSelect::Option
+          @title={{currency.code}}
+          @selected={{eq this.selectedCurrency currency}}
+          @onSelect={{fn this.onSelect currency}}
+        >
+          <:prefix>
+            <span class={{if (eq this.selectedCurrency currency) "font-color-primary-500"}}>{{currency.symbol}}</span>
+          </:prefix>
+        </OSS::InfiniteSelect::Option>
       </:option>
     </OSS::InfiniteSelect>
   {{/if}}
diff --git a/app/styles/currency-input.less b/app/styles/currency-input.less
index 455db0ce9..11ced78f1 100644
--- a/app/styles/currency-input.less
+++ b/app/styles/currency-input.less
@@ -157,22 +157,8 @@
   }
 
   .upf-infinite-select {
-    margin-top: var(--spacing-px-6);
-    max-width: 100%;
-    min-width: 150px;
-    padding: var(--spacing-px-12);
-
     .upf-infinite-select__item {
-      padding: var(--spacing-px-6) 0;
-    }
-
-    .row-selected span {
-      color: var(--color-gray-900);
+      padding: 0;
     }
   }
-
-  .symbol {
-    .font-weight-semibold;
-    width: 22px;
-  }
 }
diff --git a/tests/integration/components/o-s-s/currency-input-test.ts b/tests/integration/components/o-s-s/currency-input-test.ts
index b8c8d3eb6..65b64db29 100644
--- a/tests/integration/components/o-s-s/currency-input-test.ts
+++ b/tests/integration/components/o-s-s/currency-input-test.ts
@@ -135,6 +135,33 @@ module('Integration | Component | o-s-s/currency-input', function (hooks) {
       const clickableRows = findAll('.upf-infinite-select__item');
       assert.equal(clickableRows.length, 2);
     });
+
+    module('Selected currency highlighting', () => {
+      test('The selected currency has the selected class', async function (assert) {
+        await render(hbs`<OSS::CurrencyInput @currency="EUR" @value="" @onChange={{this.onChange}} />`);
+        await click('.currency-selector');
+
+        assert.dom('.oss-infinite-select-option--selected').exists({ count: 1 });
+        assert.dom('.oss-infinite-select-option--selected .oss-infinite-select-option__title').hasText('EUR');
+      });
+
+      test('The selected currency has a check icon', async function (assert) {
+        await render(hbs`<OSS::CurrencyInput @currency="EUR" @value="" @onChange={{this.onChange}} />`);
+        await click('.currency-selector');
+
+        assert.dom('.oss-infinite-select-option--selected .fa-check').exists({ count: 1 });
+      });
+
+      test('Only the selected currency symbol is highlighted with primary color', async function (assert) {
+        await render(hbs`<OSS::CurrencyInput @currency="EUR" @value="" @onChange={{this.onChange}} />`);
+        await click('.currency-selector');
+
+        assert.dom('.oss-infinite-select-option--selected .font-color-primary-500').hasText('€');
+        assert
+          .dom('.oss-infinite-select-option:not(.oss-infinite-select-option--selected) .font-color-primary-500')
+          .doesNotExist();
+      });
+    });
   });
 
   module('Currency Input', () => {

From 84b875f3b52422be24fa78ca05a0a21958feb04c Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Thu, 23 Apr 2026 15:37:36 +0200
Subject: [PATCH 05/11] Update smart/immersive-currency-input with new style

---
 .../o-s-s/smart/immersive/currency-input.hbs  | 18 ++++++----
 .../o-s-s/smart/immersive/currency-input.ts   |  4 ++-
 .../atoms/smart/immersive-currency-input.less | 31 +++++++++--------
 .../smart/immersive/currency-input-test.ts    | 33 +++++++++++++++++++
 4 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/addon/components/o-s-s/smart/immersive/currency-input.hbs b/addon/components/o-s-s/smart/immersive/currency-input.hbs
index 6d994be85..eb34d2b9d 100644
--- a/addon/components/o-s-s/smart/immersive/currency-input.hbs
+++ b/addon/components/o-s-s/smart/immersive/currency-input.hbs
@@ -58,13 +58,17 @@
         {{on-click-outside this.hideCurrencySelector}}
       >
         <:option as |currency|>
-          <div class="fx-row fx-xalign-center {{if (eq this.selectedCurrency currency) 'row-selected'}}">
-            <span class="symbol text-color-default-light margin-left-xx-sm">{{currency.symbol}}</span>
-            <span class="text-color-default-light margin-left-xx-sm fx-1">{{currency.code}}</span>
-            {{#if (eq this.selectedCurrency currency)}}
-              <OSS::Icon @icon="fa-check" class="font-color-primary-500 padding-right-px-6" />
-            {{/if}}
-          </div>
+          <OSS::InfiniteSelect::Option
+            @title={{currency.code}}
+            @selected={{eq this.selectedCurrency currency}}
+            @onSelect={{fn this.onSelect currency}}
+          >
+            <:prefix>
+              <span class={{if (eq this.selectedCurrency currency) "font-color-primary-500"}}>
+                {{currency.symbol}}
+              </span>
+            </:prefix>
+          </OSS::InfiniteSelect::Option>
         </:option>
       </OSS::InfiniteSelect>
     {{/in-element}}
diff --git a/addon/components/o-s-s/smart/immersive/currency-input.ts b/addon/components/o-s-s/smart/immersive/currency-input.ts
index 025557efe..723208a9d 100644
--- a/addon/components/o-s-s/smart/immersive/currency-input.ts
+++ b/addon/components/o-s-s/smart/immersive/currency-input.ts
@@ -72,7 +72,9 @@ export default class OSSSmartImmersiveCurrencyInput extends OSSCurrencyInput<OSS
   }
 
   get dropdownAddressableClass(): string {
-    return this.args.addressableAs ? `${this.args.addressableAs}__dropdown` : '';
+    return this.args.addressableAs
+      ? `smart-immersive-currency-input-container__dropdown ${this.args.addressableAs}__dropdown`
+      : 'smart-immersive-currency-input-container__dropdown';
   }
 
   cleanupDrodpownAutoplacement?: () => void;
diff --git a/app/styles/atoms/smart/immersive-currency-input.less b/app/styles/atoms/smart/immersive-currency-input.less
index f5c3ef610..52bc9298a 100644
--- a/app/styles/atoms/smart/immersive-currency-input.less
+++ b/app/styles/atoms/smart/immersive-currency-input.less
@@ -22,7 +22,6 @@
     background-color: var(--color-white);
 
     &:not(.disabled, :disabled) {
-
       &:hover,
       &:focus-within {
         border: 1px dashed var(--color-gray-500);
@@ -81,15 +80,17 @@
 
       .rainbow-text-animated {
         .font-weight-semibold;
-        background: linear-gradient(130deg,
-            var(--color-gray-400) 18%,
-            var(--color-gray-300) 25%,
-            rgba(250, 198, 255, 1) 56%,
-            var(--color-primary-100) 62%,
-            var(--color-white) 66%,
-            rgba(250, 198, 255, 0.58) 68%,
-            var(--color-gray-300) 73%,
-            var(--color-gray-400) 85%);
+        background: linear-gradient(
+          130deg,
+          var(--color-gray-400) 18%,
+          var(--color-gray-300) 25%,
+          rgba(250, 198, 255, 1) 56%,
+          var(--color-primary-100) 62%,
+          var(--color-white) 66%,
+          rgba(250, 198, 255, 0.58) 68%,
+          var(--color-gray-300) 73%,
+          var(--color-gray-400) 85%
+        );
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
@@ -100,6 +101,12 @@
     }
   }
 
+  &__dropdown {
+    .upf-infinite-select__item {
+      padding: 0;
+    }
+  }
+
   &--filled {
     .smart-immersive-currency-input {
       border-color: var(--color-primary-400);
@@ -115,7 +122,6 @@
       }
 
       &:not(.disabled, :disabled) {
-
         &:focus-within,
         &:active {
           border-color: var(--color-primary-400);
@@ -138,7 +144,6 @@
       .border-color-error;
 
       &:not(.disabled, :disabled) {
-
         &:focus-within,
         &:hover {
           .border-color-error;
@@ -156,4 +161,4 @@
   100% {
     background-position: 0 0%;
   }
-}
\ No newline at end of file
+}
diff --git a/tests/integration/components/o-s-s/smart/immersive/currency-input-test.ts b/tests/integration/components/o-s-s/smart/immersive/currency-input-test.ts
index c573fb0f0..c2af8e9ec 100644
--- a/tests/integration/components/o-s-s/smart/immersive/currency-input-test.ts
+++ b/tests/integration/components/o-s-s/smart/immersive/currency-input-test.ts
@@ -101,6 +101,39 @@ module('Integration | Component | o-s-s/smart/immersive/currency-input', functio
       const clickableRows = findAll('.upf-infinite-select__item');
       assert.equal(clickableRows.length, 2);
     });
+
+    module('Selected currency highlighting', () => {
+      test('The selected currency has the selected class', async function (assert) {
+        await render(
+          hbs`<OSS::Smart::Immersive::CurrencyInput @currency="EUR" @value="" @onChange={{this.onChange}} />`
+        );
+        await click('.currency-selector');
+
+        assert.dom('.oss-infinite-select-option--selected').exists({ count: 1 });
+        assert.dom('.oss-infinite-select-option--selected .oss-infinite-select-option__title').hasText('EUR');
+      });
+
+      test('The selected currency has a check icon', async function (assert) {
+        await render(
+          hbs`<OSS::Smart::Immersive::CurrencyInput @currency="EUR" @value="" @onChange={{this.onChange}} />`
+        );
+        await click('.currency-selector');
+
+        assert.dom('.oss-infinite-select-option--selected .fa-check').exists({ count: 1 });
+      });
+
+      test('Only the selected currency symbol is highlighted with primary color', async function (assert) {
+        await render(
+          hbs`<OSS::Smart::Immersive::CurrencyInput @currency="EUR" @value="" @onChange={{this.onChange}} />`
+        );
+        await click('.currency-selector');
+
+        assert.dom('.oss-infinite-select-option--selected .font-color-primary-500').hasText('€');
+        assert
+          .dom('.oss-infinite-select-option:not(.oss-infinite-select-option--selected) .font-color-primary-500')
+          .doesNotExist();
+      });
+    });
   });
 
   module('Currency Input', () => {

From f844dcaa3edfd3f7920d1df5f9d5c6543f1005c4 Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Thu, 23 Apr 2026 16:03:08 +0200
Subject: [PATCH 06/11] Fix wrong flex 1 for infinite-select-option

---
 addon/components/o-s-s/phone-number-input.hbs    | 2 +-
 app/styles/molecules/infinite-select-option.less | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/addon/components/o-s-s/phone-number-input.hbs b/addon/components/o-s-s/phone-number-input.hbs
index b47288e81..23c549ef2 100644
--- a/addon/components/o-s-s/phone-number-input.hbs
+++ b/addon/components/o-s-s/phone-number-input.hbs
@@ -53,7 +53,7 @@
           <OSS::InfiniteSelect::Option
             @title={{country.name}}
             @prefixCountry={{country.id}}
-            @suffixHint={{concat "(+" (get country.countryCallingCodes 0) ")"}}
+            @subtitle={{concat "(+" (get country.countryCallingCodes 0) ")"}}
             @selected={{eq this.selectedCountry country}}
             @onSelect={{fn this.onSelect country}}
           />
diff --git a/app/styles/molecules/infinite-select-option.less b/app/styles/molecules/infinite-select-option.less
index 5ff2a5d40..a1843fc0f 100644
--- a/app/styles/molecules/infinite-select-option.less
+++ b/app/styles/molecules/infinite-select-option.less
@@ -25,7 +25,6 @@
 
   &__title {
     .text-ellipsis;
-    flex: 1;
   }
 
   &__prefix-icon {

From 770ec022e5b869a01b95531ef2fb67c8c30d9f50 Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Thu, 23 Apr 2026 18:09:16 +0200
Subject: [PATCH 07/11] Revert currency-input and improve style

---
 addon/components/o-s-s/currency-input.hbs     | 16 +++++------
 .../atoms/smart/immersive-currency-input.less |  5 ++++
 app/styles/country-selector.less              |  5 ++++
 app/styles/currency-input.less                | 16 ++++++++++-
 app/styles/phone-number-input.less            |  5 ++++
 .../components/o-s-s/currency-input-test.ts   | 27 -------------------
 6 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/addon/components/o-s-s/currency-input.hbs b/addon/components/o-s-s/currency-input.hbs
index 2f31d17bc..6fc3738aa 100644
--- a/addon/components/o-s-s/currency-input.hbs
+++ b/addon/components/o-s-s/currency-input.hbs
@@ -63,15 +63,13 @@
       {{on-click-outside this.hideCurrencySelector}}
     >
       <:option as |currency|>
-        <OSS::InfiniteSelect::Option
-          @title={{currency.code}}
-          @selected={{eq this.selectedCurrency currency}}
-          @onSelect={{fn this.onSelect currency}}
-        >
-          <:prefix>
-            <span class={{if (eq this.selectedCurrency currency) "font-color-primary-500"}}>{{currency.symbol}}</span>
-          </:prefix>
-        </OSS::InfiniteSelect::Option>
+        <div class="fx-row fx-xalign-center {{if (eq this.selectedCurrency currency) 'row-selected'}}">
+          <span class="symbol text-color-default-light margin-left-xx-sm">{{currency.symbol}}</span>
+          <span class="text-color-default-light margin-left-xx-sm fx-1">{{currency.code}}</span>
+          {{#if (eq this.selectedCurrency currency)}}
+            <OSS::Icon @icon="fa-check" class="font-color-primary-500 padding-right-px-6" />
+          {{/if}}
+        </div>
       </:option>
     </OSS::InfiniteSelect>
   {{/if}}
diff --git a/app/styles/atoms/smart/immersive-currency-input.less b/app/styles/atoms/smart/immersive-currency-input.less
index 52bc9298a..cd567e35c 100644
--- a/app/styles/atoms/smart/immersive-currency-input.less
+++ b/app/styles/atoms/smart/immersive-currency-input.less
@@ -104,6 +104,11 @@
   &__dropdown {
     .upf-infinite-select__item {
       padding: 0;
+
+      &:hover,
+      &:focus {
+        background-color: transparent;
+      }
     }
   }
 
diff --git a/app/styles/country-selector.less b/app/styles/country-selector.less
index 09f4e6806..c8c358b83 100644
--- a/app/styles/country-selector.less
+++ b/app/styles/country-selector.less
@@ -25,6 +25,11 @@
   &__dropdown {
     .upf-infinite-select__item {
       padding: 0;
+
+      &:hover,
+      &:focus {
+        background-color: transparent;
+      }
     }
   }
 
diff --git a/app/styles/currency-input.less b/app/styles/currency-input.less
index 11ced78f1..455db0ce9 100644
--- a/app/styles/currency-input.less
+++ b/app/styles/currency-input.less
@@ -157,8 +157,22 @@
   }
 
   .upf-infinite-select {
+    margin-top: var(--spacing-px-6);
+    max-width: 100%;
+    min-width: 150px;
+    padding: var(--spacing-px-12);
+
     .upf-infinite-select__item {
-      padding: 0;
+      padding: var(--spacing-px-6) 0;
+    }
+
+    .row-selected span {
+      color: var(--color-gray-900);
     }
   }
+
+  .symbol {
+    .font-weight-semibold;
+    width: 22px;
+  }
 }
diff --git a/app/styles/phone-number-input.less b/app/styles/phone-number-input.less
index cd5f27640..5420412a7 100644
--- a/app/styles/phone-number-input.less
+++ b/app/styles/phone-number-input.less
@@ -4,6 +4,11 @@
   &__dropdown {
     .upf-infinite-select__item {
       padding: 0;
+
+      &:hover,
+      &:focus {
+        background-color: transparent;
+      }
     }
   }
 
diff --git a/tests/integration/components/o-s-s/currency-input-test.ts b/tests/integration/components/o-s-s/currency-input-test.ts
index 65b64db29..b8c8d3eb6 100644
--- a/tests/integration/components/o-s-s/currency-input-test.ts
+++ b/tests/integration/components/o-s-s/currency-input-test.ts
@@ -135,33 +135,6 @@ module('Integration | Component | o-s-s/currency-input', function (hooks) {
       const clickableRows = findAll('.upf-infinite-select__item');
       assert.equal(clickableRows.length, 2);
     });
-
-    module('Selected currency highlighting', () => {
-      test('The selected currency has the selected class', async function (assert) {
-        await render(hbs`<OSS::CurrencyInput @currency="EUR" @value="" @onChange={{this.onChange}} />`);
-        await click('.currency-selector');
-
-        assert.dom('.oss-infinite-select-option--selected').exists({ count: 1 });
-        assert.dom('.oss-infinite-select-option--selected .oss-infinite-select-option__title').hasText('EUR');
-      });
-
-      test('The selected currency has a check icon', async function (assert) {
-        await render(hbs`<OSS::CurrencyInput @currency="EUR" @value="" @onChange={{this.onChange}} />`);
-        await click('.currency-selector');
-
-        assert.dom('.oss-infinite-select-option--selected .fa-check').exists({ count: 1 });
-      });
-
-      test('Only the selected currency symbol is highlighted with primary color', async function (assert) {
-        await render(hbs`<OSS::CurrencyInput @currency="EUR" @value="" @onChange={{this.onChange}} />`);
-        await click('.currency-selector');
-
-        assert.dom('.oss-infinite-select-option--selected .font-color-primary-500').hasText('€');
-        assert
-          .dom('.oss-infinite-select-option:not(.oss-infinite-select-option--selected) .font-color-primary-500')
-          .doesNotExist();
-      });
-    });
   });
 
   module('Currency Input', () => {

From 90f08bfdcfea72206a0567aaf0a424803459beb9 Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Fri, 24 Apr 2026 15:00:27 +0200
Subject: [PATCH 08/11] PR feedback

---
 addon/components/o-s-s/country-selector.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/addon/components/o-s-s/country-selector.ts b/addon/components/o-s-s/country-selector.ts
index 60b97903b..11cdd6bda 100644
--- a/addon/components/o-s-s/country-selector.ts
+++ b/addon/components/o-s-s/country-selector.ts
@@ -47,7 +47,7 @@ export default class OSSCountrySelector extends BaseDropdown<OSSCountrySelectorA
     );
 
     if (!isEmpty(this.args.value)) {
-      scheduleOnce('afterRender', this, this._matchValueWithSourceList);
+      scheduleOnce('afterRender', this, this.matchValueWithSourceList);
     }
   }
 
@@ -129,12 +129,12 @@ export default class OSSCountrySelector extends BaseDropdown<OSSCountrySelectorA
   }
 
   @action
-  onItemSelected(value: Item): void {
-    this.closeDropdown();
+  onItemSelected(value: Item, preventFocus: boolean = false): void {
+    this.closeDropdown(preventFocus);
     this.args.onChange(value);
   }
 
-  private _matchValueWithSourceList(): void {
-    if (this.selectedCountry) this.args.onChange(this.selectedCountry);
+  private matchValueWithSourceList(): void {
+    if (this.selectedCountry) this.onItemSelected(this.selectedCountry, true);
   }
 }

From ac7307a23911c49107628ef1b93c682cb2ab21e2 Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Mon, 27 Apr 2026 10:01:01 +0200
Subject: [PATCH 09/11] Add selected effect of prefix icon in
 infinite-select-option

---
 app/styles/molecules/infinite-select-option.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/styles/molecules/infinite-select-option.less b/app/styles/molecules/infinite-select-option.less
index a1843fc0f..c0935d937 100644
--- a/app/styles/molecules/infinite-select-option.less
+++ b/app/styles/molecules/infinite-select-option.less
@@ -66,7 +66,8 @@
   &--selected {
     background-color: var(--color-primary-50);
 
-    .oss-infinite-select-option__title {
+    .oss-infinite-select-option__title,
+    .oss-infinite-select-option__prefix-icon {
       color: var(--color-primary-500);
     }
   }

From 9494c56df83b26bd41f40c35d2baaeb0309ad055 Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Mon, 27 Apr 2026 11:03:35 +0200
Subject: [PATCH 10/11] Set default value for enableKeyboard to true

---
 addon/components/o-s-s/country-selector.hbs            |  1 -
 addon/components/o-s-s/currency-input.hbs              |  1 -
 addon/components/o-s-s/infinite-select.stories.js      |  8 ++++----
 addon/components/o-s-s/infinite-select.ts              |  2 +-
 addon/components/o-s-s/phone-number-input.hbs          |  1 -
 addon/components/o-s-s/power-select.hbs                |  2 --
 addon/components/o-s-s/select.hbs                      |  2 --
 addon/components/o-s-s/smart/immersive/select.hbs      |  1 -
 .../components/o-s-s/infinite-select-test.js           | 10 ++++++++--
 9 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/addon/components/o-s-s/country-selector.hbs b/addon/components/o-s-s/country-selector.hbs
index 1521e1c4c..34878e639 100644
--- a/addon/components/o-s-s/country-selector.hbs
+++ b/addon/components/o-s-s/country-selector.hbs
@@ -30,7 +30,6 @@
         @onSelect={{this.onItemSelected}}
         @searchPlaceholder={{t "oss-components.country-selector.search"}}
         @onClose={{this.closeDropdown}}
-        @enableKeyboard={{true}}
         id={{this.portalId}}
         class={{concat "margin-top-px-0 country-selector-container__dropdown " this.dropdownAddressableClass}}
         {{on-click-outside this.onClickOutside}}
diff --git a/addon/components/o-s-s/currency-input.hbs b/addon/components/o-s-s/currency-input.hbs
index 6fc3738aa..9d8ec5546 100644
--- a/addon/components/o-s-s/currency-input.hbs
+++ b/addon/components/o-s-s/currency-input.hbs
@@ -59,7 +59,6 @@
       @onSearch={{this.onSearch}}
       @onSelect={{this.onSelect}}
       @searchPlaceholder={{t "oss-components.currency-input.search"}}
-      @enableKeyboard={{true}}
       {{on-click-outside this.hideCurrencySelector}}
     >
       <:option as |currency|>
diff --git a/addon/components/o-s-s/infinite-select.stories.js b/addon/components/o-s-s/infinite-select.stories.js
index 0f2cfb865..9d2cfced6 100644
--- a/addon/components/o-s-s/infinite-select.stories.js
+++ b/addon/components/o-s-s/infinite-select.stories.js
@@ -109,7 +109,7 @@ export default {
         type: {
           summary: 'boolean'
         },
-        defaultValue: { summary: false }
+        defaultValue: { summary: true }
       },
       control: {
         type: 'boolean'
@@ -182,7 +182,7 @@ const defaultArgs = {
   loading: false,
   loadingMore: false,
   inline: false,
-  enableKeyboard: false,
+  enableKeyboard: true,
   skin: 'default',
   action: {
     skin: 'tertiary',
@@ -202,7 +202,7 @@ const Template = (args) => ({
       <OSS::InfiniteSelect
         @items={{this.items}} @itemLabel={{this.itemLabel}} @searchEnabled={{this.searchEnabled}} @onSearch={{this.onSearch}}
         @searchPlaceholder={{this.searchPlaceholder}} @onSelect={{this.onSelect}} @loading={{this.loading}}
-        @loadingMore={{this.loadingMore}} @inline={{this.inline}} @onBottomReached={{this.onBottomReached}} 
+        @loadingMore={{this.loadingMore}} @inline={{this.inline}} @onBottomReached={{this.onBottomReached}}
         @skin={{this.skin}} @didRender={{this.didRender}} @enableKeyboard={{this.enableKeyboard}} @action={{this.action}}
         class="upf-align--absolute-center"/>
   `,
@@ -214,7 +214,7 @@ const OptionBlockTemplate = (args) => ({
     <OSS::InfiniteSelect
       @items={{this.items}} @itemLabel={{this.itemLabel}} @searchEnabled={{this.searchEnabled}} @onSearch={{this.onSearch}}
         @searchPlaceholder={{this.searchPlaceholder}} @onSelect={{this.onSelect}} @loading={{this.loading}}
-        @loadingMore={{this.loadingMore}} @inline={{this.inline}} @onBottomReached={{this.onBottomReached}} 
+        @loadingMore={{this.loadingMore}} @inline={{this.inline}} @onBottomReached={{this.onBottomReached}}
         @didRender={{this.didRender}} @enableKeyboard={{this.enableKeyboard}} class="upf-align--absolute-center">
       <:option as |opt|>
         {{opt.superhero}} (Alias: {{opt.characters}})
diff --git a/addon/components/o-s-s/infinite-select.ts b/addon/components/o-s-s/infinite-select.ts
index e9c08972d..2019c9fa9 100644
--- a/addon/components/o-s-s/infinite-select.ts
+++ b/addon/components/o-s-s/infinite-select.ts
@@ -86,7 +86,7 @@ export default class OSSInfiniteSelect extends Component<InfiniteSelectArgs> {
   }
 
   get enableKeyboard(): boolean {
-    return this.args.enableKeyboard ?? false;
+    return this.args.enableKeyboard ?? true;
   }
 
   get searchEnabled(): boolean {
diff --git a/addon/components/o-s-s/phone-number-input.hbs b/addon/components/o-s-s/phone-number-input.hbs
index 23c549ef2..bfb1aa627 100644
--- a/addon/components/o-s-s/phone-number-input.hbs
+++ b/addon/components/o-s-s/phone-number-input.hbs
@@ -43,7 +43,6 @@
         @onSearch={{this.onSearch}}
         @onSelect={{this.onSelect}}
         @searchPlaceholder="Search"
-        @enableKeyboard={{true}}
         id={{this.portalId}}
         class={{concat "margin-top-px-0 phone-number-container__dropdown " this.dropdownAddressableClass}}
         {{on-click-outside this.onClickOutside}}
diff --git a/addon/components/o-s-s/power-select.hbs b/addon/components/o-s-s/power-select.hbs
index f40a57432..510d6d75a 100644
--- a/addon/components/o-s-s/power-select.hbs
+++ b/addon/components/o-s-s/power-select.hbs
@@ -41,7 +41,6 @@
           @loading={{@loading}}
           @loadingMore={{@loadingMore}}
           @onBottomReached={{@onBottomReached}}
-          @enableKeyboard={{true}}
           class={{concat "margin-top-px-0 upf-power-select__dropdown " this.dropdownAddressableClass}}
           id={{this.portalId}}
           {{on "click" this.noop}}
@@ -65,7 +64,6 @@
           @loading={{@loading}}
           @loadingMore={{@loadingMore}}
           @onBottomReached={{@onBottomReached}}
-          @enableKeyboard={{true}}
           class={{concat "margin-top-px-0 upf-power-select__dropdown " this.dropdownAddressableClass}}
           id={{this.portalId}}
           {{on "click" this.noop}}
diff --git a/addon/components/o-s-s/select.hbs b/addon/components/o-s-s/select.hbs
index 1fbea6bf0..dd1abe304 100644
--- a/addon/components/o-s-s/select.hbs
+++ b/addon/components/o-s-s/select.hbs
@@ -34,7 +34,6 @@
           @onSelect={{this.onSelect}}
           @searchEnabled={{this.searchEnabled}}
           @searchPlaceholder={{this.searchPlaceholder}}
-          @enableKeyboard={{true}}
           @action={{this.actionArguments}}
           id={{this.portalId}}
           class={{concat "margin-top-px-0 oss-select-container__dropdown " this.dropdownAddressableClass}}
@@ -65,7 +64,6 @@
           @onSelect={{this.onSelect}}
           @searchEnabled={{this.searchEnabled}}
           @searchPlaceholder={{this.searchPlaceholder}}
-          @enableKeyboard={{true}}
           @action={{this.actionArguments}}
           id={{this.portalId}}
           class={{concat "margin-top-px-0 oss-select-container__dropdown " this.dropdownAddressableClass}}
diff --git a/addon/components/o-s-s/smart/immersive/select.hbs b/addon/components/o-s-s/smart/immersive/select.hbs
index 8eaf4082e..93ce56d73 100644
--- a/addon/components/o-s-s/smart/immersive/select.hbs
+++ b/addon/components/o-s-s/smart/immersive/select.hbs
@@ -41,7 +41,6 @@
         @loading={{@loading}}
         @loadingMore={{@loadingMore}}
         @onBottomReached={{@onBottomReached}}
-        @enableKeyboard={{true}}
         @searchEnabled={{@searchEnabled}}
         class={{concat "margin-top-px-0 upf-power-select__dropdown " this.dropdownAddressableClass}}
         id={{this.portalId}}
diff --git a/tests/integration/components/o-s-s/infinite-select-test.js b/tests/integration/components/o-s-s/infinite-select-test.js
index 1dd910487..568cb0a8b 100644
--- a/tests/integration/components/o-s-s/infinite-select-test.js
+++ b/tests/integration/components/o-s-s/infinite-select-test.js
@@ -283,9 +283,14 @@ module('Integration | Component | o-s-s/infinite-select', function (hooks) {
     });
 
     module('If keyboard is disabled', function () {
+      hooks.beforeEach(function () {
+        this.enableKeyboard = false;
+      });
+
       test('The first element should not be focused on load', async function (assert) {
         await render(
-          hbs`<OSS::InfiniteSelect @items={{this.items}} @inline={{false}} @searchEnabled={{false}} @onSelect={{this.onSelect}} />`
+          hbs`<OSS::InfiniteSelect @items={{this.items}} @inline={{false}} @searchEnabled={{false}} @onSelect={{this.onSelect}}
+                                   @enableKeyboard={{this.enableKeyboard}} />`
         );
 
         assert.notOk(_isFocused(document.querySelectorAll('.upf-infinite-select__item')[0]));
@@ -293,7 +298,8 @@ module('Integration | Component | o-s-s/infinite-select', function (hooks) {
 
       test('The keyboard controls are disabled', async function (assert) {
         await render(
-          hbs`<OSS::InfiniteSelect @items={{this.items}} @inline={{false}} @searchEnabled={{false}} @onSelect={{this.onSelect}} />`
+          hbs`<OSS::InfiniteSelect @items={{this.items}} @inline={{false}} @searchEnabled={{false}} @onSelect={{this.onSelect}}
+                                   @enableKeyboard={{this.enableKeyboard}} />`
         );
 
         assert.notOk(_isFocused(document.querySelectorAll('.upf-infinite-select__item')[0]));

From 294a058578091e18a189c64bc81ffa57d3088c1a Mon Sep 17 00:00:00 2001
From: Julien Vannier <julien.vannier66@gmail.com>
Date: Wed, 13 May 2026 16:38:38 +0200
Subject: [PATCH 11/11] Stop propagation for event for selection for
 infinite-select option

---
 addon/components/o-s-s/infinite-select/option.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/addon/components/o-s-s/infinite-select/option.ts b/addon/components/o-s-s/infinite-select/option.ts
index ebce301a7..5b271f2d1 100644
--- a/addon/components/o-s-s/infinite-select/option.ts
+++ b/addon/components/o-s-s/infinite-select/option.ts
@@ -89,7 +89,9 @@ export default class OSSInfiniteSelectOptionComponent extends Component<OSSInfin
   }
 
   @action
-  onSelect(value: boolean): void {
+  onSelect(value: boolean, event?: PointerEvent): void {
+    event?.stopPropagation();
+
     if (this.args.disabled) return;
     this.args.onSelect(value);
   }