@xenknight/framework7 0.0.3 → 0.0.5

package/framework7-bundle.css

@@ -1,5 +1,5 @@
 /**
- * Framework7 0.0.2
+ * Framework7 0.0.3
  * 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 14, 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 {
@@ -6214,15 +6246,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 +6264,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 +6272,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 +6432,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 +6511,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 +6543,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;
@@ -9615,19 +9631,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 +11286,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 +11360,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::before {
+  transform: scale(0.75);
+}
+.ios .toggle-active-state .toggle-icon {
+  background: transparent;
+  transform: translateX(var(--f7-toggle-knob-tx)) scale(1.4);
 }
-.ios .toggle-active-state input[type='checkbox'] + .toggle-icon:after {
-  width: calc(var(--f7-toggle-height) + 4px);
+.ios .toggle-active-state .toggle-icon::before {
+  opacity: 1;
 }
-.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::after {
+  opacity: 1;
 }
 .md .toggle input[type='checkbox']:checked + .toggle-icon {
   background: var(--f7-toggle-active-bg-color);

package/framework7-bundle.esm.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 0.0.2
+ * Framework7 0.0.3
  * 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 14, 2025
  */
 
 import $ from './shared/dom7.js';

package/framework7-bundle.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 0.0.2
+ * Framework7 0.0.3
  * 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 14, 2025
  */
 
 (function (global, factory) {
@@ -4270,6 +4270,7 @@
           componentUrl: undefined,
           userAgent: null,
           url: null,
+          mdColorScheme: 'default',
           colors: {
             primary: '#007aff',
             red: '#ff3b30',
@@ -4311,6 +4312,7 @@
           passedParams,
           online: w.navigator.onLine,
           colors: app.params.colors,
+          mdColorScheme: app.params.mdColorScheme || 'default',
           darkMode: app.params.darkMode
         });
         if (params.store) app.params.store = params.store;
@@ -4340,10 +4342,16 @@
         // Return app instance
         return app;
       }
-      setColorTheme(color) {
+      setColorTheme(color, mdColorScheme) {
         if (!color) return;
         const app = this;
         app.colors.primary = color;
+        app.mdColorScheme = mdColorScheme || app.mdColorScheme;
+        app.setColors();
+      }
+      setMdColorScheme(mdColorScheme) {
+        const app = this;
+        app.mdColorScheme = mdColorScheme || app.mdColorScheme;
         app.setColors();
       }
       setColors() {
@@ -4353,7 +4361,7 @@
           app.colorsStyleEl = document.createElement('style');
           document.head.prepend(app.colorsStyleEl);
         }
-        app.colorsStyleEl.textContent = app.utils.colorThemeCSSStyles(app.colors);
+        app.colorsStyleEl.textContent = app.utils.colorThemeCSSStyles(app.colors, app.mdColorScheme);
       }
       mount(rootEl) {
         const app = this;
@@ -21264,7 +21272,6 @@
         }
         super(params, [app]);
         const toggle = this;
-        const support = getSupport$1();
         const defaults = {};
 
         // Extend defaults with modules params
@@ -21375,19 +21382,17 @@
           toggle.emit('local::change toggleChange', toggle);
         }
         toggle.attachEvents = function attachEvents() {
-          const passive = support.passiveListener ? {
+          $el.on(app.touchEvents.start, handleTouchStart, {
             passive: true
-          } : false;
-          $el.on(app.touchEvents.start, handleTouchStart, passive);
+          });
           app.on('touchmove', handleTouchMove);
           app.on('touchend:passive', handleTouchEnd);
           toggle.$inputEl.on('change', handleInputChange);
         };
         toggle.detachEvents = function detachEvents() {
-          const passive = support.passiveListener ? {
+          $el.off(app.touchEvents.start, handleTouchStart, {
             passive: true
-          } : false;
-          $el.off(app.touchEvents.start, handleTouchStart, passive);
+          });
           app.off('touchmove', handleTouchMove);
           app.off('touchend:passive', handleTouchEnd);
           toggle.$inputEl.off('change', handleInputChange);