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