framework7 8.3.4 → 9.0.0-beta.1

package/components/toggle/toggle-ios.less

@@ -1,69 +1,87 @@
 .ios {
   .toggle {
-    background: var(--f7-toggle-inactive-border-color);
-    input[type='checkbox']:checked + .toggle-icon {
-      background: var(--f7-toggle-active-color, var(--f7-theme-color));
-      &:before {
+    --f7-toggle-knob-tx: 0px;
+    &::before {
+      content: '';
+      border-radius: inherit;
+      inset: 0;
+      position: absolute;
+      background: var(--f7-toggle-inactive-border-color);
+      transition-duration: 300ms;
+      z-index: 0;
+    }
+    &::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;
+    }
+    &:has(input[type='checkbox']:checked) {
+      --f7-toggle-knob-tx: calc(var(--f7-toggle-width) - 38px - 4px);
+      &::before {
         background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
-        transform: scale(0);
       }
-      &:after {
-        background: var(--f7-toggle-active-knob-bg-color);
-        .ltr({
-          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
-        });
-        .rtl({
-          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))));
-        });
+      &::after {
+        background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
+        transform: translateX(0);
       }
     }
   }
   .toggle-icon {
-    background: var(--f7-toggle-border-color);
-    &:before {
+    background: var(--f7-toggle-inactive-knob-bg-color);
+    height: calc(var(--f7-toggle-height) - 4px);
+    width: 38px;
+    top: 2px;
+    .ltr({ left: 2px; });
+    .rtl({ right: 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;
+    &::before {
+      content: '';
       position: absolute;
-      .ltr({ left: 2px; });
-      .rtl({ right: 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;
+      left: 50%;
+      top: 50%;
+      width: 1px;
+      height: 1px;
+      opacity: 0;
       transition-duration: 300ms;
-      transform: scale(1);
+      box-shadow: 0px 0px 40px 15px rgba(var(--f7-theme-color-rgb), 0.75);
     }
-    &:after {
-      background: var(--f7-toggle-inactive-knob-bg-color);
-      height: calc(var(--f7-toggle-height) - 4px);
-      width: calc(var(--f7-toggle-height) - 4px);
-      top: 2px;
-      .ltr({ left: 2px; });
-      .rtl({ right: 2px; });
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-      border-radius: calc(var(--f7-toggle-height) - 4px);
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      box-shadow: var(--f7-glass-shadow-thumb);
+      transition-duration: 300ms;
+      opacity: 0;
     }
   }
   .toggle-active-state {
-    input[type='checkbox']:not(:checked) + .toggle-icon {
-      &:before {
-        transform: scale(0);
-      }
+    &::before {
+      transform: scale(0.75);
     }
-    input[type='checkbox'] + .toggle-icon {
-      &:after {
-        width: calc(var(--f7-toggle-height) + 4px);
+    .toggle-icon {
+      background: transparent;
+      transform: translateX(var(--f7-toggle-knob-tx)) scale(1.4);
+      &::before {
+        opacity: 1;
       }
-    }
-    input[type='checkbox']:checked + .toggle-icon {
-      &:after {
-        .ltr({
-          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px));
-        });
-        .rtl({
-          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)));
-        });
+      &::after {
+        opacity: 1;
       }
     }
   }

package/components/toggle/toggle-rtl.css

@@ -1 +1 @@
-.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle{background:var(--f7-toggle-inactive-border-color)}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon: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(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;right: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:.3s;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);top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);right:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}
+.ios{--f7-toggle-width:64px;--f7-toggle-height:28px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.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:.3s;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:.3s;z-index:0}.ios .toggle:has(input[type=checkbox]:checked){--f7-toggle-knob-tx:calc(var(--f7-toggle-width) - 38px - 4px)}.ios .toggle:has(input[type=checkbox]:checked)::before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color))}.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-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:38px;top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px);transition-duration:.3s;transform:translateX(var(--f7-toggle-knob-tx)) scale(1);position:relative;z-index:1;transform-origin:center}.ios .toggle-icon::before{content:'';position:absolute;left:50%;top:50%;width:1px;height:1px;opacity:0;transition-duration:.3s;box-shadow:0px 0px 40px 15px rgba(var(--f7-theme-color-rgb),.75)}.ios .toggle-icon::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);transition-duration:.3s;opacity:0}.ios .toggle-active-state::before{transform:scale(.75)}.ios .toggle-active-state .toggle-icon{background:0 0;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);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);right:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}

