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

README.md

@@ -80,6 +80,7 @@ Start with [Installation](#installation). Pair this theme with [@rdlabo/ionic-th
 
 <!-- rdlabo-docs-omit -->
 
+- [Migration](./docs/migration.md) — changes required when updating theme markup.
 - [Breaking changes](./docs/breaking.md) — changes required when upgrading major versions.
 
 <!-- /rdlabo-docs-omit -->

demo/src/app/index/pages/accordion/accordion.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/action-sheet/action-sheet.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/alert/alert.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/breadcrumbs/breadcrumbs.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/button/button.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/card/card.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/checkbox/checkbox.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/chip/chip.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/date-and-time-pickers/date-and-time-pickers.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/floating-action-button/floating-action-button.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/inputs/inputs.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/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

@@ -16,7 +16,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

@@ -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/progress-indicators/progress-indicators.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/radio/radio.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/range/range.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/reorder/reorder.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/searchbar/searchbar.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/segment/segment.page.html

@@ -26,7 +26,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

@@ -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/tabs/tabs.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/toast/toast.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/toggle/toggle.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/toolbar/toolbar.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>

docs/migration.md

@@ -0,0 +1,18 @@
+---
+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-ios26` as well.

src/styles/components/ion-list.scss

@@ -1,12 +1,12 @@
-@use '../utils/theme-list-inset';
+@use '../utils/structured-list';
 
 ion-list.md:not(.md3-disabled):not(.list-inset) {
   padding-top: 0;
   padding-bottom: 0;
 }
 
 ion-list.md:not(.md3-disabled).list-inset {
-  @include theme-list-inset.ion-list-inset(8px);
+  @include structured-list.layout(8px);
 
   ion-item-group > ion-item {
     --border-color: var(--ion-color-light, #fff);

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);
   }
 }