npm - @rdlabo/ionic-theme-ios26 - Versions diffs - 0.3.3 → 0.3.4 - Mend

@rdlabo/ionic-theme-ios26 0.3.3 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +28 -18
package/dist/css/components/ion-tabs.css +1 -1
package/dist/css/ionic-theme-ios26.css +1 -1
package/dist/index.d.ts +3 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +208 -0
package/package.json +17 -4
package/src/components/ion-tabs.scss +60 -29
package/src/index.ts +244 -0

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Ionic Theme iOS26
-A CSS theme library that applies iOS26 design system to Ionic applications.
+A CSS/JS theme library that applies iOS26 design system to Ionic applications.
 ![](screenshots/ios26.png)
@@ -8,7 +8,7 @@ DEMO is here: https://ionic-theme-ios26.netlify.app/
 ## Overview
-This library provides CSS files that bring the iOS26 design system to Ionic applications. It updates the look and feel of Ionic components to match the latest iOS26 design guidelines.
+This library provides CSS/JS files that bring the iOS26 design system to Ionic applications. It updates the look and feel of Ionic components to match the latest iOS26 design guidelines.
 ## 💖 Support This Project
@@ -52,16 +52,22 @@ And import the theme in your project's main CSS file (e.g., `src/styles.scss`).
 ### CSS Variables
 To customize the library's default styles to match your design, several CSS variables are provided. See this file for details:
 https://github.com/rdlabo-team/ionic-theme-ios26/blob/main/src/default-variables.scss
-### Additional Customization
+## Features
-To achieve higher fidelity to iOS26 design, you can implement additional customizations provided by this library. For more details, please visit:
+### `.ios26-disabled` Class
-https://ionic-theme-ios26.netlify.app/main/docs
+Add the `.ios26-disabled` class to disable the iOS26 theme on specific components.
+```html
+<!-- iOS26 theme applied -->
+<ion-button>iOS26 Design</ion-button>
+<!-- Standard Ionic iOS styling -->
+<ion-button class="ios26-disabled">Standard Ionic Design</ion-button>
+```
 ### Liquid Glass Mixin
@@ -75,20 +81,11 @@ ion-textarea label.textarea-wrapper {
 }
 ```
+### Additional Customization
-## Features
-### `.ios26-disabled` Class
-Add the `.ios26-disabled` class to disable the iOS26 theme on specific components.
-```html
-<!-- iOS26 theme applied -->
-<ion-button>iOS26 Design</ion-button>
+To achieve higher fidelity to iOS26 design, you can implement additional customizations provided by this library. For more details, please visit:
-<!-- Standard Ionic iOS styling -->
-<ion-button class="ios26-disabled">Standard Ionic Design</ion-button>
-```
+https://ionic-theme-ios26.netlify.app/main/docs
 ## Important Notes
@@ -134,6 +131,19 @@ You can see the difference in the following video. The first example shows `ion-
 This is a known issue that has been shared with the Ionic team. We will update this library accordingly once Ionic Core addresses it.
+### Experimental: Using Tap Animation with IonTabButton
+__This feature is experimental. The library can be used without this feature.__
+By registering IonTabBar, you can display animation effects on IonTabButton.
+```js
+import { registerTabBarEffect } from '@rdlabo/ionic-theme-ios26';
+registerTabBarEffect(document.querySelector<HTMLElement>('ion-tab-bar'));
+```
 ## Migration Support
 For gradual migration, you can selectively apply the iOS26 theme by importing individual components instead of the full theme file.

package/dist/css/components/ion-tabs.css CHANGED Viewed

	@@ -1 +1 @@
