refactor(list): rename item group header and list mixin

demo/src/app/index/pages/accordion/accordion.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/action-sheet/action-sheet.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/alert/alert.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/breadcrumbs/breadcrumbs.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/button/button.page.html

@@ -19,7 +19,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/card/card.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/checkbox/checkbox.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/chip/chip.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/date-and-time-pickers/date-and-time-pickers.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/floating-action-button-fixed/floating-action-button-fixed.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/floating-action-button/floating-action-button.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/inputs/inputs.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

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

@@ -7,7 +7,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/modal/modal.page.html

@@ -18,7 +18,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/popover/popover.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/progress-indicators/progress-indicators.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/radio/radio.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/range/range.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/reorder/reorder.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/searchbar/searchbar.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/segment/segment.page.html

@@ -30,7 +30,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/select/select.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/tabs/tabs.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/toast/toast.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/toggle/toggle.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

demo/src/app/index/pages/toolbar/toolbar.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true" color="light">
   <ion-list [inset]="true">
-    <ion-item-group class="header-item-group">
+    <ion-item-group class="item-group-header">
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

docs/migration.md

@@ -4,6 +4,21 @@ title: Migration
 
 # Migration
 
+## Rename `.header-item-group` to `.item-group-header`
+
+The class for an `ion-item-group` used as a section header has been renamed for consistency with the element it modifies. Replace every occurrence of `.header-item-group` in application templates and styles.
+
+```diff
+- <ion-item-group class="header-item-group">
++ <ion-item-group class="item-group-header">
+    ...
+  </ion-item-group>
+```
+
+The old class is no longer styled by the theme. This rename applies to markup shared with `@rdlabo/ionic-theme-md3` as well.
+
+## Selective component imports
+
 For gradual migration, you can selectively apply the iOS26 theme by importing individual components instead of the full theme file.
 
 ```css

src/styles/components/ion-list.scss

@@ -1,4 +1,4 @@
-@use '../utils/theme-list-inset';
+@use '../utils/structured-list';
 
 ion-list.ios:not(.ios26-disabled) {
   ion-item {
@@ -8,7 +8,7 @@ ion-list.ios:not(.ios26-disabled) {
 }
 
 ion-list.list-inset.ios:not(.ios26-disabled) {
-  @include theme-list-inset.ion-list-inset(20px);
+  @include structured-list.layout(20px);
 
   ion-radio-group,
   ion-reorder-group {

src/styles/md-ion-list-inset.scss

@@ -1,7 +1,7 @@
-@use 'utils/theme-list-inset';
+@use 'utils/structured-list';
 
 ion-list.list-inset.md {
-  @include theme-list-inset.ion-list-inset(8px);
+  @include structured-list.layout(8px);
 
   ion-item-group > ion-item {
     & > ion-input[labelplacement='floating'] {

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

@@ -1,4 +1,4 @@
-@mixin ion-list-inset($note-inset) {
+@mixin layout($outer-note-inset) {
   background: transparent;
 
   ion-list-header {
@@ -21,8 +21,7 @@
     }
   }
 
-  // TODO: これはUtility Classにマイグレートする必要があります
-  ion-item-group.header-item-group {
+  ion-item-group.item-group-header {
     & > ion-item > ion-label {
       width: 100%;
       text-align: center;
@@ -120,6 +119,6 @@
     color: var(--ion-color-medium-tint);
     font-size: 0.9rem;
     display: block;
-    margin: 8px calc(var(--ion-safe-area-right, 0) + $note-inset) 8px calc(var(--ion-safe-area-left, 0) + $note-inset);
+    margin: 8px calc(var(--ion-safe-area-right, 0) + $outer-note-inset) 8px calc(var(--ion-safe-area-left, 0) + $outer-note-inset);
   }
 }