@xenknight/framework7 0.0.3 → 0.0.6

package/framework7-bundle.css

@@ -1,5 +1,5 @@
 /**
- * Framework7 0.0.2
+ * Framework7 0.0.5
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: July 26, 2025
+ * Released on: December 19, 2025
  */
 
 /*====================
@@ -86,6 +86,21 @@
   /*
   --f7-bars-link-color: var(--f7-theme-color);
   */
+  --f7-glass-bg-color: rgba(255, 255, 255, 0.75);
+  --f7-glass-shadow: inset -1px -1px 0px -0.5px #ffffff,
+      inset 1px 1px 0px -0.5px rgba(255, 255, 255, 1),
+      inset 3px 3px 10px -3px #ddd,
+      inset -3px -3px 10px -3px #ddd,
+      inset 0 0 5px 1px #fff,
+      inset 0 0 0 0.5px rgba(0, 0, 0, 0.25),
+      inset 0 0 24px 0 rgba(0, 0, 0, 0.1),
+      0 0 25px 0 rgba(0, 0, 0, 0.2);
+  --f7-glass-shadow-thumb: inset -3px -3px 0px -3.5px #ffffff,
+      inset 3px 3px 0px -3.5px rgba(255, 255, 255, 1),
+      inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.5),
+      inset 3px 3px 10px -2px #eee,
+      inset -3px -3px 10px -2px #eee,
+      inset 0 0 5px 1px #fff;
   --f7-bars-text-color: #000;
   --f7-text-color: #000;
   --f7-bars-bg-color: #f7f7f8;
@@ -94,6 +109,23 @@
 }
 .ios .dark,
 .ios.dark {
+  --f7-glass-bg-color: rgba(50, 50, 50, 0.5);
+  --f7-glass-shadow: inset -2px -2px 0.5px -2.5px rgba(255, 255, 255, 0.4),
+      inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.4),
+      inset 2px 2px 0.5px -2px #262626,
+      inset -2px -2px 0.5px -2px #262626,
+      inset 0 0 5px 1px #141414,
+      inset 0 0 0 1px rgba(255, 255, 255, 0.15),
+      inset 0 0 10px 0 rgba(255, 255, 255, 0.075),
+      inset 0 0 24px 0 rgba(255, 255, 255, 0.05),
+      0 0 25px 0 rgba(0, 0, 0, 0.15);
+  --f7-glass-shadow-thumb: inset 3px 3px 0px -3.5px #ffffff,
+      inset -3px -3px 0px -3.5px rgba(255, 255, 255, 1),
+      inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.5),
+      inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.1),
+      inset -3px 3px 0px -3.5px rgba(255, 255, 255, 0.25),
+      inset 0px -5px 0px -3.5px rgba(255, 255, 255, 0.25),
+      inset 0px -5px 5px rgba(255, 255, 255, 0.25);
   --f7-bars-text-color: #fff;
   --f7-text-color: #fff;
   --f7-bars-bg-color: #121212;
