feat(list): support structured two-line items

demo/src/app/docs/docs-page.component.html

@@ -17,4 +17,34 @@
     <code class="code-block">% npm install &#64;rdlabo/ionic-theme-md3 --save</code>
     <p>For detailed usage instructions, please refer to the README in the GitHub repository.</p>
   </section>
+
+  <ion-list [inset]="true">
+    <ion-list-header><ion-label>Special Coding</ion-label><ion-note>Mode more iOS26</ion-note></ion-list-header>
+
+    <ion-item-group>
+      <ion-item>
+        <div class="ion-padding-bottom">
+          <h3><code>ion-list[inset] ion-label + ion-note</code></h3>
+          <p>
+            When an inset list item contains an <code>ion-label</code> and an <code>ion-note</code> without slots, they are displayed
+            vertically as a two-line item.
+          </p>
+          <code class="code-block">
+            &lt;ion-list [inset]="true"&gt;<br />
+            &nbsp;&nbsp;&lt;ion-item&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;ion-label&gt;Network &amp; internet&lt;/ion-label&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;ion-note&gt;Mobile, Wi-Fi, hotspot&lt;/ion-note&gt;<br />
+            &nbsp;&nbsp;&lt;/ion-item&gt;<br />
+            &lt;/ion-list&gt;
+          </code>
+          <ion-list [inset]="true">
+            <ion-item color="light">
+              <ion-label>Network & internet</ion-label>
+              <ion-note>Mobile, Wi-Fi, hotspot</ion-note>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
 </ion-content>

demo/src/app/docs/docs-page.component.ts

@@ -1,13 +1,43 @@
 import { Component, inject } from '@angular/core';
 
 import { FormsModule } from '@angular/forms';
