@rdlabo/ionic-theme-ios27 1.1.0 → 1.2.0-0

package/README.md

@@ -30,7 +30,7 @@ On Capacitor iOS, the optional, experimental [Native UI Shell](https://docs.rdla
 
 ### Follow the user's device
 
-Pair the iOS 26 and iOS 27 themes so supported Safari versions can present the design of each generation: the iOS 26 look for iOS 26 users and the iOS 27 look for iOS 27 users. The [default setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27#get-started) uses browser feature checks to select the corresponding **styles**; it does not read the iOS version. When both packages are installed, keep the **page transition** on the iOS 27 animation. On even earlier iOS versions, Ionic's default iOS appearance remains when Safari supports neither feature. In a Capacitor iOS app, Native UI Shell's UIKit material follows the installed iOS version.
+Pair the iOS 26 and iOS 27 themes so supported Safari versions can present the design of each generation: the iOS 26 look for iOS 26 users and the iOS 27 look for iOS 27 users. The [default setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/readme#get-started) uses browser feature checks to select the corresponding **styles**; it does not read the iOS version. When both packages are installed, keep the **page transition** on the iOS 27 animation. On even earlier iOS versions, Ionic's default iOS appearance remains when Safari supports neither feature. In a Capacitor iOS app, Native UI Shell's UIKit material follows the installed iOS version.
 
 ## Get started
 
@@ -121,6 +121,12 @@ Use this markup to preview the inset grouped list look. For the list structure t
 
 ## Optional setups
 
+### Support iPhone Duo without the iOS 27 theme (experimental)
+
+iPhone Duo support is experimental. It is planned for release alongside Native UI Shell. Its APIs and supported behavior may change.
+
+Import only `@rdlabo/ionic-theme-ios27/dist/css/vertical-bars.css`, add `ios-theme-vertical-bars` to `ion-app`, and call `enableVerticalControlArea()` from `@rdlabo/ionic-theme-ios27/vertical-bars` at startup. This uses Ionic's standard appearance outside the Vertical Control Area; on supported iOS, only controls moved into that area are projected natively. To read only the hinge posture — for example to adapt an `ion-split-pane` — subscribe to the plugin's `deviceLayoutChange` event without starting any runtime. iOS enables the real system rail only for apps built with Xcode 27.1 or later; older toolchains run in compatibility mode and keep the DOM-driven rail instead. See [iPhone Duo support](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo) for the complete setup.
+
 ### Use only the iOS 27 theme
 
 Install only `@rdlabo/ionic-theme-ios27` and import its styles unconditionally in your global stylesheet:
@@ -207,6 +213,7 @@ For Ionic 9 Angular, import `isPlatform` and `provideIonicAngular` from `@ionic/
 - [ESLint](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/eslint) — check list structure with ESLint rules.
 - [Features](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/features) — CSS variables, Liquid Glass, selective imports, and dark mode.
 - [Native UI Shell (Experimental)](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/native-ui-shell) — project supported Ionic controls, text, and icons into UIKit.
+- [iPhone Duo support (experimental)](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo) — vertical system rail, hinge posture, and split-pane layout; usable without the theme or the shell.
 - [Animation](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/animation) — tab, segment, and searchable effects.
 - [Migration from iOS 26](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/migration) — upgrade an existing app, including stylesheet, class, and CSS variable changes.
 - [iOS 26 migration history](https://docs.rdlabo.dev/projects/ionic-theme-ios26/docs/migration) — earlier major-version changes for the previous package.

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

@@ -1 +1 @@
-ion-list.ios:not(.ios-theme-disabled,.ios26-disabled){--ion-border-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e8e8e8))}ion-list.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:has(ion-input.input-fill-outline),ion-list.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:has(ion-textarea.textarea-fill-outline),ion-list.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:has(ion-select:is([helpertext]:not([helpertext=""]),[errortext]:not([errortext=""]))),ion-list.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:has(ion-input .input-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty))),ion-list.ios:not(.ios-theme-disabled,.ios26-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.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item ion-input .input-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty)))),ion-list.ios:not(.ios-theme-disabled,.ios26-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.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item{--background-hover-opacity: 0;--background-focused-opacity: 0}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled){background:rgba(0,0,0,0)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list-header{display:flex;align-items:center}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list-header ion-label{font-size:1rem;line-height:1.29rem;font-weight:600;margin:8px 4px 4px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list-header ion-label:not(.ion-color){color:var(--ion-color-medium-tint)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list-header ion-button{margin-top:8px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list-header ion-note{font-size:.76rem;line-height:1.06rem;font-weight:400;margin-block:8px 4px;margin-inline:0 16px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list-header ion-note:not(.ion-color){--color: var(--ion-color-medium-tint)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header{border-radius:28px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item{--inner-padding-end: 0;--inner-border-width: 0}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item::part(native){padding-inline:0}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label{width:100%;margin:0;text-align:start;white-space:normal;padding:16px 20px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label ion-header.header-collapse-condense>ion-toolbar{--min-height: 0;visibility:hidden}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label ion-icon{font-size:2.82rem;border-radius:20%;padding:6px;vertical-align:top}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label ion-icon:not(.ion-color){color:#fff}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label h2{font-size:1.29rem;font-weight:700;line-height:1.53rem;margin:20px 0 8px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label ion-text{display:block;font-size:1rem;line-height:1.29rem}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label ion-text:not(.ion-color){color:var(--ion-color-step-500, var(--ion-text-color-step-500, #808080))}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group){display:block;border-radius:28px;overflow:hidden}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>ion-item:first-of-type{--border-radius: 28px 28px 0 0}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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 28px 28px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:first-of-type){margin-top:16px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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:1rem;line-height:1.29rem}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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:.88rem;line-height:1.18rem}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-text[slot=end]{padding-inline-start:8px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item.item-disabled>*{opacity:.4}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>ion-note{margin-block:8px;margin-inline:calc(var(--ion-safe-area-left, 0) + 20px) calc(var(--ion-safe-area-right, 0) + 20px)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>ion-note:dir(rtl){margin-inline:calc(var(--ion-safe-area-right, 0) + 20px) calc(var(--ion-safe-area-left, 0) + 20px)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>ion-note{font-size:.76rem;line-height:1.06rem;font-weight:400;display:block}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>ion-note:not(.ion-color){--color: var(--ion-color-medium-tint)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-radio-group,ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-reorder-group{display:block}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-radio-group>.radio-group-top{padding-inline-start:calc(var(--ion-safe-area-left, 0) + 20px);padding-inline-end:calc(var(--ion-safe-area-right, 0) + 20px)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled):dir(rtl) ion-radio-group>.radio-group-top{padding-inline-start:calc(var(--ion-safe-area-right, 0) + 20px);padding-inline-end:calc(var(--ion-safe-area-left, 0) + 20px)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item{--inner-padding-end: 0}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item::part(native){padding-right:calc(var(--ion-safe-area-right, 0px) + 18px)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:dir(rtl)::part(native){padding-left:calc(var(--ion-safe-area-left, 0px) + 18px)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item{--min-height: 52px;font-size:1rem;line-height:1.29rem}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-label:not([slot]){font-size:inherit;line-height:inherit}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating]:not(.label-floating){transform:translateY(-2px)}ion-list.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item{--detail-icon-color: rgb(var(--ion-color-medium-rgb));--detail-icon-opacity: 0.38}ion-list.ios:not(.ios-theme-disabled,.ios26-disabled).list-inset ion-list-header ion-label:not(.ion-color){color:rgba(var(--ion-color-medium-rgb), 0.75)}ion-list.ios:not(.ios-theme-disabled,.ios26-disabled).list-inset ion-list-header ion-note:not(.ion-color),ion-list.ios:not(.ios-theme-disabled,.ios26-disabled).list-inset>ion-note:not(.ion-color){--color: rgba(var(--ion-color-medium-rgb), 0.75)}
+ion-list.ios:not(.ios-theme-disabled,.ios26-disabled){--ion-border-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e8e8e8))}ion-list.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:has(ion-input.input-fill-outline),ion-list.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:has(ion-textarea.textarea-fill-outline),ion-list.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:has(ion-select:is([helpertext]:not([helpertext=""]),[errortext]:not([errortext=""]))),ion-list.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:has(ion-input .input-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty))),ion-list.ios:not(.ios-theme-disabled,.ios26-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.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item ion-input .input-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty)))),ion-list.ios:not(.ios-theme-disabled,.ios26-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.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item{--background-hover-opacity: 0;--background-focused-opacity: 0}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled){background:rgba(0,0,0,0)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list-header{display:flex;align-items:center}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list-header ion-label{font-size:1rem;line-height:1.29rem;font-weight:600;margin:8px 4px 4px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list-header ion-label:not(.ion-color){color:var(--ion-color-medium-tint)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list-header ion-button{margin-top:8px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list-header ion-note{font-size:.76rem;line-height:1.06rem;font-weight:400;margin-block:8px 4px;margin-inline:0 16px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list-header ion-note:not(.ion-color){--color: var(--ion-color-medium-tint)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header{border-radius:28px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item{--inner-padding-end: 0;--inner-border-width: 0}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item::part(native){padding-inline:0}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label{width:100%;margin:0;text-align:start;white-space:normal;padding:16px 20px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label ion-header.header-collapse-condense>ion-toolbar{--min-height: 0;visibility:hidden}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label ion-icon{font-size:2.82rem;border-radius:20%;padding:6px;vertical-align:top}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label ion-icon:not(.ion-color){color:#fff}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label h2{font-size:1.29rem;font-weight:700;line-height:1.53rem;margin:20px 0 8px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label ion-text{display:block;font-size:1rem;line-height:1.29rem}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item-group.item-group-header>ion-item>ion-label ion-text:not(.ion-color){color:var(--ion-color-step-500, var(--ion-text-color-step-500, #808080))}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group){display:block;border-radius:28px;overflow:hidden}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>ion-item:first-of-type{--border-radius: 28px 28px 0 0}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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 28px 28px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:first-of-type){margin-top:16px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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:1rem;line-height:1.29rem}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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:.88rem;line-height:1.18rem}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-text[slot=end]{padding-inline-start:8px}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item.item-disabled>*{opacity:.4}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>ion-note{margin-block:8px;margin-inline:calc(var(--ion-safe-area-left, 0) + 20px) calc(var(--ion-safe-area-right, 0) + 20px)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>ion-note:dir(rtl){margin-inline:calc(var(--ion-safe-area-right, 0) + 20px) calc(var(--ion-safe-area-left, 0) + 20px)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>ion-note{font-size:.76rem;line-height:1.06rem;font-weight:400;display:block}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>ion-note:not(.ion-color){--color: var(--ion-color-medium-tint)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-radio-group,ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-reorder-group{display:block}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled) ion-radio-group>.radio-group-top{padding-inline-start:calc(var(--ion-safe-area-left, 0) + 20px);padding-inline-end:calc(var(--ion-safe-area-right, 0) + 20px)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled):dir(rtl) ion-radio-group>.radio-group-top{padding-inline-start:calc(var(--ion-safe-area-right, 0) + 20px);padding-inline-end:calc(var(--ion-safe-area-left, 0) + 20px)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item{--inner-padding-end: 0}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item::part(native){padding-inline-end:calc(var(--ion-safe-area-right, 0px) + 18px)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:dir(rtl)::part(native){padding-inline-end:calc(var(--ion-safe-area-left, 0px) + 18px)}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item{--min-height: 52px;font-size:1rem;line-height:1.29rem}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-label:not([slot]){font-size:inherit;line-height:inherit}ion-list.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>: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.list-inset.ios:not(.ios-theme-disabled,.ios26-disabled)>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating]:not(.label-floating){transform:translateY(-2px)}ion-list.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item{--detail-icon-color: rgb(var(--ion-color-medium-rgb));--detail-icon-opacity: 0.38}ion-list.ios:not(.ios-theme-disabled,.ios26-disabled).list-inset ion-list-header ion-label:not(.ion-color){color:rgba(var(--ion-color-medium-rgb), 0.75)}ion-list.ios:not(.ios-theme-disabled,.ios26-disabled).list-inset ion-list-header ion-note:not(.ion-color),ion-list.ios:not(.ios-theme-disabled,.ios26-disabled).list-inset>ion-note:not(.ion-color){--color: rgba(var(--ion-color-medium-rgb), 0.75)}

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

@@ -1 +1 @@
-ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled){--side-max-width: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - 60px - 12px - var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(:nth-child(5)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-header ion-toolbar{--padding-start: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px)}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-header ion-toolbar ion-title.title-default{padding-inline-start:calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-content{--padding-start: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-content ion-header ion-toolbar{--padding-start: 4px}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-footer ion-toolbar{--padding-start: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)[slot=bottom]{inset-inline-start:calc(16px + var(--ion-safe-area-left, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)[slot=bottom]:dir(rtl){inset-inline-start:calc(16px + var(--ion-safe-area-right, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-header ion-toolbar{--padding-end: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px)}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-header ion-toolbar ion-title.title-default{padding-inline-end:calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-content{--padding-end: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-content ion-header ion-toolbar{--padding-start: 4px}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-footer ion-toolbar{--padding-end: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled){--border: none;--background: rgba(var(--ios-theme-menu-background-rgb), var(--ios-theme-menu-background-opacity, 0.96));--max-width: var(--ios-theme-menu-width, var(--ios26-menu-width));position:absolute;top:0;z-index:999}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-start{inset-inline-start:0}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end{inset-inline-end:0}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled)::part(backdrop){display:none}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled)::part(container){border-radius:0;box-shadow:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list:not(.ios-theme-disabled,.ios26-disabled,.ion-color){background:rgba(0,0,0,0)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:not(.ios-theme-disabled,.ios26-disabled,.ion-color){--background: transparent}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content{--background: transparent;--ios26-content-box-shadow-rgb: transparent;--ios-theme-content-box-shadow-rgb: var(--ios26-content-box-shadow-rgb)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content::part(scroll){margin-block:calc(var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top)) + 6px) var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));margin-inline:calc(12px + var(--ion-safe-area-left, 0px)) calc(16px + var(--ion-safe-area-right, 0px))}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content:dir(rtl)::part(scroll){margin-inline:calc(12px + var(--ion-safe-area-right, 0px)) calc(16px + var(--ion-safe-area-left, 0px))}
+ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled){--side-max-width: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - 60px - 12px - var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *)):has(:nth-child(5)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-header ion-toolbar{--padding-start: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px)}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-header ion-toolbar ion-title.title-default{padding-inline-start:calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-content{--padding-start: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-content ion-header ion-toolbar{--padding-start: 4px}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-footer ion-toolbar{--padding-start: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *))[slot=bottom]{inset-inline-start:calc(16px + var(--ion-safe-area-left, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *))[slot=bottom]:dir(rtl){inset-inline-start:calc(16px + var(--ion-safe-area-right, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-header ion-toolbar{--padding-end: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px)}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-header ion-toolbar ion-title.title-default{padding-inline-end:calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-content{--padding-end: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-content ion-header ion-toolbar{--padding-start: 4px}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-footer ion-toolbar{--padding-end: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled){--border: none;--background: rgba(var(--ios-theme-menu-background-rgb), var(--ios-theme-menu-background-opacity, 0.96));--max-width: var(--ios-theme-menu-width, var(--ios26-menu-width));position:absolute;top:0;z-index:999}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-start{inset-inline-start:0}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end{inset-inline-end:0}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled)::part(backdrop){display:none}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled)::part(container){border-radius:0;box-shadow:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list:not(.ios-theme-disabled,.ios26-disabled,.ion-color){background:rgba(0,0,0,0)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:not(.ios-theme-disabled,.ios26-disabled,.ion-color){--background: transparent}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content{--background: transparent;--ios26-content-box-shadow-rgb: transparent;--ios-theme-content-box-shadow-rgb: var(--ios26-content-box-shadow-rgb)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content::part(scroll){margin-block:calc(var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top)) + 6px) var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));margin-inline:calc(12px + var(--ion-safe-area-left, 0px)) calc(16px + var(--ion-safe-area-right, 0px))}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content:dir(rtl)::part(scroll){margin-inline:calc(12px + var(--ion-safe-area-right, 0px)) calc(16px + var(--ion-safe-area-left, 0px))}