package/components/toggle/toggle-vars.less

@@ -1,6 +1,6 @@
 .ios-vars({
-  --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);
   */

package/components/toggle/toggle.css

@@ -1 +1 @@
-.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle{background:var(--f7-toggle-inactive-border-color)}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon: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-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:.3s;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);top:2px;left:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);left:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}
+.ios{--f7-toggle-width:64px;--f7-toggle-height:28px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.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:.3s;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:.3s;z-index:0}.ios .toggle:has(input[type=checkbox]:checked){--f7-toggle-knob-tx:calc(var(--f7-toggle-width) - 38px - 4px)}.ios .toggle:has(input[type=checkbox]:checked)::before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color))}.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-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:38px;top:2px;left:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px);transition-duration:.3s;transform:translateX(var(--f7-toggle-knob-tx)) scale(1);position:relative;z-index:1;transform-origin:center}.ios .toggle-icon::before{content:'';position:absolute;left:50%;top:50%;width:1px;height:1px;opacity:0;transition-duration:.3s;box-shadow:0px 0px 40px 15px rgba(var(--f7-theme-color-rgb),.75)}.ios .toggle-icon::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);transition-duration:.3s;opacity:0}.ios .toggle-active-state::before{transform:scale(.75)}.ios .toggle-active-state .toggle-icon{background:0 0;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);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);left:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}

package/components/toolbar/tabbar-highlight.js

