Merge branch 'next' into ROU-12161-2

Author: joselrio

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

@@ -71,7 +71,6 @@ slot[name="end"]::slotted(*) {
 
 // Item: Focused
 // --------------------------------------------------
-
 :host(.ion-focused) .item-native::after {
   @include globals.border-radius(inherit);
   @include globals.position(0, 0, 0, 0);
@@ -112,3 +111,14 @@ slot[name="end"]::slotted(*) {
 :host(.item-lines-none) {
   --inner-border-width: #{globals.$ion-border-size-0};
 }
+
+// Item in 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,

core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png

@@ -67,4 +67,9 @@ ion-content {
   --padding-end: #{globals.$ion-space-400} !important;
   /* stylelint-disable-next-line declaration-no-important */
   --padding-bottom: #{globals.$ion-space-1200} !important;
+
+  // Set the background to the focused element within a radio group only when there is a checked radio
+  &:has(.radio-checked) .ion-focused:not(.item-radio-checked) {
+    --background-focused-opacity: 1;
+  }
 }