diff --git a/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png
index 7c67337..09e1d99 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/radio.png b/demo/e2e/screenshot.spec.ts-snapshots/radio.png
index 6c026e0..fd2b89b 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/radio.png and b/demo/e2e/screenshot.spec.ts-snapshots/radio.png differ
diff --git a/demo/src/app/index/pages/radio/radio.page.html b/demo/src/app/index/pages/radio/radio.page.html
index 0bc1a52..d1550d5 100644
--- a/demo/src/app/index/pages/radio/radio.page.html
+++ b/demo/src/app/index/pages/radio/radio.page.html
@@ -52,4 +52,20 @@
radio
Error option B
+
+
+
+
+ System default
+
+
+
+
+ Radio Group Across Lists
+
+ Voice 1
+ Voice 2
+
+
+
diff --git a/demo/src/app/index/pages/radio/radio.page.spec.ts b/demo/src/app/index/pages/radio/radio.page.spec.ts
index 182d2c7..3aba3f0 100644
--- a/demo/src/app/index/pages/radio/radio.page.spec.ts
+++ b/demo/src/app/index/pages/radio/radio.page.spec.ts
@@ -18,4 +18,12 @@ describe('RadioPage', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should demonstrate one radio group across multiple inset lists', () => {
+ const radioGroup = fixture.nativeElement.querySelector('ion-radio-group:has(> ion-list)');
+
+ expect(radioGroup).not.toBeNull();
+ expect(radioGroup.querySelectorAll(':scope > ion-list')).toHaveLength(2);
+ expect(radioGroup.querySelectorAll(':scope > ion-list > ion-item-group')).toHaveLength(2);
+ });
});
diff --git a/demo/src/app/index/pages/radio/radio.page.ts b/demo/src/app/index/pages/radio/radio.page.ts
index 3dc98db..930468d 100644
--- a/demo/src/app/index/pages/radio/radio.page.ts
+++ b/demo/src/app/index/pages/radio/radio.page.ts
@@ -11,6 +11,7 @@ import {
IonItemGroup,
IonLabel,
IonList,
+ IonListHeader,
IonRadio,
IonRadioGroup,
IonText,
@@ -35,6 +36,7 @@ import {
IonItemGroup,
IonLabel,
IonList,
+ IonListHeader,
IonText,
IonRadioGroup,
IonRadio,
diff --git a/src/styles/components/ion-list.scss b/src/styles/components/ion-list.scss
index 2733e31..f71def3 100644
--- a/src/styles/components/ion-list.scss
+++ b/src/styles/components/ion-list.scss
@@ -21,7 +21,7 @@ ion-list.list-inset.ios:not(.ios26-disabled) {
padding-inline-end: calc(var(--ion-safe-area-right, 0) + 20px);
}
- :is(#{structured-list.$groups}):not(:is(#{structured-list.$groups}) :is(#{structured-list.$groups})) {
+ > :is(#{structured-list.$groups}) {
ion-item {
// To draw lines inside
--inner-padding-end: 0;
diff --git a/src/styles/utils/structured-list.scss b/src/styles/utils/structured-list.scss
index cb443d8..e287125 100644
--- a/src/styles/utils/structured-list.scss
+++ b/src/styles/utils/structured-list.scss
@@ -75,7 +75,7 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group
}
}
- :is(#{$groups}):not(:is(#{$groups}) :is(#{$groups})) {
+ > :is(#{$groups}) {
display: block;
border-radius: $group-border-radius;
overflow: hidden;