@@ -0,0 +1,134 @@
+import { getDocument } from 'ssr-window';
+const startAnimation = data => {
+  data.raf = requestAnimationFrame(() => {
+    if (!data.setTransform) return;
+    const highlightEl = data.highlightEl;
+    if (!highlightEl) return;
+    highlightEl.style.transform = data.setTransform;
+    highlightEl.style.transitionTimingFunction = 'ease-out';
+    data.setTransform = null;
+  });
+};
+const stopAnimation = data => {
+  cancelAnimationFrame(data.raf);
+};
+const setHighlightOnTouch = (data, e) => {
+  const {
+    rect,
+    linkEls,
+    highlightEl
+  } = data;
+  if (!highlightEl) return;
+  const {
+    clientX
+  } = e;
+  const highlightWidth = rect.width / linkEls.length;
+  const leftOffset = clientX - rect.left - highlightWidth / 2;
+  const minLeft = 0;
+  const maxLeft = rect.width - highlightWidth;
+  const translateX = Math.max(minLeft, Math.min(leftOffset, maxLeft));
+  const linkCenters = [...linkEls].map((el, index) => {
+    return index * highlightWidth + highlightWidth / 2;
+  });
+  const closestLinkCenter = linkCenters.reduce((prev, curr) => {
+    const highlightCenter = translateX + highlightWidth / 2;
+    return Math.abs(curr - highlightCenter) < Math.abs(prev - highlightCenter) ? curr : prev;
+  }, linkCenters[0]);
+  const closestLinkIndex = linkCenters.indexOf(closestLinkCenter);
+  data.newActiveIndex = closestLinkIndex;
+  highlightEl.classList.add('tab-link-highlight-pressed');
+  data.setTransform = `translateX(${translateX}px)`;
+  startAnimation(data);
+};
+const unsetHighlightOnTouch = data => {
+  cancelAnimationFrame(data.raf);
+  data.setTransform = null;
+  const {
+    highlightEl
+  } = data;
+  if (!highlightEl) return;
+  highlightEl.classList.remove('tab-link-highlight-pressed');
+  const {
+    activeIndex,
+    newActiveIndex,
+    linkEls
+  } = data;
+  if (activeIndex !== newActiveIndex) {
+    linkEls[newActiveIndex].click();
+  }
+  highlightEl.style.transform = `translateX(${newActiveIndex * 100}%)`;
+  highlightEl.style.transitionTimingFunction = '';
+  highlightEl.style.transform = `translateX(${newActiveIndex * 100}%)`;
+};
+export const initTabbarHighlight = el => {
+  const document = getDocument();
+  if (!el) return;
+  if (el.classList.contains('tabbar-scrollable')) {
+    return;
+  }
+  const highlightEl = el.querySelector('.tab-link-highlight');
+  const toolbarPaneEl = el.querySelector('.toolbar-pane');
+  if (!highlightEl || !toolbarPaneEl) return;
+  const data = {
+    el,
+    highlightEl,
+    touched: false,
+    moved: false,
+    rect: null,
+    setTransform: null,
+    raf: null
+  };
+  el.f7ToolbarHighlightData = data;
+  el.f7ToolbarOnPointer = e => {
+    if (e.type === 'touchstart') {
+      e.preventDefault();
+    }
+    if (e.pointerType !== 'touch') return;
+    if (!el) return;
+    if (e.type === 'pointerdown') {
+      data.linkEls = el.querySelectorAll('.tab-link');
+      data.rect = toolbarPaneEl.getBoundingClientRect();
+      data.touched = true;
+      setHighlightOnTouch(data, e);
+      startAnimation(data);
+    }
+    if (e.type === 'pointermove') {
+      if (!data.touched) return;
+      data.moved = true;
+      setHighlightOnTouch(data, e);
+    }
+    if (e.type === 'pointerup') {
+      if (!data.touched) return;
+      data.touched = false;
+      data.moved = false;
+      unsetHighlightOnTouch(data);
+      stopAnimation(data);
+    }
+  };
+  el.addEventListener('touchstart', el.f7ToolbarOnPointer, {
+    passive: false
+  });
+  el.addEventListener('pointerdown', el.f7ToolbarOnPointer, {
+    passive: false
+  });
+  document.addEventListener('pointermove', el.f7ToolbarOnPointer, {
+    passive: false
+  });
+  document.addEventListener('pointerup', el.f7ToolbarOnPointer, {
+    passive: false
+  });
+  document.addEventListener('pointercancel', el.f7ToolbarOnPointer, {
+    passive: false
+  });
+};
+export const destroyTabbarHighlight = el => {
+  if (!el || !el.f7ToolbarOnPointer) return;
+  const document = getDocument();
+  el.removeEventListener('touchstart', el.f7ToolbarOnPointer);
+  el.removeEventListener('pointerdown', el.f7ToolbarOnPointer);
+  document.removeEventListener('pointermove', el.f7ToolbarOnPointer);
+  document.removeEventListener('pointerup', el.f7ToolbarOnPointer);
+  document.removeEventListener('pointercancel', el.f7ToolbarOnPointer);
+  el.f7ToolbarOnPointer = null;
+  el.f7ToolbarHighlightData = null;
+};

package/components/toolbar/toolbar-ios.less

@@ -1,13 +1,111 @@
 .ios {
+  .toolbar-pane {
+    user-select: none;
+  }
+  .toolbar-pane,
+  .toolbar .left,
+  .toolbar .right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+    border-radius: 32px;
+    .ios-glass();
+  }
   .toolbar {
-    a.icon-only {
-      min-height: var(--f7-toolbar-height);
+    .left {
+      margin-right: auto;
+    }
+    .right {
+      margin-left: auto;
+    }
+    .left:empty,
+    .right:empty {
+      display: none;
+    }
+
+    a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
       display: flex;
       justify-content: center;
       align-items: center;
       margin: 0;
-      min-width: 44px;
+      min-width: 48px;
+      min-height: 48px;
+      padding: 0;
+    }
+    .link {
+      padding: 0 12px;
+      height: 100%;
+    }
+    &::before,
+    &::after {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      inset: 0;
     }
+    &::before {
+      backdrop-filter: blur(2px);
+      mask-image: linear-gradient(to top, black 50%, transparent 100%);
+    }
+    &::after {
+      background-image: linear-gradient(
+        to top,
+        var(--f7-toolbar-bg-color, var(--f7-bars-bg-color)) 0%,
+        transparent 100%
+      );
+    }
+    &.toolbar-bottom,
+    &.messagebar {
+      &::before,
+      &::after {
+        top: -16px;
+      }
+      .toolbar-inner {
+        padding-bottom: 16px;
+      }
+    }
+    &.toolbar-top,
+    &:not(.toolbar-bottom, .toolbar-top, .messagebar) {
+      &::before {
+        mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+      }
+      &::after {
+        background-image: linear-gradient(
+          to bottom,
+          var(--f7-toolbar-bg-color, var(--f7-bars-bg-color)) 0%,
+          transparent 100%
+        );
+      }
+      &::before,
+      &::after {
+        bottom: -16px;
+      }
+      .toolbar-inner {
+        padding-top: 16px;
+      }
+    }
+  }
+  .navbar ~ .toolbar-top {
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+  .toolbar-inner {
+    justify-content: center;
+    overflow: visible;
+    gap: 16px;
+  }
+  .tabbar-scrollable .toolbar-pane {
+    .scrollable();
+    .no-scrollbar();
+    justify-content: flex-start;
+  }
+  .tabbar:not(.tabbar-scrollable) {
+    touch-action: none;
   }
   .tabbar-icons {
     .tab-link,
@@ -20,17 +118,16 @@
       }
     }
   }
