@rdlabo/ionic-theme-md3 9.1.0 → 9.1.1-beta.pr45.sha4ac3ec97bfb1

package/README.md

@@ -10,43 +10,66 @@ A CSS/JS theme library that applies Material Design 3 design system to Ionic app
 
 DEMO is here: https://ionic-theme-md3.rdlabo.dev/
 
-## Overview
+Designed for compatibility with `@rdlabo/ionic-theme-ios26`, so one markup tree can style both Ionic modes.
 
-This library provides CSS/JS files that bring the Material Design 3 design system to Ionic applications. It updates the look and feel of Ionic components to match the latest Material Design 3 guidelines.
-
-This project aims to follow the core concepts of Ionic as closely as possible, while placing a strong emphasis on compatibility with `@rdlabo/ionic-theme-ios26`. Just as Ionic provides beautiful styling whether it displays the ios or md theme from a single HTML structure, our goal is to ensure that this theme and `@rdlabo/ionic-theme-ios26` are fully compatible.
+## Installation
 
-If you don't know about `@rdlabo/ionic-theme-ios26`, you should definitely give it a try!
+In an existing Ionic project:
 
-👉️[rdlabo-dev/ionic-theme-ios26](https://github.com/rdlabo-dev/ionic-theme-ios26)
+```bash
+npm install @rdlabo/ionic-theme-md3
+```
 
-### Related Projects
+Note: **If you use @ionic/core@ < 8.8.0**, use @rdlabo/ionic-theme-md3@1.0.2.
 
-If you need a more comprehensive Material Design 3 implementation, you may also be interested in:
+And import the theme in your project's main CSS file (e.g., `src/styles.scss`).
 
-- **[md3-for-ionic](https://github.com/danielkleebinder/md3-for-ionic)** by danielkleebinder
+```css
+@import '@rdlabo/ionic-theme-md3/dist/css/default-variables.css';
+@import '@rdlabo/ionic-theme-md3/dist/css/ionic-theme-md3.css';
+```
 
-> **Note:** This theme is purpose-built for compatibility with Ionic's design approach and `@rdlabo/ionic-theme-ios26`; it is not intended as a strict, full MD3 recreation.
+### Configure animations
 
-## Quick start
+If you installed only the MD3 theme, configure its animation as follows.
 
-After [Installation](#installation), import the theme CSS and set `navAnimation` as shown below.
+```ts
+import { isPlatform } from '@ionic/core'; // or @ionic/angular (Ionic 9), @ionic/angular/standalone (Ionic 8), @ionic/react, @ionic/vue
+import { mdTransitionAnimation } from '@rdlabo/ionic-theme-md3';
 
-## Installation
+// Angular
+provideIonicAngular({
+    ...
+    navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,
+});
 
-This is a CSS theme for extending your Ionic project. It does not work on its own, so use it together with the Ionic Framework.
+// React
+setupIonicReact({
+    ...
+    navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,
+});
 
-```bash
-npm install @rdlabo/ionic-theme-md3
+// Vue
+createApp(App)
+    .use(IonicVue, {
+        ...
+        navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,
+})
 ```
 
-Note: **If you use @ionic/core@ < 8.8.0**, use @rdlabo/ionic-theme-md3@1.0.2.
+### Check the theme
 
-And import the theme in your project's main CSS file (e.g., `src/styles.scss`).
+Test on Android. When previewing on desktop, set Ionic mode to `md` in your existing framework initialization config (for example `mode: 'md'`).
 
-```css
-@import '@rdlabo/ionic-theme-md3/dist/css/default-variables.css';
-@import '@rdlabo/ionic-theme-md3/dist/css/ionic-theme-md3.css';
+Use this markup to preview the inset grouped list look. For the list structure the theme expects, see [Using ion-item-group](https://docs.rdlabo.dev/projects/ionic-theme-md3/docs/using-ion-item-group).
+
+```html
+<ion-list mode="md" inset="true">
+  <ion-item-group>
+    <ion-item><ion-label>Notifications</ion-label></ion-item>
+    <ion-item><ion-label>Appearance</ion-label></ion-item>
+  </ion-item-group>
+</ion-list>
 ```
 
 ### Optional: use the MD3 and iOS 26 themes together
@@ -105,40 +128,20 @@ createApp(App)
     });
 ```
 
-If you installed only the MD3 theme, configure its animation as follows.
-
-```ts
-import { isPlatform } from '@ionic/core'; // or @ionic/angular (Ionic 9), @ionic/angular/standalone (Ionic 8), @ionic/react, @ionic/vue
-import { mdTransitionAnimation } from '@rdlabo/ionic-theme-md3';
-
-// Angular
-provideIonicAngular({
-    ...
-    navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,
-});
-
-// React
-setupIonicReact({
-    ...
-    navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,
-});
+## Documentation
 
-// Vue
-createApp(App)
-    .use(IonicVue, {
-        ...
-        navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,
-})
-```
+- [Using ion-item-group](https://docs.rdlabo.dev/projects/ionic-theme-md3/docs/using-ion-item-group) — shared inset-list markup for iOS 26 and MD3.
+- [Special markup](https://docs.rdlabo.dev/projects/ionic-theme-md3/docs/special-markup) — opt-in component combinations used by the demo.
+- [ESLint](https://docs.rdlabo.dev/projects/ionic-theme-md3/docs/eslint) — check list structure with ESLint rules.
+- [Migration](https://docs.rdlabo.dev/projects/ionic-theme-md3/docs/migration) — changes required when updating theme markup.
 
-## Documentation
+## Related Projects
 
-Start with [Installation](#installation). Pair this theme with [@rdlabo/ionic-theme-ios26](https://docs.rdlabo.dev/projects/ionic-theme-ios26) when you need both platforms from one markup tree.
+If you need a more comprehensive Material Design 3 implementation, you may also be interested in:
 
-- [Special markup](https://docs.rdlabo.dev/projects/ionic-theme-md3/docs/special-markup) — opt-in component combinations used by the demo.
-- [Using ion-item-group](https://docs.rdlabo.dev/projects/ionic-theme-md3/docs/using-ion-item-group) — shared inset-list markup for iOS 26 and MD3.
+- **[md3-for-ionic](https://github.com/danielkleebinder/md3-for-ionic)** by danielkleebinder
 
-- [Migration](https://docs.rdlabo.dev/projects/ionic-theme-md3/docs/migration) — changes required when updating theme markup.
+> **Note:** This theme is purpose-built for compatibility with Ionic's design approach and `@rdlabo/ionic-theme-ios26`; it is not intended as a strict, full MD3 recreation.
 
 <!-- rdlabo-docs-omit -->
 

package/dist/css/components/ion-toolbar.css

@@ -1 +1 @@
-ion-header.md:not(.md3-disabled),ion-footer.md:not(.md3-disabled){box-shadow:none}ion-header.md:not(.md3-disabled) ion-buttons[slot=start],ion-header.md:not(.md3-disabled) ion-back-button[slot=start],ion-footer.md:not(.md3-disabled) ion-buttons[slot=start],ion-footer.md:not(.md3-disabled) ion-back-button[slot=start]{margin-left:16px}ion-header.md:not(.md3-disabled) ion-buttons[slot=end],ion-header.md:not(.md3-disabled) ion-back-button[slot=end],ion-footer.md:not(.md3-disabled) ion-buttons[slot=end],ion-footer.md:not(.md3-disabled) ion-back-button[slot=end]{margin-right:16px}ion-header.md:not(.md3-disabled) ion-toolbar ion-buttons>ion-back-button,ion-footer.md:not(.md3-disabled) ion-toolbar ion-buttons>ion-back-button{margin-left:0;margin-right:0}ion-header.md:not(.md3-disabled) ion-toolbar:has(>[slot=start]) ion-title{padding-inline-start:4px}ion-header.md:not(.md3-disabled) ion-toolbar:not(:has(>[slot=start])) ion-title{padding-inline-start:28px}ion-toolbar.md:not(.md3-disabled) ion-back-button.back-button-has-icon-only{--icon-font-size: 24px;--min-width: 48px;--min-height: 48px;--padding-top: 0;--padding-end: 0;--padding-bottom: 0;--padding-start: 0}ion-toolbar.md:not(.md3-disabled) ion-button.button-has-icon-only:not(.button-small):not(.button-large)::part(native){width:48px;height:48px}ion-toolbar.md:not(.md3-disabled) ion-button.button-has-icon-only:not(.button-small):not(.button-large).button-solid::part(native){width:40px;height:40px}
+ion-header.md:not(.md3-disabled),ion-footer.md:not(.md3-disabled){box-shadow:none}ion-toolbar.md:not(.md3-disabled) ion-buttons[slot=start],ion-toolbar.md:not(.md3-disabled) ion-back-button[slot=start]{margin-left:16px}ion-toolbar.md:not(.md3-disabled) ion-buttons[slot=end],ion-toolbar.md:not(.md3-disabled) ion-back-button[slot=end]{margin-right:16px}ion-toolbar.md:not(.md3-disabled) ion-buttons>ion-back-button{margin-left:0;margin-right:0}ion-toolbar.md:not(.md3-disabled):has(>[slot=start]) ion-title{padding-inline-start:4px}ion-toolbar.md:not(.md3-disabled):not(:has(>[slot=start])) ion-title{padding-inline-start:28px}ion-toolbar.md:not(.md3-disabled).toolbar-searchbar:not(:has(>[slot=start])){--padding-start: 10px}ion-toolbar.md:not(.md3-disabled).toolbar-searchbar:not(:has(>[slot=end])){--padding-end: 10px}ion-toolbar.md:not(.md3-disabled) ion-back-button.back-button-has-icon-only{--icon-font-size: 24px;--min-width: 48px;--min-height: 48px;--padding-top: 0;--padding-end: 0;--padding-bottom: 0;--padding-start: 0}ion-toolbar.md:not(.md3-disabled) ion-button.button-has-icon-only:not(.button-small):not(.button-large)::part(native){width:48px;height:48px}ion-toolbar.md:not(.md3-disabled) ion-button.button-has-icon-only:not(.button-small):not(.button-large).button-solid::part(native){width:40px;height:40px}

package/dist/css/ionic-theme-md3.css

@@ -1 +1 @@
-ion-action-sheet.md:not(.md3-disabled){--max-width: 640px}ion-action-sheet.md:not(.md3-disabled) .action-sheet-container{overflow:hidden;border-radius:28px 28px 0 0;box-shadow:var(--token-elevation-1)}ion-action-sheet.md:not(.md3-disabled) .action-sheet-container .action-sheet-title{padding:24px 24px 16px}ion-action-sheet.md:not(.md3-disabled) .action-sheet-container .action-sheet-button{padding:12px 24px}ion-alert.md:not(.md3-disabled){--backdrop-opacity: 0.2;--min-width: 280px;--max-width: min(560px, calc(100% - 48px * 2));transition:transform 200ms ease}ion-alert.md:not(.md3-disabled) .alert-wrapper{border-radius:24px;box-shadow:var(--token-elevation-3)}ion-alert.md:not(.md3-disabled) .alert-wrapper .alert-head{padding-top:24px;padding-bottom:16px}ion-alert.md:not(.md3-disabled) .alert-wrapper .alert-message{padding-bottom:24px}ion-alert.md:not(.md3-disabled) .alert-wrapper .alert-message:empty{padding-bottom:0}ion-button.md:not(.md3-disabled){--box-shadow: none;--padding-start: 16px;--padding-end: 16px;--border-radius: 999px}ion-button.md:not(.md3-disabled):not(.button-round){--border-radius: 999px}ion-button.md:not(.md3-disabled)::part(native){height:40px}ion-button.md:not(.md3-disabled) ion-icon{font-size:24px}ion-button.md:not(.md3-disabled) ion-icon[slot=start]{margin-inline-start:0;margin-inline-end:8px}ion-button.md:not(.md3-disabled) ion-icon[slot=end]{margin-inline-start:8px;margin-inline-end:0}ion-button.md:not(.md3-disabled).button-small{--padding-start: 12px;--padding-end: 12px}ion-button.md:not(.md3-disabled).button-small::part(native){height:32px}ion-button.md:not(.md3-disabled).button-small.button-has-icon-only{width:32px;height:32px}ion-button.md:not(.md3-disabled).button-small.button-has-icon-only::part(native){width:32px;height:32px}ion-button.md:not(.md3-disabled).button-small ion-icon{font-size:20px}ion-button.md:not(.md3-disabled).button-small ion-icon[slot=start]{margin-inline-start:0;margin-inline-end:4px}ion-button.md:not(.md3-disabled).button-small ion-icon[slot=end]{margin-inline-start:4px;margin-inline-end:0}ion-button.md:not(.md3-disabled).button-large{--padding-start: 24px;--padding-end: 24px}ion-button.md:not(.md3-disabled).button-large::part(native){height:56px}ion-button.md:not(.md3-disabled).button-large.button-has-icon-only{width:56px;height:56px}ion-button.md:not(.md3-disabled).button-large.button-has-icon-only::part(native){width:56px;height:56px}ion-button.md:not(.md3-disabled).button-large ion-icon{font-size:24px}ion-button.md:not(.md3-disabled).button-large ion-icon[slot=start]{margin-inline-start:0;margin-inline-end:8px}ion-button.md:not(.md3-disabled).button-large ion-icon[slot=end]{margin-inline-start:8px;margin-inline-end:0}ion-button.md:not(.md3-disabled).button-has-icon-only::part(native){width:40px;height:40px}ion-button.md:not(.md3-disabled).button-has-icon-only{--padding-start: 0;--padding-end: 0}ion-button.md:not(.md3-disabled).button-square{--border-radius: 8px}ion-button.md:not(.md3-disabled).button-square.button-square{--border-radius: 12px}ion-back-button.md:not(.md3-disabled){--border-radius: 999px;--min-height: 40px;--padding-start: 16px;--padding-end: 16px}ion-card.md:not(.md3-disabled){border-radius:12px;box-shadow:var(--token-elevation-1)}ion-card.md:not(.md3-disabled) ion-list ion-item{--padding-start: 0}ion-chip.md:not(.md3-disabled){padding-inline-start:16px;padding-inline-end:16px;border-radius:8px}ion-chip.md:not(.md3-disabled) ion-icon{font-size:18px}ion-chip.md:not(.md3-disabled) ion-icon:first-child{margin-inline-start:-8px;margin-inline-end:8px}ion-chip.md:not(.md3-disabled) ion-icon:last-child{margin-inline-start:8px;margin-inline-end:-8px}ion-fab.md:not(.md3-disabled) ion-fab-button{width:56px;height:56px;--border-radius: 16px;--transition: border-radius var(--token-expressive-fast-special);--box-shadow: var(--token-elevation-3)}ion-fab.md:not(.md3-disabled) ion-fab-button ion-icon{width:24px;height:24px}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-close-active{--border-radius: 50%}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-in-list{--border-radius: 50%}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-small{width:40px;height:40px;--border-radius: 12px}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-small.fab-button-close-active{--border-radius: 50%}ion-fab.md:not(.md3-disabled):has(.fab-button-small) ion-fab-button{width:40px;height:40px}ion-list.md:not(.md3-disabled) ion-item:has(ion-input.input-fill-outline),ion-list.md:not(.md3-disabled) ion-item:has(ion-textarea.textarea-fill-outline),ion-list.md:not(.md3-disabled) ion-item:has(ion-select:is([helpertext]:not([helpertext=""]),[errortext]:not([errortext=""]))),ion-list.md:not(.md3-disabled) ion-item:has(ion-input .input-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty))),ion-list.md:not(.md3-disabled) ion-item:has(ion-textarea .textarea-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty))){--inner-border-width: 0;--inner-padding-bottom: 4px}ion-list.md:not(.md3-disabled) ion-item ion-input .input-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty)))),ion-list.md:not(.md3-disabled) ion-item ion-textarea .textarea-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty)))){display:none}ion-list.md:not(.md3-disabled):not(.list-inset){padding-top:0;padding-bottom:0}ion-list.md:not(.md3-disabled).list-inset{background:rgba(0,0,0,0)}ion-list.md:not(.md3-disabled).list-inset ion-list-header{display:flex;align-items:center}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-label{font-size:.9rem;margin:8px 4px 4px}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-label:not(.ion-color){color:var(--ion-color-medium-tint)}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-button{margin-top:8px}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-note{font-size:.9rem;margin:8px 16px 4px 0}ion-list.md:not(.md3-disabled).list-inset ion-item-group.item-group-header>ion-item>ion-label{width:100%;text-align:center;padding:32px 16px 16px;transform:translateX(5px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group.item-group-header>ion-item>ion-label ion-header.header-collapse-condense>ion-toolbar{--min-height: 0;visibility:hidden}ion-list.md:not(.md3-disabled).list-inset ion-item-group.item-group-header>ion-item>ion-label ion-icon{font-size:2.8rem;border-radius:20%;padding:6px}ion-list.md:not(.md3-disabled).list-inset ion-item-group.item-group-header>ion-item>ion-label ion-icon:not(.ion-color){color:#fff}ion-list.md:not(.md3-disabled).list-inset ion-item-group.item-group-header>ion-item>ion-label h2{font-size:1.2rem;font-weight:bold;margin-top:8px}ion-list.md:not(.md3-disabled).list-inset ion-item-group.item-group-header>ion-item>ion-label ion-text{font-size:.9rem}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group){display:block;border-radius:16px;overflow:hidden}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top){display:flex;flex-direction:column;border-radius:0;overflow:visible}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>.radio-group-top{order:1;font-size:.9rem;padding-block-start:8px}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>ion-item:first-of-type{--border-radius: 16px 16px 0 0}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>ion-item:last-of-type{--border-radius: 0 0 16px 16px}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:first-of-type){margin-top:16px}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) 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-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-label,ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-note{width:auto;align-self:flex-start}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-label{margin:0;font-weight:500;font-size:1.15rem;line-height:.9rem}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-note{font-size:.85rem}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-text[slot=end]{padding-left:8px}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item.item-disabled{--detail-icon-opacity: 0.1;opacity:1}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item.item-disabled>*{opacity:.4}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-button[slot=end].ion-align-self-end{transform:translateY(-7px)}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-button[slot=end] ion-icon[slot=icon-only]{font-size:1.2rem;transform:translateY(4px)}ion-list.md:not(.md3-disabled).list-inset>ion-note{--color: var(--ion-color-medium-tint);font-size:.9rem;display:block;margin:8px calc(var(--ion-safe-area-right, 0) + 8px) 8px calc(var(--ion-safe-area-left, 0) + 8px)}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item{--border-color: var(--ion-color-light, #fff)}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-note[slot=end]{font-size:max(14px,1rem)}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:not(:last-of-type):not(.item-lines-inset):not(.item-lines-none){--border-radius: 4px;--border-width: 0px 0px 2px 0px;--inner-border-width: 0;--show-inset-highlight: 0;--show-full-highlight: 1}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(:is(ion-input.input-fill-outline,ion-textarea.textarea-fill-outline)):not(.item-lines-inset):not(.item-lines-none),ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(:is(ion-input.input-fill-outline,ion-textarea.textarea-fill-outline)):is(.item-lines-inset,.item-lines-none){--border-width: 0;--inner-padding-bottom: 4px}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(:is(ion-input.input-fill-outline,ion-textarea.textarea-fill-outline)):not(.item-lines-inset):not(.item-lines-none) ion-input,ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(:is(ion-input.input-fill-outline,ion-textarea.textarea-fill-outline)):not(.item-lines-inset):not(.item-lines-none) ion-textarea,ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(:is(ion-input.input-fill-outline,ion-textarea.textarea-fill-outline)):is(.item-lines-inset,.item-lines-none) ion-input,ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(:is(ion-input.input-fill-outline,ion-textarea.textarea-fill-outline)):is(.item-lines-inset,.item-lines-none) ion-textarea{margin:16px 0 12px}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating]{transition:transform 200ms ease}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating]:not(.label-floating){transform:translateY(-7px)}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating].label-floating{transform:translateY(-4px)}ion-list.md:not(.md3-disabled).list-inset ion-radio-group:has(>.radio-group-top) ion-item:first-of-type:not(.item-lines-inset):not(.item-lines-none){--border-radius: 16px 16px 0 0}ion-list-header.md:not(.md3-disabled){padding-left:calc(var(--ion-safe-area-left, 0px) + 4px)}ion-loading.md:not(.md3-disabled) .loading-wrapper{border-radius:24px;box-shadow:var(--token-elevation-3)}ion-modal.md:not(.md3-disabled){--box-shadow: var(--token-elevation-3)}@media only screen and (min-width: 768px)and (min-height: 600px){ion-modal.md:not(.md3-disabled){--border-radius: 24px}}ion-modal.md:not(.md3-disabled) ion-toolbar{--min-height: 64px}ion-modal.md:not(.md3-disabled) ion-toolbar:first-of-type{padding-top:calc(var(--ion-safe-area-top, 0) + 6px)}ion-modal.md:not(.md3-disabled) ion-toolbar{padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left)}ion-modal.md:not(.md3-disabled) ion-toolbar ion-button.button-has-icon-only::part(native){width:48px;height:48px}ion-modal.md:not(.md3-disabled) ion-toolbar ion-button.button-has-icon-only ion-icon[name=close-outline]{font-size:2rem}ion-modal.md:not(.md3-disabled)::part(handle){width:80px}ion-modal.md:not(.md3-disabled).modal-sheet{--border-radius: 30px}ion-modal.md:not(.md3-disabled).modal-sheet ion-toolbar:first-of-type{padding-top:6px}ion-popover.md:not(.md3-disabled){--box-shadow: var(--token-elevation-3)}ion-popover.md:not(.md3-disabled)::part(content){border-radius:12px}ion-popover.md:not(.md3-disabled) ion-select-popover ion-list{padding:0}ion-range.md:not(.md3-disabled){--height: 56px;--bar-height: 16px;--bar-border-radius: 8px;--knob-background: var(--ion-color-primary);--knob-box-shadow: none;--knob-border-radius: 8px;--knob-size: 44px;--pin-background: var(--ion-background-color-step-700, #4a4458)}ion-range.md:not(.md3-disabled).range-has-pin{padding-top:2.6rem}ion-range.md:not(.md3-disabled)::part(knob){width:4px;transition:width var(--token-expressive-fast-effects),transform var(--token-expressive-fast-effects),outline var(--token-expressive-fast-effects);will-change:width;transform:translateX(calc(var(--knob-size) / 2 - 2px))}ion-range.md:not(.md3-disabled)::part(knob):before{content:none}ion-range.md:not(.md3-disabled).ion-color{--knob-background: var(--ion-color-base, var(--ion-color-primary))}ion-range.md:not(.md3-disabled)::part(tick),ion-range.md:not(.md3-disabled)::part(tick-active){--bar-height: 4px}ion-range.md:not(.md3-disabled):not(.range-dual-knobs).range-pressed::part(knob){width:2px;transform:translateX(calc(var(--knob-size) / 2 - 1px))}ion-range.md:not(.md3-disabled):not(.range-dual-knobs):not(.range-value-min):not(.range-value-max)::part(knob){outline:6px solid var(--ion-background-color, #ffffff)}ion-range.md:not(.md3-disabled):not(.range-dual-knobs).range-pressed:not(.range-value-min):not(.range-value-max)::part(knob){outline:7px solid var(--ion-background-color, #ffffff)}ion-range.md:not(.md3-disabled):not(.range-dual-knobs):not(.range-value-max)::part(bar-active){border-top-right-radius:calc(var(--knob-border-radius)/2);border-bottom-right-radius:calc(var(--knob-border-radius)/2);margin-right:6px}ion-range.md:not(.md3-disabled):not(.range-dual-knobs).range-value-min::part(bar){border-top-left-radius:calc(var(--knob-border-radius)/2);border-bottom-left-radius:calc(var(--knob-border-radius)/2);width:calc(100% - 6px);right:0}ion-range.md:not(.md3-disabled):not(.range-dual-knobs).range-value-max::part(bar),ion-range.md:not(.md3-disabled):not(.range-dual-knobs).range-value-max::part(bar-active){border-top-right-radius:calc(var(--knob-border-radius)/2);border-bottom-right-radius:calc(var(--knob-border-radius)/2);width:calc(100% - 6px);left:0}ion-range.md:not(.md3-disabled).range-dual-knobs.range-pressed-a::part(knob-a),ion-range.md:not(.md3-disabled).range-dual-knobs.range-pressed-b::part(knob-b){width:2px;transform:translateX(calc(var(--knob-size) / 2 - 1px))}ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-min::part(bar),ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-min::part(bar-active){border-top-left-radius:calc(var(--knob-border-radius)/2);border-bottom-left-radius:calc(var(--knob-border-radius)/2);margin-left:6px}ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-min::part(bar){width:calc(100% - 6px)}ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-max::part(bar),ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-max::part(bar-active){border-top-right-radius:calc(var(--knob-border-radius)/2);border-bottom-right-radius:calc(var(--knob-border-radius)/2);margin-right:6px}ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-max::part(bar){width:calc(100% - 6px)}ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-min.range-value-max::part(bar){width:calc(100% - 12px)}ion-range.md:not(.md3-disabled).range-dual-knobs:not(.range-value-min)::part(knob-lower),ion-range.md:not(.md3-disabled).range-dual-knobs:not(.range-value-max)::part(knob-upper){outline:6px solid var(--ion-background-color, #ffffff)}ion-range.md:not(.md3-disabled).range-dual-knobs.range-pressed:not(.range-value-min)::part(knob-lower),ion-range.md:not(.md3-disabled).range-dual-knobs.range-pressed:not(.range-value-max)::part(knob-upper){outline:7px solid var(--ion-background-color, #ffffff)}ion-range.md:not(.md3-disabled)::part(pin){padding:16px;min-width:36px;top:10px}ion-range.md:not(.md3-disabled)::part(pin):before{content:none}ion-searchbar.md:not(.md3-disabled){--box-shadow: none;--border-radius: 999px;--background: rgba(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.08);--color: rgb(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)));--icon-color: rgb(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)))}ion-segment.md:not(.md3-disabled){border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))))}ion-tab-bar.md:not(.md3-disabled){height:62px}ion-tab-bar.md:not(.md3-disabled) ion-tab-button{--ripple-color: transparent;--color-selected: var(--ion-color-contrast, var(--ion-color-primary-shade))}ion-tab-bar.md:not(.md3-disabled) ion-tab-button ion-icon{padding:4px 16px;margin-top:6px;border-radius:16px;width:24px;height:24px}ion-tab-bar.md:not(.md3-disabled) ion-tab-button ion-icon::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(var(--ion-color-contrast-rgb, var(--ion-color-primary-rgb, 2, 137, 255)), 0.2);transform:scaleX(0);transition:transform var(--token-expressive-fast-effects);z-index:-1}ion-tab-bar.md:not(.md3-disabled) ion-tab-button ion-label{margin-top:2px;margin-bottom:6px}ion-tab-bar.md:not(.md3-disabled) ion-tab-button.tab-selected ion-icon::before{transform:scaleX(1)}ion-toast.md:not(.md3-disabled){--box-shadow: var(--token-elevation-3);--border-radius: 8px}ion-toggle.md:not(.md3-disabled){--handle-width: 24px;--handle-height: 24px;--handle-border-radius: 16px;--border-radius: 16px;--handle-box-shadow: none;--handle-spacing: 2px;--handle-transition: transform var(--token-expressive-default-special), background-color var(--token-expressive-default-effects);--track-background: var(--ion-background-color-step-100, #e6e0e9);--handle-background: var(--ion-text-color-step-450, #79747e)}ion-toggle.md:not(.md3-disabled)::part(track){box-sizing:border-box;min-height:32px;min-width:52px;border:2px solid var(--ion-text-color-step-450, #79747e)}ion-toggle.md:not(.md3-disabled).toggle-checked{--track-background-checked: var(--ion-color-base);--handle-background-checked: var(--ion-color-contrast)}ion-toggle.md:not(.md3-disabled).toggle-checked::part(track){border-color:var(--ion-color-base)}ion-toggle.md:not(.md3-disabled):not(.ion-color).toggle-checked{--track-background-checked: var(--ion-color-primary);--handle-background-checked: var(--ion-color-primary-contrast)}ion-toggle.md:not(.md3-disabled):not(.ion-color).toggle-checked::part(track){border-color:var(--ion-color-primary)}ion-header.md:not(.md3-disabled),ion-footer.md:not(.md3-disabled){box-shadow:none}ion-header.md:not(.md3-disabled) ion-buttons[slot=start],ion-header.md:not(.md3-disabled) ion-back-button[slot=start],ion-footer.md:not(.md3-disabled) ion-buttons[slot=start],ion-footer.md:not(.md3-disabled) ion-back-button[slot=start]{margin-left:16px}ion-header.md:not(.md3-disabled) ion-buttons[slot=end],ion-header.md:not(.md3-disabled) ion-back-button[slot=end],ion-footer.md:not(.md3-disabled) ion-buttons[slot=end],ion-footer.md:not(.md3-disabled) ion-back-button[slot=end]{margin-right:16px}ion-header.md:not(.md3-disabled) ion-toolbar ion-buttons>ion-back-button,ion-footer.md:not(.md3-disabled) ion-toolbar ion-buttons>ion-back-button{margin-left:0;margin-right:0}ion-header.md:not(.md3-disabled) ion-toolbar:has(>[slot=start]) ion-title{padding-inline-start:4px}ion-header.md:not(.md3-disabled) ion-toolbar:not(:has(>[slot=start])) ion-title{padding-inline-start:28px}ion-toolbar.md:not(.md3-disabled) ion-back-button.back-button-has-icon-only{--icon-font-size: 24px;--min-width: 48px;--min-height: 48px;--padding-top: 0;--padding-end: 0;--padding-bottom: 0;--padding-start: 0}ion-toolbar.md:not(.md3-disabled) ion-button.button-has-icon-only:not(.button-small):not(.button-large)::part(native){width:48px;height:48px}ion-toolbar.md:not(.md3-disabled) ion-button.button-has-icon-only:not(.button-small):not(.button-large).button-solid::part(native){width:40px;height:40px}
+ion-action-sheet.md:not(.md3-disabled){--max-width: 640px}ion-action-sheet.md:not(.md3-disabled) .action-sheet-container{overflow:hidden;border-radius:28px 28px 0 0;box-shadow:var(--token-elevation-1)}ion-action-sheet.md:not(.md3-disabled) .action-sheet-container .action-sheet-title{padding:24px 24px 16px}ion-action-sheet.md:not(.md3-disabled) .action-sheet-container .action-sheet-button{padding:12px 24px}ion-alert.md:not(.md3-disabled){--backdrop-opacity: 0.2;--min-width: 280px;--max-width: min(560px, calc(100% - 48px * 2));transition:transform 200ms ease}ion-alert.md:not(.md3-disabled) .alert-wrapper{border-radius:24px;box-shadow:var(--token-elevation-3)}ion-alert.md:not(.md3-disabled) .alert-wrapper .alert-head{padding-top:24px;padding-bottom:16px}ion-alert.md:not(.md3-disabled) .alert-wrapper .alert-message{padding-bottom:24px}ion-alert.md:not(.md3-disabled) .alert-wrapper .alert-message:empty{padding-bottom:0}ion-button.md:not(.md3-disabled){--box-shadow: none;--padding-start: 16px;--padding-end: 16px;--border-radius: 999px}ion-button.md:not(.md3-disabled):not(.button-round){--border-radius: 999px}ion-button.md:not(.md3-disabled)::part(native){height:40px}ion-button.md:not(.md3-disabled) ion-icon{font-size:24px}ion-button.md:not(.md3-disabled) ion-icon[slot=start]{margin-inline-start:0;margin-inline-end:8px}ion-button.md:not(.md3-disabled) ion-icon[slot=end]{margin-inline-start:8px;margin-inline-end:0}ion-button.md:not(.md3-disabled).button-small{--padding-start: 12px;--padding-end: 12px}ion-button.md:not(.md3-disabled).button-small::part(native){height:32px}ion-button.md:not(.md3-disabled).button-small.button-has-icon-only{width:32px;height:32px}ion-button.md:not(.md3-disabled).button-small.button-has-icon-only::part(native){width:32px;height:32px}ion-button.md:not(.md3-disabled).button-small ion-icon{font-size:20px}ion-button.md:not(.md3-disabled).button-small ion-icon[slot=start]{margin-inline-start:0;margin-inline-end:4px}ion-button.md:not(.md3-disabled).button-small ion-icon[slot=end]{margin-inline-start:4px;margin-inline-end:0}ion-button.md:not(.md3-disabled).button-large{--padding-start: 24px;--padding-end: 24px}ion-button.md:not(.md3-disabled).button-large::part(native){height:56px}ion-button.md:not(.md3-disabled).button-large.button-has-icon-only{width:56px;height:56px}ion-button.md:not(.md3-disabled).button-large.button-has-icon-only::part(native){width:56px;height:56px}ion-button.md:not(.md3-disabled).button-large ion-icon{font-size:24px}ion-button.md:not(.md3-disabled).button-large ion-icon[slot=start]{margin-inline-start:0;margin-inline-end:8px}ion-button.md:not(.md3-disabled).button-large ion-icon[slot=end]{margin-inline-start:8px;margin-inline-end:0}ion-button.md:not(.md3-disabled).button-has-icon-only::part(native){width:40px;height:40px}ion-button.md:not(.md3-disabled).button-has-icon-only{--padding-start: 0;--padding-end: 0}ion-button.md:not(.md3-disabled).button-square{--border-radius: 8px}ion-button.md:not(.md3-disabled).button-square.button-square{--border-radius: 12px}ion-back-button.md:not(.md3-disabled){--border-radius: 999px;--min-height: 40px;--padding-start: 16px;--padding-end: 16px}ion-card.md:not(.md3-disabled){border-radius:12px;box-shadow:var(--token-elevation-1)}ion-card.md:not(.md3-disabled) ion-list ion-item{--padding-start: 0}ion-chip.md:not(.md3-disabled){padding-inline-start:16px;padding-inline-end:16px;border-radius:8px}ion-chip.md:not(.md3-disabled) ion-icon{font-size:18px}ion-chip.md:not(.md3-disabled) ion-icon:first-child{margin-inline-start:-8px;margin-inline-end:8px}ion-chip.md:not(.md3-disabled) ion-icon:last-child{margin-inline-start:8px;margin-inline-end:-8px}ion-fab.md:not(.md3-disabled) ion-fab-button{width:56px;height:56px;--border-radius: 16px;--transition: border-radius var(--token-expressive-fast-special);--box-shadow: var(--token-elevation-3)}ion-fab.md:not(.md3-disabled) ion-fab-button ion-icon{width:24px;height:24px}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-close-active{--border-radius: 50%}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-in-list{--border-radius: 50%}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-small{width:40px;height:40px;--border-radius: 12px}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-small.fab-button-close-active{--border-radius: 50%}ion-fab.md:not(.md3-disabled):has(.fab-button-small) ion-fab-button{width:40px;height:40px}ion-list.md:not(.md3-disabled) ion-item:has(ion-input.input-fill-outline),ion-list.md:not(.md3-disabled) ion-item:has(ion-textarea.textarea-fill-outline),ion-list.md:not(.md3-disabled) ion-item:has(ion-select:is([helpertext]:not([helpertext=""]),[errortext]:not([errortext=""]))),ion-list.md:not(.md3-disabled) ion-item:has(ion-input .input-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty))),ion-list.md:not(.md3-disabled) ion-item:has(ion-textarea .textarea-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty))){--inner-border-width: 0;--inner-padding-bottom: 4px}ion-list.md:not(.md3-disabled) ion-item ion-input .input-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty)))),ion-list.md:not(.md3-disabled) ion-item ion-textarea .textarea-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty)))){display:none}ion-list.md:not(.md3-disabled):not(.list-inset){padding-top:0;padding-bottom:0}ion-list.md:not(.md3-disabled).list-inset{background:rgba(0,0,0,0)}ion-list.md:not(.md3-disabled).list-inset ion-list-header{display:flex;align-items:center}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-label{font-size:.9rem;margin:8px 4px 4px}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-label:not(.ion-color){color:var(--ion-color-medium-tint)}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-button{margin-top:8px}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-note{font-size:.9rem;margin:8px 16px 4px 0}ion-list.md:not(.md3-disabled).list-inset ion-item-group.item-group-header>ion-item>ion-label{width:100%;text-align:center;padding:32px 16px 16px;transform:translateX(5px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group.item-group-header>ion-item>ion-label ion-header.header-collapse-condense>ion-toolbar{--min-height: 0;visibility:hidden}ion-list.md:not(.md3-disabled).list-inset ion-item-group.item-group-header>ion-item>ion-label ion-icon{font-size:2.8rem;border-radius:20%;padding:6px}ion-list.md:not(.md3-disabled).list-inset ion-item-group.item-group-header>ion-item>ion-label ion-icon:not(.ion-color){color:#fff}ion-list.md:not(.md3-disabled).list-inset ion-item-group.item-group-header>ion-item>ion-label h2{font-size:1.2rem;font-weight:bold;margin-top:8px}ion-list.md:not(.md3-disabled).list-inset ion-item-group.item-group-header>ion-item>ion-label ion-text{font-size:.9rem}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group){display:block;border-radius:16px;overflow:hidden}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top){display:flex;flex-direction:column;border-radius:0;overflow:visible}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>.radio-group-top{order:1;font-size:.9rem;padding-block-start:8px}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>ion-item:first-of-type{--border-radius: 16px 16px 0 0}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>ion-item:last-of-type{--border-radius: 0 0 16px 16px}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:first-of-type){margin-top:16px}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) 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-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-label,ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-note{width:auto;align-self:flex-start}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-label{margin:0;font-weight:500;font-size:1.15rem;line-height:.9rem}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-note{font-size:.85rem}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-text[slot=end]{padding-left:8px}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item.item-disabled{--detail-icon-opacity: 0.1;opacity:1}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item.item-disabled>*{opacity:.4}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-button[slot=end].ion-align-self-end{transform:translateY(-7px)}ion-list.md:not(.md3-disabled).list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-button[slot=end] ion-icon[slot=icon-only]{font-size:1.2rem;transform:translateY(4px)}ion-list.md:not(.md3-disabled).list-inset>ion-note{--color: var(--ion-color-medium-tint);font-size:.9rem;display:block;margin:8px calc(var(--ion-safe-area-right, 0) + 8px) 8px calc(var(--ion-safe-area-left, 0) + 8px)}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item{--border-color: var(--ion-color-light, #fff)}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-note[slot=end]{font-size:max(14px,1rem)}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:not(:last-of-type):not(.item-lines-inset):not(.item-lines-none){--border-radius: 4px;--border-width: 0px 0px 2px 0px;--inner-border-width: 0;--show-inset-highlight: 0;--show-full-highlight: 1}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(:is(ion-input.input-fill-outline,ion-textarea.textarea-fill-outline)):not(.item-lines-inset):not(.item-lines-none),ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(:is(ion-input.input-fill-outline,ion-textarea.textarea-fill-outline)):is(.item-lines-inset,.item-lines-none){--border-width: 0;--inner-padding-bottom: 4px}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(:is(ion-input.input-fill-outline,ion-textarea.textarea-fill-outline)):not(.item-lines-inset):not(.item-lines-none) ion-input,ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(:is(ion-input.input-fill-outline,ion-textarea.textarea-fill-outline)):not(.item-lines-inset):not(.item-lines-none) ion-textarea,ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(:is(ion-input.input-fill-outline,ion-textarea.textarea-fill-outline)):is(.item-lines-inset,.item-lines-none) ion-input,ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(:is(ion-input.input-fill-outline,ion-textarea.textarea-fill-outline)):is(.item-lines-inset,.item-lines-none) ion-textarea{margin:16px 0 12px}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating]{transition:transform 200ms ease}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating]:not(.label-floating){transform:translateY(-7px)}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating].label-floating{transform:translateY(-4px)}ion-list.md:not(.md3-disabled).list-inset ion-radio-group:has(>.radio-group-top) ion-item:first-of-type:not(.item-lines-inset):not(.item-lines-none){--border-radius: 16px 16px 0 0}ion-list-header.md:not(.md3-disabled){padding-left:calc(var(--ion-safe-area-left, 0px) + 4px)}ion-loading.md:not(.md3-disabled) .loading-wrapper{border-radius:24px;box-shadow:var(--token-elevation-3)}ion-modal.md:not(.md3-disabled){--box-shadow: var(--token-elevation-3)}@media only screen and (min-width: 768px)and (min-height: 600px){ion-modal.md:not(.md3-disabled){--border-radius: 24px}}ion-modal.md:not(.md3-disabled) ion-toolbar{--min-height: 64px}ion-modal.md:not(.md3-disabled) ion-toolbar:first-of-type{padding-top:calc(var(--ion-safe-area-top, 0) + 6px)}ion-modal.md:not(.md3-disabled) ion-toolbar{padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left)}ion-modal.md:not(.md3-disabled) ion-toolbar ion-button.button-has-icon-only::part(native){width:48px;height:48px}ion-modal.md:not(.md3-disabled) ion-toolbar ion-button.button-has-icon-only ion-icon[name=close-outline]{font-size:2rem}ion-modal.md:not(.md3-disabled)::part(handle){width:80px}ion-modal.md:not(.md3-disabled).modal-sheet{--border-radius: 30px}ion-modal.md:not(.md3-disabled).modal-sheet ion-toolbar:first-of-type{padding-top:6px}ion-popover.md:not(.md3-disabled){--box-shadow: var(--token-elevation-3)}ion-popover.md:not(.md3-disabled)::part(content){border-radius:12px}ion-popover.md:not(.md3-disabled) ion-select-popover ion-list{padding:0}ion-range.md:not(.md3-disabled){--height: 56px;--bar-height: 16px;--bar-border-radius: 8px;--knob-background: var(--ion-color-primary);--knob-box-shadow: none;--knob-border-radius: 8px;--knob-size: 44px;--pin-background: var(--ion-background-color-step-700, #4a4458)}ion-range.md:not(.md3-disabled).range-has-pin{padding-top:2.6rem}ion-range.md:not(.md3-disabled)::part(knob){width:4px;transition:width var(--token-expressive-fast-effects),transform var(--token-expressive-fast-effects),outline var(--token-expressive-fast-effects);will-change:width;transform:translateX(calc(var(--knob-size) / 2 - 2px))}ion-range.md:not(.md3-disabled)::part(knob):before{content:none}ion-range.md:not(.md3-disabled).ion-color{--knob-background: var(--ion-color-base, var(--ion-color-primary))}ion-range.md:not(.md3-disabled)::part(tick),ion-range.md:not(.md3-disabled)::part(tick-active){--bar-height: 4px}ion-range.md:not(.md3-disabled):not(.range-dual-knobs).range-pressed::part(knob){width:2px;transform:translateX(calc(var(--knob-size) / 2 - 1px))}ion-range.md:not(.md3-disabled):not(.range-dual-knobs):not(.range-value-min):not(.range-value-max)::part(knob){outline:6px solid var(--ion-background-color, #ffffff)}ion-range.md:not(.md3-disabled):not(.range-dual-knobs).range-pressed:not(.range-value-min):not(.range-value-max)::part(knob){outline:7px solid var(--ion-background-color, #ffffff)}ion-range.md:not(.md3-disabled):not(.range-dual-knobs):not(.range-value-max)::part(bar-active){border-top-right-radius:calc(var(--knob-border-radius)/2);border-bottom-right-radius:calc(var(--knob-border-radius)/2);margin-right:6px}ion-range.md:not(.md3-disabled):not(.range-dual-knobs).range-value-min::part(bar){border-top-left-radius:calc(var(--knob-border-radius)/2);border-bottom-left-radius:calc(var(--knob-border-radius)/2);width:calc(100% - 6px);right:0}ion-range.md:not(.md3-disabled):not(.range-dual-knobs).range-value-max::part(bar),ion-range.md:not(.md3-disabled):not(.range-dual-knobs).range-value-max::part(bar-active){border-top-right-radius:calc(var(--knob-border-radius)/2);border-bottom-right-radius:calc(var(--knob-border-radius)/2);width:calc(100% - 6px);left:0}ion-range.md:not(.md3-disabled).range-dual-knobs.range-pressed-a::part(knob-a),ion-range.md:not(.md3-disabled).range-dual-knobs.range-pressed-b::part(knob-b){width:2px;transform:translateX(calc(var(--knob-size) / 2 - 1px))}ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-min::part(bar),ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-min::part(bar-active){border-top-left-radius:calc(var(--knob-border-radius)/2);border-bottom-left-radius:calc(var(--knob-border-radius)/2);margin-left:6px}ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-min::part(bar){width:calc(100% - 6px)}ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-max::part(bar),ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-max::part(bar-active){border-top-right-radius:calc(var(--knob-border-radius)/2);border-bottom-right-radius:calc(var(--knob-border-radius)/2);margin-right:6px}ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-max::part(bar){width:calc(100% - 6px)}ion-range.md:not(.md3-disabled).range-dual-knobs.range-value-min.range-value-max::part(bar){width:calc(100% - 12px)}ion-range.md:not(.md3-disabled).range-dual-knobs:not(.range-value-min)::part(knob-lower),ion-range.md:not(.md3-disabled).range-dual-knobs:not(.range-value-max)::part(knob-upper){outline:6px solid var(--ion-background-color, #ffffff)}ion-range.md:not(.md3-disabled).range-dual-knobs.range-pressed:not(.range-value-min)::part(knob-lower),ion-range.md:not(.md3-disabled).range-dual-knobs.range-pressed:not(.range-value-max)::part(knob-upper){outline:7px solid var(--ion-background-color, #ffffff)}ion-range.md:not(.md3-disabled)::part(pin){padding:16px;min-width:36px;top:10px}ion-range.md:not(.md3-disabled)::part(pin):before{content:none}ion-searchbar.md:not(.md3-disabled){--box-shadow: none;--border-radius: 999px;--background: rgba(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.08);--color: rgb(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)));--icon-color: rgb(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)))}ion-segment.md:not(.md3-disabled){border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))))}ion-tab-bar.md:not(.md3-disabled){height:62px}ion-tab-bar.md:not(.md3-disabled) ion-tab-button{--ripple-color: transparent;--color-selected: var(--ion-color-contrast, var(--ion-color-primary-shade))}ion-tab-bar.md:not(.md3-disabled) ion-tab-button ion-icon{padding:4px 16px;margin-top:6px;border-radius:16px;width:24px;height:24px}ion-tab-bar.md:not(.md3-disabled) ion-tab-button ion-icon::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(var(--ion-color-contrast-rgb, var(--ion-color-primary-rgb, 2, 137, 255)), 0.2);transform:scaleX(0);transition:transform var(--token-expressive-fast-effects);z-index:-1}ion-tab-bar.md:not(.md3-disabled) ion-tab-button ion-label{margin-top:2px;margin-bottom:6px}ion-tab-bar.md:not(.md3-disabled) ion-tab-button.tab-selected ion-icon::before{transform:scaleX(1)}ion-toast.md:not(.md3-disabled){--box-shadow: var(--token-elevation-3);--border-radius: 8px}ion-toggle.md:not(.md3-disabled){--handle-width: 24px;--handle-height: 24px;--handle-border-radius: 16px;--border-radius: 16px;--handle-box-shadow: none;--handle-spacing: 2px;--handle-transition: transform var(--token-expressive-default-special), background-color var(--token-expressive-default-effects);--track-background: var(--ion-background-color-step-100, #e6e0e9);--handle-background: var(--ion-text-color-step-450, #79747e)}ion-toggle.md:not(.md3-disabled)::part(track){box-sizing:border-box;min-height:32px;min-width:52px;border:2px solid var(--ion-text-color-step-450, #79747e)}ion-toggle.md:not(.md3-disabled).toggle-checked{--track-background-checked: var(--ion-color-base);--handle-background-checked: var(--ion-color-contrast)}ion-toggle.md:not(.md3-disabled).toggle-checked::part(track){border-color:var(--ion-color-base)}ion-toggle.md:not(.md3-disabled):not(.ion-color).toggle-checked{--track-background-checked: var(--ion-color-primary);--handle-background-checked: var(--ion-color-primary-contrast)}ion-toggle.md:not(.md3-disabled):not(.ion-color).toggle-checked::part(track){border-color:var(--ion-color-primary)}ion-header.md:not(.md3-disabled),ion-footer.md:not(.md3-disabled){box-shadow:none}ion-toolbar.md:not(.md3-disabled) ion-buttons[slot=start],ion-toolbar.md:not(.md3-disabled) ion-back-button[slot=start]{margin-left:16px}ion-toolbar.md:not(.md3-disabled) ion-buttons[slot=end],ion-toolbar.md:not(.md3-disabled) ion-back-button[slot=end]{margin-right:16px}ion-toolbar.md:not(.md3-disabled) ion-buttons>ion-back-button{margin-left:0;margin-right:0}ion-toolbar.md:not(.md3-disabled):has(>[slot=start]) ion-title{padding-inline-start:4px}ion-toolbar.md:not(.md3-disabled):not(:has(>[slot=start])) ion-title{padding-inline-start:28px}ion-toolbar.md:not(.md3-disabled).toolbar-searchbar:not(:has(>[slot=start])){--padding-start: 10px}ion-toolbar.md:not(.md3-disabled).toolbar-searchbar:not(:has(>[slot=end])){--padding-end: 10px}ion-toolbar.md:not(.md3-disabled) ion-back-button.back-button-has-icon-only{--icon-font-size: 24px;--min-width: 48px;--min-height: 48px;--padding-top: 0;--padding-end: 0;--padding-bottom: 0;--padding-start: 0}ion-toolbar.md:not(.md3-disabled) ion-button.button-has-icon-only:not(.button-small):not(.button-large)::part(native){width:48px;height:48px}ion-toolbar.md:not(.md3-disabled) ion-button.button-has-icon-only:not(.button-small):not(.button-large).button-solid::part(native){width:40px;height:40px}

package/docs/eslint.md

@@ -0,0 +1,73 @@
+---
+title: Keep lists consistent with ESLint
+---
+
+Catch missing list groups before they reach the screen. In Ionic Angular apps, `@rdlabo/eslint-plugin-rules` checks the markup used by Material Design 3.
+
+## Enable the list check
+
+This setup targets Ionic Angular 9 with Angular / Angular ESLint 21–22. Install plugin 22 in an app that already has Angular ESLint configured:
+
+```sh
+npm install --save-dev @rdlabo/eslint-plugin-rules@22
+```
+
+Add the plugin to the existing HTML config in `eslint.config.mjs` (or the equivalent CommonJS config). Keep `angular.processInlineTemplates` on the TypeScript config so inline templates are checked too:
+
+```js
+import tseslint from 'typescript-eslint';
+import angular from 'angular-eslint';
+import rdlabo from '@rdlabo/eslint-plugin-rules';
+
+export default tseslint.config(
+  {
+    files: ['**/*.ts'],
+    languageOptions: { parser: tseslint.parser },
+    processor: angular.processInlineTemplates,
+  },
+  {
+    files: ['**/*.html'],
+    languageOptions: { parser: angular.templateParser },
+    plugins: { '@rdlabo/rules': rdlabo },
+    rules: {
+      '@rdlabo/rules/require-ion-item-group': 'error',
+    },
+  },
+);
+```
+
+Merge these entries into your existing configuration to retain its other checks. Already using `rdlabo.configs.recommended`? It includes this rule.
+
+## See what it catches
+
+This template is reported:
+
+```html
+<ion-list [inset]="true">
+  <ion-item>Notifications</ion-item>
+</ion-list>
+```
+
+Group the items and import `IonItemGroup` in the standalone component:
+
+```html
+<ion-list [inset]="true">
+  <ion-item-group>
+    <ion-item>Notifications</ion-item>
+  </ion-item-group>
+</ion-list>
+```
+
+The rule checks all `ion-list` elements, including non-inset lists. Radio, reorder, and accordion groups are also supported. It checks Angular templates; it does not inspect React or Vue templates.
+
+See [Using ion-item-group](https://docs.rdlabo.dev/projects/ionic-theme-md3/docs/using-ion-item-group) for layout examples and the [rule reference](https://docs.rdlabo.dev/projects/eslint-plugin-rules/docs/rules/require-ion-item-group) for supported structures and automatic fixes.
+
+## Keep it checked
+
+Run this locally and in CI after installing dependencies:
+
+```sh
+npx eslint 'src/**/*.{ts,html}' --max-warnings 0
+```
+
+If your Angular project uses a different source directory, adjust the path. Keep a visual check for spacing, colors, and transitions; this rule checks list structure.

package/docs/using-ion-item-group.md

@@ -20,9 +20,7 @@ The examples use framework-neutral Web Component markup. In React or Vue, use th
 
 No wrapper is required for lists that do not use `inset="true"`.
 
-## Checking Angular templates
-
-In Ionic Angular applications, the [`@rdlabo/rules/require-ion-item-group`](https://docs.rdlabo.dev/projects/eslint-plugin-rules/docs/rules/require-ion-item-group) ESLint rule checks that each `ion-item` in an `ion-list` is wrapped by the group component that matches its behavior. The rule is included in the recommended preset and can automatically fix some violations.
+[Check list structure with ESLint](https://docs.rdlabo.dev/projects/ionic-theme-md3/docs/eslint).
 
 ## Why the wrapper is required
 
@@ -34,4 +32,4 @@ The theme therefore:
 - applies the item surface to `ion-item-group`; and
 - leaves `ion-list-header` outside that surface.
 
-For two-line items and section-header groups, see [Special markup](./special-markup.md).
+For two-line items and section-header groups, see [Special markup](https://docs.rdlabo.dev/projects/ionic-theme-md3/docs/special-markup).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-md3",
   "private": false,
-  "version": "9.1.0",
+  "version": "9.1.1-beta.pr45.sha4ac3ec97bfb1",
   "description": "Material Design 3 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -22,7 +22,7 @@
   ],
   "scripts": {
     "build": "npm run build:css && npm run build:ts",
-    "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map",
+    "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map --pkg-importer=node",
     "build:ts": "tsc",
     "build:demo": "npm run build && cd demo && npm install && npm run build -- --configuration=production",
     "lint": "prettier --check \"./**/*.{scss,ts}\" &&  prettier --parser angular --check \"./**/*.html\"",
@@ -47,6 +47,9 @@
     "url": "https://github.com/rdlabo-dev/ionic-theme-md3/issues"
   },
   "homepage": "https://docs.rdlabo.dev/projects/ionic-theme-md3",
+  "dependencies": {
+    "@rdlabo/ionic-theme-utils": "git+ssh://git@github.com/rdlabo-dev/ionic-theme-utils.git#main"
+  },
   "devDependencies": {
     "@ionic/angular": "^9.0.0",
     "husky": "^9.1.7",

package/src/styles/components/ion-list.scss

@@ -1,4 +1,4 @@
-@use '../utils/structured-list';
+@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
 
 ion-list.md:not(.md3-disabled) {
   @include structured-list.support-text;

package/src/styles/components/ion-toolbar.scss

@@ -3,8 +3,7 @@ ion-footer.md:not(.md3-disabled) {
   box-shadow: none;
 }
 
-ion-header.md:not(.md3-disabled),
-ion-footer.md:not(.md3-disabled) {
+ion-toolbar.md:not(.md3-disabled) {
   ion-buttons[slot='start'],
   ion-back-button[slot='start'] {
     margin-left: 16px;
@@ -14,22 +13,25 @@ ion-footer.md:not(.md3-disabled) {
     margin-right: 16px;
   }
   /* fallback ion-buttons[slot=end], ion-back-button[slot=end] */
-  ion-toolbar ion-buttons > ion-back-button {
+  ion-buttons > ion-back-button {
     margin-left: 0;
     margin-right: 0;
   }
-}
 
-ion-header.md:not(.md3-disabled) ion-toolbar {
   &:has(> [slot='start']) ion-title {
     padding-inline-start: 4px;
   }
   &:not(:has(> [slot='start'])) ion-title {
     padding-inline-start: calc(16px + 12px);
   }
-}
 
-ion-toolbar.md:not(.md3-disabled) {
+  &.toolbar-searchbar:not(:has(> [slot='start'])) {
+    --padding-start: 10px;
+  }
+  &.toolbar-searchbar:not(:has(> [slot='end'])) {
+    --padding-end: 10px;
+  }
+
   ion-back-button.back-button-has-icon-only {
     --icon-font-size: 24px;
     --min-width: 48px;

package/dist/css/utils/structured-list.css

@@ -1 +0,0 @@
-

package/src/styles/utils/structured-list.scss

@@ -1,170 +0,0 @@
-$groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
-
-@mixin support-text() {
-  ion-item {
-    &:has(ion-input.input-fill-outline),
-    &:has(ion-textarea.textarea-fill-outline),
-    &:has(ion-select:is([helpertext]:not([helpertext='']), [errortext]:not([errortext='']))),
-    &:has(ion-input .input-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty))),
-    &:has(ion-textarea .textarea-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty))) {
-      --inner-border-width: 0;
-      --inner-padding-bottom: 4px;
-    }
-
-    ion-input .input-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))),
-    ion-textarea .textarea-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))) {
-      display: none;
-    }
-  }
-}
-
-@mixin layout($outer-note-inset, $group-border-radius) {
-  background: transparent;
-
-  ion-list-header {
-    display: flex;
-    align-items: center;
-
-    ion-label {
-      font-size: 0.9rem;
-      margin: 8px 4px 4px;
-
-      &:not(.ion-color) {
-        color: var(--ion-color-medium-tint);
-      }
-    }
-
-    ion-button {
-      margin-top: 8px;
-    }
-
-    ion-note {
-      font-size: 0.9rem;
-      margin: 8px 16px 4px 0;
-    }
-  }
-
-  ion-item-group.item-group-header {
-    & > ion-item > ion-label {
-      width: 100%;
-      text-align: center;
-      padding: 32px 16px 16px;
-      transform: translateX(5px);
-
-      /**
-       * ion-header.header-collapse-condenseを使って、スクロールによってHeaderを変化させるトリック
-       */
-      ion-header.header-collapse-condense > ion-toolbar {
-        --min-height: 0;
-        visibility: hidden;
-      }
-
-      ion-icon {
-        font-size: 2.8rem;
-        border-radius: 20%;
-        padding: 6px;
-
-        &:not(.ion-color) {
-          color: #ffffff;
-        }
-      }
-
-      h2 {
-        font-size: 1.2rem;
-        font-weight: bold;
-        margin-top: 8px;
-      }
-
-      ion-text {
-        font-size: 0.9rem;
-      }
-    }
-  }
-
-  > :is(#{$groups}) {
-    display: block;
-    border-radius: $group-border-radius;
-    overflow: hidden;
-
-    &:has(> .radio-group-top) {
-      display: flex;
-      flex-direction: column;
-      border-radius: 0;
-      overflow: visible;
-
-      > .radio-group-top {
-        order: 1;
-        font-size: 0.9rem;
-        padding-block-start: 8px;
-      }
-
-      > ion-item:first-of-type {
-        --border-radius: #{$group-border-radius} #{$group-border-radius} 0 0;
-      }
-
-      > ion-item:last-of-type {
-        --border-radius: 0 0 #{$group-border-radius} #{$group-border-radius};
-      }
-    }
-
-    &:not(:first-of-type) {
-      margin-top: 16px;
-    }
-
-    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;
-      }
-
-      &.item-disabled {
-        --detail-icon-opacity: 0.1;
-        opacity: 1;
-
-        & > * {
-          opacity: 0.4;
-        }
-      }
-
-      ion-button[slot='end'] {
-        &.ion-align-self-end {
-          transform: translateY(-7px);
-        }
-        ion-icon[slot='icon-only'] {
-          font-size: 1.2rem;
-          transform: translateY(4px);
-        }
-      }
-    }
-  }
-
-  & > ion-note {
-    --color: var(--ion-color-medium-tint);
-    font-size: 0.9rem;
-    display: block;
-    margin: 8px calc(var(--ion-safe-area-right, 0) + $outer-note-inset) 8px calc(var(--ion-safe-area-left, 0) + $outer-note-inset);
-  }
-}