fix(Item): make changes only when under context of select modal

Author: joselrio

core/src/components/item/item.ionic.scss

@@ -7,8 +7,6 @@
 :host {
   --background: #{globals.$ion-bg-surface-default};
   --background-activated: #{globals.$ion-bg-select-default};
-  --background-focused: #{globals.$ion-bg-neutral-subtlest-press};
-  --background-focused-opacity: 0;
   --border-color: #{globals.$ion-primitives-neutral-300};
   --border-style: #{globals.$ion-border-style-solid};
   --border-width: #{0 0 globals.$ion-border-size-025 0};
@@ -73,11 +71,6 @@ slot[name="end"]::slotted(*) {
 
 // Item: Focused
 // --------------------------------------------------
-
-:host(.ion-focused) .item-native {
-  --border-radius: #{globals.$ion-border-radius-400};
-}
-
 :host(.ion-focused) .item-native::after {
   @include globals.border-radius(inherit);
   @include globals.position(0, 0, 0, 0);
@@ -118,3 +111,13 @@ slot[name="end"]::slotted(*) {
 :host(.item-lines-none) {
   --inner-border-width: #{globals.$ion-border-size-0};
 }
+
+// Inside a Select Modal
+:host(.in-select-modal) {
+  --background-focused: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-focused-opacity: 0;
+}
+
+:host(.in-select-modal.ion-focused) .item-native {
+  --border-radius: #{globals.$ion-border-radius-400};
+}

core/src/components/item/item.tsx

@@ -407,6 +407,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor,
             'item-disabled': disabled,
             'in-list': inList,
+            'in-select-modal': hostContext('ion-select-modal', this.el),
             'item-multiple-inputs': this.multipleInputs,
             'ion-activatable': canActivate,
             'ion-focusable': this.focusable,