-  @media (min-width: 768px) and (min-height: 600px) {
-    .tabbar,
-    .tabbar-icons {
-      .tab-link,
-      .link {
-        justify-content: center;
-        flex-direction: row;
-        i + span {
-          margin-left: 5px;
-        }
-      }
+  @media (max-width: 767px) {
+    .tabbar .toolbar-pane {
+      width: 100%;
+    }
+  }
+  @media (min-width: 768px) {
+    .tabbar .tab-link {
+      padding-left: 16px;
+      padding-right: 16px;
+      min-width: 96px;
     }
   }
 
@@ -44,4 +141,45 @@
       padding: 0 8px;
     }
   }
+  .tab-link-highlight {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    transition-duration: 300ms;
+    border-radius: inherit;
+    .ltr({
+      left: 0;
+    });
+    .rtl({
+      right: 0;
+    });
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 4px;
+      border-radius: inherit;
+      transition-duration: 300ms;
+    }
+    &::before {
+      background-color: var(--f7-tabbar-link-highlight-bg-color);
+    }
+    &::after {
+      opacity: 0;
+      box-shadow: var(--f7-glass-shadow-thumb);
+      background-color: var(--f7-tabbar-link-highlight-active-bg-color);
+    }
+  }
+  .tab-link-highlight-pressed {
+    &::before {
+      opacity: 0;
+    }
+    &::after {
+      opacity: 1;
+    }
+    &::before,
+    &::after {
+      scale: 1.4;
+    }
+  }
 }

package/components/toolbar/toolbar-md.less

@@ -1,14 +1,58 @@
 .md {
+  .toolbar-pane {
+    display: contents;
+  }
   .toolbar {
+    background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
     .link {
       justify-content: center;
       padding: 0 12px;
       min-width: 48px;
+      min-height: 48px;
+      line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
+      height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
     }
-    a.icon-only {
-      min-width: 0;
+    a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
+      min-width: 48px;
       flex-shrink: 0;
+      padding: 0;
+    }
+  }
+  .toolbar-top,
+  .md .toolbar-top-md {
+    &.no-outline {
+      &:after {
+        display: none !important;
+      }
+    }
+    &.toolbar-hidden {
+      &:before {
+        display: none !important;
+      }
+    }
+    &:after,
+    &:before {
+      backface-visibility: hidden;
+    }
+    .hairline(bottom, var(--f7-toolbar-border-color, var(--f7-bars-border-color)));
+  }
+  .toolbar-bottom,
+  .md .toolbar-bottom-md {
+    &.no-outline {
+      &:before {
+        display: none !important;
+      }
+    }
+    &.toolbar-hidden {
+      &:after {
+        display: none !important;
+      }
     }
+    .hairline(top, var(--f7-toolbar-border-color, var(--f7-bars-border-color)));
+  }
+  .toolbar-inner {
+    justify-content: space-between;
+    overflow: hidden;
   }
   .tabbar,
   .tabbar-icons {
@@ -17,7 +61,7 @@
       padding-left: 0;
       padding-right: 0;
     }
-    a.icon-only {
+    a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
       flex-shrink: initial;
     }
     .tab-link {
@@ -74,4 +118,34 @@
       padding: 0 12px;
     }
   }
