CR + remove now unnecessary vertical-align

Author: OS-pedrolourenco

core/api.txt

@@ -1857,7 +1857,7 @@ ion-radio-group,prop,value,any,undefined,false,false
 ion-radio-group,event,ionChange,RadioGroupChangeEventDetail<any>,true
 ion-radio-group,part,error-text
 ion-radio-group,part,helper-text
-ion-radio-group,part,top
+ion-radio-group,part,supporting-text
 
 ion-range,shadow
 ion-range,prop,activeBarStart,number | undefined,undefined,false,false

core/src/components/radio-group/radio-group.common.scss

@@ -3,9 +3,6 @@
 
 :host {
   display: block;
-
-  // Prevents additional pixels from being rendered on top
-  vertical-align: top;
 }
 
 // Radio Group: Top

core/src/components/radio-group/radio-group.ionic.scss

@@ -23,20 +23,16 @@
 
 // Add padding to the error and helper text when used in a
 // list to align them with the list header and item text.
-// Note: :host-context() cannot be nested inside ltr()/rtl() mixins
-// because the mixin tries to transform the selector, creating invalid CSS.
-// We work around this by using separate rules outside the mixins.
-/* stylelint-disable */
-:host-context(ion-list) .radio-group-top {
-  // Default to LTR - padding-left includes safe area
-  padding-right: globals.$ion-space-400;
-  padding-left: calc(globals.$ion-space-400 + var(--ion-safe-area-left, 0px));
+:host(.in-list) .radio-group-top {
+  /* stylelint-disable */
+  @include globals.ltr() {
+    padding-right: globals.$ion-space-400;
+    padding-left: calc(globals.$ion-space-400 + var(--ion-safe-area-left, 0px));
+  }
+
+  @include globals.rtl() {
+    padding-right: calc(globals.$ion-space-400 + var(--ion-safe-area-right, 0px));
+    padding-left: globals.$ion-space-400;
+  }
+  /* stylelint-enable */
 }
-
-// RTL support - match when document or ancestor has dir="rtl"
-:host-context([dir="rtl"] ion-list) .radio-group-top,
-:host-context(ion-list) .radio-group-top:dir(rtl) {
-  padding-right: calc(globals.$ion-space-400 + var(--ion-safe-area-right, 0px));
-  padding-left: globals.$ion-space-400;
-}
-/* stylelint-enable */

core/src/components/radio-group/radio-group.ios.scss

@@ -7,6 +7,6 @@
 
 // Add padding to the error and helper text when used in a
 // list to align them with the list header and item text.
-:host-context(ion-list) .radio-group-top {
+:host(.in-list) .radio-group-top {
   @include padding-horizontal($item-ios-padding-start, $item-ios-padding-end);
 }

core/src/components/radio-group/radio-group.md.scss

@@ -7,6 +7,6 @@
 
 // Add padding to the error and helper text when used in a
 // list to align them with the list header and item text.
-:host-context(ion-list) .radio-group-top {
+:host(.in-list) .radio-group-top {
   @include padding-horizontal($item-md-padding-start, $item-md-padding-end);
 }

core/src/components/radio-group/radio-group.tsx

@@ -6,10 +6,15 @@ import { renderHiddenInput } from '@utils/helpers';
 import { getIonTheme } from '../../global/ionic-global';
 
 import type { RadioGroupChangeEventDetail, RadioGroupCompareFn } from './radio-group-interface';
+import {hostContext} from "@utils/theme";
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ *
+ * @part supporting-text - Supporting text displayed above the radios.
+ * @part helper-text - Supporting text displayed above the radios when the radio group is valid.
+ * @part error-text - Supporting text displayed above the radios when the radio group is invalid and touched.
  */
 @Component({
   tag: 'ion-radio-group',
@@ -353,6 +358,7 @@ export class RadioGroup implements ComponentInterface {
       <Host
         class={{
           [theme]: true,
+          'in-list': hostContext('ion-list', el),
         }}
         role="radiogroup"
         aria-labelledby={label ? labelId : null}

core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts

@@ -197,7 +197,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       await page.setContent(
         `
         <style>
-          ion-radio-group::part(top) {
+          ion-radio-group::part(supporting-text) {
             font-size: 20px;
           }
 
@@ -222,7 +222,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       await page.setContent(
         `
         <style>
-          ion-radio-group::part(top) {
+          ion-radio-group::part(supporting-text) {
             font-size: 20px;
           }