@rdlabo/ionic-theme-ios27 0.1.0-beta.pr153.sha1c3caf4dc12b → 0.1.0

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 (95) hide show
  1. package/README.md +3 -3
  2. package/dist/css/components/ion-action-sheet.css +1 -1
  3. package/dist/css/components/ion-alert.css +1 -1
  4. package/dist/css/components/ion-button.css +1 -1
  5. package/dist/css/components/ion-card.css +1 -1
  6. package/dist/css/components/ion-fab.css +1 -1
  7. package/dist/css/components/ion-list.css +1 -1
  8. package/dist/css/components/ion-menu.css +1 -1
  9. package/dist/css/components/ion-modal.css +1 -1
  10. package/dist/css/components/ion-popover.css +1 -1
  11. package/dist/css/components/ion-range.css +1 -1
  12. package/dist/css/components/ion-segment.css +1 -1
  13. package/dist/css/components/ion-tabs.css +1 -1
  14. package/dist/css/components/ion-toast.css +1 -1
  15. package/dist/css/components/ion-toolbar.css +1 -1
  16. package/dist/css/default-variables.css +1 -1
  17. package/dist/css/ionic-theme-ios27-dark-always.css +1 -1
  18. package/dist/css/ionic-theme-ios27-dark-class.css +1 -1
  19. package/dist/css/ionic-theme-ios27-dark-system.css +1 -1
  20. package/dist/css/ionic-theme-ios27.css +1 -1
  21. package/dist/css/md-ion-list-inset.css +1 -1
  22. package/dist/css/utils/dark/ion-list.css +1 -0
  23. package/dist/css/utils/group-heading.css +1 -0
  24. package/dist/native/components/searchable-tabs.d.ts.map +1 -1
  25. package/dist/native/components/searchable-tabs.js +9 -1
  26. package/dist/native/definitions.d.ts +4 -0
  27. package/dist/native/definitions.d.ts.map +1 -1
  28. package/dist/native/runtime.d.ts.map +1 -1
  29. package/dist/native/runtime.js +51 -27
  30. package/dist/native/shared/candidate.d.ts.map +1 -1
  31. package/dist/native/shared/candidate.js +17 -0
  32. package/dist/native/shared/crossfade.d.ts +8 -0
  33. package/dist/native/shared/crossfade.d.ts.map +1 -0
  34. package/dist/native/shared/crossfade.js +46 -0
  35. package/dist/native/shared/dom.d.ts.map +1 -1
  36. package/dist/native/shared/dom.js +2 -1
  37. package/dist/popover/animations/ios.enter.d.ts.map +1 -1
  38. package/dist/popover/animations/ios.enter.js +105 -9
  39. package/dist/popover/animations/ios.leave.d.ts.map +1 -1
  40. package/dist/popover/animations/ios.leave.js +15 -1
  41. package/dist/popover/callout-surface.d.ts +2 -0
  42. package/dist/popover/callout-surface.d.ts.map +1 -0
  43. package/dist/popover/callout-surface.js +44 -0
  44. package/dist/sheets-of-glass/index.js +2 -1
  45. package/dist/transition/ios.transition.d.ts.map +1 -1
  46. package/dist/transition/ios.transition.js +0 -223
  47. package/docs/experimental-animation.md +3 -3
  48. package/docs/features.md +7 -2
  49. package/docs/native-ui-shell.md +14 -5
  50. package/docs/special-markup.md +17 -0
  51. package/ios/Sources/IonicNativeUIShellPlugin/Components/ShellButton.swift +7 -2
  52. package/ios/Sources/IonicNativeUIShellPlugin/Components/ShellSearchController.swift +10 -0
  53. package/ios/Sources/IonicNativeUIShellPlugin/Components/ShellSegment.swift +47 -15
  54. package/ios/Sources/IonicNativeUIShellPlugin/Components/ShellTabBar.swift +42 -7
  55. package/ios/Sources/IonicNativeUIShellPlugin/IonicNativeUIShellPlugin.swift +13 -6
  56. package/ios/Sources/IonicNativeUIShellPlugin/Shared/ShellCrossfade.swift +35 -0
  57. package/ios/Sources/IonicNativeUIShellPlugin/Shared/ShellSnapshot.swift +6 -1
  58. package/ios/Tests/IonicNativeUIShellPluginTests/ShellSnapshotTests.swift +59 -0
  59. package/package.json +1 -1
  60. package/src/native/components/searchable-tabs.ts +12 -1
  61. package/src/native/definitions.ts +4 -0
  62. package/src/native/runtime.ts +54 -31
  63. package/src/native/shared/candidate.ts +19 -0
  64. package/src/native/shared/crossfade.ts +49 -0
  65. package/src/native/shared/dom.ts +4 -1
  66. package/src/popover/animations/ios.enter.ts +123 -10
  67. package/src/popover/animations/ios.leave.ts +15 -1
  68. package/src/popover/callout-surface.ts +54 -0
  69. package/src/sheets-of-glass/index.ts +2 -2
  70. package/src/styles/components/ion-action-sheet.scss +35 -17
  71. package/src/styles/components/ion-alert.scss +51 -31
  72. package/src/styles/components/ion-button.scss +4 -7
  73. package/src/styles/components/ion-card.scss +64 -3
  74. package/src/styles/components/ion-fab.scss +3 -5
  75. package/src/styles/components/ion-list.scss +14 -1
  76. package/src/styles/components/ion-menu.scss +19 -7
  77. package/src/styles/components/ion-modal.scss +63 -14
  78. package/src/styles/components/ion-popover.scss +52 -9
  79. package/src/styles/components/ion-range.scss +49 -50
  80. package/src/styles/components/ion-segment.scss +15 -16
  81. package/src/styles/components/ion-tabs.scss +73 -13
  82. package/src/styles/components/ion-toast.scss +16 -25
  83. package/src/styles/components/ion-toolbar.scss +17 -1
  84. package/src/styles/default-variables.scss +4 -0
  85. package/src/styles/utils/_glass.scss +96 -0
  86. package/src/styles/utils/api.scss +46 -4
  87. package/src/styles/utils/dark/ion-button.scss +13 -0
  88. package/src/styles/utils/dark/ion-fab.scss +9 -0
  89. package/src/styles/utils/dark/ion-list.scss +7 -0
  90. package/src/styles/utils/dark/ion-segment.scss +8 -3
  91. package/src/styles/utils/dark/ion-tabs.scss +20 -0
  92. package/src/styles/utils/group-heading.scss +5 -0
  93. package/src/styles/utils/structured-list.scss +68 -15
  94. package/src/styles/utils/theme-dark.scss +23 -0
  95. package/src/transition/ios.transition.ts +0 -487
