fix(list): update group selector

demo/src/app/index/pages/item-list/item-list.page.html

@@ -37,6 +37,27 @@ <h2>item-list</h2>
     <ion-note>Note additional information.</ion-note>
   </ion-list>
 
+  <ion-list [inset]="true">
+    <ion-list-header><ion-label>保存</ion-label></ion-list-header>
+    <ion-item-group>
+      <ion-item>
+        <ion-label>Item</ion-label>
+      </ion-item>
+      <ion-radio-group>
+        <ion-accordion-group>
+          <ion-accordion class="datetime-accordion" value="date">
+            <ion-item slot="header">
+              <ion-radio value="selectDate" labelPlacement="end">Radio item1</ion-radio>
+            </ion-item>
+          </ion-accordion>
+        </ion-accordion-group>
+        <ion-item lines="none">
+          <ion-radio value="daysLater" labelPlacement="end" justify="start">Radio item2</ion-radio>
+        </ion-item>
+      </ion-radio-group>
+    </ion-item-group>
+  </ion-list>
+
   <ion-list>
     <ion-list-header><ion-label>Default List</ion-label></ion-list-header>
     <ion-item-group>

demo/src/app/index/pages/item-list/item-list.page.ts

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 
 import { FormsModule } from '@angular/forms';
 import {
+  IonAccordion,
+  IonAccordionGroup,
   IonBackButton,
   IonButtons,
   IonContent,
@@ -13,6 +15,8 @@ import {
   IonList,
   IonListHeader,
   IonNote,
+  IonRadio,
+  IonRadioGroup,
   IonText,
   IonTitle,
   IonToolbar,
@@ -39,6 +43,10 @@ import {
     IonListHeader,
     IonNote,
     IonButtons,
+    IonRadioGroup,
+    IonAccordionGroup,
+    IonAccordion,
+    IonRadio,
   ],
 })
 export class ItemListPage implements OnInit {

src/styles/components/ion-list.scss

@@ -17,27 +17,25 @@ ion-list.list-inset.ios:not(.ios26-disabled) {
 
   $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
 
-  #{$groups} {
-    &:not(:has(#{$groups})) {
-      border-radius: 24px;
-      overflow: hidden;
+  :is(#{$groups}):not(:is(#{$groups}) :is(#{$groups})) {
+    border-radius: 24px;
+    overflow: hidden;
 
-      ion-item {
-        // To draw lines inside
-        --inner-padding-end: 0;
+    ion-item {
+      // To draw lines inside
+      --inner-padding-end: 0;
 
-        &::part(native) {
-          padding-right: calc(var(--ion-safe-area-right, 0px) + 18px);
-        }
+      &::part(native) {
+        padding-right: calc(var(--ion-safe-area-right, 0px) + 18px);
+      }
 
-        --min-height: 52px;
+      --min-height: 52px;
 
-        & > ion-input[labelplacement='floating'] {
-          transition: transform 200ms ease;
+      & > ion-input[labelplacement='floating'] {
+        transition: transform 200ms ease;
 
-          &:not(.label-floating) {
-            transform: translateY(-2px);
-          }
+        &:not(.label-floating) {
+          transform: translateY(-2px);
         }
       }
     }

src/styles/utils/theme-list-inset.scss

@@ -58,37 +58,35 @@
 
   $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
 
-  #{$groups} {
-    &:not(:has(#{$groups})) {
-      &:not(:first-of-type) {
-        margin-top: 16px;
-      }
+  :is(#{$groups}):not(:is(#{$groups}) :is(#{$groups})) {
+    &:not(:first-of-type) {
+      margin-top: 16px;
+    }
 
-      ion-item {
-        ion-text[slot='end'] {
-          padding-left: 8px;
-        }
+    ion-item {
+      ion-text[slot='end'] {
+        padding-left: 8px;
+      }
 
-        &.item-disabled {
-          opacity: 1;
+      &.item-disabled {
+        opacity: 1;
 
-          & > * {
-            opacity: 0.4;
-          }
+        & > * {
+          opacity: 0.4;
+        }
 
-          &::part(detail-icon) {
-            opacity: 0.1;
-          }
+        &::part(detail-icon) {
+          opacity: 0.1;
         }
+      }
 
-        ion-button[slot='end'] {
-          &.ion-align-self-end {
-            transform: translateY(-7px);
-          }
-          ion-icon[slot='icon-only'] {
-            font-size: 1.2rem !important;
-            transform: translateY(4px);
-          }
+      ion-button[slot='end'] {
+        &.ion-align-self-end {
+          transform: translateY(-7px);
+        }
+        ion-icon[slot='icon-only'] {
+          font-size: 1.2rem !important;
+          transform: translateY(4px);
         }
       }
     }