diff --git a/demo/e2e/screenshot.spec.ts-snapshots/button-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/button-dark.png
index 8a89531..45cc185 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/button-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/button-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/button.png b/demo/e2e/screenshot.spec.ts-snapshots/button.png
index 7f3f31d..5e7f375 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/button.png and b/demo/e2e/screenshot.spec.ts-snapshots/button.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png
index b32c8b8..2a00f0e 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/item-list.png b/demo/e2e/screenshot.spec.ts-snapshots/item-list.png
index 5642f25..f87436e 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/item-list.png and b/demo/e2e/screenshot.spec.ts-snapshots/item-list.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/popover-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/popover-dark.png
index c720ad1..c713e40 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/popover-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/popover-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/popover.png b/demo/e2e/screenshot.spec.ts-snapshots/popover.png
index e560a90..018bfe9 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/popover.png and b/demo/e2e/screenshot.spec.ts-snapshots/popover.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/range-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/range-dark.png
index 841cef7..ee2c9b9 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/range-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/range-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/range.png b/demo/e2e/screenshot.spec.ts-snapshots/range.png
index 9c4b6de..19092c5 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/range.png and b/demo/e2e/screenshot.spec.ts-snapshots/range.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png
index 19d68a0..e87262f 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toggle.png b/demo/e2e/screenshot.spec.ts-snapshots/toggle.png
index 3a39359..85cb073 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toggle.png and b/demo/e2e/screenshot.spec.ts-snapshots/toggle.png differ
diff --git a/demo/src/app/docs/docs-page.component.html b/demo/src/app/docs/docs-page.component.html
index 717a8c2..92f68c9 100644
--- a/demo/src/app/docs/docs-page.component.html
+++ b/demo/src/app/docs/docs-page.component.html
@@ -17,4 +17,34 @@
% npm install @rdlabo/ionic-theme-md3 --save
For detailed usage instructions, please refer to the README in the GitHub repository.
+
+
+ Special CodingMode more iOS26
+
+
+
+
+
ion-list[inset] ion-label + ion-note
+
+ When an inset list item contains an ion-label and an ion-note without slots, they are displayed
+ vertically as a two-line item.
+
+
+ <ion-list [inset]="true">
+ <ion-item>
+ <ion-label>Network & internet</ion-label>
+ <ion-note>Mobile, Wi-Fi, hotspot</ion-note>
+ </ion-item>
+ </ion-list>
+
+
+
+ Network & internet
+ Mobile, Wi-Fi, hotspot
+
+
+
+
+
+
diff --git a/demo/src/app/docs/docs-page.component.ts b/demo/src/app/docs/docs-page.component.ts
index 0774983..704ce83 100644
--- a/demo/src/app/docs/docs-page.component.ts
+++ b/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);
diff --git a/demo/src/app/index/pages/item-list/item-list.page.html b/demo/src/app/index/pages/item-list/item-list.page.html
index c34a3d6..84a9173 100644
--- a/demo/src/app/index/pages/item-list/item-list.page.html
+++ b/demo/src/app/index/pages/item-list/item-list.page.html
@@ -20,6 +20,7 @@ item-list
+
Inset List
@@ -35,6 +36,23 @@ item-list
Note additional information.
+
+ Inset List 2 Lines
+
+
+ Basic Item
+ Basic Item note
+
+
+
+ Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+ Multi-line note
+
+
+ Note additional information.
+
+
Default List
diff --git a/demo/src/app/settings/settings-page.component.html b/demo/src/app/settings/settings-page.component.html
index 092c828..7270616 100644
--- a/demo/src/app/settings/settings-page.component.html
+++ b/demo/src/app/settings/settings-page.component.html
@@ -29,7 +29,8 @@
-
+
+ Support ios26 structured
@@ -38,22 +39,22 @@
WiFi
- ionic-framework-a
+ ionic-framework-a
Bluetooth
- On
+ On
Cellular
- Off
+ Off
Personal Hotspot
- Off
+ Off
@@ -61,55 +62,18 @@
-
+
+ Support md3 structured
-
-
- General
-
-
-
- Accessibility
-
-
-
- Action Button
-
-
-
- Apple Intelligence & Siri
-
-
-
- Camera
-
-
-
- Home Screen & App Library
-
-
-
- Search
-
-
-
- StandBy
-
-
-
-
-
-
-
- Screen Time
-
-
-
-
-
-
-
- Privacy & Security
+
+
+ Network & internet
+ Mobile, Wi-Fi, hotspot
+
+
+
+ Connected devices
+ Bluetooth, pairing
diff --git a/demo/src/app/settings/settings-page.component.scss b/demo/src/app/settings/settings-page.component.scss
index 2ce4f40..bad2a8c 100644
--- a/demo/src/app/settings/settings-page.component.scss
+++ b/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;
diff --git a/demo/src/app/settings/settings-page.component.ts b/demo/src/app/settings/settings-page.component.ts
index e1ed2fa..ea4614a 100644
--- a/demo/src/app/settings/settings-page.component.ts
+++ b/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 {
diff --git a/src/styles/components/ion-list.scss b/src/styles/components/ion-list.scss
index acae623..18f366e 100644
--- a/src/styles/components/ion-list.scss
+++ b/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};
diff --git a/src/styles/utils/theme-list-inset.scss b/src/styles/utils/theme-list-inset.scss
index e7368e7..d341875 100644
--- a/src/styles/utils/theme-list-inset.scss
+++ b/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);
}
}