fix(list): support two-line content in inset items

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

@@ -35,6 +35,32 @@ <h3><code>ion-button[fill=solid][type=submit]</code></h3>
       </ion-item>
     </ion-item-group>
 
+    <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-item-group>
       <ion-item>
         <div class="ion-padding-bottom">

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

@@ -1,8 +1,6 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="/main/index"></ion-back-button>
-    </ion-buttons>
+  <ion-toolbar color="light">
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
     <ion-title>item-list</ion-title>
   </ion-toolbar>
 </ion-header>
@@ -17,11 +15,12 @@ <h2>item-list</h2>
           <ion-header collapse="condense">
             <ion-toolbar></ion-toolbar>
           </ion-header>
-          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-md3.</code></ion-text>
         </ion-label>
       </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>
@@ -38,24 +37,20 @@ <h2>item-list</h2>
   </ion-list>
 
   <ion-list [inset]="true">
-    <ion-list-header><ion-label>保存</ion-label></ion-list-header>
+    <ion-list-header><ion-label>Inset List 2 Lines</ion-label></ion-list-header>
     <ion-item-group>
       <ion-item>
-        <ion-label>Item</ion-label>
+        <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-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-note>Note additional information.</ion-note>
   </ion-list>
 
   <ion-list>

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

@@ -20,7 +20,9 @@
   <ion-list [inset]="true" class="user-info">
     <ion-item-group>
       <ion-item [detail]="true">
-        <ion-avatar slot="start"><ion-img src="https://picsum.photos/150/150"></ion-img></ion-avatar>
+        <ion-avatar slot="start">
+          <img src="https://picsum.photos/150/150" alt="Masahiko Sakakibara" loading="lazy" />
+        </ion-avatar>
         <div>
           <ion-label>Masahiko Sakakibara</ion-label>
           <ion-note>Apple Account, iCloud+, and more</ion-note>
@@ -29,7 +31,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 +41,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

@@ -10,7 +10,6 @@ import {
   IonFooter,
   IonHeader,
   IonIcon,
-  IonImg,
   IonItem,
   IonItemGroup,
   IonLabel,
@@ -21,6 +20,7 @@ import {
   IonToggle,
   IonToolbar,
   Platform,
+  IonListHeader,
 } from '@demo/ionic';
 
 @Component({
@@ -43,10 +43,10 @@ import {
     IonSearchbar,
     IonBackButton,
     IonAvatar,
-    IonImg,
     IonNote,
     IonItemGroup,
     IonToggle,
+    IonListHeader,
   ],
 })
 export class SettingsPage {

src/styles/components/ion-list.scss

@@ -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();
+  @include theme-list-inset.ion-list-inset(20px);
 
   ion-radio-group,
   ion-reorder-group {

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

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

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