@@ -424,10 +456,10 @@ html.device-full-viewport body {
   z-index: 10000;
 }
 .ios .page-previous {
-  transform: translate3d(-20%, 0, 0);
+  transform: translate3d(-20%, 0, 0) scale(0.5);
 }
 .ios .page-next {
-  transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0) scale(1);
 }
 .ios .page-previous .page-opacity-effect {
   opacity: 1;
@@ -547,11 +579,11 @@ html.device-full-viewport body {
   }
 }
 .md .page-previous {
-  transform: translate3d(0, -20px, 0);
+  transform: translate3d(0, -20px, 0) scale(0.5);
 }
 .md .page-next {
   pointer-events: none;
-  transform: translate3d(0, 128px, 0);
+  transform: translate3d(0, 128px, 0) scale(0.5);
   opacity: 0;
 }
 .md .page-next.page-next-on-right {
@@ -2964,18 +2996,18 @@ html.device-full-viewport body {
   --f7-block-text-color: inherit;
   --f7-block-margin-vertical: 35px;
   --f7-block-outline-border-color: rgba(0, 0, 0, 0.22);
-  --f7-block-title-font-size: 16px;
+  --f7-block-title-font-size: 17px;
   --f7-block-title-font-weight: 600;
   --f7-block-title-line-height: 20px;
   --f7-block-title-margin-bottom: 10px;
-  --f7-block-title-medium-font-size: 22px;
+  --f7-block-title-medium-font-size: 20px;
   --f7-block-title-medium-font-weight: bold;
   --f7-block-title-medium-line-height: 1.4;
-  --f7-block-title-large-font-size: 30px;
+  --f7-block-title-large-font-size: 22px;
   --f7-block-title-large-font-weight: bold;
   --f7-block-title-large-line-height: 1.3;
-  --f7-block-inset-border-radius: 8px;
-  --f7-block-title-text-color: #000;
+  --f7-block-inset-border-radius: 24px;
+  --f7-block-title-text-color: rgba(0, 0, 0, 0.6);
   --f7-block-strong-text-color: #000;
   --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
   --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
@@ -2985,7 +3017,7 @@ html.device-full-viewport body {
 }
 .ios .dark,
 .ios.dark {
-  --f7-block-title-text-color: #fff;
+  --f7-block-title-text-color: rgba(255, 255, 255, 0.6);
   --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
   --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
   --f7-block-strong-text-color: #fff;
@@ -3391,7 +3423,6 @@ html.device-full-viewport body {
 :root {
   --f7-list-inset-side-margin: 16px;
   --f7-list-item-padding-horizontal: 16px;
-  --f7-list-item-padding-vertical: 8px;
   --f7-list-media-item-padding-horizontal: 16px;
   --f7-list-item-text-max-lines: 2;
   --f7-list-chevron-icon-font-size: 20px;
@@ -3435,8 +3466,9 @@ html.device-full-viewport body {
   --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
 }
 .ios {
+  --f7-list-item-padding-vertical: 12px;
   --f7-list-in-list-padding-left: 30px;
-  --f7-list-inset-border-radius: 8px;
+  --f7-list-inset-border-radius: 24px;
   --f7-list-margin-vertical: 35px;
   --f7-list-font-size: 17px;
   --f7-list-chevron-icon-area: 20px;
@@ -3448,7 +3480,7 @@ html.device-full-viewport body {
   --f7-list-item-text-line-height: 21px;
   --f7-list-item-after-font-size: inherit;
   --f7-list-item-after-padding: 5px;
-  --f7-list-item-min-height: 44px;
+  --f7-list-item-min-height: 52px;
   --f7-list-item-media-icons-margin: 5px;
   --f7-list-media-item-padding-vertical: 10px;
   --f7-list-media-item-title-font-weight: 600;
@@ -3461,7 +3493,7 @@ html.device-full-viewport body {
   --f7-list-group-title-font-size: inherit;
   --f7-list-group-title-font-weight: 400;
   --f7-menu-list-offset: 8px;
-  --f7-menu-list-border-radius: 8px;
+  --f7-menu-list-border-radius: 16px;
   --f7-menu-list-item-bg-color: transparent;
   --f7-menu-list-item-text-color: inherit;
   --f7-menu-list-item-min-height: 44px;
@@ -3480,7 +3512,7 @@ html.device-full-viewport body {
 .ios .dark,
 .ios.dark {
   --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
-  --f7-list-outline-inset-color: rgba(255, 255, 255, 0.15);
+  --f7-list-outline-inset-border-color: rgba(255, 255, 255, 0.15);
   --f7-list-strong-bg-color: #1c1c1d;
   --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
   --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
@@ -3493,6 +3525,7 @@ html.device-full-viewport body {
   --f7-menu-list-item-selected-bg-color: var(--f7-theme-color);
 }
 .md {
+  --f7-list-item-padding-vertical: 8px;
   --f7-list-in-list-padding-left: 24px;
   --f7-list-inset-border-radius: 16px;
   --f7-list-margin-vertical: 32px;
@@ -3703,8 +3736,8 @@ html.device-full-viewport body {
 .list label.item-content {
   color: inherit;
 }
-.list .item-link.active-state,
-.list label.item-content.active-state {
+.list .item-link.active-state:not(:has(.toggle-active-state)),
+.list label.item-content.active-state:not(:has(.toggle-active-state)) {
   background-color: var(--f7-list-link-pressed-bg-color);
 }
 .list .item-link .item-inner {
@@ -4514,7 +4547,6 @@ li.list-group-title:after,
   --f7-badge-bg-color: var(--f7-theme-color);
 }
 :root {
-  --f7-button-font-size: 14px;
   --f7-button-min-width: 32px;
   --f7-button-bg-color: transparent;
   --f7-button-border-width: 0px;
@@ -4546,12 +4578,13 @@ li.list-group-title:after,
   --f7-segmented-strong-button-active-text-color: #fff;
 }
 .ios {
+  --f7-button-font-size: 15px;
   --f7-button-fill-text-color: #fff;
-  --f7-button-text-transform: uppercase;
-  --f7-button-height: 28px;
+  --f7-button-text-transform: none;
+  --f7-button-height: 34px;
   --f7-button-padding-horizontal: 10px;
   --f7-button-border-radius: 4px;
-  --f7-button-font-weight: 600;
+  --f7-button-font-weight: 500;
   --f7-button-letter-spacing: 0;
   /*
   --f7-button-outline-border-color: var(--f7-theme-color);
@@ -4561,15 +4594,15 @@ li.list-group-title:after,
   --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
   */
-  --f7-button-large-text-transform: uppercase;
-  --f7-button-large-height: 44px;
+  --f7-button-large-text-transform: none;
+  --f7-button-large-height: 48px;
   --f7-button-large-font-size: 17px;
   --f7-button-large-font-weight: 500;
   --f7-button-small-outline-border-width: 2px;
-  --f7-button-small-text-transform: uppercase;
-  --f7-button-small-height: 26px;
-  --f7-button-small-font-size: 13px;
-  --f7-button-small-font-weight: 600;
+  --f7-button-small-text-transform: none;
+  --f7-button-small-height: 28px;
+  --f7-button-small-font-size: 14px;
+  --f7-button-small-font-weight: 500;
   --f7-segmented-strong-button-text-transform: none;
   --f7-segmented-strong-button-active-font-weight: 600;
   --f7-button-tonal-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
@@ -4584,6 +4617,7 @@ li.list-group-title:after,
   --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
 }
 .md {
+  --f7-button-font-size: 14px;
   /*
   --f7-button-pressed-bg-color: transparent;
   */
@@ -5247,15 +5281,16 @@ i.icon {
 :root {
   --f7-dialog-button-text-color: var(--f7-theme-color);
   --f7-dialog-button-text-align: center;
+  --f7-dialog-text-line-height: 1.5;
 }
 .ios {
   --f7-dialog-width: 270px;
-  --f7-dialog-inner-padding: 16px;
-  --f7-dialog-border-radius: 13px;
-  --f7-dialog-text-align: center;
+  --f7-dialog-inner-padding: 24px;
+  --f7-dialog-border-radius: 32px;
+  --f7-dialog-text-align: left;
   --f7-dialog-font-size: 14px;
   --f7-dialog-title-text-color: inherit;
-  --f7-dialog-title-font-size: 18px;
+  --f7-dialog-title-font-size: 17px;
   --f7-dialog-title-font-weight: 600;
   --f7-dialog-title-line-height: inherit;
   --f7-dialog-button-font-size: 17px;
@@ -5266,29 +5301,26 @@ i.icon {
   --f7-dialog-button-strong-bg-color: transparent;
   --f7-dialog-button-strong-text-color: var(--f7-theme-color);
   --f7-dialog-button-strong-font-weight: 500;
-  --f7-dialog-input-border-radius: 4px;
+  --f7-dialog-input-border-radius: 16px;
   --f7-dialog-input-font-size: 14px;
-  --f7-dialog-input-height: 32px;
+  --f7-dialog-input-height: 40px;
   --f7-dialog-input-border-width: 1px;
   --f7-dialog-input-placeholder-color: #a9a9a9;
   --f7-dialog-preloader-size: 34px;
+  --f7-dialog-bg-color: var(--f7-glass-bg-color);
   --f7-dialog-input-bg-color: #fff;
-  --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
   --f7-dialog-bg-color-rgb: 255, 255, 255;
   --f7-dialog-text-color: #000;
   --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
   --f7-dialog-button-strong-pressed-bg-color: rgba(0, 0, 0, 0.1);
   --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
-  --f7-dialog-border-divider-color: rgba(0, 0, 0, 0.2);
 }
 .ios .dark,
 .ios.dark {
   --f7-dialog-text-color: #fff;
-  --f7-dialog-bg-color: rgba(45, 45, 45, 0.95);
   --f7-dialog-bg-color-rgb: 45, 45, 45;
   --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.2);
   --f7-dialog-button-strong-pressed-bg-color: rgba(0, 0, 0, 0.2);
-  --f7-dialog-border-divider-color: rgba(255, 255, 255, 0.15);
   --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
   --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.5);
 }
@@ -5348,13 +5380,6 @@ i.icon {
   background: var(--f7-dialog-bg-color);
   will-change: transform, opacity;
 }
-@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
-  .ios-translucent-modals .dialog {
-    background-color: rgba(var(--f7-dialog-bg-color-rgb), 0.8);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-            backdrop-filter: saturate(180%) blur(20px);
-  }
-}
 .dialog.modal-in {
   opacity: 1;
   transform: translate3d(0, -50%, 0) scale(1);
@@ -5376,41 +5401,22 @@ i.icon {
   font-weight: var(--f7-dialog-title-font-weight);
   line-height: var(--f7-dialog-title-line-height);
 }
+.dialog-text {
+  line-height: var(--f7-dialog-text-line-height);
+}
 .dialog-buttons {
   position: relative;
   display: flex;
 }
 .dialog-buttons-vertical .dialog-buttons {
-  display: block;
+  flex-direction: column;
   height: auto !important;
 }
 .dialog-button {
-  box-sizing: border-box;
   overflow: hidden;
   position: relative;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--f7-dialog-button-text-color);
-  font-size: var(--f7-dialog-button-font-size);
-  height: var(--f7-dialog-button-height);
-  line-height: var(--f7-dialog-button-height);
-  letter-spacing: var(--f7-dialog-button-letter-spacing);
-  text-align: var(--f7-dialog-button-text-align);
-  font-weight: var(--f7-dialog-button-font-weight);
-  text-transform: var(--f7-dialog-button-text-transform);
-  display: block;
-  cursor: pointer;
-}
-.dialog-button.active-state {
-  background-color: var(--f7-dialog-button-pressed-bg-color);
-}
-.dialog-button-strong {
-  background-color: var(--f7-dialog-button-strong-bg-color);
-  color: var(--f7-dialog-button-strong-text-color);
-  font-weight: var(--f7-dialog-button-strong-font-weight);
-}
-.dialog-button-strong.active-state {
-  background-color: var(--f7-dialog-button-strong-pressed-bg-color);
 }
 .dialog-no-buttons .dialog-buttons {
   display: none;
@@ -5446,115 +5452,46 @@ input.dialog-input[type]::placeholder {
 .dialog-preloader .preloader {
   --f7-preloader-size: var(--f7-dialog-preloader-size);
 }
-html.with-modal-dialog .page-content {
+html:has(.dialog.modal-in) .page-content {
   overflow: hidden;
   -webkit-overflow-scrolling: auto;
 }
+.ios .dialog {
+  box-shadow: var(--f7-glass-shadow);
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+  border-radius: var(--f7-dialog-border-radius);
+}
 .ios .dialog.modal-out {
   transform: translate3d(0, -50%, 0) scale(1);
 }
 .ios .dialog-inner {
   border-radius: var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0;
 }
-.ios .dialog-inner:after {
-  content: '';
-  position: absolute;
-  background-color: var(--f7-dialog-border-divider-color);
-  display: block;
-  z-index: 15;
-  top: auto;
-  right: auto;
-  bottom: 0;
-  left: 0;
-  height: 1px;
-  width: 100%;
-  transform-origin: 50% 100%;
-  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
-}
 .ios .dialog-title + .dialog-text {
-  margin-top: 5px;
+  margin-top: 12px;
 }
 .ios .dialog-buttons {
-  height: 44px;
+  padding: 0 14px 14px 14px;
   justify-content: center;
+  gap: 8px;
 }
 .ios .dialog-button {
   width: 100%;
-  padding: 0 5px;
   -webkit-box-flex: 1;
   -ms-flex: 1;
 }
-.ios .dialog-button:after {
-  content: '';
-  position: absolute;
-  background-color: var(--f7-dialog-border-divider-color);
-  display: block;
-  z-index: 15;
-  top: 0;
-  right: 0;
-  bottom: auto;
-  left: auto;
-  width: 1px;
-  height: 100%;
-  transform-origin: 100% 50%;
-  transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
-}
-.ios .dialog-button:first-child {
-  border-radius: 0 0 0 var(--f7-dialog-border-radius);
-}
-.ios .dialog-button:last-child {
-  border-radius: 0 0 var(--f7-dialog-border-radius) 0;
-}
-.ios .dialog-button:last-child:after {
-  display: none !important;
-}
-.ios .dialog-button:first-child:last-child {
-  border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
-}
-.ios .dialog-button[class*='color-'] {
-  --f7-dialog-button-text-color: var(--f7-theme-color);
-}
-.ios .dialog-buttons-vertical .dialog-buttons {
-  height: auto;
-}
-.ios .dialog-buttons-vertical .dialog-button {
-  border-radius: 0;
-}
-.ios .dialog-buttons-vertical .dialog-button:after {
-  content: '';
-  position: absolute;
-  background-color: var(--f7-dialog-border-divider-color);
-  display: block;
-  z-index: 15;
-  top: auto;
-  right: auto;
-  bottom: 0;
-  left: 0;
-  height: 1px;
-  width: 100%;
-  transform-origin: 50% 100%;
-  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
-}
-.ios .dialog-buttons-vertical .dialog-button:last-child {
-  border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
-}
-.ios .dialog-buttons-vertical .dialog-button:last-child:after {
-  display: none !important;
-}
 .ios .dialog-no-buttons .dialog-inner {
   border-radius: var(--f7-dialog-border-radius);
 }
-.ios .dialog-no-buttons .dialog-inner:after {
-  display: none !important;
-}
 .ios .dialog-input-field {
   margin-top: 15px;
 }
 .ios .dialog-input {
-  padding: 0 5px;
+  padding: 0 12px;
 }
 .ios .dialog-input + .dialog-input {
-  margin-top: 5px;
+  margin-top: 12px;
 }
 .ios .dialog-input-double + .dialog-input-double {
   margin-top: 0;
@@ -5563,6 +5500,9 @@ html.with-modal-dialog .page-content {
   border-top: 0;
   margin-top: 0;
 }
+.ios .dialog-preloader {
+  text-align: center;
+}
 .ios .dialog-preloader .dialog-title ~ .preloader,
 .ios .dialog-preloader .dialog-text ~ .preloader {
   margin-top: 15px;
@@ -5583,39 +5523,20 @@ html.with-modal-dialog .page-content {
   line-height: 1.5;
 }
 .md .dialog-buttons {
-  height: 64px;
   padding: 0px 24px 24px;
   overflow: hidden;
   box-sizing: border-box;
   justify-content: flex-end;
+  gap: 8px;
 }
 .md .dialog-button {
-  --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
-  border-radius: 99px;
-  min-width: 64px;
-  padding: 0px 16px;
-  border: none;
-  transition-duration: 300ms;
-  transform: translate3d(0, 0, 0);
-}
-.md .dialog-button + .dialog-button {
-  margin-left: 8px;
-}
-.md .dialog-button-strong {
-  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
-}
-.md .dialog-button[class*='color-'] {
-  --f7-dialog-button-text-color: var(--f7-theme-color);
+  width: auto;
 }
 .md .dialog-buttons-vertical .dialog-buttons {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
 }
-.md .dialog-buttons-vertical .dialog-button + .dialog-button {
-  margin-top: 8px;
-  margin-left: 0;
-}
 .md .dialog-input {
   padding: 0;
   transition-duration: 200ms;
@@ -5978,15 +5899,14 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
   --f7-popover-width: 260px;
 }
 .ios {
-  --f7-popover-border-radius: 13px;
+  --f7-popover-border-radius: 32px;
   --f7-popover-actions-icon-size: 28px;
   --f7-popover-transition-timing-function: initial;
-  --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
+  --f7-popover-bg-color: transparent;
   --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.45);
 }
 .ios .dark,
 .ios.dark {
-  --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
   --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.55);
 }
 .md {
@@ -6012,7 +5932,6 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
   left: 0;
   position: absolute;
   display: none;
-  transition-duration: 300ms;
   background-color: var(--f7-popover-bg-color);
   border-radius: var(--f7-popover-border-radius);
   will-change: transform, opacity;
@@ -6114,98 +6033,112 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
 .md .popover-from-actions-label {
   justify-content: center;
 }
-.popover-arrow {
-  width: 26px;
-  height: 26px;
-  position: absolute;
-  left: -26px;
-  top: 0;
-  z-index: 100;
-  overflow: hidden;
-}
-.popover-arrow:after {
-  content: '';
-  background: var(--f7-popover-bg-color);
-  width: 26px;
-  height: 26px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  border-radius: 3px;
-  transform: rotate(45deg);
-}
-.popover-arrow.on-left {
-  left: -26px;
-}
-.popover-arrow.on-left:after {
-  left: 19px;
-  top: 0;
-}
-.popover-arrow.on-right {
-  left: 100%;
-}
-.popover-arrow.on-right:after {
-  left: -19px;
-  top: 0;
+.popover-on-top {
+  transform-origin: center bottom;
 }
-.popover-arrow.on-top {
-  left: 0;
-  top: -26px;
+.popover-on-top.popover-on-right {
+  transform-origin: left bottom;
 }
-.popover-arrow.on-top:after {
-  left: 0;
-  top: 19px;
+.popover-on-top.popover-on-left {
+  transform-origin: right bottom;
 }
-.popover-arrow.on-bottom {
-  left: 0;
-  top: 100%;
+.popover-on-middle {
+  transform-origin: center center;
 }
-.popover-arrow.on-bottom:after {
-  left: 0;
-  top: -19px;
+.popover-on-middle.popover-on-right {
+  transform-origin: left center;
 }
-.ios .popover {
-  transform: none;
-  transition-property: opacity;
+.popover-on-middle.popover-on-left {
+  transform-origin: right center;
 }
-.md .popover {
-  transform: scale(0.85, 0.6);
-  transition-property: opacity, transform;
+.popover-on-bottom {
+  transform-origin: center top;
 }
-.md .popover.modal-in {
-  opacity: 1;
-  transform: scale(1);
+.popover-on-bottom.popover-on-right {
+  transform-origin: left top;
 }
-.md .popover.modal-out {
-  opacity: 0;
-  transform: scale(1);
+.popover-on-bottom.popover-on-left {
+  transform-origin: right top;
 }
-.md .popover-on-top {
+.ios .popover-on-top {
   transform-origin: center bottom;
+  --f7-popover-inner-offset: translate3d(0%, 80px, 0);
 }
-.md .popover-on-top.popover-on-right {
+.ios .popover-on-top.popover-on-right {
   transform-origin: left bottom;
+  --f7-popover-inner-offset: translate3d(50%, 80px, 0);
 }
-.md .popover-on-top.popover-on-left {
+.ios .popover-on-top.popover-on-left {
   transform-origin: right bottom;
+  --f7-popover-inner-offset: translate3d(-50%, 80px, 0);
 }
-.md .popover-on-middle {
+.ios .popover-on-middle {
   transform-origin: center center;
 }
-.md .popover-on-middle.popover-on-right {
+.ios .popover-on-middle.popover-on-right {
   transform-origin: left center;
+  --f7-popover-inner-offset: translate3d(50%, 0px, 0);
 }
-.md .popover-on-middle.popover-on-left {
+.ios .popover-on-middle.popover-on-left {
   transform-origin: right center;
+  --f7-popover-inner-offset: translate3d(-50%, 0px, 0);
 }
-.md .popover-on-bottom {
+.ios .popover-on-bottom {
   transform-origin: center top;
+  --f7-popover-inner-offset: translate3d(0%, -80px, 0);
 }
-.md .popover-on-bottom.popover-on-right {
+.ios .popover-on-bottom.popover-on-right {
   transform-origin: left top;
+  --f7-popover-inner-offset: translate3d(50%, -80px, 0);
 }
-.md .popover-on-bottom.popover-on-left {
+.ios .popover-on-bottom.popover-on-left {
   transform-origin: right top;
+  --f7-popover-inner-offset: translate3d(-50%, -80px, 0);
+}
+.ios .popover {
+  transform: translate3d(0, 0, 0) scale(0);
+  transition-property: opacity, transform;
+  opacity: 1;
+  will-change: auto;
+}
+.ios .popover.modal-in {
+  transform: translate3d(0, 0, 0) scale(1);
+  transition-timing-function: cubic-bezier(0, 1, 0.2, 1.05);
+  transition-duration: 400ms;
+}
+.ios .popover.modal-in .popover-inner {
+  transition-duration: 600ms;
+  transition-timing-function: cubic-bezier(0, 1, 0.2, 1.05);
+  transform: translate3d(0, 0, 0) scale(1);
+}
+.ios .popover.modal-out {
+  opacity: 0;
+  transform: translate3d(0, 0, 0) scale(0);
+  transition-duration: 300ms;
+}
+.ios .popover.modal-out .popover-inner {
+  transition-duration: 500ms;
+}
+.ios .popover-inner {
+  background: var(--f7-glass-bg-color);
+  box-shadow: var(--f7-glass-shadow);
+  border-radius: var(--f7-popover-border-radius);
+  transform: var(--f7-popover-inner-offset);
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+}
+.md .popover {
+  transform: scale(0.85, 0.6);
+  transition-property: opacity, transform;
+  transition-duration: 300ms;
+}
+.md .popover.modal-in {
+  opacity: 1;
+  transform: scale(1);
+}
+.md .popover.modal-out {
+  opacity: 0;
+  transform: scale(1);
 }
 /* === Actions === */
 :root {
@@ -6214,15 +6147,15 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
 }
 .ios {
   --f7-actions-transition-timing-function: initial;
-  --f7-actions-border-radius: 13px;
+  --f7-actions-border-radius: 32px;
   /*
   --f7-actions-button-text-color: var(--f7-theme-color);
   */
   --f7-actions-grid-button-text-color: #757575;
   --f7-actions-button-padding: 0px;
   --f7-actions-button-text-align: center;
-  --f7-actions-button-height: 57px;
-  --f7-actions-button-height-landscape: 44px;
+  --f7-actions-button-height: 56px;
+  --f7-actions-button-height-landscape: 56px;
   --f7-actions-button-font-size: 20px;
   --f7-actions-button-icon-size: 28px;
   --f7-actions-button-justify-content: center;
@@ -6232,8 +6165,7 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
   --f7-actions-label-justify-content: center;
   --f7-actions-group-border-color: transparent;
   --f7-actions-group-margin: 8px;
-  --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
-  --f7-actions-bg-color-rgb: 255, 255, 255;
+  --f7-actions-bg-color: var(--f7-glass-bg-color);
   --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
   --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
   --f7-actions-button-pressed-bg-color-rgb: 230, 230, 230;
@@ -6241,8 +6173,6 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
 }
 .ios .dark,
 .ios.dark {
-  --f7-actions-bg-color: rgba(45, 45, 45, 0.95);
-  --f7-actions-bg-color-rgb: 45, 45, 45;
   --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
   --f7-actions-button-pressed-bg-color: rgba(50, 50, 50, 0.9);
   --f7-actions-button-pressed-bg-color-rgb: 50, 50, 50;
@@ -6403,13 +6333,6 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
 .actions-button[class*='color-'] {
   color: var(--f7-theme-color);
 }
-@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
-  .ios-translucent-modals .actions-button.active-state {
-    background-color: rgba(var(--f7-actions-button-pressed-bg-color-rgb), 0.8);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-            backdrop-filter: saturate(180%) blur(20px);
-  }
-}
 .actions-button-media {
   flex-shrink: 0;
   display: flex;
@@ -6489,20 +6412,15 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
   height: 1.33em;
   font-size: var(--f7-actions-grid-button-font-size);
 }
+.ios .actions-modal {
+  overflow: visible;
+}
 .ios .actions-group {
   border-radius: var(--f7-actions-border-radius);
-}
-.ios .actions-button,
-.ios .actions-label {
   background: var(--f7-actions-bg-color);
-}
-@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
-  .ios-translucent-modals .ios .actions-button,
-  .ios-translucent-modals .ios .actions-label {
-    background-color: rgba(var(--f7-actions-bg-color-rgb), 0.8);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-            backdrop-filter: saturate(180%) blur(20px);
-  }
+  box-shadow: var(--f7-glass-shadow);
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
 }
 .ios .actions-button:first-child,
 .ios .actions-label:first-child {
@@ -6526,29 +6444,28 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
 .ios .actions-label.actions-button-strong {
   font-weight: 600;
 }
-.ios .actions-grid .actions-group {
-  border-radius: 0;
+.ios .actions-grid::before {
+  content: '';
+  position: absolute;
+  left: var(--f7-actions-group-margin);
+  right: var(--f7-actions-group-margin);
+  bottom: var(--f7-actions-group-margin);
   background: var(--f7-actions-bg-color);
-}
-@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
-  .ios-translucent-modals .ios .actions-grid .actions-group {
-    background-color: rgba(var(--f7-actions-bg-color-rgb), 0.8);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-            backdrop-filter: saturate(180%) blur(20px);
-  }
-}
-.ios .actions-grid .actions-group:first-child {
-  border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
-}
-.ios .actions-grid .actions-group:last-child {
-  border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
-}
-.ios .actions-grid .actions-group:first-child:last-child {
+  top: 0;
   border-radius: var(--f7-actions-border-radius);
+  box-shadow: var(--f7-glass-shadow);
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+}
+.ios .actions-grid .actions-group {
+  background: transparent;
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+          backdrop-filter: none;
 }
 .ios .actions-grid .actions-button,
 .ios .actions-grid .actions-label {
-  border-radius: 0 !important;
+  border-radius: var(--f7-actions-border-radius);
 }
 .ios .actions-button-media {
   margin-left: 16px;
@@ -6830,12 +6747,10 @@ html.with-modal-sheet-push-closing .framework7-root > .view.dark:after {
   --f7-toast-max-width: 568px;
 }
 .ios {
-  --f7-toast-text-color: #fff;
-  --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
-  --f7-toast-bg-color-rgb: 0, 0, 0;
+  --f7-toast-bg-color: var(--f7-glass-bg-color);
   --f7-toast-padding-horizontal: 16px;
   --f7-toast-padding-vertical: 12px;
-  --f7-toast-border-radius: 8px;
+  --f7-toast-border-radius: 32px;
   --f7-toast-button-min-width: 64px;
 }
 .md {
@@ -6861,13 +6776,6 @@ html.with-modal-sheet-push-closing .framework7-root > .view.dark:after {
   background-color: var(--f7-toast-bg-color);
   opacity: 0;
 }
-@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
-  .ios-translucent-modals .toast {
-    background-color: rgba(var(--f7-toast-bg-color-rgb), 0.8);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-            backdrop-filter: saturate(180%) blur(20px);
-  }
-}
 .toast.modal-in {
   opacity: 1;
 }
@@ -6888,6 +6796,7 @@ html.with-modal-sheet-push-closing .framework7-root > .view.dark:after {
   min-width: var(--f7-toast-button-min-width);
   margin-top: -8px;
   margin-bottom: -8px;
+  width: auto;
 }
 .toast.toast-with-icon .toast-content {
   display: block;
@@ -6910,6 +6819,9 @@ html.with-modal-sheet-push-closing .framework7-root > .view.dark:after {
   transition-duration: 300ms;
   width: 100%;
   left: 0;
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+  box-shadow: var(--f7-glass-shadow);
 }
 .ios .toast.toast-top {
   top: 0;
@@ -7652,7 +7564,6 @@ body > .progressbar-infinite,
 :root {
   --f7-swipeout-delete-button-bg-color: #ff3b30;
   --f7-swipeout-button-text-color: #fff;
-  --f7-swipeout-button-padding-vertical: 0px;
   --f7-swipeout-button-bg-color: rgba(0, 0, 0, 0.22);
 }
 :root .dark,
@@ -7660,11 +7571,21 @@ body > .progressbar-infinite,
   --f7-swipeout-button-bg-color: rgba(255, 255, 255, 0.55);
 }
 .ios {
-  --f7-swipeout-button-padding-horizontal: 30px;
+  --f7-swipeout-button-border-radius: 48px;
+  --f7-swipeout-button-padding-vertical: 10px;
+  --f7-swipeout-button-padding-horizontal: 16px;
   --f7-swipeout-button-font-size: inherit;
   --f7-swipeout-button-font-weight: inherit;
+  --f7-swipeout-active-border-radius: 16px;
+  --f7-swipeout-active-bg-color: #eee;
+}
+.ios .dark,
+.ios.dark {
+  --f7-swipeout-active-bg-color: #2c2c2e;
 }
 .md {
+  --f7-swipeout-button-border-radius: 0px;
+  --f7-swipeout-button-padding-vertical: 0px;
   --f7-swipeout-button-padding-horizontal: 24px;
   --f7-swipeout-button-font-size: 14px;
   --f7-swipeout-button-font-weight: 500;
@@ -7684,11 +7605,22 @@ body > .progressbar-infinite,
   transform: translateX(-100%);
 }
 .swipeout-transitioning .swipeout-content,
+.swipeout-transitioning .swipeout-content .item-inner::after {
+  transition-duration: 300ms;
+  transition-property: transform, left, background-color, border-radius, opacity;
+}
 .swipeout-transitioning .swipeout-actions-right a,
 .swipeout-transitioning .swipeout-actions-left a,
 .swipeout-transitioning .swipeout-overswipe {
   transition-duration: 300ms;
-  transition-property: transform, left;
+  transition-property: transform, left, width, margin-left, margin-right;
+}
+.swipeout-transitioning:not(.swipeout-opened) .swipeout-content {
+  transition-delay: 0ms, 0ms, 300ms, 300ms, 0ms;
+}
+.list li:has( + li:is(.swipeout-opened, .swipeout-active)) .item-inner::after {
+  opacity: 0;
+  transition-duration: 300ms;
 }
 .swipeout-content {
   position: relative;
@@ -7696,7 +7628,6 @@ body > .progressbar-infinite,
 }
 .swipeout-overswipe {
   transition-duration: 200ms;
-  transition-property: left;
 }
 .swipeout-actions-left,
 .swipeout-actions-right {
@@ -7714,6 +7645,8 @@ body > .progressbar-infinite,
 .swipeout-actions-right > span,
 .swipeout-actions-left > div,
 .swipeout-actions-right > div {
+  box-sizing: border-box;
+  border-radius: var(--f7-swipeout-button-border-radius);
   color: var(--f7-swipeout-button-text-color);
   background: var(--f7-swipeout-button-bg-color);
   padding: var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);
@@ -7724,14 +7657,62 @@ body > .progressbar-infinite,
   font-size: var(--f7-swipeout-button-font-size);
   font-weight: var(--f7-swipeout-button-font-weight);
 }
-.swipeout-actions-left > a:after,
-.swipeout-actions-right > a:after,
-.swipeout-actions-left > button:after,
-.swipeout-actions-right > button:after,
-.swipeout-actions-left > span:after,
-.swipeout-actions-right > span:after,
-.swipeout-actions-left > div:after,
-.swipeout-actions-right > div:after {
+.swipeout-actions-left .swipeout-delete,
+.swipeout-actions-right .swipeout-delete {
+  background: var(--f7-swipeout-delete-button-bg-color);
+}
+.swipeout-actions-left [class*='color-'],
+.swipeout-actions-right [class*='color-'] {
+  --f7-swipeout-button-bg-color: var(--f7-theme-color);
+}
+.ios .swipeout-actions-right {
+  right: 0%;
+}
+.ios .swipeout-actions-left {
+  left: 0%;
+}
+.ios .swipeout-actions-left,
+.ios .swipeout-actions-right {
+  padding: 0 10px;
+  gap: 10px;
+  align-items: center;
+}
+.ios .swipeout-actions-left > a,
+.ios .swipeout-actions-right > a,
+.ios .swipeout-actions-left > button,
+.ios .swipeout-actions-right > button,
+.ios .swipeout-actions-left > span,
+.ios .swipeout-actions-right > span,
+.ios .swipeout-actions-left > div,
+.ios .swipeout-actions-right > div {
+  transform: scale(0);
+  padding: var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);
+}
+.ios .swipeout-opened .swipeout-content,
+.ios .swipeout-active .swipeout-content {
+  background-color: var(--f7-swipeout-active-bg-color);
+  border-radius: var(--f7-swipeout-active-border-radius);
+}
+.ios .swipeout-opened .item-content,
+.ios .swipeout-active .item-content {
+  border-radius: var(--f7-swipeout-active-border-radius);
+}
+.ios .swipeout-opened .swipeout-content .item-inner::after,
+.ios .swipeout-active .swipeout-content .item-inner::after {
+  opacity: 0;
+}
+.ios .swipeout-overswipe {
+  transition-duration: 200ms;
+  transition-property: transform, left, width, margin-left, margin-right;
+}
+.md .swipeout-actions-left > a:after,
+.md .swipeout-actions-right > a:after,
+.md .swipeout-actions-left > button:after,
+.md .swipeout-actions-right > button:after,
+.md .swipeout-actions-left > span:after,
+.md .swipeout-actions-right > span:after,
+.md .swipeout-actions-left > div:after,
+.md .swipeout-actions-right > div:after {
   content: '';
   position: absolute;
   top: 0;
@@ -7742,45 +7723,40 @@ body > .progressbar-infinite,
   transform: translate3d(0, 0, 0);
   pointer-events: none;
 }
-.swipeout-actions-left .swipeout-delete,
-.swipeout-actions-right .swipeout-delete {
-  background: var(--f7-swipeout-delete-button-bg-color);
-}
-.swipeout-actions-right {
+.md .swipeout-actions-right {
   right: 0%;
   transform: translateX(calc(100% + 1px));
 }
-.swipeout-actions-right > a:after,
-.swipeout-actions-right > button:after,
-.swipeout-actions-right > span:after,
-.swipeout-actions-right > div:after {
+.md .swipeout-actions-right > a:after,
+.md .swipeout-actions-right > button:after,
+.md .swipeout-actions-right > span:after,
+.md .swipeout-actions-right > div:after {
   left: 100%;
 }
-.swipeout-actions-right > a:last-child,
-.swipeout-actions-right > button:last-child,
-.swipeout-actions-right > span:last-child,
-.swipeout-actions-right > div:last-child {
+.md .swipeout-actions-right > a:last-child,
+.md .swipeout-actions-right > button:last-child,
+.md .swipeout-actions-right > span:last-child,
+.md .swipeout-actions-right > div:last-child {
   padding-right: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right));
 }
-.swipeout-actions-left {
+.md .swipeout-actions-left {
   left: 0%;
   transform: translateX(calc(-100% - 1px));
 }
-.swipeout-actions-left > a:after,
-.swipeout-actions-left > button:after,
-.swipeout-actions-left > span:after,
-.swipeout-actions-left > div:after {
+.md .swipeout-actions-left > a:after,
+.md .swipeout-actions-left > button:after,
+.md .swipeout-actions-left > span:after,
+.md .swipeout-actions-left > div:after {
   right: 100%;
 }
-.swipeout-actions-left > a:first-child,
-.swipeout-actions-left > button:first-child,
-.swipeout-actions-left > span:first-child,
-.swipeout-actions-left > div:first-child {
+.md .swipeout-actions-left > a:first-child,
+.md .swipeout-actions-left > button:first-child,
+.md .swipeout-actions-left > span:first-child,
+.md .swipeout-actions-left > div:first-child {
   padding-left: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left));
 }
-.swipeout-actions-left [class*='color-'],
-.swipeout-actions-right [class*='color-'] {
-  --f7-swipeout-button-bg-color: var(--f7-theme-color);
+.md .swipeout-overswipe {
+  transition-property: left;
 }
 /* === Accordion === */
 :root {
@@ -9615,19 +9591,19 @@ html.with-modal-sheet-push-closing .framework7-root > .panel-in.panel-push.panel
   --f7-card-expandable-tablet-height: 670px;
 }
 .ios {
-  --f7-card-border-radius: 8px;
+  --f7-card-border-radius: 24px;
   --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
   --f7-card-header-font-size: 17px;
   --f7-card-header-padding-vertical: 10px;
-  --f7-card-header-min-height: 44px;
+  --f7-card-header-min-height: 52px;
   --f7-card-footer-text-color: rgba(0, 0, 0, 0.45);
   --f7-card-footer-padding-vertical: 10px;
-  --f7-card-footer-min-height: 44px;
+  --f7-card-footer-min-height: 52px;
   --f7-card-expandable-margin-horizontal: 20px;
   --f7-card-expandable-margin-vertical: 30px;
   --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
-  --f7-card-expandable-border-radius: 16px;
-  --f7-card-expandable-tablet-border-radius: 16px;
+  --f7-card-expandable-border-radius: 24px;
+  --f7-card-expandable-tablet-border-radius: 24px;
   --f7-card-expandable-header-font-size: 27px;
   --f7-card-expandable-header-font-weight: bold;
   --f7-card-text-color: inherit;
@@ -11270,8 +11246,8 @@ label.item-radio.disabled,
 }
 /* === Toggle === */
 .ios {
-  --f7-toggle-width: 52px;
-  --f7-toggle-height: 32px;
+  --f7-toggle-width: 64px;
+  --f7-toggle-height: 28px;
   /*
   --f7-toggle-active-bg-color: var(--f7-theme-color);
   */
@@ -11344,52 +11320,86 @@ label.item-radio.disabled,
   transition-duration: 300ms;
 }
 .ios .toggle {
+  --f7-toggle-knob-tx: 0px;
+}
+.ios .toggle::before {
+  content: '';
+  border-radius: inherit;
+  inset: 0;
+  position: absolute;
+  background: var(--f7-toggle-inactive-border-color);
+  transition-duration: 300ms;
+  z-index: 0;
+}
+.ios .toggle::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
+  top: 0;
+  width: var(--f7-toggle-height);
+  height: var(--f7-toggle-height);
+  border-radius: var(--f7-toggle-height);
   background: var(--f7-toggle-inactive-border-color);
+  transition-duration: 300ms;
+  z-index: 0;
 }
-.ios .toggle input[type='checkbox']:checked + .toggle-icon {
-  background: var(--f7-toggle-active-color, var(--f7-theme-color));
+.ios .toggle:has(input[type='checkbox']:checked) {
+  --f7-toggle-knob-tx: calc(var(--f7-toggle-width) - 38px - 4px);
 }
-.ios .toggle input[type='checkbox']:checked + .toggle-icon:before {
+.ios .toggle:has(input[type='checkbox']:checked)::before {
   background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
-  transform: scale(0);
 }
-.ios .toggle input[type='checkbox']:checked + .toggle-icon:after {
-  background: var(--f7-toggle-active-knob-bg-color);
-  transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
+.ios .toggle:has(input[type='checkbox']:checked)::after {
+  background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
+  transform: translateX(0);
 }
 .ios .toggle-icon {
-  background: var(--f7-toggle-border-color);
-}
-.ios .toggle-icon:before {
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  width: calc(var(--f7-toggle-width) - 4px);
-  height: calc(var(--f7-toggle-height) - 4px);
-  border-radius: var(--f7-toggle-height);
-  box-sizing: border-box;
-  background: var(--f7-toggle-inactive-bg-color);
-  z-index: 1;
-  transition-duration: 300ms;
-  transform: scale(1);
-}
-.ios .toggle-icon:after {
   background: var(--f7-toggle-inactive-knob-bg-color);
   height: calc(var(--f7-toggle-height) - 4px);
-  width: calc(var(--f7-toggle-height) - 4px);
+  width: 38px;
   top: 2px;
   left: 2px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   border-radius: calc(var(--f7-toggle-height) - 4px);
+  transition-duration: 300ms;
+  transform: translateX(var(--f7-toggle-knob-tx)) scale(1);
+  position: relative;
+  z-index: 1;
+  transform-origin: center;
 }
-.ios .toggle-active-state input[type='checkbox']:not(:checked) + .toggle-icon:before {
-  transform: scale(0);
+.ios .toggle-icon::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  transition-duration: 300ms;
+  box-shadow: 0px 0px 40px 15px rgba(var(--f7-theme-color-rgb), 0.75);
+}
+.ios .toggle-icon::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: var(--f7-glass-shadow-thumb);
+  transition-duration: 300ms;
+  opacity: 0;
 }
-.ios .toggle-active-state input[type='checkbox'] + .toggle-icon:after {
-  width: calc(var(--f7-toggle-height) + 4px);
+.ios .toggle-active-state::before {
+  transform: scale(0.75);
 }
-.ios .toggle-active-state input[type='checkbox']:checked + .toggle-icon:after {
-  transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px));
+.ios .toggle-active-state .toggle-icon {
+  background: transparent;
+  transform: translateX(var(--f7-toggle-knob-tx)) scale(1.4);
+}
+.ios .toggle-active-state .toggle-icon::before {
+  opacity: 1;
+}
+.ios .toggle-active-state .toggle-icon::after {
+  opacity: 1;
 }
 .md .toggle input[type='checkbox']:checked + .toggle-icon {
   background: var(--f7-toggle-active-bg-color);
@@ -11428,17 +11438,13 @@ label.item-radio.disabled,
   --f7-range-scale-step-height: 5px;
   --f7-range-scale-substep-width: 1px;
   --f7-range-scale-substep-height: 4px;
-  --f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
-}
-:root .dark,
-:root.dark {
-  --f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
 }
 .ios {
   --f7-range-size: 28px;
-  --f7-range-bar-size: 4px;
-  --f7-range-bar-border-radius: 2px;
-  --f7-range-knob-size: 28px;
+  --f7-range-bar-size: 6px;
+  --f7-range-bar-border-radius: 6px;
+  --f7-range-knob-width: 38px;
+  --f7-range-knob-height: 24px;
   --f7-range-knob-color: #fff;
   --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   --f7-range-label-size: 24px;
@@ -11447,18 +11453,24 @@ label.item-radio.disabled,
   --f7-range-label-font-size: 12px;
   --f7-range-label-font-weight: 500;
   --f7-range-label-border-radius: 5px;
-  --f7-range-label-padding: 0px 2px;
+  --f7-range-label-padding: 0px 4px;
   --f7-range-scale-text-color: #666;
   --f7-range-scale-step-width: 1px;
   --f7-range-scale-font-size: 12px;
   --f7-range-scale-font-weight: 400;
   --f7-range-scale-label-offset: 4px;
+  --f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
+}
+.ios .dark,
+.ios.dark {
+  --f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
 }
 .md {
   --f7-range-size: 20px;
-  --f7-range-bar-size: 2px;
-  --f7-range-bar-border-radius: 0px;
-  --f7-range-knob-size: 12px;
+  --f7-range-bar-size: 16px;
+  --f7-range-bar-border-radius: 16px;
+  --f7-range-knob-width: 16px;
+  --f7-range-knob-height: 44px;
   --f7-range-knob-box-shadow: none;
   --f7-range-label-size: 26px;
   --f7-range-label-font-weight: normal;
@@ -11473,6 +11485,7 @@ label.item-radio.disabled,
 .md,
 .md .dark,
 .md [class*='color-'] {
+  --f7-range-bar-bg-color: var(--f7-md-secondary-container);
   --f7-range-knob-color: var(--f7-theme-color);
   --f7-range-label-text-color: var(--f7-md-on-primary);
   --f7-range-label-bg-color: var(--f7-theme-color);
@@ -11540,49 +11553,35 @@ label.item-radio.disabled,
 .range-knob-wrap {
   z-index: 20;
   position: absolute;
-  height: var(--f7-range-knob-size);
-  width: var(--f7-range-knob-size);
+  height: var(--f7-range-knob-height);
+  width: var(--f7-range-knob-width);
 }
 .range-slider-horizontal .range-knob-wrap {
   top: 50%;
-  margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
-  margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
+  margin-top: calc(-1 * var(--f7-range-knob-height) / 2);
+  margin-left: calc(-1 * var(--f7-range-knob-width) / 2);
   left: 0;
 }
 .range-slider-vertical .range-knob-wrap {
   left: 50%;
-  margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
+  height: var(--f7-range-knob-width);
+  width: var(--f7-range-knob-height);
+  margin-left: calc(-1 * var(--f7-range-knob-height) / 2);
   bottom: 0;
-  margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
+  margin-bottom: calc(-1 * var(--f7-range-knob-width) / 2);
 }
 .range-slider-vertical-reversed .range-knob-wrap {
   bottom: auto;
   top: 0;
   margin-bottom: 0;
-  margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
+  margin-top: calc(-1 * var(--f7-range-knob-width) / 2);
 }
 .range-knob {
   box-sizing: border-box;
-  border-radius: 50%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
   z-index: 1;
   background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
   box-shadow: var(--f7-range-knob-box-shadow);
 }
-.range-knob:after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 44px;
-  height: 44px;
-  margin-left: -22px;
-  margin-top: -22px;
-}
 .range-knob-label {
   position: absolute;
   left: 50%;
@@ -11682,19 +11681,94 @@ label.item-radio.disabled,
   --f7-range-scale-step-width: var(--f7-range-scale-substep-width);
   --f7-range-scale-step-height: var(--f7-range-scale-substep-height);
 }
+.ios .range-bar-active {
+  border-radius: inherit;
+}
+.ios .range-knob {
+  border-radius: var(--f7-range-knob-height);
+  transition-duration: 300ms;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.ios .range-knob:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 44px;
+  height: 44px;
+}
+.ios .range-knob::before,
+.ios .range-knob::after {
+  content: '';
+  position: absolute;
+}
+.ios .range-knob::before {
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  transition-duration: 300ms;
+  box-shadow: 0px 0px 40px 15px rgba(var(--f7-theme-color-rgb), 0.75);
+  left: 50%;
+  top: 50%;
+  margin-left: -0.5px;
+  margin-top: -0.5px;
+}
+.ios .range-knob::after {
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: var(--f7-glass-shadow-thumb);
+  transition-duration: 300ms;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
 .ios .range-knob-label {
   margin-bottom: 6px;
   transform: translateX(-50%) translateY(100%) scale(0);
+  z-index: 2;
 }
 .ios .range-knob-active-state .range-knob-label {
   transform: translateX(-50%) translateY(0%) scale(1);
 }
+.ios .range-knob-active-state .range-knob {
+  background: transparent;
+  transform: scale(1.4);
+}
+.ios .range-knob-active-state .range-knob::before {
+  opacity: 1;
+}
+.ios .range-knob-active-state .range-knob::after {
+  opacity: 1;
+}
+.md .range-knob-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .md .range-knob {
   transition-duration: 200ms;
   transition-property: transform, background-color;
+  width: 4px;
+  height: var(--f7-range-knob-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
 }
 .md .range-knob-active-state .range-knob {
-  transform: scale(1.5);
+  transform: scaleX(0.5);
+}
+.md .range-slider-vertical .range-knob {
+  width: var(--f7-range-knob-height);
+  height: 4px;
+}
+.md .range-slider-vertical .range-knob-active-state .range-knob {
+  transform: scaleY(0.5);
 }
 .md .range-slider-min:not(.range-slider-dual) .range-knob {
   background: #fff !important;
@@ -11721,8 +11795,48 @@ label.item-radio.disabled,
 .md .range-knob-active-state .range-knob-label {
   transform: translateY(0%) scale(1);
 }
-.md .range-slider-label .range-knob-active-state .range-knob {
-  transform: scale(0);
+.md .range-bar-active,
+.md .range-bar-inactive {
+  border-radius: 4px;
+}
+.md .range-slider::before,
+.md .range-slider::after {
+  content: '';
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--f7-range-knob-color);
+  top: calc(50% - 2px);
+  z-index: 1;
+  pointer-events: none;
+  transition-duration: 200ms;
+}
+.md .range-slider::before {
+  left: calc(var(--f7-range-knob-width) / 2 - 2px);
+}
+.md .range-slider::after {
+  right: calc(var(--f7-range-knob-width) / 2 - 2px);
+}
+.md .range-slider:not(.range-slider-dual)::before {
+  content: none;
+  display: none;
+}
+.md .range-slider:has(.range-knob-active-state)::before,
+.md .range-slider:has(.range-knob-active-state)::after {
+  transform: scale(0.5);
+}
+.md .range-slider.range-slider-vertical::before,
+.md .range-slider.range-slider-vertical::after {
+  top: auto;
+  left: calc(50% - 2px);
+  right: auto;
+}
+.md .range-slider.range-slider-vertical::before {
+  bottom: calc(var(--f7-range-knob-width) / 2 - 2px);
+}
+.md .range-slider.range-slider-vertical::after {
+  top: calc(var(--f7-range-knob-width) / 2 - 2px);
 }
 /* === Stepper === */
 :root {
@@ -17559,23 +17673,22 @@ button.swiper-pagination-bullet {
 }
 .ios {
   --f7-notification-margin: 8px;
-  --f7-notification-padding-horizontal: 10px;
-  --f7-notification-padding-vertical: 10px;
-  --f7-notification-border-radius: 12px;
-  --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
-  --f7-notification-icon-size: 20px;
-  --f7-notification-title-font-size: 13px;
-  --f7-notification-title-text-transform: uppercase;
+  --f7-notification-padding-horizontal: 16px;
+  --f7-notification-padding-vertical: 16px;
+  --f7-notification-border-radius: 24px;
+  --f7-notification-box-shadow: var(--f7-glass-shadow);
+  --f7-notification-icon-size: 28px;
+  --f7-notification-title-font-size: 14px;
+  --f7-notification-title-text-transform: none;
   --f7-notification-title-line-height: 1.4;
-  --f7-notification-title-font-weight: 400;
+  --f7-notification-title-font-weight: bold;
   --f7-notification-title-letter-spacing: 0.02em;
-  --f7-notification-title-right-font-size: 13px;
-  --f7-notification-subtitle-font-size: 15px;
+  --f7-notification-title-right-font-size: 14px;
+  --f7-notification-subtitle-font-size: 14px;
   --f7-notification-subtitle-font-weight: 600;
-  --f7-notification-text-font-size: 15px;
-  --f7-notification-text-line-height: 1.2;
-  --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
-  --f7-notification-bg-color-rgb: 255, 255, 255;
+  --f7-notification-text-font-size: 14px;
+  --f7-notification-text-line-height: 1.4;
+  --f7-notification-bg-color: var(--f7-glass-bg-color);
   --f7-notification-title-color: #000;
   --f7-notification-title-right-color: rgba(0, 0, 0, 0.45);
   --f7-notification-subtitle-color: #000;
@@ -17583,8 +17696,6 @@ button.swiper-pagination-bullet {
 }
 .ios .dark,
 .ios.dark {
-  --f7-notification-bg-color: rgba(30, 30, 30, 0.95);
-  --f7-notification-bg-color-rgb: 30, 30, 30;
   --f7-notification-title-color: #fff;
   --f7-notification-text-color: #fff;
   --f7-notification-subtitle-color: #fff;
@@ -17635,14 +17746,22 @@ button.swiper-pagination-bullet {
   box-shadow: var(--f7-notification-box-shadow);
   background: var(--f7-notification-bg-color);
   margin-top: var(--f7-safe-area-top);
+  display: flex;
+  gap: 16px;
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
 }
-@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
-  .ios-translucent-modals .notification {
-    background-color: rgba(var(--f7-notification-bg-color-rgb), 0.8);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-            backdrop-filter: saturate(180%) blur(20px);
+@media (min-width: 568px) {
+  .notification {
+    left: 50%;
+    width: var(--f7-notification-max-width);
+    margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
   }
 }
+.notification-content {
+  width: 100%;
+  flex-shrink: 10;
+}
 .notification-title {
   color: var(--f7-notification-title-color, var(--f7-theme-color));
   font-size: var(--f7-notification-title-font-size);
@@ -17672,6 +17791,7 @@ button.swiper-pagination-bullet {
 .notification-icon {
   font-size: 0;
   line-height: var(--f7-notification-icon-size);
+  flex-shrink: 0;
 }
 .notification-icon i,
 .notification-icon {
@@ -17720,6 +17840,7 @@ button.swiper-pagination-bullet {
 .ios .notification {
   transition-duration: 450ms;
   transform: translate3d(0%, -200%, 0);
+  align-items: center;
 }
 .ios .notification.modal-in {
   transform: translate3d(0%, 0%, 0);
@@ -17728,18 +17849,11 @@ button.swiper-pagination-bullet {
 .ios .notification.modal-out {
   transform: translate3d(0%, -200%, 0);
 }
-.ios .notification-icon {
-  margin-right: 8px;
-}
-.ios .notification-header + .notification-content {
-  margin-top: 10px;
-}
 .ios .notification-title-right-text {
-  margin-right: 6px;
   margin-left: auto;
 }
 .ios .notification-title-right-text + .notification-close-button {
-  margin-left: 10px;
+  margin-left: 12px;
 }
 .ios .notification-close-button {
   font-size: 14px;
@@ -17783,22 +17897,7 @@ button.swiper-pagination-bullet {
   transition-timing-function: ease-in;
   transform: translate3d(0, -150%, 0);
 }
-.md .notification-with-icon .notification-icon {
-  position: absolute;
-  left: var(--f7-notification-padding-horizontal);
-  top: var(--f7-notification-padding-vertical);
-}
-.md .notification-with-icon .notification-content,
-.md .notification-with-icon .notification-header {
-  margin-left: calc(var(--f7-notification-icon-size) + 16px);
-}
-.md .notification-icon {
-  margin-right: 8px;
-}
-.md .notification-subtitle + .notification-text {
-  margin-top: 4px;
-}
-.md .notification-header + .notification-content {
+.md .notification-header + :is(.notification-subtitle, .notification-text) {
   margin-top: 8px;
 }
 .md .notification-title-right-text {