1	- ion-tab-bar.ios:not(.ios26-disabled){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);z-index:2;border-radius:40px;--color: rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-tab-bar.ios:not(.ios26-disabled)[slot=top]{position:absolute;top:var(--ios26-floating-safe-area-top);right:calc(16px + var(--ion-safe-area-right, 0px))}ion-tab-bar.ios:not(.ios26-disabled)[slot=bottom]{position:absolute;bottom:var(--ios26-floating-safe-area-bottom);left:calc(16px + var(--ion-safe-area-left, 0px))}ion-tab-bar.ios:not(.ios26-disabled){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-left, 0px)) - 60px - 12px);max-width:474px;min-height:56px}ion-tab-bar.ios:not(.ios26-disabled):has(:nth-child(5)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-left, 0px)));max-width:546px}ion-tab-bar.ios:not(.ios26-disabled){padding:2px 2px;transition:transform var(--ios26-activated-transition-duration) ease-out;will-change:transform}ion-tab-bar.ios:not(.ios26-disabled):has(ion-tab-button.ion-activated){transform:scale(1.038)}ion-tab-bar.ios:not(.ios26-disabled):has(ion-tab-button.ion-activated) ion-tab-button.tab-selected:not(.ion-activated){--color-selected: rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button ion-~~icon~~{~~font~~-~~size:26px~~}ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button ion-label,ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button ion-icon{transition:filter var(--ios26-activated-transition-duration) ease,color var(--ios26-activated-transition-duration) ease}ion-tab-~~bar~~.ios:not(.ios26-disabled) ~~ion-tab-button~~{background:rgba(var(--ios26-glass-background-rgb), 0);height:auto;transition:transform var(--ios26-activated-transition-duration) ease}ion-tab-~~bar~~.ios:not(.ios26-disabled) ~~ion-tab-button~~::part(native){overflow:visible;min-height:56px;border-radius:32px}ion-tab-~~bar~~.ios:not(.ios26-disabled) ~~ion-tab-button~~.ion-activated{transform:scale(1.1);position:relative;color:var(--color-selected)}ion-tab-~~bar~~.ios:not(.ios26-disabled) ~~ion-tab-button~~.ion-activated ion-label,ion-tab-~~bar~~.ios:not(.ios26-disabled) ~~ion-tab-button~~.ion-activated ion-icon{filter:brightness(104%)}ion-tab-~~bar~~.ios:not(.ios26-disabled) ~~ion-tab-button~~.tab-selected::part(native){background:rgba(var(--ios26-button-color-selected-rgb), 0.095);transition:background var(--ios26-activated-transition-duration) ease}ion-tab-~~bar~~.ios:not(.ios26-disabled) ion-tab-button.~~tab~~-~~selected~~.ion-~~activated~~::part(native){background:rgba(var(--ios26-glass-box-shadow-color-rgb), 0.02)}
1	+ ion-tab-bar.ios:not(.ios26-disabled){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);z-index:2;border-radius:40px;--color: rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-tab-bar.ios:not(.ios26-disabled)[slot=top]{position:absolute;top:var(--ios26-floating-safe-area-top);right:calc(16px + var(--ion-safe-area-right, 0px))}ion-tab-bar.ios:not(.ios26-disabled)[slot=bottom]{position:absolute;bottom:var(--ios26-floating-safe-area-bottom);left:calc(16px + var(--ion-safe-area-left, 0px))}ion-tab-bar.ios:not(.ios26-disabled){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-left, 0px)) - 60px - 12px);max-width:474px;min-height:56px}ion-tab-bar.ios:not(.ios26-disabled):has(:nth-child(5)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-left, 0px)));max-width:546px}ion-tab-bar.ios:not(.ios26-disabled){padding:2px 2px;transition:transform var(--ios26-activated-transition-duration) ease-out;will-change:transform}ion-tab-bar.ios:not(.ios26-disabled):has(ion-tab-button.ion-activated){transform:scale(1.038)}ion-tab-bar.ios:not(.ios26-disabled):has(ion-tab-button.ion-activated) ion-tab-button.tab-selected:not(.ion-activated){--color-selected: rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-tab-bar.ios:not(.ios26-disabled).tab-bar-ios26-effect:has(ion-tab-button.ion-activated) ion-tab-button.tab-selected::part(native){background:rgba(var(--ios26-button-color-selected-rgb), 0)}ion-tab-bar.ios:not(.ios26-disabled).tab-bar-ios26-effect:has(ion-tab-button.ion-activated) ion-tab-button.ion-activated ion-label,ion-tab-bar.ios:not(.ios26-disabled).tab-bar-ios26-effect:has(ion-tab-button.ion-activated) ion-tab-button.ion-activated ion-icon{filter:brightness(100%)}ion-tab-button.ios:not(.ios26-disabled) ion-icon{font-size:26px}ion-tab-button.ios:not(.ios26-disabled) ion-label,ion-tab-button.ios:not(.ios26-disabled) ion-icon{transition:filter var(--ios26-activated-transition-duration) ease,color var(--ios26-activated-transition-duration) ease}ion-tab-button.ios:not(.ios26-disabled){background:rgba(var(--ios26-glass-background-rgb), 0);height:auto;transition:transform var(--ios26-activated-transition-duration) ease}ion-tab-button.ios:not(.ios26-disabled)::part(native){overflow:visible;min-height:56px;border-radius:32px}ion-tab-button.ios:not(.ios26-disabled).ion-activated{transform:scale(1.1);position:relative;color:var(--color-selected)}ion-tab-button.ios:not(.ios26-disabled).ion-activated ion-label,ion-tab-button.ios:not(.ios26-disabled).ion-activated ion-icon{filter:brightness(104%)}ion-tab-button.ios:not(.ios26-disabled).tab-selected::part(native){background:rgba(var(--ios26-button-color-selected-rgb), 0.095);transition:background var(--ios26-activated-transition-duration) ease}ion-tab-button.ios:not(.ios26-disabled).tab-selected.ion-activated::part(native){background:rgba(var(--ios26-glass-box-shadow-color-rgb), 0.02)}ion-tab-button.ios:not(.ios26-disabled).ion-cloned-element::part(native){background:rgba(var(--ios26-glass-background-rgb), 1);backdrop-filter:blur(2px) saturate(104%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);background:rgba(0,0,0,0)}ion-tab-button.ios:not(.ios26-disabled).ion-cloned-element{color:var(--color-selected, var(--ion-color-primary, #0054e9));pointer-events:none;position:absolute;left:0;top:0;transform-origin:center}ion-tab-button.ios:not(.ios26-disabled).ion-cloned-element>*{visibility:hidden}

package/dist/css/ionic-theme-ios26.css CHANGED Viewed

	@@ -1 +1 @@
1	- ion-header.ios:not(.ios26-disabled).header-translucent .header-background,ion-header.ios:not(.ios26-disabled).header-translucent .footer-background,ion-footer.ios:not(.ios26-disabled).footer-translucent .header-background,ion-footer.ios:not(.ios26-disabled).footer-translucent .footer-background{backdrop-filter:none}ion-header.ios:not(.ios26-disabled).header-translucent ion-toolbar,ion-footer.ios:not(.ios26-disabled).footer-translucent ion-toolbar{--border-width: 0;--background: transparent;--opacity: 1}ion-header.ios:not(.ios26-disabled).header-translucent ion-toolbar::part(background),ion-footer.ios:not(.ios26-disabled).footer-translucent ion-toolbar::part(background){--opacity: 0}ion-header.ios:not(.ios26-disabled).header-translucent ion-toolbar ion-title,ion-footer.ios:not(.ios26-disabled).footer-translucent ion-toolbar ion-title{filter:blur(0);transform:translateY(0)}ion-header.ios:not(.ios26-disabled).header-collapse-main ion-toolbar.in-toolbar ion-title{transition:all .5s ease-in-out}ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{filter:blur(2px);transform:translateY(8px)}ion-header.header-translucent::before,ion-header.header-translucent::after,ion-content.ios:not(.ios26-disabled)::part(background)::before,ion-content.ios:not(.ios26-disabled)::part(background)::after{content:"";position:absolute;width:100%;pointer-events:none;z-index:1}ion-header.ios:not(.ios26-disabled).header-translucent::before{z-index:2;top:0;height:var(--ion-safe-area-top)}ion-header.ios:not(.ios26-disabled).header-translucent::after{z-index:2;top:0;height:calc(68px + max(var(--ion-safe-area-top) - 14px,4px));backdrop-filter:blur(2px);mask-image:linear-gradient(rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);mask-composite:intersect}.ion-page:has(>ion-header.header-translucent)>ion-content::part(background)::before{z-index:2;top:0;height:calc(68px + max(var(--ion-safe-area-top) - 14px,4px));background:linear-gradient(in oklab, rgba(var(--ios26-content-box-shadow-rgb), 0.5) 20%, rgba(var(--ios26-content-box-shadow-rgb), 0) 100%);box-shadow:inset 0 calc(68px + max(var(--ion-safe-area-top) - 14px,4px)) 16px -32px rgba(var(--ios26-content-box-shadow-rgb), 0.6)}ion-content::part(background)::after{z-index:2;bottom:0;height:calc(60px + var(--ios26-floating-safe-area-bottom));background:linear-gradient(in oklab, rgba(var(--ios26-content-box-shadow-rgb), 0) 0%, rgba(var(--ios26-content-box-shadow-rgb), 0.8) 50%, rgba(var(--ios26-content-box-shadow-rgb), 0.8) 100%)}.ion-page:has(>ion-footer:not(.footer-translucent)) ion-content::part(background)::after{content:none}ion-action-sheet.ios:not(.ios26-disabled){--backdrop-opacity: 0.2;--color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-wrapper{padding-bottom:0;bottom:var(--ios26-floating-safe-area-bottom)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container{background:rgba(var(--ios26-glass-background-rgb), 0.6667);backdrop-filter:blur(8px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);transition:transform 200ms ease}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container:has(.ion-activated){transform:scale(1.016);background:rgba(var(--ios26-glass-background-rgb), 0.6667);backdrop-filter:blur(8px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container{margin:0 12px;border-radius:32px}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-title,ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-has-sub-title{background:none}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-title{padding-top:8px}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group{background:rgba(0,0,0,0)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button{--button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button.ion-activated{--button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.022)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button::after{content:none}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button:not(.action-sheet-destructive):not(.action-sheet-selected){--button-color: var(--ion-text-color, #000);--button-color-hover: var(--ion-text-color, #000);--button-color-activated: var(--ion-text-color, #000)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button.action-sheet-destructive{--button-color: var(--ion-color-danger, #c5000f);--button-color-hover: var(--ion-color-danger, #c5000f)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button{font-weight:550}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button.action-sheet-cancel{margin-top:auto;font-weight:550}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button{border-radius:32px;padding:0 14px;min-height:52px}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button span.action-sheet-button-inner{font-size:1rem}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button span.action-sheet-button-inner ion-icon{font-size:1.2rem}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button:not(:last-child){margin-bottom:8px}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container button.action-sheet-cancel{margin-top:12px}ion-action-sheet.ios.select-action-sheet:not(.ios26-disabled) .action-sheet-container .action-sheet-group button.action-sheet-cancel{display:none}ion-alert.ios:not(.ios26-disabled){--backdrop-opacity: 0.2;--max-width: 322px;transition:transform 200ms ease}ion-alert.ios:not(.ios26-disabled):has(.ion-activated){transform:scale(1.016)}ion-alert.ios:not(.ios26-disabled) .alert-wrapper{background:rgba(var(--ios26-glass-background-rgb), 0.6667);backdrop-filter:blur(8px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6)}ion-alert.ios:not(.ios26-disabled) .alert-wrapper:has(.ion-activated){background:rgba(var(--ios26-glass-background-rgb), 0.6667);backdrop-filter:blur(8px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6)}ion-alert.ios:not(.ios26-disabled) .alert-wrapper{border-radius:32px}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-head,ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-message{text-align:left;margin-left:14px;margin-right:14px}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-message{font-size:.98rem;line-height:1.2rem;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-radio-group{padding:0;margin-bottom:12px}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-radio-group button{padding:0 8px}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-button-group{padding:0 8px 12px;gap:8px 0}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-button-group .alert-button{transition:background .2s ease;background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065)}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-button-group .alert-button.ion-activated{background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.022)}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-button-group .alert-button{border:none;border-radius:32px;margin:0 6px;min-width:calc(50% - 12px);height:48px}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-button-group .alert-button:not(.alert-button-role-destructive){color:var(--ion-text-color, #000)}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-button-group .alert-button{font-weight:550}ion-alert.ios:not(.ios26-disabled) .alert-wrapper button.action-sheet-cancel{margin-top:12px}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);border-radius:25px;overflow:hidden;transition:transform var(--ios26-activated-transition-duration) ease-out !important;z-index:0}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated){z-index:5;box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 8px -4px rgba(var(--ios26-glass-box-shadow-color-rgb), 0.92);transform:scale(1.32)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(:not(.button-has-icon-only):not(.back-button-has-icon-only)),ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(ion-button:nth-child(n+2)){transform:scale(1.25)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(.button-small){transform:scale(1.18)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(.button-small):has(:not(.button-has-icon-only):not(.back-button-has-icon-only)),ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(.button-small):has(ion-button:nth-child(n+2)){transform:scale(1.12)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(.button-large){transform:scale(1.22)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(.button-large):has(:not(.button-has-icon-only):not(.back-button-has-icon-only)),ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(.button-large):has(ion-button:nth-child(n+2)){transform:scale(1.12)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(ion-button:not(.ios26-disabled).button-clear.button-large){border-radius:30px}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear{transform:none;font-weight:500}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.button-small{min-height:22px;--padding-top: 1px;--padding-bottom: 1px;--padding-start: 0.5em;--padding-end: 0.5em}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.button-default::part(native){min-height:42px}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.button-default{--padding-top: 16px;--padding-bottom: 16px;--padding-start: 1em;--padding-end: 1em}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.button-large{min-height:60px;--padding-top: 17px;--padding-start: 1em;--padding-end: 1em;--padding-bottom: 17px}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear{color:rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.ion-color{color:rgb(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)))}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.ion-activated{color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.ion-activated.ion-color{color:rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear:not(.button-disabled){opacity:1}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.ion-activated{--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.ion-activated.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear::part(native){box-shadow:none !important;border:none !important;background:rgba(0,0,0,0) !important;backdrop-filter:none !important}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled){margin:0}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled) :first-child{margin-left:-8px}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled) :last-child{margin-right:-8px}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled) :only-child{margin:0}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-menu-button:not(.ios26-disabled){width:44px;height:44px;padding:2px}ion-button.ios:not(.ios26-disabled){max-height:inherit;z-index:0}ion-button.ios:not(.ios26-disabled).ion-activated{z-index:10}ion-button.ios:not(.ios26-disabled){transition:transform var(--ios26-activated-transition-duration) ease-out,color 50ms ease;will-change:transform}ion-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large){font-size:1.05rem}ion-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large):not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native){padding:0 12px;min-height:44px}ion-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large):not(.button-has-icon-only):not(.back-button-has-icon-only) ion-icon[slot=start]{margin-inline-start:-0.15em;margin-inline-end:.15em}ion-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large):not(.button-has-icon-only):not(.back-button-has-icon-only) ion-icon[slot=end]{margin-inline-start:.15em;margin-inline-end:-0.15em}ion-button.ios:not(.ios26-disabled):not(.button-round){--border-radius: 24px}ion-button.ios:not(.ios26-disabled):not(.button-round).button-large{--border-radius: 30px}ion-button.ios:not(.ios26-disabled):not(.button-clear):not(.button-solid).ion-activated{transform:scale(0.98)}ion-button.ios:not(.ios26-disabled):not(.button-clear):not(.button-solid).ion-activated.button-small{transform:scale(0.98)}ion-button.ios:not(.ios26-disabled):not(.button-clear):not(.button-solid).ion-activated.button-large{transform:scale(0.98)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-primary{--color: var(--ion-color-primary-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-primary-brightness);--border-color: var(--ion-color-primary-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-secondary{--color: var(--ion-color-secondary-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-secondary-brightness);--border-color: var(--ion-color-secondary-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-tertiary{--color: var(--ion-color-tertiary-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-tertiary-brightness);--border-color: var(--ion-color-tertiary-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-success{--color: var(--ion-color-success-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-success-brightness);--border-color: var(--ion-color-success-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-warning{--color: var(--ion-color-warning-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-warning-brightness);--border-color: var(--ion-color-warning-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-danger{--color: var(--ion-color-danger-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-danger-brightness);--border-color: var(--ion-color-danger-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-light{--color: var(--ion-color-light-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-light-brightness);--border-color: var(--ion-color-light-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-medium{--color: var(--ion-color-medium-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-medium-brightness);--border-color: var(--ion-color-medium-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-dark{--color: var(--ion-color-dark-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-dark-brightness);--border-color: var(--ion-color-dark-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit]{--background-color: #fff;--background-activated-opacity: 1}ion-button.ios:not(.ios26-disabled).button-solid[type=submit]:not(.button-has-icon-only):not(.back-button-has-icon-only):not(.button-small):not(.button-large){min-height:44px}ion-button.ios:not(.ios26-disabled).button-solid[type=submit]::part(native){position:relative;color:var(--color);z-index:0}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated{--border-width: 0.78px}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated::part(native){box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 8px -4px rgba(var(--ios26-glass-box-shadow-color-rgb), 0.92);color:var(--color-activated)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated::part(native)::before{content:"";z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;border-radius:inherit;pointer-events:none;backdrop-filter:brightness(144%)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.button-has-icon-only,ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.back-button-has-icon-only{transform:scale(1.32)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.button-has-icon-only.button-small,ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.back-button-has-icon-only.button-small{transform:scale(1.18)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.button-has-icon-only.button-large,ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.back-button-has-icon-only.button-large{transform:scale(1.22)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only){transform:scale(1.25)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-small{transform:scale(1.12)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-large{transform:scale(1.12)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].button-disabled{opacity:1}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].button-disabled::part(native){background:var(--ion-background-color-step-200, #cccccc);color:#fff;border:none}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear){--background-hover: transparent;--background-activated: transparent}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear):not(.button-has-icon-only):not(.back-button-has-icon-only):not(.button-small):not(.button-large){min-height:44px}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear)::part(native){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);color:var(--color)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear):not(.button-disabled){opacity:1}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear){--color: rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated{--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.button-has-icon-only,ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.back-button-has-icon-only{transform:scale(1.32)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.button-has-icon-only.button-small,ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.back-button-has-icon-only.button-small{transform:scale(1.18)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.button-has-icon-only.button-large,ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.back-button-has-icon-only.button-large{transform:scale(1.22)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only){transform:scale(1.25)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-small{transform:scale(1.12)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-large{transform:scale(1.12)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated::part(native){opacity:1}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).button-disabled{opacity:1;--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).button-disabled.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.5)}ion-button.ios:not(.ios26-disabled).button-has-icon-only:not(.button-small):not(.button-large)::part(native),ion-button.ios:not(.ios26-disabled).back-button-has-icon-only:not(.button-small):not(.button-large)::part(native){width:44px;height:44px;padding:2px}ion-button.ios:not(.ios26-disabled).button-has-icon-only ion-icon,ion-button.ios:not(.ios26-disabled).back-button-has-icon-only ion-icon{font-size:1.4rem}ion-button.ios:not(.ios26-disabled).button-has-icon-only ion-icon[name=close-outline],ion-button.ios:not(.ios26-disabled).back-button-has-icon-only ion-icon[name=close-outline]{font-size:2rem}ion-back-button.ios:not(.ios26-disabled){max-height:inherit;z-index:0}ion-back-button.ios:not(.ios26-disabled).ion-activated{z-index:10}ion-back-button.ios:not(.ios26-disabled){transition:transform var(--ios26-activated-transition-duration) ease-out,color 50ms ease;will-change:transform}ion-back-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large){font-size:1.05rem}ion-back-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large):not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native){padding:0 12px;min-height:44px}ion-back-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large):not(.button-has-icon-only):not(.back-button-has-icon-only) ion-icon[slot=start]{margin-inline-start:-0.15em;margin-inline-end:.15em}ion-back-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large):not(.button-has-icon-only):not(.back-button-has-icon-only) ion-icon[slot=end]{margin-inline-start:.15em;margin-inline-end:-0.15em}ion-back-button.ios:not(.ios26-disabled):not(.button-round){--border-radius: 24px}ion-back-button.ios:not(.ios26-disabled):not(.button-round).button-large{--border-radius: 30px}ion-back-button.ios:not(.ios26-disabled):not(.button-clear):not(.button-solid).ion-activated{transform:scale(0.98)}ion-back-button.ios:not(.ios26-disabled):not(.button-clear):not(.button-solid).ion-activated.button-small{transform:scale(0.98)}ion-back-button.ios:not(.ios26-disabled):not(.button-clear):not(.button-solid).ion-activated.button-large{transform:scale(0.98)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-primary{--color: var(--ion-color-primary-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-primary-brightness);--border-color: var(--ion-color-primary-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-secondary{--color: var(--ion-color-secondary-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-secondary-brightness);--border-color: var(--ion-color-secondary-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-tertiary{--color: var(--ion-color-tertiary-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-tertiary-brightness);--border-color: var(--ion-color-tertiary-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-success{--color: var(--ion-color-success-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-success-brightness);--border-color: var(--ion-color-success-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-warning{--color: var(--ion-color-warning-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-warning-brightness);--border-color: var(--ion-color-warning-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-danger{--color: var(--ion-color-danger-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-danger-brightness);--border-color: var(--ion-color-danger-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-light{--color: var(--ion-color-light-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-light-brightness);--border-color: var(--ion-color-light-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-medium{--color: var(--ion-color-medium-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-medium-brightness);--border-color: var(--ion-color-medium-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-dark{--color: var(--ion-color-dark-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-dark-brightness);--border-color: var(--ion-color-dark-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit]{--background-color: #fff;--background-activated-opacity: 1}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit]:not(.button-has-icon-only):not(.back-button-has-icon-only):not(.button-small):not(.button-large){min-height:44px}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit]::part(native){position:relative;color:var(--color);z-index:0}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated{--border-width: 0.78px}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated::part(native){box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 8px -4px rgba(var(--ios26-glass-box-shadow-color-rgb), 0.92);color:var(--color-activated)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated::part(native)::before{content:"";z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;border-radius:inherit;pointer-events:none;backdrop-filter:brightness(144%)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.button-has-icon-only,ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.back-button-has-icon-only{transform:scale(1.32)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.button-has-icon-only.button-small,ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.back-button-has-icon-only.button-small{transform:scale(1.18)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.button-has-icon-only.button-large,ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.back-button-has-icon-only.button-large{transform:scale(1.22)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only){transform:scale(1.25)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-small{transform:scale(1.12)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-large{transform:scale(1.12)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].button-disabled{opacity:1}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].button-disabled::part(native){background:var(--ion-background-color-step-200, #cccccc);color:#fff;border:none}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear){--background-hover: transparent;--background-activated: transparent}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear):not(.button-has-icon-only):not(.back-button-has-icon-only):not(.button-small):not(.button-large){min-height:44px}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear)::part(native){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);color:var(--color)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear):not(.button-disabled){opacity:1}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear){--color: rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated{--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.button-has-icon-only,ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.back-button-has-icon-only{transform:scale(1.32)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.button-has-icon-only.button-small,ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.back-button-has-icon-only.button-small{transform:scale(1.18)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.button-has-icon-only.button-large,ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.back-button-has-icon-only.button-large{transform:scale(1.22)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only){transform:scale(1.25)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-small{transform:scale(1.12)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-large{transform:scale(1.12)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated::part(native){opacity:1}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).button-disabled{opacity:1;--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).button-disabled.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.5)}ion-back-button.ios:not(.ios26-disabled).button-has-icon-only:not(.button-small):not(.button-large)::part(native),ion-back-button.ios:not(.ios26-disabled).back-button-has-icon-only:not(.button-small):not(.button-large)::part(native){width:44px;height:44px;padding:2px}ion-back-button.ios:not(.ios26-disabled).button-has-icon-only ion-icon,ion-back-button.ios:not(.ios26-disabled).back-button-has-icon-only ion-icon{font-size:1.4rem}ion-back-button.ios:not(.ios26-disabled).button-has-icon-only ion-icon[name=close-outline],ion-back-button.ios:not(.ios26-disabled).back-button-has-icon-only ion-icon[name=close-outline]{font-size:2rem}ion-back-button.ion-cloned-element{visibility:hidden}ion-card.ios:not(.ios26-disabled){border-radius:24px}ion-card.ios:not(.ios26-disabled) ion-list ion-item{--padding-start: 0}ion-chip.ios:not(.ios26-disabled):not(.chip-outline){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);transition:transform 100ms ease-out}ion-chip.ios:not(.ios26-disabled):not(.chip-outline).ion-activated{transform:scale(1.12)}.ios:not(.ios26-disabled) .ion-page:not(:has(ion-footer)) ion-content .ion-content-scroll-host{margin-bottom:calc((60px + var(--ios26-floating-safe-area-bottom))-1);padding-bottom:calc(60px + var(--ios26-floating-safe-area-bottom))}.ios:not(.ios26-disabled) ion-content:not(:has(.ion-content-scroll-host)){--padding-bottom: calc(60px + var(--ios26-floating-safe-area-bottom))}ion-datetime.ios:not(.ios26-disabled){background:rgba(var(--ios26-glass-background-rgb), 0.6667);backdrop-filter:blur(8px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);border-radius:24px;--wheel-highlight-background: transparent;--wheel-highlight-border-radius: 24px}ion-fab.ios:not(.ios26-disabled) ion-fab-button{--transition: var(--ios26-activated-transition-duration) transform cubic-bezier(0.25, 1.11, 0.78, 1.59), var(--ios26-activated-transition-duration) color ease;--background-activated-opacity: 0;--background-focused-opacity: 0;--background-hover-opacity: 0;--color: rgb(var(--ion-text-color-rgb, 0, 0, 0));width:61px;height:61px}ion-fab.ios:not(.ios26-disabled) ion-fab-button.fab-button-in-list,ion-fab.ios:not(.ios26-disabled) ion-fab-button.fab-button-small{width:48px;height:48px}ion-fab.ios:not(.ios26-disabled) ion-fab-button.ion-activated{--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}ion-fab.ios:not(.ios26-disabled) ion-fab-button.ion-activated.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1)}ion-fab.ios:not(.ios26-disabled) ion-fab-button::part(native){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6)}ion-fab.ios:not(.ios26-disabled).fab-vertical-top{top:var(--ios26-floating-safe-area-top)}ion-fab.ios:not(.ios26-disabled).fab-vertical-bottom{bottom:var(--ios26-floating-safe-area-bottom)}ion-fab.ios:not(.ios26-disabled).fab-horizontal-start{right:calc(16px + var(--ion-safe-area-left, 0px))}ion-fab.ios:not(.ios26-disabled).fab-horizontal-end{right:calc(16px + var(--ion-safe-area-right, 0px))}ion-list.ios:not(.ios26-disabled) ion-item{--background-hover-opacity: 0;--background-focused-opacity: 0}ion-list.list-inset.ios:not(.ios26-disabled){background:rgba(0,0,0,0)}ion-list.list-inset.ios:not(.ios26-disabled) ion-list-header{display:flex;align-items:center}ion-list.list-inset.ios:not(.ios26-disabled) ion-list-header ion-label{font-size:.9rem;margin:8px 4px 4px;color:var(--ion-color-medium-tint)}ion-list.list-inset.ios:not(.ios26-disabled) ion-list-header ion-button{margin-top:8px}ion-list.list-inset.ios:not(.ios26-disabled) ion-list-header ion-note{font-size:.9rem;margin:8px 16px 4px 0}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group.header-item-group>ion-item>ion-label{width:100%;text-align:center;padding:32px 16px 16px;transform:translateX(5px)}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group.header-item-group>ion-item>ion-label ion-header.header-collapse-condense>ion-toolbar{--min-height: 0;visibility:hidden}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group.header-item-group>ion-item>ion-label ion-icon{font-size:2.8rem;color:#fff;border-radius:20%;padding:6px}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group.header-item-group>ion-item>ion-label h2{font-size:1.2rem;font-weight:bold;margin-top:8px}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group.header-item-group>ion-item>ion-label ion-text{font-size:.9rem}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item ion-text[slot=end],ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item ion-text[slot=end],ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item ion-text[slot=end],ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item ion-text[slot=end]{padding-left:8px}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item.item-disabled,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item.item-disabled,ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item.item-disabled,ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item.item-disabled{opacity:1}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item.item-disabled>,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item.item-disabled>,ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item.item-disabled>,ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item.item-disabled>*{opacity:.4}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item.item-disabled::part(detail-icon),ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item.item-disabled::part(detail-icon),ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item.item-disabled::part(detail-icon),ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item.item-disabled::part(detail-icon){opacity:.1}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item ion-button[slot=end].ion-align-self-end,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item ion-button[slot=end].ion-align-self-end,ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item ion-button[slot=end].ion-align-self-end,ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item ion-button[slot=end].ion-align-self-end{transform:translateY(-7px)}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item ion-button[slot=end] ion-icon[slot=icon-only],ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item ion-button[slot=end] ion-icon[slot=icon-only],ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item ion-button[slot=end] ion-icon[slot=icon-only],ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item ion-button[slot=end] ion-icon[slot=icon-only]{font-size:1.2rem !important;transform:translateY(4px)}ion-list.list-inset.ios:not(.ios26-disabled)>ion-note{color:var(--ion-color-medium-tint);font-size:.9rem;display:block;margin:8px calc(20px + var(--ion-safe-area-right)) 8px calc(20px + var(--ion-safe-area-left))}ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group{display:block}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group,ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group,ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group{border-radius:24px;overflow:hidden}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item,ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item,ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item{--inner-padding-end: 0}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item::part(native),ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item::part(native),ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item::part(native),ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item::part(native){padding-right:calc(var(--ion-safe-area-right, 0px) + 18px)}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item,ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item,ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item{--min-height: 52px}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item>ion-input[labelplacement=floating],ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item>ion-input[labelplacement=floating],ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item>ion-input[labelplacement=floating],ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item>ion-input[labelplacement=floating]{transition:transform 200ms ease}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item>ion-input[labelplacement=floating]:not(.label-floating),ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item>ion-input[labelplacement=floating]:not(.label-floating),ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item>ion-input[labelplacement=floating]:not(.label-floating),ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item>ion-input[labelplacement=floating]:not(.label-floating){transform:translateY(-2px)}ion-loading.ios:not(.ios26-disabled){--backdrop-opacity: 0.2}ion-loading.ios:not(.ios26-disabled) .loading-wrapper{background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);border-radius:24px;padding-inline-start:24px;padding-inline-end:24px}ion-modal.ios:not(.ios26-disabled){--backdrop-opacity: 0.2}ion-modal.ios:not(.ios26-disabled) ion-toolbar{padding-right:calc(var(--ion-safe-area-right) + 4px);padding-left:calc(var(--ion-safe-area-left) + 4px)}ion-modal.ios:not(.ios26-disabled)::part(handle){width:80px}ion-modal.ios:not(.ios26-disabled):has(.ion-delegate-host):has(ion-datetime){--border-radius: 24px;--ion-background-color: transparent}ion-modal.ios:not(.ios26-disabled).modal-sheet{--border-radius: 30px}ion-modal.ios:not(.ios26-disabled).modal-sheet::part(content){background:rgba(var(--ios26-glass-background-rgb), 1);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6)}ion-popover.ios:not(.ios26-disabled){--backdrop-opacity: 0.2}ion-popover.ios:not(.ios26-disabled)::part(arrow){display:none}ion-popover.ios:not(.ios26-disabled)::part(content){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);border-radius:24px;padding:0}ion-popover.ios:not(.ios26-disabled) ion-select-popover ion-list{background:rgba(0,0,0,0)}ion-popover.ios:not(.ios26-disabled) ion-select-popover ion-list ion-item{--background: transparent}ion-range.ios:not(.ios26-disabled){--knob-size: 20px;--knob-border-radius: 24px;padding-right:36px}ion-range.ios:not(.ios26-disabled)::part(knob){width:38px;transition:transform 300ms ease}ion-range.ios:not(.ios26-disabled).range-pressed::part(knob){transform:scale(1.4, 1.6) translateX(-3.8px);background:rgba(var(--ios26-glass-background-rgb), 0.1);backdrop-filter:blur(0.5px) saturate(120%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);box-shadow:inset 0 8px 8px -8px var(--bar-background),inset 0 -8px 8px -8px var(--bar-background),inset 8px 0 8px -8px var(--bar-background),inset -8px 0 8px -8px var(--bar-background)}ion-modal.ios ion-searchbar:not(.ios26-disabled) .searchbar-input-container input.searchbar-input{backdrop-filter:none}ion-searchbar.ios:not(.ios26-disabled){min-height:60px;padding:0}ion-searchbar.ios:not(.ios26-disabled) ion-icon.searchbar-search-icon{inset-inline-start:12px}ion-searchbar.ios:not(.ios26-disabled) .searchbar-input-container{margin:0 8px 0 16px;align-self:center;justify-self:center}ion-searchbar.ios:not(.ios26-disabled) .searchbar-input-container input.searchbar-input{min-height:44px;background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);border-radius:20px;padding-inline-start:2.4rem !important}ion-searchbar.ios:not(.ios26-disabled) .searchbar-input-container .searchbar-clear-button{padding-inline-end:2rem}ion-segment.ios:not(.ios26-disabled){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);min-height:48px;border-radius:25px}ion-segment.ios:not(.ios26-disabled).segment-expand{min-height:24px;width:calc(100% - var(--ion-safe-area-left, 0) - var(--ion-safe-area-left, 0) - 24px)}ion-segment.ios:not(.ios26-disabled).segment-expand.segment-activated{transform:scale(1)}ion-segment.ios:not(.ios26-disabled).segment-expand ion-segment-button{min-height:24px}ion-segment.ios:not(.ios26-disabled){transition:transform var(--ios26-activated-transition-duration) ease-out;will-change:transform}ion-segment.ios:not(.ios26-disabled).in-toolbar-color:not(.in-segment-color) ion-segment-button:not(.segment-button-checked)::part(native){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 1) !important}ion-segment.ios:not(.ios26-disabled) ion-segment-button{--border-width: 0;--ion-color-base: var(--ion-text-color, #000);--padding-start: 8px;--padding-end: 8px;min-width:60px;margin:3px 2px;font-size:14.5px}ion-segment.ios:not(.ios26-disabled) ion-segment-button::part(indicator-background){border-radius:25px;box-shadow:none;transition:background .2s ease;background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06)}ion-segment.ios:not(.ios26-disabled).segment-activated{transform:scale(1.1)}ion-segment.ios:not(.ios26-disabled).segment-activated ion-segment-button{transition:transform 100ms ease-out}ion-segment.ios:not(.ios26-disabled).segment-activated ion-segment-button.segment-button-checked::part(native){transform:scale(1.08)}ion-segment.ios:not(.ios26-disabled).segment-activated ion-segment-button::part(indicator-background){position:relative;z-index:1;background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);transform:scale(1.1);transform-origin:center center}ion-tab-bar.ios:not(.ios26-disabled){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);z-index:2;border-radius:40px;--color: rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-tab-bar.ios:not(.ios26-disabled)[slot=top]{position:absolute;top:var(--ios26-floating-safe-area-top);right:calc(16px + var(--ion-safe-area-right, 0px))}ion-tab-bar.ios:not(.ios26-disabled)[slot=bottom]{position:absolute;bottom:var(--ios26-floating-safe-area-bottom);left:calc(16px + var(--ion-safe-area-left, 0px))}ion-tab-bar.ios:not(.ios26-disabled){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-left, 0px)) - 60px - 12px);max-width:474px;min-height:56px}ion-tab-bar.ios:not(.ios26-disabled):has(:nth-child(5)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-left, 0px)));max-width:546px}ion-tab-bar.ios:not(.ios26-disabled){padding:2px 2px;transition:transform var(--ios26-activated-transition-duration) ease-out;will-change:transform}ion-tab-bar.ios:not(.ios26-disabled):has(ion-tab-button.ion-activated){transform:scale(1.038)}ion-tab-bar.ios:not(.ios26-disabled):has(ion-tab-button.ion-activated) ion-tab-button.tab-selected:not(.ion-activated){--color-selected: rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button ion-icon{font-size:26px}ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button ion-label,ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button ion-icon{transition:filter var(--ios26-activated-transition-duration) ease,color var(--ios26-activated-transition-duration) ease}ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button{background:rgba(var(--ios26-glass-background-rgb), 0);height:auto;transition:transform var(--ios26-activated-transition-duration) ease}ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button::part(native){overflow:visible;min-height:56px;border-radius:32px}ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button.ion-activated{transform:scale(1.1);position:relative;color:var(--color-selected)}ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button.ion-activated ion-label,ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button.ion-activated ion-icon{filter:brightness(104%)}ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button.tab-selected::part(native){background:rgba(var(--ios26-button-color-selected-rgb), 0.095);transition:background var(--ios26-activated-transition-duration) ease}ion-tab-bar.ios:not(.ios26-disabled) ion-tab-button.tab-selected.ion-activated::part(native){background:rgba(var(--ios26-glass-box-shadow-color-rgb), 0.02)}ion-toast.ios:not(.ios26-disabled){--background: transparent;--start: 16px;--end: 16px}ion-toast.ios:not(.ios26-disabled)::part(container){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);border-radius:24px}ion-item.ios:not(.ios26-disabled) ion-toggle.ios:not(.ios26-disabled).toggle-checked.toggle-activated::part(track){transform-origin:left;transform:scaleX(0.894)}ion-item.ios:not(.ios26-disabled) ion-toggle.ios:not(.ios26-disabled).toggle-activated::part(handle){transform:scale(1.4, 1.6) translateX(-5.7px)}ion-toggle.ios:not(.ios26-disabled){--handle-width: 38px;--handle-height: 24px;--handle-max-width: none;--handle-max-height: none;--track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23)}ion-toggle.ios:not(.ios26-disabled)::part(track){overflow:visible;width:64px;height:28px;transition:transform 280ms ease}ion-toggle.ios:not(.ios26-disabled).toggle-activated:not(.toggle-checked)::part(handle){transform:translateX(-4px) scale(1.4, 1.6)}ion-toggle.ios:not(.ios26-disabled).toggle-activated::part(handle){transform:scale(1.4, 1.6);background:rgba(var(--ios26-glass-background-rgb), 0.1);backdrop-filter:blur(0.5px) saturate(120%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);transition:transform 280ms,width 120ms ease-in-out 80ms,left 110ms ease-in-out 80ms,right 110ms ease-in-out 80ms;box-shadow:inset 0 0 8px 0 var(--track-background)}ion-toggle.ios:not(.ios26-disabled).ion-color.toggle-checked.toggle-activated::part(handle){box-shadow:inset 0 8px 8px -8px var(--ion-color-base),inset 8px 0 8px -8px var(--track-background),inset 8px 0 8px -8px var(--track-background),inset -8px 0 8px -8px var(--ion-color-base)}ion-toggle.ios:not(.ios26-disabled).toggle-checked.toggle-activated::part(handle){box-shadow:inset 0 8px 8px -8px var(--track-background-checked),inset 8px 0 8px -8px var(--track-background),inset 8px 0 8px -8px var(--track-background),inset -8px 0 8px -8px var(--track-background-checked)}ion-header.ios:not(.ios26-disabled) ion-toolbar:not(.ios26-disabled):first-of-type{padding-top:max(var(--ion-safe-area-top) - 12px,4px)}ion-modal.ios:not(.ios26-disabled).modal-card ion-header.ios:not(.ios26-disabled) ion-toolbar.ios:not(.ios26-disabled):first-of-type,ion-modal.ios:not(.ios26-disabled).modal-sheet ion-header.ios:not(.ios26-disabled) ion-toolbar.ios:not(.ios26-disabled):first-of-type{padding-top:6px}ion-header.ios.header-collapse-condense:not(.ios26-disabled) ion-toolbar:not(.ios26-disabled):first-of-type{padding-top:0}ion-toolbar.ios:not(.toolbar-title-large):not(.ios26-disabled):not(:has(ion-segment.segment-expand)){--min-height: 68px}ion-toolbar.ios:not(.ios26-disabled):has(ion-searchbar.ios:not(.ios26-disabled)) ion-buttons{margin-top:11px}ion-toolbar.ios:not(.ios26-disabled):has(ion-searchbar.ios:not(.ios26-disabled))>ion-button{margin-top:11px}ion-header.ios:not(.ios26-disabled) ion-buttons,ion-footer.ios:not(.ios26-disabled) ion-buttons{margin-left:12px;margin-right:12px}ion-header.ios:not(.ios26-disabled) ion-back-button,ion-footer.ios:not(.ios26-disabled) ion-back-button{margin-left:12px;margin-right:12px}ion-header.ios:not(.ios26-disabled) ion-toolbar ion-buttons ion-back-button,ion-footer.ios:not(.ios26-disabled) ion-toolbar ion-buttons ion-back-button{margin-left:0;margin-right:0}
1	+ ion-header.ios:not(.ios26-disabled).header-translucent .header-background,ion-header.ios:not(.ios26-disabled).header-translucent .footer-background,ion-footer.ios:not(.ios26-disabled).footer-translucent .header-background,ion-footer.ios:not(.ios26-disabled).footer-translucent .footer-background{backdrop-filter:none}ion-header.ios:not(.ios26-disabled).header-translucent ion-toolbar,ion-footer.ios:not(.ios26-disabled).footer-translucent ion-toolbar{--border-width: 0;--background: transparent;--opacity: 1}ion-header.ios:not(.ios26-disabled).header-translucent ion-toolbar::part(background),ion-footer.ios:not(.ios26-disabled).footer-translucent ion-toolbar::part(background){--opacity: 0}ion-header.ios:not(.ios26-disabled).header-translucent ion-toolbar ion-title,ion-footer.ios:not(.ios26-disabled).footer-translucent ion-toolbar ion-title{filter:blur(0);transform:translateY(0)}ion-header.ios:not(.ios26-disabled).header-collapse-main ion-toolbar.in-toolbar ion-title{transition:all .5s ease-in-out}ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{filter:blur(2px);transform:translateY(8px)}ion-header.header-translucent::before,ion-header.header-translucent::after,ion-content.ios:not(.ios26-disabled)::part(background)::before,ion-content.ios:not(.ios26-disabled)::part(background)::after{content:"";position:absolute;width:100%;pointer-events:none;z-index:1}ion-header.ios:not(.ios26-disabled).header-translucent::before{z-index:2;top:0;height:var(--ion-safe-area-top)}ion-header.ios:not(.ios26-disabled).header-translucent::after{z-index:2;top:0;height:calc(68px + max(var(--ion-safe-area-top) - 14px,4px));backdrop-filter:blur(2px);mask-image:linear-gradient(rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);mask-composite:intersect}.ion-page:has(>ion-header.header-translucent)>ion-content::part(background)::before{z-index:2;top:0;height:calc(68px + max(var(--ion-safe-area-top) - 14px,4px));background:linear-gradient(in oklab, rgba(var(--ios26-content-box-shadow-rgb), 0.5) 20%, rgba(var(--ios26-content-box-shadow-rgb), 0) 100%);box-shadow:inset 0 calc(68px + max(var(--ion-safe-area-top) - 14px,4px)) 16px -32px rgba(var(--ios26-content-box-shadow-rgb), 0.6)}ion-content::part(background)::after{z-index:2;bottom:0;height:calc(60px + var(--ios26-floating-safe-area-bottom));background:linear-gradient(in oklab, rgba(var(--ios26-content-box-shadow-rgb), 0) 0%, rgba(var(--ios26-content-box-shadow-rgb), 0.8) 50%, rgba(var(--ios26-content-box-shadow-rgb), 0.8) 100%)}.ion-page:has(>ion-footer:not(.footer-translucent)) ion-content::part(background)::after{content:none}ion-action-sheet.ios:not(.ios26-disabled){--backdrop-opacity: 0.2;--color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-wrapper{padding-bottom:0;bottom:var(--ios26-floating-safe-area-bottom)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container{background:rgba(var(--ios26-glass-background-rgb), 0.6667);backdrop-filter:blur(8px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);transition:transform 200ms ease}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container:has(.ion-activated){transform:scale(1.016);background:rgba(var(--ios26-glass-background-rgb), 0.6667);backdrop-filter:blur(8px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container{margin:0 12px;border-radius:32px}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-title,ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-has-sub-title{background:none}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-title{padding-top:8px}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group{background:rgba(0,0,0,0)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button{--button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button.ion-activated{--button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.022)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button::after{content:none}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button:not(.action-sheet-destructive):not(.action-sheet-selected){--button-color: var(--ion-text-color, #000);--button-color-hover: var(--ion-text-color, #000);--button-color-activated: var(--ion-text-color, #000)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button.action-sheet-destructive{--button-color: var(--ion-color-danger, #c5000f);--button-color-hover: var(--ion-color-danger, #c5000f)}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button{font-weight:550}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button.action-sheet-cancel{margin-top:auto;font-weight:550}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button{border-radius:32px;padding:0 14px;min-height:52px}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button span.action-sheet-button-inner{font-size:1rem}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button span.action-sheet-button-inner ion-icon{font-size:1.2rem}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container .action-sheet-group button:not(:last-child){margin-bottom:8px}ion-action-sheet.ios:not(.ios26-disabled) .action-sheet-container button.action-sheet-cancel{margin-top:12px}ion-action-sheet.ios.select-action-sheet:not(.ios26-disabled) .action-sheet-container .action-sheet-group button.action-sheet-cancel{display:none}ion-alert.ios:not(.ios26-disabled){--backdrop-opacity: 0.2;--max-width: 322px;transition:transform 200ms ease}ion-alert.ios:not(.ios26-disabled):has(.ion-activated){transform:scale(1.016)}ion-alert.ios:not(.ios26-disabled) .alert-wrapper{background:rgba(var(--ios26-glass-background-rgb), 0.6667);backdrop-filter:blur(8px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6)}ion-alert.ios:not(.ios26-disabled) .alert-wrapper:has(.ion-activated){background:rgba(var(--ios26-glass-background-rgb), 0.6667);backdrop-filter:blur(8px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6)}ion-alert.ios:not(.ios26-disabled) .alert-wrapper{border-radius:32px}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-head,ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-message{text-align:left;margin-left:14px;margin-right:14px}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-message{font-size:.98rem;line-height:1.2rem;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-radio-group{padding:0;margin-bottom:12px}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-radio-group button{padding:0 8px}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-button-group{padding:0 8px 12px;gap:8px 0}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-button-group .alert-button{transition:background .2s ease;background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065)}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-button-group .alert-button.ion-activated{background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.022)}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-button-group .alert-button{border:none;border-radius:32px;margin:0 6px;min-width:calc(50% - 12px);height:48px}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-button-group .alert-button:not(.alert-button-role-destructive){color:var(--ion-text-color, #000)}ion-alert.ios:not(.ios26-disabled) .alert-wrapper .alert-button-group .alert-button{font-weight:550}ion-alert.ios:not(.ios26-disabled) .alert-wrapper button.action-sheet-cancel{margin-top:12px}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);border-radius:25px;overflow:hidden;transition:transform var(--ios26-activated-transition-duration) ease-out !important;z-index:0}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated){z-index:5;box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 8px -4px rgba(var(--ios26-glass-box-shadow-color-rgb), 0.92);transform:scale(1.32)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(:not(.button-has-icon-only):not(.back-button-has-icon-only)),ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(ion-button:nth-child(n+2)){transform:scale(1.25)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(.button-small){transform:scale(1.18)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(.button-small):has(:not(.button-has-icon-only):not(.back-button-has-icon-only)),ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(.button-small):has(ion-button:nth-child(n+2)){transform:scale(1.12)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(.button-large){transform:scale(1.22)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(.button-large):has(:not(.button-has-icon-only):not(.back-button-has-icon-only)),ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated):has(.button-large):has(ion-button:nth-child(n+2)){transform:scale(1.12)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(ion-button:not(.ios26-disabled).button-clear.button-large){border-radius:30px}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear{transform:none;font-weight:500}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.button-small{min-height:22px;--padding-top: 1px;--padding-bottom: 1px;--padding-start: 0.5em;--padding-end: 0.5em}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.button-default::part(native){min-height:42px}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.button-default{--padding-top: 16px;--padding-bottom: 16px;--padding-start: 1em;--padding-end: 1em}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.button-large{min-height:60px;--padding-top: 17px;--padding-start: 1em;--padding-end: 1em;--padding-bottom: 17px}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear{color:rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.ion-color{color:rgb(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)))}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.ion-activated{color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.ion-activated.ion-color{color:rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear:not(.button-disabled){opacity:1}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.ion-activated{--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear.ion-activated.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1)}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled).button-clear::part(native){box-shadow:none !important;border:none !important;background:rgba(0,0,0,0) !important;backdrop-filter:none !important}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled){margin:0}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled) :first-child{margin-left:-8px}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled) :last-child{margin-right:-8px}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios26-disabled) :only-child{margin:0}ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-menu-button:not(.ios26-disabled){width:44px;height:44px;padding:2px}ion-button.ios:not(.ios26-disabled){max-height:inherit;z-index:0}ion-button.ios:not(.ios26-disabled).ion-activated{z-index:10}ion-button.ios:not(.ios26-disabled){transition:transform var(--ios26-activated-transition-duration) ease-out,color 50ms ease;will-change:transform}ion-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large){font-size:1.05rem}ion-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large):not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native){padding:0 12px;min-height:44px}ion-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large):not(.button-has-icon-only):not(.back-button-has-icon-only) ion-icon[slot=start]{margin-inline-start:-0.15em;margin-inline-end:.15em}ion-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large):not(.button-has-icon-only):not(.back-button-has-icon-only) ion-icon[slot=end]{margin-inline-start:.15em;margin-inline-end:-0.15em}ion-button.ios:not(.ios26-disabled):not(.button-round){--border-radius: 24px}ion-button.ios:not(.ios26-disabled):not(.button-round).button-large{--border-radius: 30px}ion-button.ios:not(.ios26-disabled):not(.button-clear):not(.button-solid).ion-activated{transform:scale(0.98)}ion-button.ios:not(.ios26-disabled):not(.button-clear):not(.button-solid).ion-activated.button-small{transform:scale(0.98)}ion-button.ios:not(.ios26-disabled):not(.button-clear):not(.button-solid).ion-activated.button-large{transform:scale(0.98)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-primary{--color: var(--ion-color-primary-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-primary-brightness);--border-color: var(--ion-color-primary-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-secondary{--color: var(--ion-color-secondary-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-secondary-brightness);--border-color: var(--ion-color-secondary-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-tertiary{--color: var(--ion-color-tertiary-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-tertiary-brightness);--border-color: var(--ion-color-tertiary-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-success{--color: var(--ion-color-success-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-success-brightness);--border-color: var(--ion-color-success-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-warning{--color: var(--ion-color-warning-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-warning-brightness);--border-color: var(--ion-color-warning-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-danger{--color: var(--ion-color-danger-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-danger-brightness);--border-color: var(--ion-color-danger-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-light{--color: var(--ion-color-light-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-light-brightness);--border-color: var(--ion-color-light-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-medium{--color: var(--ion-color-medium-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-medium-brightness);--border-color: var(--ion-color-medium-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-dark{--color: var(--ion-color-dark-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-dark-brightness);--border-color: var(--ion-color-dark-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-button.ios:not(.ios26-disabled).button-solid[type=submit]{--background-color: #fff;--background-activated-opacity: 1}ion-button.ios:not(.ios26-disabled).button-solid[type=submit]:not(.button-has-icon-only):not(.back-button-has-icon-only):not(.button-small):not(.button-large){min-height:44px}ion-button.ios:not(.ios26-disabled).button-solid[type=submit]::part(native){position:relative;color:var(--color);z-index:0}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated{--border-width: 0.78px}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated::part(native){box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 8px -4px rgba(var(--ios26-glass-box-shadow-color-rgb), 0.92);color:var(--color-activated)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated::part(native)::before{content:"";z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;border-radius:inherit;pointer-events:none;backdrop-filter:brightness(144%)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.button-has-icon-only,ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.back-button-has-icon-only{transform:scale(1.32)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.button-has-icon-only.button-small,ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.back-button-has-icon-only.button-small{transform:scale(1.18)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.button-has-icon-only.button-large,ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.back-button-has-icon-only.button-large{transform:scale(1.22)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only){transform:scale(1.25)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-small{transform:scale(1.12)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-large{transform:scale(1.12)}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].button-disabled{opacity:1}ion-button.ios:not(.ios26-disabled).button-solid[type=submit].button-disabled::part(native){background:var(--ion-background-color-step-200, #cccccc);color:#fff;border:none}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear){--background-hover: transparent;--background-activated: transparent}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear):not(.button-has-icon-only):not(.back-button-has-icon-only):not(.button-small):not(.button-large){min-height:44px}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear)::part(native){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);color:var(--color)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear):not(.button-disabled){opacity:1}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear){--color: rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated{--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.button-has-icon-only,ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.back-button-has-icon-only{transform:scale(1.32)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.button-has-icon-only.button-small,ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.back-button-has-icon-only.button-small{transform:scale(1.18)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.button-has-icon-only.button-large,ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.back-button-has-icon-only.button-large{transform:scale(1.22)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only){transform:scale(1.25)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-small{transform:scale(1.12)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-large{transform:scale(1.12)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated::part(native){opacity:1}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).button-disabled{opacity:1;--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5)}ion-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).button-disabled.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.5)}ion-button.ios:not(.ios26-disabled).button-has-icon-only:not(.button-small):not(.button-large)::part(native),ion-button.ios:not(.ios26-disabled).back-button-has-icon-only:not(.button-small):not(.button-large)::part(native){width:44px;height:44px;padding:2px}ion-button.ios:not(.ios26-disabled).button-has-icon-only ion-icon,ion-button.ios:not(.ios26-disabled).back-button-has-icon-only ion-icon{font-size:1.4rem}ion-button.ios:not(.ios26-disabled).button-has-icon-only ion-icon[name=close-outline],ion-button.ios:not(.ios26-disabled).back-button-has-icon-only ion-icon[name=close-outline]{font-size:2rem}ion-back-button.ios:not(.ios26-disabled){max-height:inherit;z-index:0}ion-back-button.ios:not(.ios26-disabled).ion-activated{z-index:10}ion-back-button.ios:not(.ios26-disabled){transition:transform var(--ios26-activated-transition-duration) ease-out,color 50ms ease;will-change:transform}ion-back-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large){font-size:1.05rem}ion-back-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large):not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native){padding:0 12px;min-height:44px}ion-back-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large):not(.button-has-icon-only):not(.back-button-has-icon-only) ion-icon[slot=start]{margin-inline-start:-0.15em;margin-inline-end:.15em}ion-back-button.ios:not(.ios26-disabled):not(.button-small):not(.button-large):not(.button-has-icon-only):not(.back-button-has-icon-only) ion-icon[slot=end]{margin-inline-start:.15em;margin-inline-end:-0.15em}ion-back-button.ios:not(.ios26-disabled):not(.button-round){--border-radius: 24px}ion-back-button.ios:not(.ios26-disabled):not(.button-round).button-large{--border-radius: 30px}ion-back-button.ios:not(.ios26-disabled):not(.button-clear):not(.button-solid).ion-activated{transform:scale(0.98)}ion-back-button.ios:not(.ios26-disabled):not(.button-clear):not(.button-solid).ion-activated.button-small{transform:scale(0.98)}ion-back-button.ios:not(.ios26-disabled):not(.button-clear):not(.button-solid).ion-activated.button-large{transform:scale(0.98)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-primary{--color: var(--ion-color-primary-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-primary-brightness);--border-color: var(--ion-color-primary-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-secondary{--color: var(--ion-color-secondary-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-secondary-brightness);--border-color: var(--ion-color-secondary-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-tertiary{--color: var(--ion-color-tertiary-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-tertiary-brightness);--border-color: var(--ion-color-tertiary-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-success{--color: var(--ion-color-success-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-success-brightness);--border-color: var(--ion-color-success-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-warning{--color: var(--ion-color-warning-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-warning-brightness);--border-color: var(--ion-color-warning-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-danger{--color: var(--ion-color-danger-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-danger-brightness);--border-color: var(--ion-color-danger-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-light{--color: var(--ion-color-light-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-light-brightness);--border-color: var(--ion-color-light-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-medium{--color: var(--ion-color-medium-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-medium-brightness);--border-color: var(--ion-color-medium-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-color-dark{--color: var(--ion-color-dark-brightness, var(--ion-color-contrast));--color-activated: var(--ion-color-dark-brightness);--border-color: var(--ion-color-dark-brightness, transparent);--border-width: 0.5px;--border-style: solid}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit]{--background-color: #fff;--background-activated-opacity: 1}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit]:not(.button-has-icon-only):not(.back-button-has-icon-only):not(.button-small):not(.button-large){min-height:44px}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit]::part(native){position:relative;color:var(--color);z-index:0}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated{--border-width: 0.78px}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated::part(native){box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 8px -4px rgba(var(--ios26-glass-box-shadow-color-rgb), 0.92);color:var(--color-activated)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated::part(native)::before{content:"";z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;border-radius:inherit;pointer-events:none;backdrop-filter:brightness(144%)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.button-has-icon-only,ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.back-button-has-icon-only{transform:scale(1.32)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.button-has-icon-only.button-small,ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.back-button-has-icon-only.button-small{transform:scale(1.18)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.button-has-icon-only.button-large,ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated.ion-activated.back-button-has-icon-only.button-large{transform:scale(1.22)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only){transform:scale(1.25)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-small{transform:scale(1.12)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-large{transform:scale(1.12)}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].button-disabled{opacity:1}ion-back-button.ios:not(.ios26-disabled).button-solid[type=submit].button-disabled::part(native){background:var(--ion-background-color-step-200, #cccccc);color:#fff;border:none}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear){--background-hover: transparent;--background-activated: transparent}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear):not(.button-has-icon-only):not(.back-button-has-icon-only):not(.button-small):not(.button-large){min-height:44px}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear)::part(native){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);color:var(--color)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear):not(.button-disabled){opacity:1}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear){--color: rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated{--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.button-has-icon-only,ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.back-button-has-icon-only{transform:scale(1.32)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.button-has-icon-only.button-small,ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.back-button-has-icon-only.button-small{transform:scale(1.18)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.button-has-icon-only.button-large,ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated.ion-activated.back-button-has-icon-only.button-large{transform:scale(1.22)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only){transform:scale(1.25)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-small{transform:scale(1.12)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated:not(.button-has-icon-only):not(.back-button-has-icon-only).button-large{transform:scale(1.12)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).ion-activated::part(native){opacity:1}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).button-disabled{opacity:1;--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5)}ion-back-button.ios:not(.ios26-disabled):not(.button-solid):not(.button-outline):not(.button-clear).button-disabled.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.5)}ion-back-button.ios:not(.ios26-disabled).button-has-icon-only:not(.button-small):not(.button-large)::part(native),ion-back-button.ios:not(.ios26-disabled).back-button-has-icon-only:not(.button-small):not(.button-large)::part(native){width:44px;height:44px;padding:2px}ion-back-button.ios:not(.ios26-disabled).button-has-icon-only ion-icon,ion-back-button.ios:not(.ios26-disabled).back-button-has-icon-only ion-icon{font-size:1.4rem}ion-back-button.ios:not(.ios26-disabled).button-has-icon-only ion-icon[name=close-outline],ion-back-button.ios:not(.ios26-disabled).back-button-has-icon-only ion-icon[name=close-outline]{font-size:2rem}ion-back-button.ion-cloned-element{visibility:hidden}ion-card.ios:not(.ios26-disabled){border-radius:24px}ion-card.ios:not(.ios26-disabled) ion-list ion-item{--padding-start: 0}ion-chip.ios:not(.ios26-disabled):not(.chip-outline){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);transition:transform 100ms ease-out}ion-chip.ios:not(.ios26-disabled):not(.chip-outline).ion-activated{transform:scale(1.12)}.ios:not(.ios26-disabled) .ion-page:not(:has(ion-footer)) ion-content .ion-content-scroll-host{margin-bottom:calc((60px + var(--ios26-floating-safe-area-bottom))-1);padding-bottom:calc(60px + var(--ios26-floating-safe-area-bottom))}.ios:not(.ios26-disabled) ion-content:not(:has(.ion-content-scroll-host)){--padding-bottom: calc(60px + var(--ios26-floating-safe-area-bottom))}ion-datetime.ios:not(.ios26-disabled){background:rgba(var(--ios26-glass-background-rgb), 0.6667);backdrop-filter:blur(8px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);border-radius:24px;--wheel-highlight-background: transparent;--wheel-highlight-border-radius: 24px}ion-fab.ios:not(.ios26-disabled) ion-fab-button{--transition: var(--ios26-activated-transition-duration) transform cubic-bezier(0.25, 1.11, 0.78, 1.59), var(--ios26-activated-transition-duration) color ease;--background-activated-opacity: 0;--background-focused-opacity: 0;--background-hover-opacity: 0;--color: rgb(var(--ion-text-color-rgb, 0, 0, 0));width:61px;height:61px}ion-fab.ios:not(.ios26-disabled) ion-fab-button.fab-button-in-list,ion-fab.ios:not(.ios26-disabled) ion-fab-button.fab-button-small{width:48px;height:48px}ion-fab.ios:not(.ios26-disabled) ion-fab-button.ion-activated{--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}ion-fab.ios:not(.ios26-disabled) ion-fab-button.ion-activated.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1)}ion-fab.ios:not(.ios26-disabled) ion-fab-button::part(native){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6)}ion-fab.ios:not(.ios26-disabled).fab-vertical-top{top:var(--ios26-floating-safe-area-top)}ion-fab.ios:not(.ios26-disabled).fab-vertical-bottom{bottom:var(--ios26-floating-safe-area-bottom)}ion-fab.ios:not(.ios26-disabled).fab-horizontal-start{right:calc(16px + var(--ion-safe-area-left, 0px))}ion-fab.ios:not(.ios26-disabled).fab-horizontal-end{right:calc(16px + var(--ion-safe-area-right, 0px))}ion-list.ios:not(.ios26-disabled) ion-item{--background-hover-opacity: 0;--background-focused-opacity: 0}ion-list.list-inset.ios:not(.ios26-disabled){background:rgba(0,0,0,0)}ion-list.list-inset.ios:not(.ios26-disabled) ion-list-header{display:flex;align-items:center}ion-list.list-inset.ios:not(.ios26-disabled) ion-list-header ion-label{font-size:.9rem;margin:8px 4px 4px;color:var(--ion-color-medium-tint)}ion-list.list-inset.ios:not(.ios26-disabled) ion-list-header ion-button{margin-top:8px}ion-list.list-inset.ios:not(.ios26-disabled) ion-list-header ion-note{font-size:.9rem;margin:8px 16px 4px 0}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group.header-item-group>ion-item>ion-label{width:100%;text-align:center;padding:32px 16px 16px;transform:translateX(5px)}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group.header-item-group>ion-item>ion-label ion-header.header-collapse-condense>ion-toolbar{--min-height: 0;visibility:hidden}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group.header-item-group>ion-item>ion-label ion-icon{font-size:2.8rem;color:#fff;border-radius:20%;padding:6px}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group.header-item-group>ion-item>ion-label h2{font-size:1.2rem;font-weight:bold;margin-top:8px}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group.header-item-group>ion-item>ion-label ion-text{font-size:.9rem}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item ion-text[slot=end],ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item ion-text[slot=end],ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item ion-text[slot=end],ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item ion-text[slot=end]{padding-left:8px}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item.item-disabled,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item.item-disabled,ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item.item-disabled,ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item.item-disabled{opacity:1}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item.item-disabled>,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item.item-disabled>,ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item.item-disabled>,ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item.item-disabled>{opacity:.4}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item.item-disabled::part(detail-icon),ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item.item-disabled::part(detail-icon),ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item.item-disabled::part(detail-icon),ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item.item-disabled::part(detail-icon){opacity:.1}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item ion-button[slot=end].ion-align-self-end,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item ion-button[slot=end].ion-align-self-end,ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item ion-button[slot=end].ion-align-self-end,ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item ion-button[slot=end].ion-align-self-end{transform:translateY(-7px)}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item ion-button[slot=end] ion-icon[slot=icon-only],ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item ion-button[slot=end] ion-icon[slot=icon-only],ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item ion-button[slot=end] ion-icon[slot=icon-only],ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item ion-button[slot=end] ion-icon[slot=icon-only]{font-size:1.2rem !important;transform:translateY(4px)}ion-list.list-inset.ios:not(.ios26-disabled)>ion-note{color:var(--ion-color-medium-tint);font-size:.9rem;display:block;margin:8px calc(20px + var(--ion-safe-area-right)) 8px calc(20px + var(--ion-safe-area-left))}ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group{display:block}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group,ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group,ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group{border-radius:24px;overflow:hidden}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item,ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item,ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item{--inner-padding-end: 0}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item::part(native),ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item::part(native),ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item::part(native),ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item::part(native){padding-right:calc(var(--ion-safe-area-right, 0px) + 18px)}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item,ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item,ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item,ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item{--min-height: 52px}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item>ion-input[labelplacement=floating],ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item>ion-input[labelplacement=floating],ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item>ion-input[labelplacement=floating],ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item>ion-input[labelplacement=floating]{transition:transform 200ms ease}ion-list.list-inset.ios:not(.ios26-disabled) ion-item-group ion-item>ion-input[labelplacement=floating]:not(.label-floating),ion-list.list-inset.ios:not(.ios26-disabled) ion-reorder-group ion-item>ion-input[labelplacement=floating]:not(.label-floating),ion-list.list-inset.ios:not(.ios26-disabled) ion-accordion-group ion-item>ion-input[labelplacement=floating]:not(.label-floating),ion-list.list-inset.ios:not(.ios26-disabled) ion-radio-group ion-item>ion-input[labelplacement=floating]:not(.label-floating){transform:translateY(-2px)}ion-loading.ios:not(.ios26-disabled){--backdrop-opacity: 0.2}ion-loading.ios:not(.ios26-disabled) .loading-wrapper{background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);border-radius:24px;padding-inline-start:24px;padding-inline-end:24px}ion-modal.ios:not(.ios26-disabled){--backdrop-opacity: 0.2}ion-modal.ios:not(.ios26-disabled) ion-toolbar{padding-right:calc(var(--ion-safe-area-right) + 4px);padding-left:calc(var(--ion-safe-area-left) + 4px)}ion-modal.ios:not(.ios26-disabled)::part(handle){width:80px}ion-modal.ios:not(.ios26-disabled):has(.ion-delegate-host):has(ion-datetime){--border-radius: 24px;--ion-background-color: transparent}ion-modal.ios:not(.ios26-disabled).modal-sheet{--border-radius: 30px}ion-modal.ios:not(.ios26-disabled).modal-sheet::part(content){background:rgba(var(--ios26-glass-background-rgb), 1);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6)}ion-popover.ios:not(.ios26-disabled){--backdrop-opacity: 0.2}ion-popover.ios:not(.ios26-disabled)::part(arrow){display:none}ion-popover.ios:not(.ios26-disabled)::part(content){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);border-radius:24px;padding:0}ion-popover.ios:not(.ios26-disabled) ion-select-popover ion-list{background:rgba(0,0,0,0)}ion-popover.ios:not(.ios26-disabled) ion-select-popover ion-list ion-item{--background: transparent}ion-range.ios:not(.ios26-disabled){--knob-size: 20px;--knob-border-radius: 24px;padding-right:36px}ion-range.ios:not(.ios26-disabled)::part(knob){width:38px;transition:transform 300ms ease}ion-range.ios:not(.ios26-disabled).range-pressed::part(knob){transform:scale(1.4, 1.6) translateX(-3.8px);background:rgba(var(--ios26-glass-background-rgb), 0.1);backdrop-filter:blur(0.5px) saturate(120%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);box-shadow:inset 0 8px 8px -8px var(--bar-background),inset 0 -8px 8px -8px var(--bar-background),inset 8px 0 8px -8px var(--bar-background),inset -8px 0 8px -8px var(--bar-background)}ion-modal.ios ion-searchbar:not(.ios26-disabled) .searchbar-input-container input.searchbar-input{backdrop-filter:none}ion-searchbar.ios:not(.ios26-disabled){min-height:60px;padding:0}ion-searchbar.ios:not(.ios26-disabled) ion-icon.searchbar-search-icon{inset-inline-start:12px}ion-searchbar.ios:not(.ios26-disabled) .searchbar-input-container{margin:0 8px 0 16px;align-self:center;justify-self:center}ion-searchbar.ios:not(.ios26-disabled) .searchbar-input-container input.searchbar-input{min-height:44px;background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);border-radius:20px;padding-inline-start:2.4rem !important}ion-searchbar.ios:not(.ios26-disabled) .searchbar-input-container .searchbar-clear-button{padding-inline-end:2rem}ion-segment.ios:not(.ios26-disabled){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);min-height:48px;border-radius:25px}ion-segment.ios:not(.ios26-disabled).segment-expand{min-height:24px;width:calc(100% - var(--ion-safe-area-left, 0) - var(--ion-safe-area-left, 0) - 24px)}ion-segment.ios:not(.ios26-disabled).segment-expand.segment-activated{transform:scale(1)}ion-segment.ios:not(.ios26-disabled).segment-expand ion-segment-button{min-height:24px}ion-segment.ios:not(.ios26-disabled){transition:transform var(--ios26-activated-transition-duration) ease-out;will-change:transform}ion-segment.ios:not(.ios26-disabled).in-toolbar-color:not(.in-segment-color) ion-segment-button:not(.segment-button-checked)::part(native){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 1) !important}ion-segment.ios:not(.ios26-disabled) ion-segment-button{--border-width: 0;--ion-color-base: var(--ion-text-color, #000);--padding-start: 8px;--padding-end: 8px;min-width:60px;margin:3px 2px;font-size:14.5px}ion-segment.ios:not(.ios26-disabled) ion-segment-button::part(indicator-background){border-radius:25px;box-shadow:none;transition:background .2s ease;background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06)}ion-segment.ios:not(.ios26-disabled).segment-activated{transform:scale(1.1)}ion-segment.ios:not(.ios26-disabled).segment-activated ion-segment-button{transition:transform 100ms ease-out}ion-segment.ios:not(.ios26-disabled).segment-activated ion-segment-button.segment-button-checked::part(native){transform:scale(1.08)}ion-segment.ios:not(.ios26-disabled).segment-activated ion-segment-button::part(indicator-background){position:relative;z-index:1;background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);transform:scale(1.1);transform-origin:center center}ion-tab-bar.ios:not(.ios26-disabled){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);z-index:2;border-radius:40px;--color: rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-tab-bar.ios:not(.ios26-disabled)[slot=top]{position:absolute;top:var(--ios26-floating-safe-area-top);right:calc(16px + var(--ion-safe-area-right, 0px))}ion-tab-bar.ios:not(.ios26-disabled)[slot=bottom]{position:absolute;bottom:var(--ios26-floating-safe-area-bottom);left:calc(16px + var(--ion-safe-area-left, 0px))}ion-tab-bar.ios:not(.ios26-disabled){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-left, 0px)) - 60px - 12px);max-width:474px;min-height:56px}ion-tab-bar.ios:not(.ios26-disabled):has(:nth-child(5)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-left, 0px)));max-width:546px}ion-tab-bar.ios:not(.ios26-disabled){padding:2px 2px;transition:transform var(--ios26-activated-transition-duration) ease-out;will-change:transform}ion-tab-bar.ios:not(.ios26-disabled):has(ion-tab-button.ion-activated){transform:scale(1.038)}ion-tab-bar.ios:not(.ios26-disabled):has(ion-tab-button.ion-activated) ion-tab-button.tab-selected:not(.ion-activated){--color-selected: rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-tab-bar.ios:not(.ios26-disabled).tab-bar-ios26-effect:has(ion-tab-button.ion-activated) ion-tab-button.tab-selected::part(native){background:rgba(var(--ios26-button-color-selected-rgb), 0)}ion-tab-bar.ios:not(.ios26-disabled).tab-bar-ios26-effect:has(ion-tab-button.ion-activated) ion-tab-button.ion-activated ion-label,ion-tab-bar.ios:not(.ios26-disabled).tab-bar-ios26-effect:has(ion-tab-button.ion-activated) ion-tab-button.ion-activated ion-icon{filter:brightness(100%)}ion-tab-button.ios:not(.ios26-disabled) ion-icon{font-size:26px}ion-tab-button.ios:not(.ios26-disabled) ion-label,ion-tab-button.ios:not(.ios26-disabled) ion-icon{transition:filter var(--ios26-activated-transition-duration) ease,color var(--ios26-activated-transition-duration) ease}ion-tab-button.ios:not(.ios26-disabled){background:rgba(var(--ios26-glass-background-rgb), 0);height:auto;transition:transform var(--ios26-activated-transition-duration) ease}ion-tab-button.ios:not(.ios26-disabled)::part(native){overflow:visible;min-height:56px;border-radius:32px}ion-tab-button.ios:not(.ios26-disabled).ion-activated{transform:scale(1.1);position:relative;color:var(--color-selected)}ion-tab-button.ios:not(.ios26-disabled).ion-activated ion-label,ion-tab-button.ios:not(.ios26-disabled).ion-activated ion-icon{filter:brightness(104%)}ion-tab-button.ios:not(.ios26-disabled).tab-selected::part(native){background:rgba(var(--ios26-button-color-selected-rgb), 0.095);transition:background var(--ios26-activated-transition-duration) ease}ion-tab-button.ios:not(.ios26-disabled).tab-selected.ion-activated::part(native){background:rgba(var(--ios26-glass-box-shadow-color-rgb), 0.02)}ion-tab-button.ios:not(.ios26-disabled).ion-cloned-element::part(native){background:rgba(var(--ios26-glass-background-rgb), 1);backdrop-filter:blur(2px) saturate(104%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);background:rgba(0,0,0,0)}ion-tab-button.ios:not(.ios26-disabled).ion-cloned-element{color:var(--color-selected, var(--ion-color-primary, #0054e9));pointer-events:none;position:absolute;left:0;top:0;transform-origin:center}ion-tab-button.ios:not(.ios26-disabled).ion-cloned-element>{visibility:hidden}ion-toast.ios:not(.ios26-disabled){--background: transparent;--start: 16px;--end: 16px}ion-toast.ios:not(.ios26-disabled)::part(container){background:rgba(var(--ios26-glass-background-rgb), 0.72);backdrop-filter:blur(2px) saturate(360%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);border-radius:24px}ion-item.ios:not(.ios26-disabled) ion-toggle.ios:not(.ios26-disabled).toggle-checked.toggle-activated::part(track){transform-origin:left;transform:scaleX(0.894)}ion-item.ios:not(.ios26-disabled) ion-toggle.ios:not(.ios26-disabled).toggle-activated::part(handle){transform:scale(1.4, 1.6) translateX(-5.7px)}ion-toggle.ios:not(.ios26-disabled){--handle-width: 38px;--handle-height: 24px;--handle-max-width: none;--handle-max-height: none;--track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23)}ion-toggle.ios:not(.ios26-disabled)::part(track){overflow:visible;width:64px;height:28px;transition:transform 280ms ease}ion-toggle.ios:not(.ios26-disabled).toggle-activated:not(.toggle-checked)::part(handle){transform:translateX(-4px) scale(1.4, 1.6)}ion-toggle.ios:not(.ios26-disabled).toggle-activated::part(handle){transform:scale(1.4, 1.6);background:rgba(var(--ios26-glass-background-rgb), 0.1);backdrop-filter:blur(0.5px) saturate(120%);box-shadow:inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);border-top:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-right:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);border-bottom:.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);border-left:.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);transition:transform 280ms,width 120ms ease-in-out 80ms,left 110ms ease-in-out 80ms,right 110ms ease-in-out 80ms;box-shadow:inset 0 0 8px 0 var(--track-background)}ion-toggle.ios:not(.ios26-disabled).ion-color.toggle-checked.toggle-activated::part(handle){box-shadow:inset 0 8px 8px -8px var(--ion-color-base),inset 8px 0 8px -8px var(--track-background),inset 8px 0 8px -8px var(--track-background),inset -8px 0 8px -8px var(--ion-color-base)}ion-toggle.ios:not(.ios26-disabled).toggle-checked.toggle-activated::part(handle){box-shadow:inset 0 8px 8px -8px var(--track-background-checked),inset 8px 0 8px -8px var(--track-background),inset 8px 0 8px -8px var(--track-background),inset -8px 0 8px -8px var(--track-background-checked)}ion-header.ios:not(.ios26-disabled) ion-toolbar:not(.ios26-disabled):first-of-type{padding-top:max(var(--ion-safe-area-top) - 12px,4px)}ion-modal.ios:not(.ios26-disabled).modal-card ion-header.ios:not(.ios26-disabled) ion-toolbar.ios:not(.ios26-disabled):first-of-type,ion-modal.ios:not(.ios26-disabled).modal-sheet ion-header.ios:not(.ios26-disabled) ion-toolbar.ios:not(.ios26-disabled):first-of-type{padding-top:6px}ion-header.ios.header-collapse-condense:not(.ios26-disabled) ion-toolbar:not(.ios26-disabled):first-of-type{padding-top:0}ion-toolbar.ios:not(.toolbar-title-large):not(.ios26-disabled):not(:has(ion-segment.segment-expand)){--min-height: 68px}ion-toolbar.ios:not(.ios26-disabled):has(ion-searchbar.ios:not(.ios26-disabled)) ion-buttons{margin-top:11px}ion-toolbar.ios:not(.ios26-disabled):has(ion-searchbar.ios:not(.ios26-disabled))>ion-button{margin-top:11px}ion-header.ios:not(.ios26-disabled) ion-buttons,ion-footer.ios:not(.ios26-disabled) ion-buttons{margin-left:12px;margin-right:12px}ion-header.ios:not(.ios26-disabled) ion-back-button,ion-footer.ios:not(.ios26-disabled) ion-back-button{margin-left:12px;margin-right:12px}ion-header.ios:not(.ios26-disabled) ion-toolbar ion-buttons ion-back-button,ion-footer.ios:not(.ios26-disabled) ion-toolbar ion-buttons ion-back-button{margin-left:0;margin-right:0}

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { Gesture } from '@ionic/core/dist/types/utils/gesture';
+export declare const registerTabBarEffect: (ionTabBar: HTMLElement) => Gesture;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAE/D,eAAO,MAAM,oBAAoB,GAAI,WAAW,WAAW,KAAG,OAiO7D,CAAC"}

package/dist/index.js ADDED Viewed

@@ -0,0 +1,208 @@
+import { createGesture, createAnimation } from '@ionic/core';
+export const registerTabBarEffect = (ionTabBar) => {
+    let gesture;
+    let currentTouchedButton;
+    let gestureMoveStartTime;
+    let tabEffectElY;
+    const tabEffectEl = cloneElement('ion-tab-button');
+    const GestureName = 'tab-bar-gesture';
+    const MinScale = 'scale(1.1)';
+    const MiddleScale = 'scale(1.2)';
+    const MaxScale = 'scale(1.3)';
+    const OverScale = 'scale(1.4)';
+    ionTabBar.addEventListener('pointerdown', () => clearActivated());
+    const createTabButtonGesture = () => {
+        ionTabBar.classList.add('tab-bar-ios26-effect');
+        gesture = createGesture({
+            el: ionTabBar,
+            threshold: 0,
+            gestureName: GestureName,
+            onStart: (event) => {
+                enterTabButtonAnimation(event)?.play();
+            },
+            onMove: (event) => {
+                moveTabButtonAnimation(event)?.play();
+            },
+            onEnd: (event) => {
+                leaveTabButtonAnimation(event).then((animation) => animation?.play());
+            },
+        });
+        gesture.enable(true);
+    };
+    createTabButtonGesture();
+    const clearActivated = (isAfterAddWrite = false) => {
+        if (currentTouchedButton) {
+            tabEffectEl.style.display = 'none';
+            tabEffectEl.innerHTML = '';
+            tabEffectEl.style.top = 'auto';
+            tabEffectEl.style.top = 'left';
+            tabEffectEl.style.transform = 'none';
+            currentTouchedButton.classList.remove('ion-activated');
+            if (isAfterAddWrite) {
+                currentTouchedButton.click();
+            }
+            if (!isAfterAddWrite) {
+                gesture.destroy();
+                createTabButtonGesture();
+            }
+            currentTouchedButton = null;
+        }
+    };
+    const getTransform = (detailCurrentX, tabSelectedActual) => {
+        const diff = -2;
+        const currentX = detailCurrentX - tabSelectedActual.clientWidth / 2;
+        const maxLeft = tabSelectedActual.getBoundingClientRect().left + diff;
+        const maxRight = tabSelectedActual.getBoundingClientRect().right - diff - tabSelectedActual.clientWidth;
+        if (maxLeft < currentX && currentX < maxRight) {
+            return `translate3d(${currentX}px, ${tabEffectElY}px, 0)`;
+        }
+        if (maxLeft > currentX) {
+            return `translate3d(${maxLeft}px, ${tabEffectElY}px, 0)`;
+        }
+        return `translate3d(${maxRight}px, ${tabEffectElY}px, 0)`;
+    };
+    const enterTabButtonAnimation = (detail) => {
+        currentTouchedButton = detail.event.target.closest('ion-tab-button');
+        const tabSelectedActual = ionTabBar.querySelector('ion-tab-button.tab-selected');
+        if (tabSelectedActual === null || currentTouchedButton === null) {
+            return undefined;
+        }
+        tabEffectElY = tabSelectedActual.getBoundingClientRect().top;
+        const startTransform = getTransform(tabSelectedActual.getBoundingClientRect().left + tabSelectedActual.clientWidth / 2, tabSelectedActual);
+        const middleTransform = getTransform((tabSelectedActual.getBoundingClientRect().left + tabSelectedActual.clientWidth / 2 + detail.currentX) / 2, currentTouchedButton);
+        const endTransform = getTransform(detail.currentX, currentTouchedButton);
+        const tabButtonAnimation = createAnimation();
+        tabButtonAnimation
+            .addElement(tabEffectEl)
+            .delay(70)
+            .beforeStyles({
+            width: `${tabSelectedActual.clientWidth}px`,
+            height: `${tabSelectedActual.clientHeight}px`,
+            display: 'block',
+        })
+            .beforeAddWrite(() => {
+            tabSelectedActual.childNodes.forEach((node) => {
+                tabEffectEl.appendChild(node.cloneNode(true));
+            });
+            currentTouchedButton.classList.add('ion-activated');
+        });
+        if (currentTouchedButton === tabSelectedActual) {
+            tabButtonAnimation
+                .keyframes([
+                {
+                    transform: `${startTransform} ${MinScale}`,
+                    opacity: 1,
+                    offset: 0,
+                },
+                {
+                    transform: `${middleTransform} ${MiddleScale}`,
+                    opacity: 1,
+                    offset: 0.6,
+                },
+                {
+                    transform: `${endTransform} ${MaxScale}`,
+                    opacity: 1,
+                    offset: 1,
+                },
+            ])
+                .duration(120);
+            gestureMoveStartTime = detail.currentTime + 120;
+        }
+        else {
+            tabButtonAnimation
+                .keyframes([
+                {
+                    transform: `${startTransform} ${MinScale}`,
+                    opacity: 1,
+                    offset: 0,
+                },
+                {
+                    transform: `${middleTransform} ${MiddleScale}`,
+                    opacity: 1,
+                    offset: 0.4,
+                },
+                {
+                    transform: `${endTransform} ${MaxScale}`,
+                    opacity: 1,
+                    offset: 0.55,
+                },
+                {
+                    transform: `${endTransform} ${OverScale}`,
+                    opacity: 1,
+                    offset: 0.75,
+                },
+                {
+                    transform: `${endTransform} ${MaxScale}`,
+                    opacity: 1,
+                    offset: 1,
+                },
+            ])
+                .duration(480);
+            gestureMoveStartTime = detail.currentTime + 480;
+        }
+        return tabButtonAnimation;
+    };
+    const moveTabButtonAnimation = (detail) => {
+        if (gestureMoveStartTime) {
+            if (detail.currentTime < gestureMoveStartTime) {
+                return undefined;
+            }
+        }
+        const tabSelectedActual = ionTabBar.querySelector('ion-tab-button.tab-selected');
+        if (tabSelectedActual === null || currentTouchedButton === null) {
+            return undefined;
+        }
+        const transform = getTransform(detail.currentX, currentTouchedButton);
+        const tabButtonAnimation = createAnimation();
+        tabButtonAnimation.addElement(tabEffectEl);
+        tabButtonAnimation.duration(50).keyframes([
+            {
+                transform: `${transform} ${MaxScale}`,
+            },
+            {
+                transform: `${transform} ${MaxScale}`,
+            },
+        ]);
+        return tabButtonAnimation;
+    };
+    const leaveTabButtonAnimation = async (detail) => {
+        if (gestureMoveStartTime) {
+            if (detail.currentTime < gestureMoveStartTime) {
+                await new Promise((resolve) => setTimeout(resolve, gestureMoveStartTime - detail.currentTime));
+            }
+        }
+        const tabSelectedActual = ionTabBar.querySelector('ion-tab-button.tab-selected');
+        if (tabSelectedActual === null || currentTouchedButton === null) {
+            return undefined;
+        }
+        const endTransform = getTransform(currentTouchedButton.getBoundingClientRect().left + currentTouchedButton.clientWidth / 2, currentTouchedButton);
+        const tabButtonAnimation = createAnimation();
+        tabButtonAnimation.addElement(tabEffectEl);
+        tabButtonAnimation
+            .onFinish(() => clearActivated(true))
+            .duration(50)
+            .keyframes([
+            {
+                transform: `${endTransform} ${MaxScale}`,
+                opacity: 1,
+            },
+            {
+                transform: `${endTransform} ${MinScale}`,
+                opacity: 0,
+            },
+        ]);
+        return tabButtonAnimation;
+    };
+    return gesture;
+};
+const cloneElement = (tagName) => {
+    const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
+    if (getCachedEl !== null) {
+        return getCachedEl;
+    }
+    const clonedEl = document.createElement(tagName);
+    clonedEl.classList.add('ion-cloned-element');
+    clonedEl.style.setProperty('display', 'none');
+    document.body.appendChild(clonedEl);
+    return clonedEl;
+};

package/package.json CHANGED Viewed

@@ -1,15 +1,27 @@
 {
   "name": "@rdlabo/ionic-theme-ios26",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "iOS26 CSS Theme for Ionic Framework",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./css/*": "./dist/css/*"
+  },
   "files": [
     "dist",
     "src",
     "package.json"
   ],
   "scripts": {
-    "build": "rm -rf dist/css && sass src:dist/css --style=compressed --no-source-map",
-    "build:demo": "cd demo && npm install && npm run build -- --configuration=production",
+    "build": "npm run build:css && npm run build:ts",
+    "build:css": "rm -rf dist/css && sass src:dist/css --style=compressed --no-source-map",
+    "build:ts": "tsc",
+    "build:demo": "npm run build && cd demo && npm install && npm run build -- --configuration=production",
     "prepare": "husky install",
     "lint": "prettier --check \"./**/*.{scss,ts}\" &&  prettier --parser angular --check \"./**/*.html\"",
     "fmt": "prettier --write \"./**/*.{scss,ts}\" &&  prettier --parser angular --write \"./**/*.html\"",
@@ -39,6 +51,7 @@
     "lint-staged": "^16.2.1",
     "np": "^10.2.0",
     "prettier": "^3.6.2",
-    "sass": "^1.93.2"
+    "sass": "^1.93.2",
+    "typescript": "^5.9.3"
   }
 }

package/src/components/ion-tabs.scss CHANGED Viewed

@@ -43,44 +43,75 @@ ion-tab-bar.ios:not(.ios26-disabled) {
     }
   }
-  ion-tab-button {
-    ion-icon {
-      font-size: 26px;
+  /**
+   * effectが有効な場合、effectでスタイリングするため不要
+   */
+  &.tab-bar-ios26-effect:has(ion-tab-button.ion-activated) {
+    ion-tab-button.tab-selected::part(native) {
+      background: rgba(var(--ios26-button-color-selected-rgb), 0);
+    }
+    ion-tab-button.ion-activated {
+      ion-label,
+      ion-icon {
+        filter: brightness(100%);
+      }
     }
+  }
+}
+ion-tab-button.ios:not(.ios26-disabled) {
+  ion-icon {
+    font-size: 26px;
+  }
+  ion-label,
+  ion-icon {
+    transition:
+      filter var(--ios26-activated-transition-duration) ease,
+      color var(--ios26-activated-transition-duration) ease;
+  }
+  background: rgba(var(--ios26-glass-background-rgb), 0);
+  height: auto;
+  transition: transform var(--ios26-activated-transition-duration) ease;
+  &::part(native) {
+    overflow: visible;
+    min-height: 56px;
+    border-radius: 32px;
+  }
+  &.ion-activated {
+    transform: scale(1.1);
+    position: relative;
+    color: var(--color-selected);
     ion-label,
     ion-icon {
-      transition:
-        filter var(--ios26-activated-transition-duration) ease,
-        color var(--ios26-activated-transition-duration) ease;
+      filter: brightness(104%);
     }
-    background: rgba(var(--ios26-glass-background-rgb), 0);
-    height: auto;
-    transition: transform var(--ios26-activated-transition-duration) ease;
+  }
+  &.tab-selected {
     &::part(native) {
-      overflow: visible;
-      min-height: 56px;
-      border-radius: 32px;
+      background: rgba(var(--ios26-button-color-selected-rgb), 0.095);
+      transition: background var(--ios26-activated-transition-duration) ease;
     }
-    &.ion-activated {
-      transform: scale(1.1);
-      position: relative;
-      color: var(--color-selected);
-      ion-label,
-      ion-icon {
-        filter: brightness(104%);
-      }
+    &.ion-activated::part(native) {
+      background: rgba(var(--ios26-glass-box-shadow-color-rgb), 0.02);
     }
+  }
-    &.tab-selected {
-      &::part(native) {
-        background: rgba(var(--ios26-button-color-selected-rgb), 0.095);
-        transition: background var(--ios26-activated-transition-duration) ease;
-      }
-      &.ion-activated::part(native) {
-        background: rgba(var(--ios26-glass-box-shadow-color-rgb), 0.02);
-      }
+  &.ion-cloned-element {
+    &::part(native) {
+      @include api.glass-background(1, 2px, 104%);
+      background: transparent;
+    }
+    color: var(--color-selected, var(--ion-color-primary, #0054e9));
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transform-origin: center;
+    & > * {
+      visibility: hidden;
     }
   }
 }

package/src/index.ts ADDED Viewed

@@ -0,0 +1,244 @@
+import { createGesture, GestureDetail, createAnimation } from '@ionic/core';
+import type { Animation } from '@ionic/core/dist/types/utils/animation/animation-interface';
+import { Gesture } from '@ionic/core/dist/types/utils/gesture';
+export const registerTabBarEffect = (ionTabBar: HTMLElement): Gesture => {
+  let gesture!: Gesture;
+  let currentTouchedButton: HTMLIonTabButtonElement | null;
+  let gestureMoveStartTime: number | null;
+  let tabEffectElY: number | null;
+  const tabEffectEl = cloneElement('ion-tab-button');
+  const GestureName = 'tab-bar-gesture';
+  const MinScale = 'scale(1.1)';
+  const MiddleScale = 'scale(1.2)';
+  const MaxScale = 'scale(1.3)';
+  const OverScale = 'scale(1.4)';
+  ionTabBar.addEventListener('pointerdown', () => clearActivated());
+  const createTabButtonGesture = () => {
+    ionTabBar.classList.add('tab-bar-ios26-effect');
+    gesture = createGesture({
+      el: ionTabBar,
+      threshold: 0,
+      gestureName: GestureName,
+      onStart: (event) => {
+        enterTabButtonAnimation(event)?.play();
+      },
+      onMove: (event) => {
+        moveTabButtonAnimation(event)?.play();
+      },
+      onEnd: (event) => {
+        leaveTabButtonAnimation(event).then((animation) => animation?.play());
+      },
+    });
+    gesture.enable(true);
+  };
+  createTabButtonGesture();
+  const clearActivated = (isAfterAddWrite = false) => {
+    if (currentTouchedButton) {
+      tabEffectEl.style.display = 'none';
+      tabEffectEl.innerHTML = '';
+      tabEffectEl.style.top = 'auto';
+      tabEffectEl.style.top = 'left';
+      tabEffectEl.style.transform = 'none';
+      currentTouchedButton!.classList.remove('ion-activated');
+      if (isAfterAddWrite) {
+        currentTouchedButton.click();
+      }
+      /**
+       * もしこの処理がafterAddWrite以外で走る場合、正常に終了していない
+       */
+      if (!isAfterAddWrite) {
+        gesture.destroy();
+        createTabButtonGesture();
+      }
+      currentTouchedButton = null;
+    }
+  };
+  const getTransform = (detailCurrentX: number, tabSelectedActual: Element): string => {
+    const diff = -2;
+    const currentX = detailCurrentX - tabSelectedActual.clientWidth / 2;
+    const maxLeft = tabSelectedActual.getBoundingClientRect().left + diff;
+    const maxRight = tabSelectedActual.getBoundingClientRect().right - diff - tabSelectedActual.clientWidth;
+    if (maxLeft < currentX && currentX < maxRight) {
+      return `translate3d(${currentX}px, ${tabEffectElY}px, 0)`;
+    }
+    if (maxLeft > currentX) {
+      return `translate3d(${maxLeft}px, ${tabEffectElY}px, 0)`;
+    }
+    return `translate3d(${maxRight}px, ${tabEffectElY}px, 0)`;
+  };
+  const enterTabButtonAnimation = (detail: GestureDetail): Animation | undefined => {
+    currentTouchedButton = (detail.event.target as HTMLElement).closest('ion-tab-button');
+    const tabSelectedActual = ionTabBar.querySelector('ion-tab-button.tab-selected');
+    if (tabSelectedActual === null || currentTouchedButton === null) {
+      return undefined;
+    }
+    tabEffectElY = tabSelectedActual.getBoundingClientRect().top;
+    const startTransform = getTransform(
+      tabSelectedActual.getBoundingClientRect().left + tabSelectedActual.clientWidth / 2,
+      tabSelectedActual,
+    );
+    const middleTransform = getTransform(
+      (tabSelectedActual.getBoundingClientRect().left + tabSelectedActual.clientWidth / 2 + detail.currentX) / 2,
+      currentTouchedButton,
+    );
+    const endTransform = getTransform(detail.currentX, currentTouchedButton);
+    const tabButtonAnimation = createAnimation();
+    tabButtonAnimation
+      .addElement(tabEffectEl)
+      .delay(70)
+      .beforeStyles({
+        width: `${tabSelectedActual.clientWidth}px`,
+        height: `${tabSelectedActual.clientHeight}px`,
+        display: 'block',
+      })
+      .beforeAddWrite(() => {
+        tabSelectedActual.childNodes.forEach((node) => {
+          tabEffectEl.appendChild(node.cloneNode(true));
+        });
+        currentTouchedButton!.classList.add('ion-activated');
+      });
+    if (currentTouchedButton === tabSelectedActual) {
+      tabButtonAnimation
+        .keyframes([
+          {
+            transform: `${startTransform} ${MinScale}`,
+            opacity: 1,
+            offset: 0,
+          },
+          {
+            transform: `${middleTransform} ${MiddleScale}`,
+            opacity: 1,
+            offset: 0.6,
+          },
+          {
+            transform: `${endTransform} ${MaxScale}`,
+            opacity: 1,
+            offset: 1,
+          },
+        ])
+        .duration(120);
+      gestureMoveStartTime = detail.currentTime + 120;
+    } else {
+      tabButtonAnimation
+        .keyframes([
+          {
+            transform: `${startTransform} ${MinScale}`,
+            opacity: 1,
+            offset: 0,
+          },
+          {
+            transform: `${middleTransform} ${MiddleScale}`,
+            opacity: 1,
+            offset: 0.4,
+          },
+          {
+            transform: `${endTransform} ${MaxScale}`,
+            opacity: 1,
+            offset: 0.55,
+          },
+          {
+            transform: `${endTransform} ${OverScale}`,
+            opacity: 1,
+            offset: 0.75,
+          },
+          {
+            transform: `${endTransform} ${MaxScale}`,
+            opacity: 1,
+            offset: 1,
+          },
+        ])
+        .duration(480);
+      gestureMoveStartTime = detail.currentTime + 480;
+    }
+    return tabButtonAnimation;
+  };
+  const moveTabButtonAnimation = (detail: GestureDetail): Animation | undefined => {
+    if (gestureMoveStartTime) {
+      if (detail.currentTime < gestureMoveStartTime) {
+        return undefined;
+      }
+    }
+    const tabSelectedActual = ionTabBar.querySelector('ion-tab-button.tab-selected');
+    if (tabSelectedActual === null || currentTouchedButton === null) {
+      return undefined;
+    }
+    const transform = getTransform(detail.currentX, currentTouchedButton);
+    const tabButtonAnimation = createAnimation();
+    tabButtonAnimation.addElement(tabEffectEl);
+    tabButtonAnimation.duration(50).keyframes([
+      {
+        transform: `${transform} ${MaxScale}`,
+      },
+      {
+        transform: `${transform} ${MaxScale}`,
+      },
+    ]);
+    return tabButtonAnimation;
+  };
+  const leaveTabButtonAnimation = async (detail: GestureDetail): Promise<Animation | undefined> => {
+    if (gestureMoveStartTime) {
+      if (detail.currentTime < gestureMoveStartTime) {
+        await new Promise((resolve) => setTimeout(resolve, gestureMoveStartTime! - detail.currentTime));
+      }
+    }
+    const tabSelectedActual = ionTabBar.querySelector('ion-tab-button.tab-selected');
+    if (tabSelectedActual === null || currentTouchedButton === null) {
+      return undefined;
+    }
+    const endTransform = getTransform(
+      currentTouchedButton.getBoundingClientRect().left + currentTouchedButton.clientWidth / 2,
+      currentTouchedButton,
+    );
+    const tabButtonAnimation = createAnimation();
+    tabButtonAnimation.addElement(tabEffectEl);
+    tabButtonAnimation
+      .onFinish(() => clearActivated(true))
+      .duration(50)
+      .keyframes([
+        {
+          transform: `${endTransform} ${MaxScale}`,
+          opacity: 1,
+        },
+        {
+          transform: `${endTransform} ${MinScale}`,
+          opacity: 0,
+        },
+      ]);
+    return tabButtonAnimation;
+  };
+  return gesture;
+};
+const cloneElement = (tagName: string): HTMLElement => {
+  const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
+  if (getCachedEl !== null) {
+    return getCachedEl as HTMLElement;
+  }
+  const clonedEl = document.createElement(tagName) as HTMLElement;
+  clonedEl.classList.add('ion-cloned-element');
+  clonedEl.style.setProperty('display', 'none');
+  document.body.appendChild(clonedEl);
+  return clonedEl;
+};