@xenknight/framework7 0.0.7 → 0.0.9

package/framework7-bundle.css

@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: January 1, 2026
+ * Released on: January 4, 2026
  */
 
 /*====================
@@ -414,7 +414,7 @@ html.device-full-viewport body {
   height: 100%;
   position: relative;
   z-index: 1;
-  padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
+  padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-navbar-new-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-toolbar-new-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-subnavbar-new-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-searchbar-new-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
   padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
 }
 .page-transitioning,
@@ -2498,18 +2498,18 @@ html.device-full-viewport body {
 }
 .navbar-new ~ *,
 .navbars-new ~ * {
-  --f7-page-navbar-offset: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+  --f7-page-navbar-new-offset: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
 }
 .navbar-new ~ * .page-with-navbar-new-large,
 .navbar-new ~ .page-with-navbar-new-large,
 .navbars-new ~ * .page-with-navbar-new-large,
 .navbars-new ~ .page-with-navbar-new-large,
 .page-with-navbar-new-large .navbar-new ~ * {
-  --f7-page-navbar-offset: calc(var(--f7-navbar-new-height) + var(--f7-navbar-new-large-title-height) + var(--f7-safe-area-top));
+  --f7-page-navbar-new-offset: calc(var(--f7-navbar-new-height) + var(--f7-navbar-new-large-title-height) + var(--f7-safe-area-top));
 }
 .page.no-navbar,
 .page.no-navbar .navbar-new ~ * {
-  --f7-page-navbar-offset: var(--f7-safe-area-top);
+  --f7-page-navbar-new-offset: var(--f7-safe-area-top);
 }
 .ios {
   --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-new-inner-padding-left));
@@ -2784,12 +2784,14 @@ html.device-full-viewport body {
 .searchbar-new input[type='search']::-webkit-search-decoration {
   display: none;
 }
-.ios .subnavbar .searchbar-new {
+.ios .subnavbar .searchbar-new,
+.ios .subnavbar-new .searchbar-new {
   background-color: transparent;
   -webkit-backdrop-filter: none;
           backdrop-filter: none;
 }
-.ios .subnavbar .searchbar-new:after {
+.ios .subnavbar .searchbar-new:after,
+.ios .subnavbar-new .searchbar-new:after {
   display: none !important;
 }
 .searchbar-new.no-outline:after {
@@ -2894,9 +2896,13 @@ html.device-full-viewport body {
 .toolbar .searchbar-new.searchbar-new-expandable {
   --f7-searchbar-new-expandable-size: var(--f7-toolbar-height);
 }
-.subnavbar .searchbar-new.searchbar-new-expandable {
+.subnavbar .searchbar-new.searchbar-new-expandable,
+.subnavbar-new .searchbar-new.searchbar-new-expandable {
   --f7-searchbar-new-expandable-size: var(--f7-subnavbar-height);
 }
+.subnavbar-new .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-subnavbar-new-height);
+}
 .tabbar-icons .searchbar-new.searchbar-new-expandable {
   --f7-searchbar-new-expandable-size: var(--f7-tabbar-icons-height);
 }
@@ -3277,16 +3283,19 @@ html.device-full-viewport body {
 }
 .md .page > .searchbar-new,
 .md .subnavbar .searchbar-new,
+.md .subnavbar-new .searchbar-new,
 .md .searchbar-new-expandable {
   --f7-searchbar-new-input-extra-padding-left: 34px;
 }
 .md .page > .searchbar-new .searchbar-new-disable-button,
 .md .subnavbar .searchbar-new .searchbar-new-disable-button,
+.md .subnavbar-new .searchbar-new .searchbar-new-disable-button,
 .md .searchbar-new-expandable .searchbar-new-disable-button {
   left: calc(var(--f7-searchbar-new-inner-padding-left) + var(--f7-safe-area-left));
 }
 .md .page > .searchbar-new .searchbar-new-icon,
 .md .subnavbar .searchbar-new .searchbar-new-icon,
+.md .subnavbar-new .searchbar-new .searchbar-new-icon,
 .md .searchbar-new-expandable .searchbar-new-icon {
   left: var(--f7-safe-area-left);
 }
@@ -4765,6 +4774,248 @@ html.device-full-viewport body {
 .md .subnavbar-inner > a.link:last-child {
   margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
 }
+/* === Subnavbar New === */
+:root {
+  /*
+  --f7-subnavbar-new-bg-color: var(--f7-bars-bg-color);
+  --f7-subnavbar-new-bg-color-rgb: var(--f7-bars-bg-color-rgb);
+  --f7-subnavbar-new-border-color: var(--f7-bars-border-color);
+  --f7-subnavbar-new-link-color: var(--f7-bars-link-color);
+  --f7-subnavbar-new-text-color: var(--f7-bars-text-color);
+  */
+  --f7-subnavbar-new-title-line-height: 1.2;
+}
+.ios {
+  --f7-subnavbar-new-height: 44px;
+  --f7-subnavbar-new-offset-left: calc(16px + var(--f7-safe-area-left));
+  --f7-subnavbar-new-offset-right: calc(16px + var(--f7-safe-area-right));
+  --f7-subnavbar-new-inner-padding-left: 5px;
+  --f7-subnavbar-new-inner-padding-right: 5px;
+  --f7-subnavbar-new-title-font-size: 24px;
+  --f7-subnavbar-new-title-font-weight: 700;
+  --f7-subnavbar-new-title-letter-spacing: -0.03em;
+  --f7-subnavbar-new-title-margin-left: 8px;
+  --f7-subnavbar-new-bg-color: var(--f7-glass-bg-color);
+  /*
+  --f7-subnavbar-new-link-height: var(--f7-subnavbar-new-height);
+  --f7-subnavbar-new-link-line-height: var(--f7-subnavbar-new-height);
+  */
+}
+.md {
+  --f7-subnavbar-new-height: 64px;
+  --f7-subnavbar-new-offset-left: 0;
+  --f7-subnavbar-new-offset-right: 0;
+  --f7-subnavbar-new-inner-padding-left: calc(16px + var(--f7-safe-area-left));
+  --f7-subnavbar-new-inner-padding-right: calc(16px + var(--f7-safe-area-right));
+  --f7-subnavbar-new-title-font-size: 22px;
+  --f7-subnavbar-new-title-font-weight: 400;
+  --f7-subnavbar-new-title-letter-spacing: 0;
+  --f7-subnavbar-new-title-margin-left: 0px;
+  /*
+  --f7-subnavbar-new-link-height: var(--f7-subnavbar-new-height);
+  --f7-subnavbar-new-link-line-height: var(--f7-subnavbar-new-height);
+  */
+}
+.subnavbar-new {
+  position: absolute;
+  left: var(--f7-subnavbar-new-offset-left);
+  right: var(--f7-subnavbar-new-offset-right);
+  top: 0;
+  z-index: 600;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--f7-subnavbar-new-bg-color, var(--f7-bars-bg-color));
+  color: var(--f7-subnavbar-new-text-color, var(--f7-bars-text-color));
+}
+@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
+  .ios-translucent-bars .subnavbar-new {
+    background-color: rgba(var(--f7-subnavbar-new-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
+    -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
+            backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
+  }
+}
+.subnavbar-new .subnavbar-new-title {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellpsis;
+  white-space: nowrap;
+  font-size: var(--f7-subnavbar-new-title-font-size);
+  font-weight: var(--f7-subnavbar-new-title-font-weight);
+  text-align: left;
+  display: inline-block;
+  line-height: var(--f7-subnavbar-new-title-line-height);
+  letter-spacing: var(--f7-subnavbar-new-title-letter-spacing);
+  margin-left: var(--f7-subnavbar-new-title-margin-left);
+}
+.subnavbar-new .left,
+.subnavbar-new .right {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.subnavbar-new .right:first-child {
+  position: absolute;
+  height: 100%;
+}
+.subnavbar-new a {
+  color: var(--f7-subnavbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+}
+.subnavbar-new a.link {
+  line-height: var(--f7-subnavbar-new-link-line-height, var(--f7-subnavbar-new-height));
+  height: var(--f7-subnavbar-new-link-height, var(--f7-subnavbar-new-height));
+}
+.subnavbar-new a.icon-only {
+  min-width: var(--f7-subnavbar-new-height);
+}
+.subnavbar-new.no-outline:after {
+  display: none !important;
+}
+.subnavbar-new.navbar-hidden:before {
+  display: none !important;
+}
+.subnavbar-new:after,
+.subnavbar-new:before {
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.subnavbar-new:after {
+  content: '';
+  position: absolute;
+  background-color: var(--f7-subnavbar-new-border-color, transparent);
+  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)));
+}
+.subnavbar-new-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: space-between;
+  overflow: hidden;
+  padding: 0 var(--f7-subnavbar-new-inner-padding-left) 0 var(--f7-subnavbar-new-inner-padding-right);
+}
+.navbar .subnavbar-new,
+.navbar-new .subnavbar-new {
+  top: 100%;
+}
+.views > .subnavbar-new,
+.view > .subnavbar-new,
+.page > .subnavbar-new {
+  position: absolute;
+}
+.navbar-new ~ * .subnavbar-new,
+.navbars-new ~ * .subnavbar-new,
+.page-with-subnavbar-new .navbar-new ~ .subnavbar-new,
+.page-with-subnavbar-new .navbar-new ~ * .subnavbar-new,
+.navbar-new ~ .page-with-subnavbar-new:not(.no-navbar) .subnavbar-new,
+.navbar-new ~ .subnavbar-new,
+.navbars-new ~ .page-with-subnavbar-new:not(.no-navbar) .subnavbar-new,
+.navbars-new ~ .subnavbar-new {
+  top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
+}
+.navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar-new,
+.navbars ~ .page-with-navbar-large:not(.no-navbar) .subnavbar-new,
+.navbar-new ~ .page-with-navbar-new-large:not(.no-navbar) .subnavbar-new,
+.navbars-new ~ .page-with-navbar-new-large:not(.no-navbar) .subnavbar-new,
+.page-with-subnavbar-new.page-with-navbar-large .navbar ~ .subnavbar-new,
+.page-with-subnavbar-new.page-with-navbar-large .navbar ~ * .subnavbar-new,
+.page-with-subnavbar-new.page-with-navbar-new-large .navbar-new ~ .subnavbar-new,
+.page-with-subnavbar-new.page-with-navbar-new-large .navbar-new ~ * .subnavbar-new,
+.navbar .title-large ~ .subnavbar-new,
+.navbar-new .title-large ~ .subnavbar-new {
+  top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
+  transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
+}
+.navbar-new ~ .page-with-navbar-new-large:not(.no-navbar) .subnavbar-new,
+.navbars-new ~ .page-with-navbar-new-large:not(.no-navbar) .subnavbar-new,
+.page-with-subnavbar-new.page-with-navbar-new-large .navbar-new ~ .subnavbar-new,
+.page-with-subnavbar-new.page-with-navbar-new-large .navbar-new ~ * .subnavbar-new,
+.navbar-new .title-large ~ .subnavbar-new {
+  top: calc(var(--f7-navbar-new-height) + var(--f7-navbar-new-large-title-height) + var(--f7-safe-area-top));
+  transform: translate3d(0, calc(-1 * var(--f7-navbar-new-large-collapse-progress) * var(--f7-navbar-new-large-title-height)), 0);
+}
+.page-with-subnavbar-new,
+.subnavbar-new ~ * {
+  --f7-page-subnavbar-new-offset: var(--f7-subnavbar-new-height);
+}
+.ios .subnavbar-new {
+  height: calc(var(--f7-subnavbar-new-height) + 1px);
+  margin-top: -1px;
+  padding-top: 1px;
+  border-radius: var(--f7-subnavbar-new-height);
+  box-shadow: var(--f7-glass-shadow);
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+  --f7-segmented-strong-bg-color: transparent;
+}
+.ios .subnavbar-new:has(> .searchbar-new) {
+  background: transparent;
+  -webkit-backdrop-filter: none;
+          backdrop-filter: none;
+  box-shadow: none;
+}
+.ios .subnavbar-new .subnavbar-new-inner {
+  border-radius: inherit;
+}
+.ios .subnavbar-new .title {
+  align-self: flex-start;
+  flex-shrink: 10;
+}
+.ios .subnavbar-new .left a + a,
+.ios .subnavbar-new .right a + a {
+  margin-left: 16px;
+}
+.ios .subnavbar-new .left {
+  margin-right: 10px;
+}
+.ios .subnavbar-new .right {
+  margin-left: 10px;
+}
+.ios .subnavbar-new .right:first-child {
+  right: 8px;
+}
+.ios .subnavbar-new a.link {
+  justify-content: flex-start;
+}
+.ios .subnavbar-new a.icon-only {
+  justify-content: center;
+  margin: 0;
+}
+.md .subnavbar-new {
+  height: var(--f7-subnavbar-new-height);
+}
+.md .subnavbar-new .right {
+  margin-left: auto;
+}
+.md .subnavbar-new .right:first-child {
+  right: 16px;
+}
+.md .subnavbar-new a.link {
+  justify-content: center;
+  padding: 0 12px;
+}
+.md .subnavbar-new a.icon-only {
+  flex-shrink: 0;
+  padding: 0 12px;
+}
+.md .subnavbar-new-inner > a.link:first-child {
+  margin-left: calc(-1 * var(--f7-subnavbar-new-inner-padding-left));
+}
+.md .subnavbar-new-inner > a.link:last-child {
+  margin-right: calc(-1 * var(--f7-subnavbar-new-inner-padding-right));
+}
 /* === Content Block === */
 :root {
   --f7-block-padding-horizontal: 16px;

package/framework7-bundle.esm.js

@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: January 1, 2026
+ * Released on: January 4, 2026
  */
 
 import $ from './shared/dom7.js';
@@ -42,6 +42,8 @@ import NavbarNew from './components/navbar-new/navbar.js';
 import SearchbarNew from './components/searchbar-new/searchbar.js';
 // New Toolbar
 import ToolbarNew from './components/toolbar-new/toolbar.js';
+// New Subnavbar
+import SubnavbarNew from './components/subnavbar-new/subnavbar-new.js';
 import Dialog from './components/dialog/dialog.js';
 import Popup from './components/popup/popup.js';
 import LoginScreen from './components/login-screen/login-screen.js';
@@ -95,6 +97,6 @@ import AreaChart from './components/area-chart/area-chart.js';
 import Breadcrumbs from './components/breadcrumbs/breadcrumbs.js';
 import Typography from './components/typography/typography.js';
 Router.use([RouterComponentLoaderModule]);
-Framework7.use([DeviceModule, SupportModule, UtilsModule, ResizeModule, TouchModule, ClicksModule, RouterModule, HistoryModule, ComponentModule, ServiceWorkerModule, StoreModule, Statusbar, View, Navbar, NavbarNew, SearchbarNew, Toolbar, ToolbarNew, Subnavbar, TouchRipple, Modal, Dialog, Popup, LoginScreen, Popover, Actions, Sheet, Toast, Preloader, Progressbar, Sortable, Swipeout, Accordion, ContactsList, VirtualList, ListIndex, Timeline, Tabs, Panel, Card, Chip, Form, Input, Checkbox, Radio, Toggle, Range, Stepper, SmartSelect, Grid, Calendar, Picker, InfiniteScroll, PullToRefresh, DataTable, Fab, Searchbar, Messages, Messagebar, Swiper, PhotoBrowser, Notification, Autocomplete, Tooltip, Gauge, Skeleton, ColorPicker, Treeview, TextEditor, PieChart, AreaChart, Breadcrumbs, Typography]);
+Framework7.use([DeviceModule, SupportModule, UtilsModule, ResizeModule, TouchModule, ClicksModule, RouterModule, HistoryModule, ComponentModule, ServiceWorkerModule, StoreModule, Statusbar, View, Navbar, NavbarNew, SearchbarNew, Toolbar, ToolbarNew, Subnavbar, SubnavbarNew, TouchRipple, Modal, Dialog, Popup, LoginScreen, Popover, Actions, Sheet, Toast, Preloader, Progressbar, Sortable, Swipeout, Accordion, ContactsList, VirtualList, ListIndex, Timeline, Tabs, Panel, Card, Chip, Form, Input, Checkbox, Radio, Toggle, Range, Stepper, SmartSelect, Grid, Calendar, Picker, InfiniteScroll, PullToRefresh, DataTable, Fab, Searchbar, Messages, Messagebar, Swiper, PhotoBrowser, Notification, Autocomplete, Tooltip, Gauge, Skeleton, ColorPicker, Treeview, TextEditor, PieChart, AreaChart, Breadcrumbs, Typography]);
 export { Component, $jsx, $ as Dom7, utils, getDevice, getSupport, createStore };
 export default Framework7;

package/framework7-bundle.js

@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: January 1, 2026
+ * Released on: January 4, 2026
  */
 
 (function (global, factory) {
@@ -16526,8 +16526,18 @@
             $backdropEl = $('<div class="searchbar-new-backdrop"></div>');
             if ($pageEl && $pageEl.length) {
               if ($el.parents($pageEl).length > 0 && $navbarEl && $el.parents($navbarEl).length === 0) {
+                // Searchbar is in page but not in navbar - insert before searchbar
                 $backdropEl.insertBefore($el);
+              } else if ($navbarEl && $navbarEl.length > 0) {
+                // Searchbar is in navbar - insert after navbar, before page-content
+                const $pageContent = $pageEl.find('.page-content').eq(0);
+                if ($pageContent.length) {
+                  $backdropEl.insertBefore($pageContent);
+                } else {
+                  $navbarEl.after($backdropEl);
+                }
               } else {
+                // Default: insert before page-content
                 $backdropEl.insertBefore($pageEl.find('.page-content').eq(0));
               }
             } else {
@@ -16606,8 +16616,8 @@
           }
         }
         function onInputClear(e, previousValue) {
-          sb.$el.trigger('searchbar-new:clear', previousValue);
-          sb.emit('local::clear searchbarNewClear', sb, previousValue);
+          sb.$el.trigger('searchbar:clear', previousValue);
+          sb.emit('local::clear searchbarClear', sb, previousValue);
         }
         function disableOnClick(e) {
           sb.disable(e);
@@ -16680,15 +16690,16 @@
         }
         const previousQuery = sb.value;
         sb.$inputEl.val('').trigger('change').focus();
-        sb.$el.trigger('searchbar-new:clear', previousQuery);
-        sb.emit('local::clear searchbarNewClear', sb, previousQuery);
+        sb.$el.trigger('searchbar:clear', previousQuery);
+        sb.emit('local::clear searchbarClear', sb, previousQuery);
         return sb;
       }
       setDisableButtonMargin() {
         const sb = this;
         if (sb.expandable) return;
         const app = sb.app;
-        sb.$disableButtonEl.transition(0).show();
+        sb.$disableButtonEl.transition(0);
+        sb.$disableButtonEl.css('display', 'flex');
         sb.$disableButtonEl.css(`margin-${app.rtl ? 'left' : 'right'}`, `${-sb.disableButtonEl.offsetWidth}px`);
         /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
         sb._clientLeft = sb.$disableButtonEl[0].clientLeft;
@@ -16740,8 +16751,8 @@
             }
           }
           if (sb.$hideOnEnableEl) sb.$hideOnEnableEl.addClass('hidden-by-searchbar-new');