-import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar, Platform } from '@demo/ionic';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonTitle,
+  IonToolbar,
+  Platform,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonNote,
+} from '@demo/ionic';
 
 @Component({
   selector: 'app-docs-page',
   templateUrl: './docs-page.component.html',
   styleUrls: ['./docs-page.component.scss'],
-  imports: [IonContent, IonHeader, IonTitle, IonToolbar, FormsModule, IonIcon, IonButton, IonButtons],
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    FormsModule,
+    IonIcon,
+    IonButton,
+    IonButtons,
+    IonItemGroup,
+    IonList,
+    IonListHeader,
+    IonLabel,
+    IonNote,
+    IonItem,
+  ],
 })
 export class DocsPage {
   readonly platform = inject(Platform);

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

@@ -20,6 +20,7 @@ <h2>item-list</h2>
       </ion-item>
     </ion-item-group>
   </ion-list>
+
   <ion-list [inset]="true">
     <ion-list-header><ion-label>Inset List</ion-label></ion-list-header>
     <ion-item-group>
@@ -35,6 +36,23 @@ <h2>item-list</h2>
     <ion-note>Note additional information.</ion-note>
   </ion-list>
 
+  <ion-list [inset]="true">
+    <ion-list-header><ion-label>Inset List 2 Lines</ion-label></ion-list-header>
+    <ion-item-group>
+      <ion-item>
+        <ion-label>Basic Item</ion-label>
+        <ion-note>Basic Item note</ion-note>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </ion-label>
+        <ion-note>Multi-line note</ion-note>
+      </ion-item>
+    </ion-item-group>
+    <ion-note>Note additional information.</ion-note>
+  </ion-list>
+
   <ion-list>
     <ion-list-header><ion-label>Default List</ion-label></ion-list-header>
     <ion-item-group>

demo/src/app/settings/settings-page.component.html

@@ -29,7 +29,8 @@
       <ion-item></ion-item>
     </ion-item-group>
   </ion-list>
-  <ion-list [inset]="true">
+  <ion-list [inset]="true" class="support-ios-structured">
+    <ion-list-header><ion-label>Support ios26 structured</ion-label></ion-list-header>
     <ion-item-group>
       <ion-item>
         <ion-icon name="airplane" slot="start" style="background: linear-gradient(#f8b250, #f79407)"></ion-icon>
@@ -38,78 +39,41 @@
       <ion-item [detail]="true">
         <ion-icon name="wifi" slot="start" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
         <ion-label>WiFi</ion-label>
-        <ion-note>ionic-framework-a</ion-note>
+        <ion-note slot="end">ionic-framework-a</ion-note>
       </ion-item>
       <ion-item [detail]="true">
         <ion-icon name="bluetooth" slot="start" style="background: linear-gradient(#459cfa, #2d7afc)"></ion-icon>
         <ion-label>Bluetooth</ion-label>
-        <ion-note>On</ion-note>
+        <ion-note slot="end">On</ion-note>
       </ion-item>
       <ion-item [detail]="true">
         <ion-icon name="stats-chart" slot="start" style="background: linear-gradient(#6fdc83, #3ec75d)"></ion-icon>
         <ion-label>Cellular</ion-label>
-        <ion-note>Off</ion-note>
+        <ion-note slot="end">Off</ion-note>
       </ion-item>
       <ion-item [detail]="true" [disabled]="true">
         <ion-icon name="unlink" slot="start" style="background: linear-gradient(#6fdc83, #3ec75d)"></ion-icon>
         <ion-label>Personal Hotspot</ion-label>
-        <ion-note>Off</ion-note>
+        <ion-note slot="end">Off</ion-note>
       </ion-item>
       <ion-item [detail]="true">
         <ion-icon name="battery-full" slot="start" style="background: linear-gradient(#6fdc83, #3ec75d)"></ion-icon>
         <ion-label>Battery</ion-label>
       </ion-item>
     </ion-item-group>
   </ion-list>
-  <ion-list [inset]="true">
+  <ion-list [inset]="true" class="support-md-structured">
+    <ion-list-header><ion-label>Support md3 structured</ion-label></ion-list-header>
     <ion-item-group>
-      <ion-item [detail]="true">
-        <ion-icon name="cog-outline" slot="start" style="background: linear-gradient(#afafb4, #8e8e93)"></ion-icon>
-        <ion-label>General</ion-label>
-      </ion-item>
-      <ion-item [detail]="true">
-        <ion-icon name="accessibility" slot="start" style="background: linear-gradient(#43a6ff, #0288ff)"></ion-icon>
-        <ion-label>Accessibility</ion-label>
-      </ion-item>
-      <ion-item [detail]="true">
-        <ion-icon name="log-in-outline" slot="start" style="background: linear-gradient(#43a6ff, #0288ff)"></ion-icon>
-        <ion-label>Action Button</ion-label>
-      </ion-item>
-      <ion-item [detail]="true">
-        <ion-icon name="logo-angular" slot="start" style="background: linear-gradient(#f9a432, #e193fb)"></ion-icon>
-        <ion-label>Apple Intelligence & Siri</ion-label>
-      </ion-item>
-      <ion-item [detail]="true">
-        <ion-icon name="camera" slot="start" style="background: linear-gradient(#afafb4, #8e8e93)"></ion-icon>
-        <ion-label>Camera</ion-label>
-      </ion-item>
-      <ion-item [detail]="true">
-        <ion-icon name="calculator" slot="start" style="background: linear-gradient(#43a6ff, #0288ff)"></ion-icon>
-        <ion-label>Home Screen & App Library</ion-label>
-      </ion-item>
-      <ion-item [detail]="true">
-        <ion-icon name="search-outline" slot="start" style="background: linear-gradient(#afafb4, #8e8e93)"></ion-icon>
-        <ion-label>Search</ion-label>
-      </ion-item>
-      <ion-item [detail]="true">
-        <ion-icon name="snow" slot="start" style="background: var(--ion-text-color, #000)"></ion-icon>
-        <ion-label>StandBy</ion-label>
-      </ion-item>
-    </ion-item-group>
-  </ion-list>
-  <ion-list [inset]="true">
-    <ion-item-group>
-      <ion-item [detail]="true">
-        <ion-icon name="hourglass" slot="start" style="background: linear-gradient(#887dff, #6055f5)"></ion-icon>
-        <ion-label>Screen Time</ion-label>
-      </ion-item>
-    </ion-item-group>
-  </ion-list>
-  <ion-list [inset]="true">
-    <ion-item-group>
-      <ion-item [detail]="true">
-        <ion-icon name="hand-left" slot="start" style="background: linear-gradient(#43a6ff, #0288ff)"></ion-icon>
-        <ion-label>Privacy & Security</ion-label>
+      <ion-item [detail]="false">
+        <ion-icon name="wifi" slot="start" style="background: #459cfa"></ion-icon>
+        <ion-label>Network & internet</ion-label>
+        <ion-note>Mobile, Wi-Fi, hotspot</ion-note>
+      </ion-item>
+      <ion-item [detail]="false">
+        <ion-icon name="laptop-outline" slot="start" style="background: #459cfa"></ion-icon>
+        <ion-label>Connected devices</ion-label>
+        <ion-note>Bluetooth, pairing</ion-note>
       </ion-item>
     </ion-item-group>
   </ion-list>

demo/src/app/settings/settings-page.component.scss

@@ -7,15 +7,32 @@ ion-list.list-inset {
 }
 
 ion-item > ion-icon[slot='start'] {
-  border-radius: 8px;
-  padding: 4px;
-  margin-right: 14px;
   color: var(--ion-background-color, #fff);
-  font-size: 1.3rem;
+}
+
+.support-ios-structured {
+  ion-item > ion-icon[slot='start'] {
+    padding: 4px;
+    font-size: 1.3rem;
+    margin-right: 14px;
+    border-radius: 8px;
+  }
+}
+
+.support-md-structured {
+  ion-item > ion-icon[slot='start'] {
+    padding: 8px;
+    width: calc(40px - 16px);
+    height: calc(40px - 16px);
+    margin-right: 16px;
+    border-radius: 50%;
+    background: var(--ion-color-light-shade);
+  }
 }
 
 ion-list.user-info {
   margin-top: 0;
+  margin-bottom: 0;
   ion-avatar {
     width: 64px;
     height: 64px;

demo/src/app/settings/settings-page.component.ts

@@ -20,6 +20,8 @@ import {
   IonToggle,
   IonToolbar,
   Platform,
+  IonListHeader,
+  IonText,
 } from '@demo/ionic';
 
 @Component({
@@ -45,6 +47,8 @@ import {
     IonNote,
     IonItemGroup,
     IonToggle,
+    IonText,
+    IonListHeader,
   ],
 })
 export class SettingsPage {

src/styles/components/ion-list.scss

@@ -6,11 +6,15 @@ ion-list.md:not(.md3-disabled):not(.list-inset) {
 }
 
 ion-list.md:not(.md3-disabled).list-inset {
-  @include theme-list-inset.ion-list-inset();
+  @include theme-list-inset.ion-list-inset(8px);
 
   ion-item-group > ion-item {
     --border-color: var(--ion-color-light, #fff);
 
+    ion-note[slot='end'] {
+      font-size: max(14px, 1rem);
+    }
+
     &:not(.item-lines-inset):not(.item-lines-none) {
       --border-radius: 4px;
       --border-width: #{0px 0px 2px 0px};

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

@@ -1,4 +1,4 @@
-@mixin ion-list-inset() {
+@mixin ion-list-inset($note-inset) {
   background: transparent;
 
   ion-list-header {
@@ -64,6 +64,30 @@
     }
 
     ion-item {
+      &:has(> ion-label:not([slot])):has(> ion-note:not([slot])) {
+        &::part(container) {
+          flex-direction: column;
+          justify-content: center;
+          padding-top: 14px;
+          padding-bottom: 14px;
+          min-height: 64px;
+        }
+        & > ion-label,
+        & > ion-note {
+          width: auto;
+          align-self: flex-start;
+        }
+        & > ion-label {
+          margin: 0;
+          font-weight: 500;
+          font-size: 1.15rem;
+          line-height: 0.9rem;
+        }
+        & > ion-note {
+          font-size: 0.85rem;
+        }
+      }
+
       ion-text[slot='end'] {
         padding-left: 8px;
       }
@@ -96,6 +120,6 @@
     color: var(--ion-color-medium-tint);
     font-size: 0.9rem;
     display: block;
-    margin: 8px calc(20px + var(--ion-safe-area-right)) 8px calc(20px + var(--ion-safe-area-left));
+    margin: 8px calc(var(--ion-safe-area-right, 0) + $note-inset) 8px calc(var(--ion-safe-area-left, 0) + $note-inset);
   }
 }