@xenknight/framework7 0.0.7 → 0.0.9

package/framework7-types.d.ts

@@ -71,6 +71,7 @@ import { Sortable } from './components/sortable/sortable.js';
 import { Statusbar } from './components/statusbar/statusbar.js';
 import { Stepper } from './components/stepper/stepper.js';
 import { Subnavbar } from './components/subnavbar/subnavbar.js';
+import { SubnavbarNew } from './components/subnavbar-new/subnavbar-new.js';
 import { Swipeout } from './components/swipeout/swipeout.js';
 import { Swiper } from './components/swiper/swiper.js';
 import { Tabs } from './components/tabs/tabs.js';
@@ -273,6 +274,9 @@ declare module './components/app/app-class.js' {
   interface Framework7Class<Events> extends Subnavbar.AppMethods{}
   interface Framework7Parameters extends Subnavbar.AppParams{}
   interface Framework7Events extends Subnavbar.AppEvents{}
+  interface Framework7Class<Events> extends SubnavbarNew.AppMethods{}
+  interface Framework7Parameters extends SubnavbarNew.AppParams{}
+  interface Framework7Events extends SubnavbarNew.AppEvents{}
   interface Framework7Class<Events> extends Swipeout.AppMethods{}
   interface Framework7Parameters extends Swipeout.AppParams{}
   interface Framework7Events extends Swipeout.AppEvents{}
@@ -332,5 +336,5 @@ export {
   StoreParameters,
   createStore,
 };
-export { Accordion, Actions, AreaChart, Autocomplete, Badge, Block, Breadcrumbs, Button, Calendar, Card, Checkbox, Chip, ColorPicker, ContactsList, DataTable, Dialog, Fab, Form, Gauge, Grid, Icon, InfiniteScroll, Input, Link, List, ListIndex, LoginScreen, Messagebar, Messages, Modal, Navbar, Notification, Page, Panel, PhotoBrowser, Picker, PieChart, Popover, Popup, Preloader, Progressbar, PullToRefresh, Radio, Range, Searchbar, Sheet, Skeleton, SmartSelect, Sortable, Statusbar, Stepper, Subnavbar, Swipeout, Swiper, Tabs, TextEditor, Timeline, Toast, Toggle, Toolbar, Tooltip, TouchRipple, Treeview, Typography, View, VirtualList }
+export { Accordion, Actions, AreaChart, Autocomplete, Badge, Block, Breadcrumbs, Button, Calendar, Card, Checkbox, Chip, ColorPicker, ContactsList, DataTable, Dialog, Fab, Form, Gauge, Grid, Icon, InfiniteScroll, Input, Link, List, ListIndex, LoginScreen, Messagebar, Messages, Modal, Navbar, Notification, Page, Panel, PhotoBrowser, Picker, PieChart, Popover, Popup, Preloader, Progressbar, PullToRefresh, Radio, Range, Searchbar, Sheet, Skeleton, SmartSelect, Sortable, Statusbar, Stepper, Subnavbar, SubnavbarNew, Swipeout, Swiper, Tabs, TextEditor, Timeline, Toast, Toggle, Toolbar, Tooltip, TouchRipple, Treeview, Typography, View, VirtualList }
 export default Framework7;

package/framework7.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.d.ts

@@ -70,6 +70,7 @@ import { Sortable } from './components/sortable/sortable.js';
 import { Statusbar } from './components/statusbar/statusbar.js';
 import { Stepper } from './components/stepper/stepper.js';
 import { Subnavbar } from './components/subnavbar/subnavbar.js';
+import { SubnavbarNew } from './components/subnavbar-new/subnavbar-new.js';
 import { Swipeout } from './components/swipeout/swipeout.js';
 import { Swiper } from './components/swiper/swiper.js';
 import { Tabs } from './components/tabs/tabs.js';
@@ -272,6 +273,9 @@ declare module './components/app/app-class.js' {
   interface Framework7Class<Events> extends Subnavbar.AppMethods{}
   interface Framework7Parameters extends Subnavbar.AppParams{}
   interface Framework7Events extends Subnavbar.AppEvents{}
+  interface Framework7Class<Events> extends SubnavbarNew.AppMethods{}
+  interface Framework7Parameters extends SubnavbarNew.AppParams{}
+  interface Framework7Events extends SubnavbarNew.AppEvents{}
   interface Framework7Class<Events> extends Swipeout.AppMethods{}
   interface Framework7Parameters extends Swipeout.AppParams{}
   interface Framework7Events extends Swipeout.AppEvents{}

package/framework7.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,7 +42,9 @@ 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';
 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]);
+Framework7.use([DeviceModule, SupportModule, UtilsModule, ResizeModule, TouchModule, ClicksModule, RouterModule, HistoryModule, ComponentModule, ServiceWorkerModule, StoreModule, Statusbar, View, Navbar, NavbarNew, SearchbarNew, Toolbar, ToolbarNew, Subnavbar, SubnavbarNew, TouchRipple, Modal]);
 export { Component, $jsx, $ as Dom7, utils, getDevice, getSupport, createStore };
 export default Framework7;

package/framework7.js

@@ -30,6 +30,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_COMPONENTS
 
@@ -41,7 +43,7 @@ if (typeof window !== 'undefined') {
 // UMD_ONLY_END
 
 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
+Framework7.use([DeviceModule, SupportModule, UtilsModule, ResizeModule, TouchModule, ClicksModule, RouterModule, HistoryModule, ComponentModule, ServiceWorkerModule, StoreModule, Statusbar, View, Navbar, NavbarNew, SearchbarNew, Toolbar, ToolbarNew, Subnavbar, SubnavbarNew, TouchRipple, Modal
 //INSTALL_COMPONENTS
 ]);
 

package/framework7.less

@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: January 1, 2026
+ * Released on: January 4, 2026
  */
 
 @import (reference) './less/mixins.less';
@@ -33,6 +33,7 @@
 @import './components/toolbar/toolbar.less';
 @import './components/toolbar-new/toolbar.less';
 @import './components/subnavbar/subnavbar.less';
+@import './components/subnavbar-new/subnavbar-new.less';
 @import './components/block/block.less';
 @import './components/list/list.less';
 @import './components/badge/badge.less';