@rdlabo/ionic-theme-md3 9.0.0 → 9.0.2-next.shaf6166e9aa8e2

package/README.md

@@ -2,8 +2,12 @@
 
 A CSS/JS theme library that applies Material Design 3 design system to Ionic applications.
 
+<!-- rdlabo-docs-pick -->
+
 ![Material Design 3 themed Ionic screens with updated components and navigation](https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-md3/v2.0.0/screenshots/md3.png)
 
+<!-- /rdlabo-docs-pick -->
+
 DEMO is here: https://ionic-theme-md3.rdlabo.dev/
 
 ## Overview
@@ -131,10 +135,10 @@ createApp(App)
 
 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.
 
-- [Special markup](./docs/special-markup.md) — opt-in component combinations used by the demo.
-- [Using ion-item-group](./docs/using-ion-item-group.md) — 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.
+- [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.
 
-- [Migration](./docs/migration.md) — changes required when updating theme markup.
+- [Migration](https://docs.rdlabo.dev/projects/ionic-theme-md3/docs/migration) — changes required when updating theme markup.
 
 <!-- rdlabo-docs-omit -->
 
@@ -179,9 +183,28 @@ npm run test:e2e:debug
 npm run test:e2e:update
 ```
 
+### Prerelease channels
+
+An open, non-draft pull request can be published to the npm `beta` dist-tag after its `Lint`, `E2E Screenshot Tests Pull Request`, and `Package Candidate` workflows pass. A repository administrator must add a comment whose entire body is:
+
+```text
+/beta
+```
+
+The request authorizes only the pull request head SHA that existed when the comment was added. The workflow revalidates the administrator permission and head SHA immediately before publishing. Any new commit invalidates the request, regardless of its author; the new SHA must pass CI and receive a fresh administrator `/beta` comment. Fork pull requests are supported. Pull requests that change a release-gating workflow cannot be beta-published until those workflow changes land on `main`.
+
+Beta versions use `<base>-beta.pr<PR number>.sha<12-character SHA>`. The pull request receives a comment containing the immutable version and exact `npm install` command.
+
+After a commit reaches `main`, it is automatically published to the npm `next` dist-tag only when `Lint`, `E2E Screenshot Tests`, and `Package Candidate` all succeed for that exact commit and it is still the current `main` head. Main candidates use `<base>-next.sha<12-character SHA>`. When the commit is associated with a merged pull request, that pull request receives the exact install command.
+
+Candidate code is built in a read-only workflow without npm publishing credentials. The privileged release workflow never checks out or executes pull request code; it revalidates the source workflow and package identity, then publishes only the immutable packed artifact with lifecycle scripts disabled.
+
+Neither `beta` nor `next` publishing changes the npm `latest` dist-tag. Only an explicit stable `vX.Y.Z` release tag publishes to `latest`; prerelease version tags publish to `next`.
+
 <!-- /rdlabo-docs-omit -->
 
 <!-- rdlabo-docs-omit -->
+
 ## Maintainers
 
 - [rdlabo](https://rdlabo.dev/)

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

@@ -1 +1 @@
-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;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;color:#fff;border-radius:20%;padding:6px}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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item:has(ion-input.input-fill-outline),ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item:has(ion-textarea.textarea-fill-outline),ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item:has(ion-input .input-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty))),ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item:has(ion-textarea .textarea-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty))){--inner-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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item ion-input .input-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty)))),ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item ion-textarea .textarea-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty)))){display:none}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item.item-disabled{opacity:1}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item.item-disabled::part(detail-icon){opacity:.1}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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 !important;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 ion-item-group>ion-item{--border-color: var(--ion-color-light, #fff)}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item ion-note[slot=end]{font-size:max(14px,1rem)}ion-list.md:not(.md3-disabled).list-inset ion-item-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 ion-item-group>ion-item:has(ion-input.input-fill-outline),ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item:has(ion-textarea.textarea-fill-outline){--border-width: 0 !important;--inner-padding-bottom: 4px}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item:has(ion-input.input-fill-outline) ion-input,ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item:has(ion-input.input-fill-outline) ion-textarea,ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item:has(ion-textarea.textarea-fill-outline) ion-input,ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item:has(ion-textarea.textarea-fill-outline) ion-textarea{margin:16px 0 12px}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item>ion-input[labelplacement=floating]{transition:transform 200ms ease}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item>ion-input[labelplacement=floating]:not(.label-floating){transform:translateY(-7px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item>ion-input[labelplacement=floating].label-floating{transform:translateY(-4px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group,ion-list.md:not(.md3-disabled).list-inset ion-reorder-group,ion-list.md:not(.md3-disabled).list-inset ion-accordion-group,ion-list.md:not(.md3-disabled).list-inset ion-radio-group{border-radius:16px;overflow:hidden}ion-list-header.md:not(.md3-disabled){padding-left:calc(var(--ion-safe-area-left, 0px) + 4px)}
+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;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;color:#fff;border-radius:20%;padding:6px}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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item.item-disabled{opacity:1}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item.item-disabled::part(detail-icon){opacity:.1}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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 !important;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(ion-input.input-fill-outline),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-textarea.textarea-fill-outline){--border-width: 0 !important;--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(ion-input.input-fill-outline) 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(ion-input.input-fill-outline) 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(ion-textarea.textarea-fill-outline) 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(ion-textarea.textarea-fill-outline) 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)}

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}ion-toolbar.md:not(.md3-disabled) ion-back-button.back-button-has-icon-only::part(native){width:48px;height:48px;padding: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-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}ion-toolbar.md:not(.md3-disabled) ion-back-button.back-button-has-icon-only::part(native){width:48px;height:48px;padding: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 !important}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;--padding-start: 16px;--padding-end: 16px}ion-back-button.md:not(.md3-disabled)::part(native){min-height:40px}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):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;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;color:#fff;border-radius:20%;padding:6px}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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item:has(ion-input.input-fill-outline),ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item:has(ion-textarea.textarea-fill-outline),ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item:has(ion-input .input-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty))),ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item:has(ion-textarea .textarea-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty))){--inner-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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item ion-input .input-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty)))),ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item ion-textarea .textarea-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty)))){display:none}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item.item-disabled{opacity:1}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item.item-disabled::part(detail-icon){opacity:.1}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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 !important;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 ion-item-group>ion-item{--border-color: var(--ion-color-light, #fff)}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item ion-note[slot=end]{font-size:max(14px,1rem)}ion-list.md:not(.md3-disabled).list-inset ion-item-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 ion-item-group>ion-item:has(ion-input.input-fill-outline),ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item:has(ion-textarea.textarea-fill-outline){--border-width: 0 !important;--inner-padding-bottom: 4px}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item:has(ion-input.input-fill-outline) ion-input,ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item:has(ion-input.input-fill-outline) ion-textarea,ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item:has(ion-textarea.textarea-fill-outline) ion-input,ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item:has(ion-textarea.textarea-fill-outline) ion-textarea{margin:16px 0 12px}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item>ion-input[labelplacement=floating]{transition:transform 200ms ease}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item>ion-input[labelplacement=floating]:not(.label-floating){transform:translateY(-7px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item>ion-input[labelplacement=floating].label-floating{transform:translateY(-4px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group,ion-list.md:not(.md3-disabled).list-inset ion-reorder-group,ion-list.md:not(.md3-disabled).list-inset ion-accordion-group,ion-list.md:not(.md3-disabled).list-inset ion-radio-group{border-radius:16px;overflow:hidden}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: transparent;--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;height:var(--knob-size);background:var(--ion-color-primary);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::part(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)}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);background:var(--ion-background-color-step-100, #e6e0e9)}ion-toggle.md:not(.md3-disabled).toggle-checked::part(track){border-color:var(--ion-color-base);background:var(--ion-color-base)}ion-toggle.md:not(.md3-disabled)::part(handle){background:var(--ion-text-color-step-450, #79747e)}ion-toggle.md:not(.md3-disabled).toggle-checked::part(handle){background:var(--ion-color-contrast)}ion-toggle.md:not(.md3-disabled):not(.ion-color).toggle-checked::part(track){border-color:var(--ion-color-primary);background:var(--ion-color-primary)}ion-toggle.md:not(.md3-disabled):not(.ion-color).toggle-checked::part(handle){background:var(--ion-color-primary-contrast)}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}ion-toolbar.md:not(.md3-disabled) ion-back-button.back-button-has-icon-only::part(native){width:48px;height:48px;padding: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 !important}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;--padding-start: 16px;--padding-end: 16px}ion-back-button.md:not(.md3-disabled)::part(native){min-height:40px}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;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;color:#fff;border-radius:20%;padding:6px}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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item.item-disabled{opacity:1}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group)) ion-item.item-disabled::part(detail-icon){opacity:.1}ion-list.md:not(.md3-disabled).list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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):not(:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) :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 !important;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(ion-input.input-fill-outline),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-textarea.textarea-fill-outline){--border-width: 0 !important;--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(ion-input.input-fill-outline) 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(ion-input.input-fill-outline) 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(ion-textarea.textarea-fill-outline) 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(ion-textarea.textarea-fill-outline) 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: transparent;--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;height:var(--knob-size);background:var(--ion-color-primary);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::part(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)}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);background:var(--ion-background-color-step-100, #e6e0e9)}ion-toggle.md:not(.md3-disabled).toggle-checked::part(track){border-color:var(--ion-color-base);background:var(--ion-color-base)}ion-toggle.md:not(.md3-disabled)::part(handle){background:var(--ion-text-color-step-450, #79747e)}ion-toggle.md:not(.md3-disabled).toggle-checked::part(handle){background:var(--ion-color-contrast)}ion-toggle.md:not(.md3-disabled):not(.ion-color).toggle-checked::part(track){border-color:var(--ion-color-primary);background:var(--ion-color-primary)}ion-toggle.md:not(.md3-disabled):not(.ion-color).toggle-checked::part(handle){background:var(--ion-color-primary-contrast)}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}ion-toolbar.md:not(.md3-disabled) ion-back-button.back-button-has-icon-only::part(native){width:48px;height:48px;padding: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/e2e-testing.md

@@ -0,0 +1,51 @@
+# E2E screenshot testing
+
+This maintainer guide explains how to run the Playwright visual-regression suite for the Material Design 3 demo. The suite covers every entry declared in `demo/e2e/screenshot.spec.ts` in both light and dark modes. Overlay variants are generated from the shared arrays in `demo/src/app/overlay-types.ts`.
+
+## Run the suite
+
+Install the demo dependencies first:
+
+```bash
+cd demo
+npm install
+```
+
+Then choose the command that matches the task:
+
+```bash
+npm run test:e2e          # Run the suite
+npm run test:e2e:ui       # Open Playwright UI mode
+npm run test:e2e:debug    # Run with the Playwright debugger
+npm run test:e2e:update   # Regenerate intentional baseline changes
+```
+
+To reproduce the Linux environment used by CI, run the Docker variants from `demo/`:
+
+```bash
+npm run test:e2e:docker
+npm run test:e2e:docker:update
+```
+
+The Docker commands use the Playwright image pinned in `demo/package.json`.
+
+## Review a failure
+
+A screenshot mismatch can be a regression or an intentional visual change. Before updating a baseline:
+
+1. Inspect the actual, expected, and diff images in `demo/test-results/`.
+2. Check the affected route in both light and dark modes.
+3. Confirm that the component change is intentional.
+4. Regenerate the baseline with `npm run test:e2e:update`, or use the Docker variant when matching CI rendering.
+
+The HTML report is written to `demo/playwright-report/` and can be opened with:
+
+```bash
+npx playwright show-report
+```
+
+## Add coverage
+
+When adding a demo route or overlay variant, update `demo/e2e/screenshot.spec.ts` and regenerate the relevant baselines. Commit baseline changes only after reviewing the visual diff.
+
+Pull requests run the E2E workflow in `.github/workflows/e2e-pull_request.yml`; pushes to `main` run `.github/workflows/e2e-main.yml`.

package/docs/migration.md

@@ -0,0 +1,30 @@
+---
+title: Migration
+---
+
+# Migration
+
+Review every section newer than the version currently installed, in ascending order. For example, when upgrading from 1.x to 9.0.0, complete the 2.0.0 migration steps before reviewing 9.0.0.
+
+Each section lists only the changes that require application code or configuration updates.
+
+## Migrating to 9.0.0
+
+Version 9 aligns the theme's major version with Ionic Framework 9. It does not introduce additional breaking changes beyond those documented in the earlier migration sections.
+
+Both Ionic 8 and Ionic 9 remain supported. Version 9 requires `@ionic/core >=8.8.0 <10`.
+
+## Migrating to 2.0.0
+
+### Rename `.header-item-group` to `.item-group-header`
+
+The class for an `ion-item-group` used as a section header has been renamed for consistency with the element it modifies. Replace every occurrence of `.header-item-group` in application templates and styles.
+
+```diff
+- <ion-item-group class="header-item-group">
++ <ion-item-group class="item-group-header">
+    ...
+  </ion-item-group>
+```
+
+The old class is no longer styled by the theme. This rename applies to markup shared with `@rdlabo/ionic-theme-ios26` as well.

package/docs/special-markup.md

@@ -0,0 +1,64 @@
+---
+title: Special markup
+---
+
+# Special markup
+
+Most Ionic markup works without changes. The combinations below are explicit opt-ins and are useful when the same template also uses `@rdlabo/ionic-theme-ios26`.
+
+## Two-line inset list items
+
+Place an unslotted `ion-label` immediately alongside an unslotted `ion-note` to render a two-line item. Use `slot="end"` on `ion-note` when you want the standard trailing-note layout instead.
+
+```html preview
+<ion-list inset="true">
+  <ion-item-group>
+    <ion-item>
+      <ion-label>Network &amp; internet</ion-label>
+      <ion-note>Mobile, Wi-Fi, hotspot</ion-note>
+    </ion-item>
+  </ion-item-group>
+</ion-list>
+```
+
+## Square buttons
+
+Add `.button-square` when a button should use more squared corners. It works with text buttons and icon-only buttons.
+
+```html preview
+<ion-button class="button-square" fill="solid">Continue</ion-button>
+<ion-button class="button-square" fill="solid">
+  <ion-icon name="add" slot="icon-only"></ion-icon>
+</ion-button>
+```
+
+## Inset-list section headers
+
+Add `.item-group-header` to an `ion-item-group` to create the centered icon, title, and description used at the top of the component demo pages.
+
+This is an introductory group. Place regular list items in a separate `ion-item-group` that follows it.
+
+```html preview
+<ion-list inset="true">
+  <ion-item-group class="item-group-header">
+    <ion-item>
+      <ion-label>
+        <ion-icon name="list" style="background: var(--ion-color-primary)"></ion-icon>
+        <h2>Lists</h2>
+        <ion-text>Inset-list examples</ion-text>
+      </ion-label>
+    </ion-item>
+  </ion-item-group>
+  <ion-item-group>
+    <ion-item><ion-label>First item</ion-label></ion-item>
+  </ion-item-group>
+</ion-list>
+```
+
+## Opting out
+
+Add `.md3-disabled` to an individual Ionic component when it must retain Ionic's standard Material styling.
+
+```html preview
+<ion-button fill="solid">MD3 theme</ion-button> <ion-button class="md3-disabled" fill="solid">Standard Ionic</ion-button>
+```

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

@@ -0,0 +1,37 @@
+---
+title: Using ion-item-group
+---
+
+# Using `ion-item-group` in inset lists
+
+The MD3 theme uses the same inset-list structure as `@rdlabo/ionic-theme-ios26`, allowing one template to work across Ionic modes. When an `ion-list` uses `inset="true"`, wrap its items in `ion-item-group` and keep `ion-list-header` outside the group.
+
+The examples use framework-neutral Web Component markup. In React or Vue, use the equivalent component and property syntax.
+
+```html
+<ion-list inset="true">
+  <ion-list-header><ion-label>Connections</ion-label></ion-list-header>
+  <ion-item-group>
+    <ion-item>...</ion-item>
+    <ion-item>...</ion-item>
+  </ion-item-group>
+</ion-list>
+```
+
+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.
+
+## Why the wrapper is required
+
+The shared structure keeps `ion-list-header` separate from the item surface. This matches the iOS 26 layout while allowing MD3 to style the same markup without platform-specific templates.
+
+The theme therefore:
+
+- makes the inset `ion-list` background transparent;
+- 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).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-md3",
   "private": false,
-  "version": "9.0.0",
+  "version": "9.0.2-next.shaf6166e9aa8e2",
   "description": "Material Design 3 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -17,7 +17,8 @@
   "files": [
     "dist",
     "src",
-    "package.json"
+    "package.json",
+    "docs"
   ],
   "scripts": {
     "build": "npm run build:css && npm run build:ts",

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

@@ -1,14 +1,20 @@
 @use '../utils/structured-list';
 
-ion-list.md:not(.md3-disabled):not(.list-inset) {
-  padding-top: 0;
-  padding-bottom: 0;
+ion-list.md:not(.md3-disabled) {
+  @include structured-list.support-text;
+
+  &:not(.list-inset) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
 }
 
 ion-list.md:not(.md3-disabled).list-inset {
-  @include structured-list.layout(8px);
+  $group-border-radius: 16px;
+
+  @include structured-list.layout(8px, $group-border-radius);
 
-  ion-item-group > ion-item {
+  :is(#{structured-list.$groups}) ion-item {
     --border-color: var(--ion-color-light, #fff);
 
     ion-note[slot='end'] {
@@ -45,15 +51,9 @@ ion-list.md:not(.md3-disabled).list-inset {
       }
     }
   }
-}
 
-ion-list.md:not(.md3-disabled).list-inset {
-  ion-item-group,
-  ion-reorder-group,
-  ion-accordion-group,
-  ion-radio-group {
-    border-radius: 16px;
-    overflow: hidden;
+  ion-radio-group:has(> .radio-group-top) ion-item:first-of-type:not(.item-lines-inset):not(.item-lines-none) {
+    --border-radius: #{$group-border-radius} #{$group-border-radius} 0 0;
   }
 }
 

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

@@ -21,10 +21,10 @@ ion-footer.md:not(.md3-disabled) {
 }
 
 ion-header.md:not(.md3-disabled) ion-toolbar {
-  &:has([slot='start']) ion-title {
+  &:has(> [slot='start']) ion-title {
     padding-inline-start: 4px;
   }
-  &:not(:has([slot='start'])) ion-title {
+  &:not(:has(> [slot='start'])) ion-title {
     padding-inline-start: calc(16px + 12px);
   }
 }

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

@@ -1,4 +1,24 @@
-@mixin layout($outer-note-inset) {
+$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 {
@@ -55,26 +75,37 @@
     }
   }
 
-  $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
-
   :is(#{$groups}):not(:is(#{$groups}) :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-input.input-fill-outline),
-      &:has(ion-textarea.textarea-fill-outline),
-      &:has(ion-input .input-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty))),
-      &:has(ion-textarea .textarea-bottom > :is(.helper-text:not(:empty), .error-text: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)))),
-      ion-textarea .textarea-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty)))) {
-        display: none;
-      }
-
       &:has(> ion-label:not([slot])):has(> ion-note:not([slot])) {
         &::part(container) {
           flex-direction: column;