-          sb.$el.trigger('searchbar-new:enable');
-          sb.emit('local::enable searchbarNewEnable', sb);
+          sb.$el.trigger('searchbar:enable');
+          sb.emit('local::enable searchbarEnable', sb);
         }
         let needsFocus = false;
         if (setFocus === true) {
@@ -16782,9 +16793,10 @@
         if (sb.expandable) {
           const $navbarEl = sb.$el.parents('.navbar-new');
           const $pageContentEl = sb.$pageEl && sb.$pageEl.find('.page-content');
+          const $transitionTargetEl = app.theme === 'md' ? sb.$el : sb.$el.find('.searchbar-new-input-wrap');
           if ($navbarEl.hasClass('navbar-new-large') && $pageContentEl.length) {
             const $titleLargeEl = $navbarEl.find('.title-large');
-            sb.$el.transitionEnd(() => {
+            $transitionTargetEl.transitionEnd(() => {
               $pageContentEl.removeClass('with-searchbar-new-expandable-closing');
             });
             if ($navbarEl.hasClass('navbar-new-large') && $navbarEl.hasClass('navbar-new-large-collapsed') && $titleLargeEl.length) {
@@ -16802,12 +16814,12 @@
           }
           if (app.theme === 'md' && $navbarEl.length) {
             $navbarEl.removeClass('with-searchbar-new-expandable-enabled with-searchbar-new-expandable-enabled-no-transition').addClass('with-searchbar-new-expandable-closing');
-            sb.$el.transitionEnd(() => {
+            $transitionTargetEl.transitionEnd(() => {
               $navbarEl.removeClass('with-searchbar-new-expandable-closing');
             });
           } else {
             $navbarEl.removeClass('with-searchbar-new-expandable-enabled with-searchbar-new-expandable-enabled-no-transition').addClass('with-searchbar-new-expandable-closing');
-            sb.$el.transitionEnd(() => {
+            $transitionTargetEl.transitionEnd(() => {
               $navbarEl.removeClass('with-searchbar-new-expandable-closing');
             });
             if (sb.$pageEl) {
@@ -16824,8 +16836,8 @@
         sb.enabled = false;
         sb.$inputEl.blur();
         if (sb.$hideOnEnableEl) sb.$hideOnEnableEl.removeClass('hidden-by-searchbar-new');
-        sb.$el.trigger('searchbar-new:disable');
-        sb.emit('local::disable searchbarNewDisable', sb);
+        sb.$el.trigger('searchbar:disable');
+        sb.emit('local::disable searchbarDisable', sb);
         return sb;
       }
       toggle() {
@@ -16884,11 +16896,11 @@
           }
         }
         if (sb.params.customSearch) {
-          $el.trigger('searchbar-new:search', {
+          $el.trigger('searchbar:search', {
             query,
             previousQuery: sb.previousQuery
           });
-          sb.emit('local::search searchbarNewSearch', sb, query, sb.previousQuery);
+          sb.emit('local::search searchbarSearch', sb, query, sb.previousQuery);
           return sb;
         }
         let foundItems = [];
@@ -16899,11 +16911,11 @@
             sb.virtualList.resetFilter();
             if ($notFoundEl) $notFoundEl.hide();
             if ($foundEl) $foundEl.show();
-            $el.trigger('searchbar-new:search', {
+            $el.trigger('searchbar:search', {
               query,
               previousQuery: sb.previousQuery
             });
-            sb.emit('local::search searchbarNewSearch', sb, query, sb.previousQuery);
+            sb.emit('local::search searchbarSearch', sb, query, sb.previousQuery);
             return sb;
           }
           vlQuery = sb.params.removeDiacritics ? removeDiacritics$1(query) : query;
@@ -16986,12 +16998,12 @@
         if (isVirtualList && sb.virtualList) {
           sb.virtualList.filterItems(foundItems);
         }
-        $el.trigger('searchbar-new:search', {
+        $el.trigger('searchbar:search', {
           query,
           previousQuery: sb.previousQuery,
           foundItems
         });
-        sb.emit('local::search searchbarNewSearch', sb, query, sb.previousQuery, foundItems);
+        sb.emit('local::search searchbarSearch', sb, query, sb.previousQuery, foundItems);
         return sb;
       }
       init() {
@@ -17002,8 +17014,8 @@
       }
       destroy() {
         const sb = this;
-        sb.emit('local::beforeDestroy searchbarNewBeforeDestroy', sb);
-        sb.$el.trigger('searchbar-new:beforedestroy');
+        sb.emit('local::beforeDestroy searchbarBeforeDestroy', sb);
+        sb.$el.trigger('searchbar:beforedestroy');
         sb.detachEvents();
         if (sb.$el[0]) {
           sb.$el[0].f7SearchbarNew = null;
@@ -17184,9 +17196,10 @@
       const {
         activeIndex,
         newActiveIndex,
-        linkEls
+        linkEls,
+        isMouse
       } = data;
-      if (activeIndex !== newActiveIndex) {
+      if (activeIndex !== newActiveIndex && !isMouse) {
         linkEls[newActiveIndex].click();
       }
       highlightEl.style.transform = `translateX(${newActiveIndex * 100}%)`;
@@ -17216,12 +17229,13 @@
         if (e.type === 'touchstart') {
           e.preventDefault();
         }
-        if (e.pointerType !== 'touch') return;
+        if (e.pointerType !== 'touch' && e.pointerType !== 'mouse') return;
         if (!el) return;
         if (e.type === 'pointerdown') {
           data.linkEls = el.querySelectorAll('.tab-link');
           data.rect = toolbarPaneEl.getBoundingClientRect();
           data.touched = true;
+          data.isMouse = e.pointerType === 'mouse';
           setHighlightOnTouch(data, e);
           startAnimation(data);
         }
@@ -17238,17 +17252,29 @@
           stopAnimation(data);
         }
       };
+      el.f7ToolbarNewOnPointerMove = e => {
+        const highlightData = el.f7ToolbarNewHighlightData;
+        if (e.pointerType === 'mouse' && highlightData && highlightData.touched) {
+          el.f7ToolbarNewOnPointer(e);
+        }
+      };
+      el.f7ToolbarNewOnPointerUp = e => {
+        const highlightData = el.f7ToolbarNewHighlightData;
+        if (e.pointerType === 'mouse' && highlightData && highlightData.touched) {
+          el.f7ToolbarNewOnPointer(e);
+        }
+      };
       el.addEventListener('touchstart', el.f7ToolbarNewOnPointer, {
         passive: false
       });
       el.addEventListener('pointerdown', el.f7ToolbarNewOnPointer, {
         passive: false
       });
-      document.addEventListener('pointermove', el.f7ToolbarNewOnPointer, {
-        passive: false
+      document.addEventListener('pointermove', el.f7ToolbarNewOnPointerMove, {
+        passive: true
       });
-      document.addEventListener('pointerup', el.f7ToolbarNewOnPointer, {
-        passive: false
+      document.addEventListener('pointerup', el.f7ToolbarNewOnPointerUp, {
+        passive: true
       });
       document.addEventListener('pointercancel', el.f7ToolbarNewOnPointer, {
         passive: false
@@ -17259,10 +17285,16 @@
       const document = getDocument$1();
       el.removeEventListener('touchstart', el.f7ToolbarNewOnPointer);
       el.removeEventListener('pointerdown', el.f7ToolbarNewOnPointer);
-      document.removeEventListener('pointermove', el.f7ToolbarNewOnPointer);
-      document.removeEventListener('pointerup', el.f7ToolbarNewOnPointer);
+      if (el.f7ToolbarNewOnPointerMove) {
+        document.removeEventListener('pointermove', el.f7ToolbarNewOnPointerMove);
+      }
+      if (el.f7ToolbarNewOnPointerUp) {
+        document.removeEventListener('pointerup', el.f7ToolbarNewOnPointerUp);
+      }
       document.removeEventListener('pointercancel', el.f7ToolbarNewOnPointer);
       el.f7ToolbarNewOnPointer = null;
+      el.f7ToolbarNewOnPointerMove = null;
+      el.f7ToolbarNewOnPointerUp = null;
       el.f7ToolbarNewHighlightData = null;
     };
 
@@ -17487,6 +17519,26 @@
       }
     };
 
+    var SubnavbarNew = {
+      name: 'subnavbar-new',
+      on: {
+        pageInit(page) {
+          if (page.$navbarEl && page.$navbarEl.length && page.$navbarEl.find('.subnavbar-new').length) {
+            page.$el.addClass('page-with-subnavbar-new');
+          }
+          if (page.$navbarNewEl && page.$navbarNewEl.length && page.$navbarNewEl.find('.subnavbar-new').length) {
+            page.$el.addClass('page-with-subnavbar-new');
+          }
+          const $innerSubnavbars = page.$el.find('.subnavbar-new').filter(subnavbarEl => {
+            return $(subnavbarEl).parents('.page')[0] === page.$el[0];
+          });
+          if ($innerSubnavbars.length) {
+            page.$el.addClass('page-with-subnavbar-new');
+          }
+        }
+      }
+    };
+
     let Dialog$1 = class Dialog extends Modal$1 {
       constructor(app, params) {
         const extendedParams = extend$3({
@@ -51911,7 +51963,7 @@
     // UMD_ONLY_END
 
     Router.use([RouterComponentLoaderModule]);
-    Framework7.use([DeviceModule, SupportModule, UtilsModule, ResizeModule, TouchModule, ClicksModule, RouterModule, HistoryModule, ComponentModule, ServiceWorkerModule, StoreModule, Statusbar$1, View, Navbar$2, NavbarNew, SearchbarNew, Toolbar$1, ToolbarNew$1, Subnavbar, TouchRipple, Modal, Dialog, Popup, LoginScreen, Popover, Actions, Sheet, Toast, Preloader$1, Progressbar$1, Sortable$1, Swipeout$1, Accordion$1, ContactsList, VirtualList, ListIndex, Timeline, Tabs, Panel, Card, Chip, Form, Input$1, Checkbox, Radio, Toggle, Range, Stepper, SmartSelect, Grid$1, Calendar, Picker, InfiniteScroll$1, PullToRefresh, DataTable, Fab$1, Searchbar, Messages, Messagebar, Swiper, PhotoBrowser, Notification, Autocomplete, Tooltip, Gauge, Skeleton, ColorPicker, Treeview$1, TextEditor, PieChart, AreaChart, Breadcrumbs$1, Typography]);
+    Framework7.use([DeviceModule, SupportModule, UtilsModule, ResizeModule, TouchModule, ClicksModule, RouterModule, HistoryModule, ComponentModule, ServiceWorkerModule, StoreModule, Statusbar$1, View, Navbar$2, NavbarNew, SearchbarNew, Toolbar$1, ToolbarNew$1, Subnavbar, SubnavbarNew, TouchRipple, Modal, Dialog, Popup, LoginScreen, Popover, Actions, Sheet, Toast, Preloader$1, Progressbar$1, Sortable$1, Swipeout$1, Accordion$1, ContactsList, VirtualList, ListIndex, Timeline, Tabs, Panel, Card, Chip, Form, Input$1, Checkbox, Radio, Toggle, Range, Stepper, SmartSelect, Grid$1, Calendar, Picker, InfiniteScroll$1, PullToRefresh, DataTable, Fab$1, Searchbar, Messages, Messagebar, Swiper, PhotoBrowser, Notification, Autocomplete, Tooltip, Gauge, Skeleton, ColorPicker, Treeview$1, TextEditor, PieChart, AreaChart, Breadcrumbs$1, Typography]);
 
     return Framework7;