@rdlabo/ionic-theme-ios27 2.0.2 → 2.0.3-beta.pr328.sha23377fb8137a

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 (18) hide show
  1. package/README.md +16 -16
  2. package/dist/css/components/ion-menu.css +1 -1
  3. package/dist/css/components/ion-tabs.css +1 -1
  4. package/dist/css/ionic-theme-ios27.css +1 -1
  5. package/dist/css/vertical-bars.css +1 -1
  6. package/docs/adaptive-themes.md +3 -3
  7. package/docs/add-native-ui.md +8 -8
  8. package/docs/eslint.md +1 -1
  9. package/docs/features.md +2 -2
  10. package/docs/migration.md +5 -5
  11. package/docs/setup.md +9 -9
  12. package/docs/special-markup.md +4 -4
  13. package/docs/using-ion-item-group.md +2 -2
  14. package/docs/vertical-bars-layout.md +4 -4
  15. package/package.json +2 -2
  16. package/src/styles/components/ion-menu.scss +6 -3
  17. package/src/styles/components/ion-tabs.scss +33 -5
  18. package/src/styles/vertical-bars.scss +6 -1
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  Install with `npm install @rdlabo/ionic-theme-ios27 @erkamyaman/capacitor-foldable`. For 1.x, use the [v1.2.1 guide](https://github.com/rdlabo-dev/ionic-theme-ios27/tree/ios27-v1.2.1).
4
4
  A theme for Ionic apps that brings iOS 27 Liquid Glass and motion to the Web. Capacitor iOS apps can also opt into Native UI for supported controls, officially supported starting with 2.0.0.
5
5
 
6
- **[Ionic 9 demo](https://ionic-theme-ios27.rdlabo.dev/) · [Ionic 8 demo](https://ionic8-theme-ios27.rdlabo.dev/) · [Setup guide](docs/setup.md)**
6
+ **[Ionic 9 demo](https://ionic-theme-ios27.rdlabo.dev/) · [Ionic 8 demo](https://ionic8-theme-ios27.rdlabo.dev/) · [Setup guide](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/setup)**
7
7
 
8
8
  <!-- rdlabo-docs-pick -->
9
9
 
@@ -17,27 +17,27 @@ A theme for Ionic apps that brings iOS 27 Liquid Glass and motion to the Web. Ca
17
17
 
18
18
  ## What would you like to do?
19
19
 
20
- | Goal | Guide |
21
- | ----------------------------------------------------- | -------------------------------------------------------------------------------- |
22
- | Style an existing Ionic app | [Get started](docs/setup.md) |
23
- | Select iOS 26/27 styles and optionally use MD3 | [Adaptive themes](docs/adaptive-themes.md) |
24
- | Add native iOS controls after setting up the theme | [Add Native UI](docs/add-native-ui.md) |
25
- | Add a side rail to Ionic while keeping your own theme | [Vertical Bars step by step](../capacitor-native-ui/docs/ionic-vertical-bars.md) |
26
- | Upgrade an existing installation | [Migration](docs/migration.md) |
20
+ | Goal | Guide |
21
+ | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
22
+ | Style an existing Ionic app | [Get started](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/setup) |
23
+ | Select iOS 26/27 styles and optionally use MD3 | [Adaptive themes](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/adaptive-themes) |
24
+ | Add native iOS controls after setting up the theme | [Add Native UI](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/add-native-ui) |
25
+ | Add a side rail to Ionic while keeping your own theme | [Vertical Bars step by step](https://docs.rdlabo.dev/projects/capacitor-native-ui/docs/ionic-vertical-bars) |
26
+ | Upgrade an existing installation | [Migration](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/migration) |
27
27
 
28
28
  ## Get started
29
29
 
30
30
  We use [Capacitor Foldable](https://github.com/erkamyaman/capacitor-foldable), an excellent community plugin by Erkam Yaman, as our standard device-layout integration. It exposes fold state, hinge geometry, bar placement and change events to your application, giving you control over how the layout responds. Foldable handles device reporting; the theme provides Web layout helpers and Native UI projects controls. Install it alongside the package you use, then connect its events in your app.
31
31
 
32
- Use the [four-step setup guide](docs/setup.md) to install the theme, load styles, configure animations, and preview your first screen. It supports Ionic 8.8.1 or later within Ionic 8 or 9, including Angular, React, and Vue. A native Capacitor project is not required for browser use.
32
+ Use the [four-step setup guide](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/setup) to install the theme, load styles, configure animations, and preview your first screen. It supports Ionic 8.8.1 or later within Ionic 8 or 9, including Angular, React, and Vue. A native Capacitor project is not required for browser use.
33
33
 
34
- The theme styles toolbars, tabs, lists, buttons, search, and overlays, with light and dark appearances. It does not activate native controls. Once the Web theme is working, you can optionally [add Native UI](docs/add-native-ui.md).
34
+ The theme styles toolbars, tabs, lists, buttons, search, and overlays, with light and dark appearances. It does not activate native controls. Once the Web theme is working, you can optionally [add Native UI](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/add-native-ui).
35
35
 
36
36
  ## Customize your app
37
37
 
38
- - [Features](docs/features.md): CSS variables, Liquid Glass, and selective component imports.
39
- - [Special markup and classes](docs/special-markup.md): opt-in component behavior.
40
- - [Using ion-item-group](docs/using-ion-item-group.md): inset list markup.
41
- - [Animation](docs/animation.md): tab, segment, and search effects.
42
- - [ESLint](docs/eslint.md): catch unsupported list structure.
43
- - [Vertical Bars layout](docs/vertical-bars-layout.md): spacing, RTL, device placement, posture, and split panes.
38
+ - [Features](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/features): CSS variables, Liquid Glass, and selective component imports.
39
+ - [Special markup and classes](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/special-markup): opt-in component behavior.
40
+ - [Using ion-item-group](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/using-ion-item-group): inset list markup.
41
+ - [Animation](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/animation): tab, segment, and search effects.
42
+ - [ESLint](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/eslint): catch unsupported list structure.
43
+ - [Vertical Bars layout](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/vertical-bars-layout): spacing, RTL, device placement, posture, and split panes.
package/dist/css/components/ion-menu.css CHANGED
@@ -1 +1 @@
1
- ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled){--side-max-width: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - 60px - 12px - var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *)):has(:nth-child(5)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-header ion-toolbar{--padding-start: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px)}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-header ion-toolbar ion-title.title-default{padding-inline-start:calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-content{--padding-start: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-content ion-header ion-toolbar{--padding-start: 4px}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-footer ion-toolbar{--padding-start: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + var(--ios-theme-searchable-padding-start, 0px))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *))[slot=bottom]{inset-inline-start:calc(16px + var(--ion-safe-area-left, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *))[slot=bottom]:dir(rtl){inset-inline-start:calc(16px + var(--ion-safe-area-right, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-header ion-toolbar{--padding-end: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px)}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-header ion-toolbar ion-title.title-default{padding-inline-end:calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-content{--padding-end: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-content ion-header ion-toolbar{--padding-start: 4px}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-footer ion-toolbar{--padding-end: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + var(--ios-theme-searchable-padding-end, 0px))}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled){--border: none;--background: rgba(var(--ios-theme-menu-background-rgb), var(--ios-theme-menu-background-opacity, 0.96));--max-width: var(--ios-theme-menu-width, var(--ios26-menu-width));position:absolute;top:0;z-index:999}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-start{inset-inline-start:0}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end{inset-inline-end:0}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled)::part(backdrop){display:none}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled)::part(container){border-radius:0;box-shadow:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list:not(.ios-theme-disabled,.ios26-disabled,.ion-color){background:rgba(0,0,0,0)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:not(.ios-theme-disabled,.ios26-disabled,.ion-color){--background: transparent}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content{--background: transparent;--ios26-content-box-shadow-rgb: transparent;--ios-theme-content-box-shadow-rgb: var(--ios26-content-box-shadow-rgb)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content::part(scroll){margin-block:calc(var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top)) + 6px) var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));margin-inline:calc(12px + var(--ion-safe-area-left, 0px)) calc(16px + var(--ion-safe-area-right, 0px))}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content:dir(rtl)::part(scroll){margin-inline:calc(12px + var(--ion-safe-area-right, 0px)) calc(16px + var(--ion-safe-area-left, 0px))}
1
+ ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled){--side-max-width: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *)){width:var(--ios-theme-compact-tab-width, calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - 60px - 12px - var(--ios-theme-menu-width, var(--ios26-menu-width))))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *)):has(:nth-child(5)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-header ion-toolbar{--padding-start: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px)}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-header ion-toolbar ion-title.title-default{padding-inline-start:calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-content{--padding-start: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-content ion-header ion-toolbar{--padding-start: 4px}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-footer ion-toolbar{--padding-start: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + var(--ios-theme-searchable-padding-start, 0px))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *))[slot=bottom]{inset-inline-start:calc(16px + var(--ion-safe-area-left, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *))[slot=bottom]:dir(rtl){inset-inline-start:calc(16px + var(--ion-safe-area-right, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-header ion-toolbar{--padding-end: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px)}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-header ion-toolbar ion-title.title-default{padding-inline-end:calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-content{--padding-end: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-content ion-header ion-toolbar{--padding-start: 4px}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-footer ion-toolbar{--padding-end: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + var(--ios-theme-searchable-padding-end, 0px))}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled){--border: none;--background: rgba(var(--ios-theme-menu-background-rgb), var(--ios-theme-menu-background-opacity, 0.96));--max-width: var(--ios-theme-menu-width, var(--ios26-menu-width));position:absolute;top:0;z-index:999}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-start{inset-inline-start:0}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end{inset-inline-end:0}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled)::part(backdrop){display:none}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled)::part(container){border-radius:0;box-shadow:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list:not(.ios-theme-disabled,.ios26-disabled,.ion-color){background:rgba(0,0,0,0)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:not(.ios-theme-disabled,.ios26-disabled,.ion-color){--background: transparent}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content{--background: transparent;--ios26-content-box-shadow-rgb: transparent;--ios-theme-content-box-shadow-rgb: var(--ios26-content-box-shadow-rgb)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content::part(scroll){margin-block:calc(var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top)) + 6px) var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));margin-inline:calc(12px + var(--ion-safe-area-left, 0px)) calc(16px + var(--ion-safe-area-right, 0px))}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content:dir(rtl)::part(scroll){margin-inline:calc(12px + var(--ion-safe-area-right, 0px)) calc(16px + var(--ion-safe-area-left, 0px))}
package/dist/css/components/ion-tabs.css CHANGED
@@ -1 +1 @@
1
- ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){--ios-theme-safe-area-inline-start: var(--ion-safe-area-left, 0px);--ios-theme-safe-area-inline-end: var(--ion-safe-area-right, 0px)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):dir(rtl){--ios-theme-safe-area-inline-start: var(--ion-safe-area-right, 0px);--ios-theme-safe-area-inline-end: var(--ion-safe-area-left, 0px)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){border:0;background:rgba(0,0,0,0);contain:size layout style;z-index:2;--background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.53)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)::before{backdrop-filter:blur(2px) saturate(360%);transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:inset 0 1px 2px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.25),inset 0 -1px 2px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.3),0 -0.5px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.65),0 .5px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.65),0 0 0 .5px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.22),0 .5px 1px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);border:.5px solid rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)));background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%);background-origin:padding-box;background-clip:border-box;border-inline-color:rgba(0,0,0,0)}@supports(background-clip: border-area){ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)::before{border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), transparent 50%, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)))),linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%),linear-gradient(transparent, transparent);background-origin:border-box,padding-box,border-box;background-clip:border-area,padding-box,border-box}}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)::before{background-color:var(--background);backdrop-filter:blur(6px) saturate(180%) brightness(1.05);content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;z-index:-1}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){border-radius:31px;--ios-theme-tab-overlap: 20px;--color: var(--ion-text-color-step-50, #0d0d0d)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)[slot=top]{position:absolute;top:var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top));inset-inline-end:calc(16px + var(--ios-theme-safe-area-inline-end))}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)[slot=bottom]{position:absolute;bottom:var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));inset-inline-start:calc(16px + var(--ios-theme-safe-area-inline-start))}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).tab-bar-position-start{inset-inline-start:calc(16px + var(--ios-theme-safe-area-inline-start));inset-inline-end:auto;margin-inline:0}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).tab-bar-position-end{inset-inline-start:auto;inset-inline-end:calc(16px + var(--ios-theme-safe-area-inline-end));margin-inline:0}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).tab-bar-position-center{left:calc(16px + var(--ion-safe-area-left, 0px));right:calc(16px + var(--ion-safe-area-right, 0px));margin-inline:auto}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - 75px);max-width:471px;height:54px;min-height:54px}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(>ion-tab-button:nth-child(2):last-child){width:var(--ios-theme-side-tab-content-width, 180px)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(:nth-child(5)){width:var(--ios-theme-side-tab-content-width, calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - 3px));max-width:var(--ios-theme-side-tab-content-width, 543px)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){padding:4px}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)>ion-tab-button:not(.ion-cloned-element)~ion-tab-button:not(.ion-cloned-element){margin-inline-start:calc(-1*var(--ios-theme-tab-overlap))}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(>ion-tab-button:nth-child(4 of ion-tab-button:not(.ion-cloned-element)))){--ios-theme-tab-overlap: 8px}@media(min-width: 768px){ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){--ios-theme-tab-overlap: 16px}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(>ion-tab-button:nth-child(2 of ion-tab-button:not(.ion-cloned-element)):nth-last-child(1 of ion-tab-button:not(.ion-cloned-element))){max-width:var(--ios-theme-side-tab-content-width, 180px)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(>ion-tab-button:nth-child(3 of ion-tab-button:not(.ion-cloned-element)):nth-last-child(1 of ion-tab-button:not(.ion-cloned-element))){max-width:var(--ios-theme-side-tab-content-width, 266px)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(>ion-tab-button:nth-child(4 of ion-tab-button:not(.ion-cloned-element)):nth-last-child(1 of ion-tab-button:not(.ion-cloned-element))){max-width:var(--ios-theme-side-tab-content-width, 328px)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(>ion-tab-button:nth-child(5 of ion-tab-button:not(.ion-cloned-element)):nth-last-child(1 of ion-tab-button:not(.ion-cloned-element))){max-width:var(--ios-theme-side-tab-content-width, 406px)}}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){transition:transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease-out}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture{touch-action:pan-y pinch-zoom}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture ion-tab-button.tab-selected::part(native){transition:none}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture{transition:transform 367ms linear(0, 0.096 9%, 0.356 18%, 0.64 27%, 0.863 36%, 1 45%, 1.078 54%, 1.092 59%, 1.018 95%, 1)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture:has(ion-tab-button.ion-activated){transition:transform 367ms linear(0, 0.148 9%, 0.46 18%, 0.752 27%, 0.951 36%, 1.052 45%, 1.081 54%, 1.058 72%, 1.019 86%, 1)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(ion-tab-button.ion-activated){will-change:transform;transform:scale(var(--ios27-tab-bar-scale, 1.038)) translateZ(0);-webkit-transform:scale(var(--ios27-tab-bar-scale, 1.038)) translateZ(0)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-tab-button.ion-activated)){will-change:auto}@media(prefers-reduced-motion: reduce){ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled),ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(ion-tab-button.ion-activated){transition:none;transform:none;-webkit-transform:none;will-change:auto}}ion-tab-bar.ios:not(.ios-theme-disabled,.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(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture.ios27-animated ion-tab-button.tab-selected::part(native){background:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture.ios27-animated ion-tab-button.ion-activated ion-label,ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture.ios27-animated ion-tab-button.ion-activated ion-icon{filter:brightness(100%)}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled){transform-origin:center 65%;font-size:.59rem;border-radius:27px}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled) ion-icon{font-size:26px}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).tab-layout-icon-top.tab-has-icon.tab-has-label{--padding-top: 7px;--padding-bottom: 7px;justify-content:flex-start}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).tab-layout-icon-top.tab-has-icon.tab-has-label ion-icon{flex-shrink:0;margin-block:0 2px}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).tab-layout-icon-top.tab-has-icon.tab-has-label ion-label{margin:0;font-size:inherit;line-height:1.2;min-height:0}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled) ion-label,ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled) ion-icon{transition:filter var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease,color var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled){background:rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0);height:54px;transition:transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled)::part(native){overflow:visible;min-height:54px}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated{transform:scale(1.1);position:relative;color:var(--color-selected)}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated ion-label,ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated ion-icon{filter:brightness(104%)}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).tab-selected::part(native){background:var(--ios27-tab-selected-background, rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.095));transition:background var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element{transition:none}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element::part(native){background:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.011) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.009) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%),rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0);backdrop-filter:blur(0) saturate(104%);box-shadow:inset 0 0 0 .5px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6),inset 0 0 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.18),inset 0 1px 2px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.8),inset 0 -1px 2px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.5),0 .5px 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.18);border:.5px solid;border-top-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 1);border-right-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.8);border-bottom-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 1);border-left-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6)}@supports(color: color-mix(in srgb, white, black)){ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element::part(native){border-top-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%);border-right-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 32%);border-bottom-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%);border-left-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%)}}@supports(background-clip: border-area) and (color: color-mix(in srgb, white, black)){ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element::part(native){border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%) 0%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 18%) 7%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 29%) 25%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 36%) 50%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%) 75%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 18%) 93%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%) 100%),linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.011) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.009) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%);background-origin:border-box,padding-box;background-clip:border-area,padding-box}}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element::part(native){transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center;transition:none}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element{pointer-events:none;position:absolute;left:0;top:0}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element>*{visibility:hidden}@media(prefers-reduced-motion: reduce){ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled),ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated{transform:none;transition:none}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled) ion-label,ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled) ion-icon,ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).tab-selected::part(native){transition:none}}
1
+ ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){--ios-theme-safe-area-inline-start: var(--ion-safe-area-left, 0px);--ios-theme-safe-area-inline-end: var(--ion-safe-area-right, 0px)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):dir(rtl){--ios-theme-safe-area-inline-start: var(--ion-safe-area-right, 0px);--ios-theme-safe-area-inline-end: var(--ion-safe-area-left, 0px)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){border:0;background:rgba(0,0,0,0);contain:size layout style;z-index:2;--background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.53)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)::before{backdrop-filter:blur(2px) saturate(360%);transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:inset 0 1px 2px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.25),inset 0 -1px 2px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.3),0 -0.5px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.65),0 .5px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.65),0 0 0 .5px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.22),0 .5px 1px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);border:.5px solid rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)));background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%);background-origin:padding-box;background-clip:border-box;border-inline-color:rgba(0,0,0,0)}@supports(background-clip: border-area){ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)::before{border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), transparent 50%, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)))),linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%),linear-gradient(transparent, transparent);background-origin:border-box,padding-box,border-box;background-clip:border-area,padding-box,border-box}}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)::before{background-color:var(--background);backdrop-filter:blur(6px) saturate(180%) brightness(1.05);content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;z-index:-1}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){border-radius:31px;--ios-theme-tab-overlap: 20px;--color: var(--ion-text-color-step-50, #0d0d0d)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)[slot=top]{position:absolute;top:var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top));inset-inline-end:calc(16px + var(--ios-theme-safe-area-inline-end))}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)[slot=bottom]{position:absolute;bottom:var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));inset-inline-start:calc(16px + var(--ios-theme-safe-area-inline-start))}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).tab-bar-position-start{inset-inline-start:calc(16px + var(--ios-theme-safe-area-inline-start));inset-inline-end:auto;margin-inline:0}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).tab-bar-position-end{inset-inline-start:auto;inset-inline-end:calc(16px + var(--ios-theme-safe-area-inline-end));margin-inline:0}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).tab-bar-position-center{left:calc(16px + var(--ion-safe-area-left, 0px));right:calc(16px + var(--ion-safe-area-right, 0px));margin-inline:auto}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - 75px);max-width:471px;height:54px;min-height:54px}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(:nth-child(5)){width:var(--ios-theme-side-tab-content-width, calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - 3px));max-width:var(--ios-theme-side-tab-content-width, 543px)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){padding:4px}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)>:where(ion-tab-button:not(.ion-cloned-element))~:where(ion-tab-button:not(.ion-cloned-element)){margin-inline-start:calc(-1*var(--ios-theme-tab-overlap))}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(>ion-tab-button:nth-child(4 of ion-tab-button:not(.ion-cloned-element)))){--ios-theme-tab-overlap: 8px}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):where(:has(>ion-tab-button:nth-child(2 of ion-tab-button:not(.ion-cloned-element)):nth-last-child(1 of ion-tab-button:not(.ion-cloned-element)))){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0, 1fr);contain:layout style;--ios-theme-compact-tab-width: max-content;width:max-content;min-width:min(172px,100% - 119px - var(--ion-safe-area-left, 0px) - var(--ion-safe-area-right, 0px));max-width:calc(100% - 119px - var(--ion-safe-area-left, 0px) - var(--ion-safe-area-right, 0px));padding-inline:8px}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):where(:has(>ion-tab-button:nth-child(2 of ion-tab-button:not(.ion-cloned-element)):nth-last-child(1 of ion-tab-button:not(.ion-cloned-element))))>ion-tab-button:not(.ion-cloned-element){min-width:0;max-width:none;margin-inline:-4px;--padding-start: 20px;--padding-end: 20px}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):where(:has(>ion-tab-button:nth-child(3 of ion-tab-button:not(.ion-cloned-element)):nth-last-child(1 of ion-tab-button:not(.ion-cloned-element)))){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0, 1fr);contain:layout style;--ios-theme-compact-tab-width: max-content;width:max-content;min-width:min(258px,100% - 119px - var(--ion-safe-area-left, 0px) - var(--ion-safe-area-right, 0px));max-width:calc(100% - 119px - var(--ion-safe-area-left, 0px) - var(--ion-safe-area-right, 0px));padding-inline:8px}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):where(:has(>ion-tab-button:nth-child(3 of ion-tab-button:not(.ion-cloned-element)):nth-last-child(1 of ion-tab-button:not(.ion-cloned-element))))>ion-tab-button:not(.ion-cloned-element){min-width:0;max-width:none;margin-inline:-4px;--padding-start: 20px;--padding-end: 20px}@media(min-width: 768px){ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){--ios-theme-tab-overlap: 16px}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(>ion-tab-button:nth-child(4 of ion-tab-button:not(.ion-cloned-element)):nth-last-child(1 of ion-tab-button:not(.ion-cloned-element))){max-width:var(--ios-theme-side-tab-content-width, 328px)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(>ion-tab-button:nth-child(5 of ion-tab-button:not(.ion-cloned-element)):nth-last-child(1 of ion-tab-button:not(.ion-cloned-element))){max-width:var(--ios-theme-side-tab-content-width, 406px)}}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){transition:transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease-out}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture{touch-action:pan-y pinch-zoom}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture ion-tab-button.tab-selected::part(native){transition:none}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture{transition:transform 367ms linear(0, 0.096 9%, 0.356 18%, 0.64 27%, 0.863 36%, 1 45%, 1.078 54%, 1.092 59%, 1.018 95%, 1)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture:has(ion-tab-button.ion-activated){transition:transform 367ms linear(0, 0.148 9%, 0.46 18%, 0.752 27%, 0.951 36%, 1.052 45%, 1.081 54%, 1.058 72%, 1.019 86%, 1)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(ion-tab-button.ion-activated){will-change:transform;transform:scale(var(--ios27-tab-bar-scale, 1.038)) translateZ(0);-webkit-transform:scale(var(--ios27-tab-bar-scale, 1.038)) translateZ(0)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-tab-button.ion-activated)){will-change:auto}@media(prefers-reduced-motion: reduce){ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled),ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):has(ion-tab-button.ion-activated){transition:none;transform:none;-webkit-transform:none;will-change:auto}}ion-tab-bar.ios:not(.ios-theme-disabled,.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(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture.ios27-animated ion-tab-button.tab-selected::part(native){background:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture.ios27-animated ion-tab-button.ion-activated ion-label,ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture.ios27-animated ion-tab-button.ion-activated ion-icon{filter:brightness(100%)}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled){transform-origin:center 65%;font-size:.59rem;border-radius:27px}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled) ion-icon{font-size:26px}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).tab-layout-icon-top.tab-has-icon.tab-has-label{--padding-top: 7px;--padding-bottom: 7px;justify-content:flex-start}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).tab-layout-icon-top.tab-has-icon.tab-has-label ion-icon{flex-shrink:0;margin-block:0 2px}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).tab-layout-icon-top.tab-has-icon.tab-has-label ion-label{margin:0;font-size:inherit;line-height:1.2;min-height:0}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled) ion-label,ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled) ion-icon{transition:filter var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease,color var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled){background:rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0);height:54px;transition:transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled)::part(native){overflow:visible;min-height:54px}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated{transform:scale(1.1);position:relative;color:var(--color-selected)}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated ion-label,ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated ion-icon{filter:brightness(104%)}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).tab-selected::part(native){background:var(--ios27-tab-selected-background, rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.095));transition:background var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element{transition:none}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element::part(native){background:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.011) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.009) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%),rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0);backdrop-filter:blur(0) saturate(104%);box-shadow:inset 0 0 0 .5px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6),inset 0 0 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.18),inset 0 1px 2px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.8),inset 0 -1px 2px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.5),0 .5px 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.18);border:.5px solid;border-top-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 1);border-right-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.8);border-bottom-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 1);border-left-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6)}@supports(color: color-mix(in srgb, white, black)){ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element::part(native){border-top-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%);border-right-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 32%);border-bottom-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%);border-left-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%)}}@supports(background-clip: border-area) and (color: color-mix(in srgb, white, black)){ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element::part(native){border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%) 0%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 18%) 7%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 29%) 25%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 36%) 50%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%) 75%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 18%) 93%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%) 100%),linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.011) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.009) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%);background-origin:border-box,padding-box;background-clip:border-area,padding-box}}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element::part(native){transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center;transition:none}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element{pointer-events:none;position:absolute;left:0;top:0}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element>*{visibility:hidden}@media(prefers-reduced-motion: reduce){ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled),ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated{transform:none;transition:none}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled) ion-label,ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled) ion-icon,ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).tab-selected::part(native){transition:none}}