package/dist/css/ionic-theme-ios27-dark-system.css CHANGED
@@ -1 +1 @@
1
- @media(prefers-color-scheme: dark){:root{--ios27-color-scheme: dark;--ios26-glass-background-rgb: 62, 62, 62;--ios26-glass-box-shadow-color-rgb: 0, 0, 0 / 0;--ios26-glass-border-color-rgb: 68, 68, 68;--ios27-button-color-selected-default-rgb: 255, 255, 255;--ios26-content-box-shadow-rgb: 0, 0, 0}ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated){background:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.5);backdrop-filter:blur(7px) saturate(180%);box-shadow:inset 0 0 16px rgba(0,0,0,.32);border-width:.8px;border-style:solid;border-color:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.35) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.18) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.4) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.2);background-image:none;background-clip:border-box;background-origin:padding-box;-webkit-backface-visibility:hidden;backface-visibility:hidden}ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios-theme-disabled,.ios26-disabled).button-clear.ion-activated{color:rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios-theme-disabled,.ios26-disabled).button-clear.ion-activated.ion-color{color:rgb(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)))}ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios-theme-disabled,.ios26-disabled).ion-activated,ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-back-button:not(.ios-theme-disabled,.ios26-disabled).ion-activated{--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1)}ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios-theme-disabled,.ios26-disabled).ion-activated.ion-color,ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-back-button:not(.ios-theme-disabled,.ios26-disabled).ion-activated.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1)}ion-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated:not(.button-solid):not(.button-outline):not(.button-clear){--background: rgba( var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.5 );--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1)}ion-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated: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(.ios-theme-disabled,.ios26-disabled).ion-activated:not(.button-solid):not(.button-outline):not(.button-clear)::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.5);backdrop-filter:blur(7px) saturate(180%);box-shadow:inset 0 0 16px rgba(0,0,0,.32);border-width:.8px;border-style:solid;border-color:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.35) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.18) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.4) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.2);background-image:none;background-clip:border-box;background-origin:padding-box;-webkit-backface-visibility:hidden;backface-visibility:hidden}ion-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated:not(.button-solid):not(.button-outline):not(.button-clear) ion-icon{color:#fff}ion-back-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated:not(.button-solid):not(.button-outline):not(.button-clear){--background: rgba( var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.5 );--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1)}ion-back-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated: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(.ios-theme-disabled,.ios26-disabled).ion-activated:not(.button-solid):not(.button-outline):not(.button-clear)::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.5);backdrop-filter:blur(7px) saturate(180%);box-shadow:inset 0 0 16px rgba(0,0,0,.32);border-width:.8px;border-style:solid;border-color:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.35) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.18) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.4) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.2);background-image:none;background-clip:border-box;background-origin:padding-box;-webkit-backface-visibility:hidden;backface-visibility:hidden}ion-back-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated:not(.button-solid):not(.button-outline):not(.button-clear) ion-icon{color:#fff}ion-fab.ios:not(.ios-theme-disabled,.ios26-disabled) ion-fab-button.ion-activated::part(native){background-color:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.56);backdrop-filter:blur(7px) saturate(180%);box-shadow:inset 0 0 16px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.55);border-width:.8px;border-style:solid;border-color:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.8) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.4) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.8) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.6);background-image:none;background-clip:border-box;background-origin:padding-box;-webkit-backface-visibility:hidden;backface-visibility:hidden}ion-fab.ios:not(.ios-theme-disabled,.ios26-disabled) ion-fab-button.ion-activated{--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1)}ion-fab.ios:not(.ios-theme-disabled,.ios26-disabled) ion-fab-button.ion-activated.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1)}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled){--ios27-tab-selected-background: rgba( var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, 0, 0, 0)), 0.72 )}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(118%);opacity:.95}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element::part(native){background:rgba(0,0,0,0);background-clip:padding-box;border-color:rgba(var(--ios-theme-glass-border-color-rgb, 0, 0, 0), 0.12);box-shadow:inset 0 0 5px rgba(0,0,0,.24)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).in-toolbar:not(.segment-expand,.ion-color) ion-segment-button:not(.ion-color,.ios-theme-disabled,.ios26-disabled){--indicator-color: var(--ios27-segment-selected-background, rgba(0, 0, 0, 0.72))}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-edge{--ios26-glass-border-color-rgb: 12, 12, 12;border-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.85);background-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2));background-clip:padding-box;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.65),inset 0 1px 1px rgba(0,0,0,.4),inset 0 -1px 1px rgba(0,0,0,.4)}@supports(background-clip: border-area){ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-edge{border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgba(100, 140, 190, 0.28), rgba(0, 0, 0, 0.85) 12%, rgba(0, 0, 0, 0.85) 88%, rgba(140, 110, 65, 0.28)),linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2));background-clip:border-area,padding-box}}}
1
+ @media(prefers-color-scheme: dark){:root{--ios27-color-scheme: dark;--ios-theme-destructive-color: #ff686b;--ios-theme-menu-background-rgb: 26, 31, 34;--ios26-glass-background-rgb: 62, 62, 62;--ios26-glass-box-shadow-color-rgb: 0, 0, 0 / 0;--ios26-glass-border-color-rgb: 68, 68, 68;--ios27-button-color-selected-default-rgb: 255, 255, 255;--ios26-content-box-shadow-rgb: 0, 0, 0}ion-list.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item{--detail-icon-color: rgb(var(--ion-color-medium-rgb));--detail-icon-opacity: 0.5}ion-list.ios:not(.ios-theme-disabled,.ios26-disabled).list-inset ion-list-header ion-label:not(.ion-color){color:rgba(var(--ion-color-medium-rgb), 0.93)}ion-list.ios:not(.ios-theme-disabled,.ios26-disabled).list-inset ion-list-header ion-note:not(.ion-color),ion-list.ios:not(.ios-theme-disabled,.ios26-disabled).list-inset>ion-note:not(.ion-color){--color: rgba(var(--ion-color-medium-rgb), 0.93)}ion-alert.ios:not(.ios-theme-disabled,.ios26-disabled),ion-action-sheet.ios:not(.ios-theme-disabled,.ios26-disabled),ion-toast.ios:not(.ios-theme-disabled,.ios26-disabled){--background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.52)}ion-popover.ios:not(.ios-theme-disabled,.ios26-disabled){--background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.08)}ion-popover.ios:not(.ios-theme-disabled,.ios26-disabled):not(.ios-theme-callout)::part(content),ion-popover.ios:not(.ios-theme-disabled,.ios26-disabled)::part(callout-glass),ion-popover.ios:not(.ios-theme-disabled,.ios26-disabled)::part(arrow)::after{backdrop-filter:blur(12px) saturate(115%) brightness(0.9);-webkit-backdrop-filter:blur(12px) saturate(115%) brightness(0.9)}ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):not(:has(.ion-activated)){background-color:rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.5);border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) 1px, transparent 6px, transparent calc(100% - 6px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) calc(100% - 1px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14));background-origin:padding-box;background-clip:border-box;box-shadow:inset 0 .5px 1px rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.2),inset 0 -0.5px 1px rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.2)}@supports(background-clip: border-area){ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):not(:has(.ion-activated)){box-shadow:none}}@supports(background-clip: border-area){ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):not(:has(.ion-activated)){background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.24), transparent 35%, transparent 65%, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.24)),linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) 1px, transparent 6px, transparent calc(100% - 6px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) calc(100% - 1px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14)),linear-gradient(transparent, transparent);background-origin:border-box,padding-box,border-box;background-clip:border-area,padding-box,border-box}}ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))):has(.ion-activated){background:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.5);backdrop-filter:blur(7px) saturate(180%);box-shadow:inset 0 0 16px rgba(0,0,0,.32);border-width:.8px;border-style:solid;border-color:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.35) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.18) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.4) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.2);background-image:none;background-clip:border-box;background-origin:padding-box;-webkit-backface-visibility:hidden;backface-visibility:hidden}ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios-theme-disabled,.ios26-disabled).button-clear.ion-activated{color:rgb(var(--ion-text-color-rgb, 0, 0, 0))}ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios-theme-disabled,.ios26-disabled).button-clear.ion-activated.ion-color{color:rgb(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)))}ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios-theme-disabled,.ios26-disabled).ion-activated,ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-back-button:not(.ios-theme-disabled,.ios26-disabled).ion-activated{--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1)}ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-button:not(.ios-theme-disabled,.ios26-disabled).ion-activated.ion-color,ion-buttons.ios:not(.ios-theme-disabled,.ios26-disabled):not(:has(ion-back-button,ion-button:not(.button-clear))) ion-back-button:not(.ios-theme-disabled,.ios26-disabled).ion-activated.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1)}ion-button.ios:not(.ios-theme-disabled,.ios26-disabled):not(.ion-activated):not(.button-solid):not(.button-outline):not(.button-clear){--background:rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.5);--box-shadow:inset 0 .5px 1px rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.2),inset 0 -0.5px 1px rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.2)}@supports(background-clip: border-area){ion-button.ios:not(.ios-theme-disabled,.ios26-disabled):not(.ion-activated):not(.button-solid):not(.button-outline):not(.button-clear){--box-shadow:none}}ion-button.ios:not(.ios-theme-disabled,.ios26-disabled):not(.ion-activated):not(.button-solid):not(.button-outline):not(.button-clear)::part(native){border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) 1px, transparent 6px, transparent calc(100% - 6px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) calc(100% - 1px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14));background-origin:padding-box;background-clip:border-box;box-shadow:var(--box-shadow)}@supports(background-clip: border-area){ion-button.ios:not(.ios-theme-disabled,.ios26-disabled):not(.ion-activated):not(.button-solid):not(.button-outline):not(.button-clear)::part(native){background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.24), transparent 35%, transparent 65%, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.24)),linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) 1px, transparent 6px, transparent calc(100% - 6px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) calc(100% - 1px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14)),linear-gradient(transparent, transparent);background-origin:border-box,padding-box,border-box;background-clip:border-area,padding-box,border-box}}ion-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated:not(.button-solid):not(.button-outline):not(.button-clear){--background: rgba( var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.5 );--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1)}ion-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated: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(.ios-theme-disabled,.ios26-disabled).ion-activated:not(.button-solid):not(.button-outline):not(.button-clear)::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.5);backdrop-filter:blur(7px) saturate(180%);box-shadow:inset 0 0 16px rgba(0,0,0,.32);border-width:.8px;border-style:solid;border-color:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.35) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.18) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.4) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.2);background-image:none;background-clip:border-box;background-origin:padding-box;-webkit-backface-visibility:hidden;backface-visibility:hidden}ion-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated:not(.button-solid):not(.button-outline):not(.button-clear) ion-icon{color:#fff}ion-back-button.ios:not(.ios-theme-disabled,.ios26-disabled):not(.ion-activated):not(.button-solid):not(.button-outline):not(.button-clear){--background:rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.5);--box-shadow:inset 0 .5px 1px rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.2),inset 0 -0.5px 1px rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.2)}@supports(background-clip: border-area){ion-back-button.ios:not(.ios-theme-disabled,.ios26-disabled):not(.ion-activated):not(.button-solid):not(.button-outline):not(.button-clear){--box-shadow:none}}ion-back-button.ios:not(.ios-theme-disabled,.ios26-disabled):not(.ion-activated):not(.button-solid):not(.button-outline):not(.button-clear)::part(native){border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) 1px, transparent 6px, transparent calc(100% - 6px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) calc(100% - 1px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14));background-origin:padding-box;background-clip:border-box;box-shadow:var(--box-shadow)}@supports(background-clip: border-area){ion-back-button.ios:not(.ios-theme-disabled,.ios26-disabled):not(.ion-activated):not(.button-solid):not(.button-outline):not(.button-clear)::part(native){background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.24), transparent 35%, transparent 65%, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.24)),linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) 1px, transparent 6px, transparent calc(100% - 6px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) calc(100% - 1px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14)),linear-gradient(transparent, transparent);background-origin:border-box,padding-box,border-box;background-clip:border-area,padding-box,border-box}}ion-back-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated:not(.button-solid):not(.button-outline):not(.button-clear){--background: rgba( var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.5 );--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1)}ion-back-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated: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(.ios-theme-disabled,.ios26-disabled).ion-activated:not(.button-solid):not(.button-outline):not(.button-clear)::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.5);backdrop-filter:blur(7px) saturate(180%);box-shadow:inset 0 0 16px rgba(0,0,0,.32);border-width:.8px;border-style:solid;border-color:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.35) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.18) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.4) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.2);background-image:none;background-clip:border-box;background-origin:padding-box;-webkit-backface-visibility:hidden;backface-visibility:hidden}ion-back-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-activated:not(.button-solid):not(.button-outline):not(.button-clear) ion-icon{color:#fff}ion-fab.ios:not(.ios-theme-disabled,.ios26-disabled) ion-fab-button:not(.ion-activated){--background:rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.5);--box-shadow:inset 0 .5px 1px rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.2),inset 0 -0.5px 1px rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.2)}@supports(background-clip: border-area){ion-fab.ios:not(.ios-theme-disabled,.ios26-disabled) ion-fab-button:not(.ion-activated){--box-shadow:none}}ion-fab.ios:not(.ios-theme-disabled,.ios26-disabled) ion-fab-button:not(.ion-activated)::part(native){border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) 1px, transparent 6px, transparent calc(100% - 6px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) calc(100% - 1px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14));background-origin:padding-box;background-clip:border-box;box-shadow:var(--box-shadow)}@supports(background-clip: border-area){ion-fab.ios:not(.ios-theme-disabled,.ios26-disabled) ion-fab-button:not(.ion-activated)::part(native){background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.24), transparent 35%, transparent 65%, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.24)),linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) 1px, transparent 6px, transparent calc(100% - 6px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) calc(100% - 1px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14)),linear-gradient(transparent, transparent);background-origin:border-box,padding-box,border-box;background-clip:border-area,padding-box,border-box}}ion-fab.ios:not(.ios-theme-disabled,.ios26-disabled) ion-fab-button.ion-activated::part(native){background-color:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.56);backdrop-filter:blur(7px) saturate(180%);box-shadow:inset 0 0 16px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.55);border-width:.8px;border-style:solid;border-color:rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.8) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.4) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.8) rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.6);background-image:none;background-clip:border-box;background-origin:padding-box;-webkit-backface-visibility:hidden;backface-visibility:hidden}ion-fab.ios:not(.ios-theme-disabled,.ios26-disabled) ion-fab-button.ion-activated{--color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1)}ion-fab.ios:not(.ios-theme-disabled,.ios26-disabled) ion-fab-button.ion-activated.ion-color{--color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1)}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled){--color: rgb(var(--ion-text-color-rgb, 255, 255, 255));--background: color-mix( in srgb, color-mix( in srgb, rgb(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb))) 92%, rgb(var(--ion-text-color-rgb, 255, 255, 255)) ) 40%, transparent )}ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)::before{border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) 1px, transparent 6px, transparent calc(100% - 6px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) calc(100% - 1px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14));background-origin:padding-box;background-clip:border-box;box-shadow:inset 0 .5px 1px rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.2),inset 0 -0.5px 1px rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.2)}@supports(background-clip: border-area){ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)::before{box-shadow:none}}@supports(background-clip: border-area){ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled)::before{background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.24), transparent 35%, transparent 65%, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.24)),linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) 1px, transparent 6px, transparent calc(100% - 6px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.04) calc(100% - 1px), rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.14)),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{backdrop-filter:blur(6px) saturate(150%) brightness(1.23)}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled){--ios27-tab-selected-background: rgba( var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, 0, 0, 0)), 0.72 )}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(118%);opacity:.95}ion-tab-button.ios:not(.ios-theme-disabled,.ios26-disabled).ion-cloned-element::part(native){background:rgba(0,0,0,0);background-clip:padding-box;border-color:rgba(var(--ios-theme-glass-border-color-rgb, 0, 0, 0), 0.12);box-shadow:inset 0 0 5px rgba(0,0,0,.24)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) ion-segment-button.segment-button-disabled{opacity:.15}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-edge{--ios26-glass-border-color-rgb: 12, 12, 12;border-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.85);background-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2));background-clip:padding-box;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.65),inset 0 1px 1px rgba(0,0,0,.4),inset 0 -1px 1px rgba(0,0,0,.4)}@supports(background-clip: border-area){ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-edge{border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgba(100, 140, 190, 0.28), rgba(0, 0, 0, 0.85) 12%, rgba(0, 0, 0, 0.85) 88%, rgba(140, 110, 65, 0.28)),linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2));background-clip:border-area,padding-box}}:where(ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled)){--background: rgba(var(--ion-color-medium-rgb, 152, 154, 162), 0.19)}:where(ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled,.ion-color) ion-segment-button:not(.ion-color,.in-segment-color)){--indicator-color: color-mix(in srgb, rgb(var(--ion-color-medium-rgb, 152, 154, 162)) 59%, var(--ion-background-color, #000))}}