+  .toolbar-top-md,
+  .toolbar-top {
+    .tab-link-highlight {
+      bottom: 0;
+    }
+  }
+  .toolbar-bottom,
+  .toolbar-bottom-md {
+    .tab-link-highlight {
+      top: 0;
+    }
+  }
+  .tabbar,
+  .tabbar-icons {
+    &.tabbar-icons .tab-link-highlight {
+      display: none;
+    }
+    &:not(.tabbar-icons) .tab-link-highlight {
+      position: absolute;
+      height: 2px;
+      background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
+      transition-duration: 300ms;
+      .ltr({
+        left: 0;
+      });
+      .rtl({
+        right: 0;
+      });
+    }
+  }
 }

package/components/toolbar/toolbar-vars.less

@@ -3,7 +3,6 @@
   --f7-toolbar-bg-color: var(--f7-bars-bg-color);
   --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
   --f7-toolbar-border-color: var(--f7-bars-border-color);
-  --f7-toolbar-link-color: var(--f7-bars-link-color);
   --f7-toolbar-text-color: var(--f7-bars-text-color);
   */
   --f7-tabbar-link-active-bg-color: transparent;
@@ -11,18 +10,20 @@
   --f7-toolbar-hide-show-transition-duration: 400ms;
 }
 .ios-vars({
-  --f7-toolbar-height: 44px;
+  --f7-toolbar-height: 64px;
   --f7-toolbar-font-size: 17px;
-  --f7-toolbar-inner-padding-left: 8px;
-  --f7-toolbar-inner-padding-right: 8px;
+  --f7-toolbar-inner-padding-left: 16px;
+  --f7-toolbar-inner-padding-right: 16px;
   --f7-toolbar-link-font-weight: 400;
+  --f7-toolbar-link-color: var(--f7-bars-text-color);
+  --f7-tabbar-link-inactive-color: var(--f7-bars-text-color);
   /*
   --f7-toolbar-link-height: var(--f7-toolbar-height);
   --f7-toolbar-link-line-height: var(--f7-toolbar-height);
   --f7-tabbar-link-active-color: var(--f7-theme-color);
   */
-  --f7-tabbar-icons-height: 50px;
-  --f7-tabbar-icons-tablet-height: 50px;
+  --f7-tabbar-icons-height: 80px;
+  --f7-tabbar-icons-tablet-height: 80px;
   --f7-tabbar-icon-size: 28px;
   --f7-tabbar-link-text-transform: none;
   --f7-tabbar-link-font-weight: 400;
@@ -32,11 +33,13 @@
   --f7-tabbar-label-tablet-font-size: 14px;
   --f7-tabbar-label-font-weight: 500;
   --f7-tabbar-label-letter-spacing: 0.01;
-  .light-vars({
-    --f7-tabbar-link-inactive-color: rgba(0,0,0,0.4);
-  });
   .dark-vars({
-    --f7-tabbar-link-inactive-color: rgba(255,255,255,0.54);
+    --f7-tabbar-link-highlight-bg-color: rgba(255,255,255,0.15);
+    --f7-tabbar-link-highlight-active-bg-color: rgba(255,255,255,0.1);
+  });
+  .light-vars({
+    --f7-tabbar-link-highlight-bg-color: rgba(0,0,0,0.1);
+    --f7-tabbar-link-highlight-active-bg-color: rgba(0,0,0,0.05);
   });
 
 });
@@ -46,6 +49,7 @@
   --f7-toolbar-inner-padding-left: 0px;
   --f7-toolbar-inner-padding-right: 0px;
   /*
+  --f7-toolbar-link-color: var(--f7-bars-link-color);
   --f7-toolbar-link-height: var(--f7-toolbar-height);
   --f7-toolbar-link-line-height: var(--f7-toolbar-height);
   */