framework7io/framework7

This system is a comprehensive mobile UI component library that provides native-style interfaces for iOS and Material Design across React, Vue, and Svelte frameworks. It delivers a wide range of interactive elements, including complex layouts, data visualization charts, form controls, and navigation patterns, all unified by a modern, variable-based theming engine. The library supports advanced state management, service worker integration, and dynamic color generation, ensuring consistent behavior and appearance across web and native-capacitor environments.

86 changes.

This period focused on modernizing the Framework7 codebase by migrating the build pipeline to Vite and adopting a Virtual DOM architecture with JSX support. It involved a comprehensive redesign of all core components to use CSS variables for theming, introducing Material 3 styles, and adding new features like resizable master-detail views and swipe gestures. The work also included updating demo applications to reflect these new APIs and improving developer tooling with standardized linting and TypeScript definitions.

27 changes.

This period focused on developing the Framework7 v6 core library, introducing new UI components like Treeview, Text Editor, and various charts, while implementing a reactive Store module and Material You color support. Significant effort was dedicated to building comprehensive integration layers for React, Vue, and Svelte, including new component wrappers, state management hooks, and router utilities. The work also included enhancing the build system and establishing demo environments to validate the new framework-specific implementations.

The src/react directory now provides the core React integration for Framework7, introducing the \useStore\ hook alongside existing global utilities (\f7\, \f7ready\, \theme\). This change establishes the React plugin entry point and type definitions, enabling React components to access Framework7's store state and initialization callbacks.

src/react · high confidence

Introduces a new Skeleton component to display loading placeholders. The implementation imports styles from the external 'skeleton-elements' library and defines CSS variables for skeleton colors, including specific overrides for the 'dark' theme class to ensure proper visibility in dark mode.

src/core/components/skeleton · high confidence

The component module now includes a full Snabbdom Virtual DOM implementation, providing the core rendering engine for the router and custom components. This adds the \h\ hyperscript function for creating VNodes, a DOM API abstraction, and a suite of modules for managing attributes, classes, dataset properties, event listeners, element properties, and CSS styles (including delayed and removal animations). It also introduces a helper to attach VNodes to existing DOM elements and a 'hero' module for animating element transitions during updates.

src/core/modules/component/snabbdom · high confidence

The Svelte integration now exposes helper utilities and their TypeScript definitions. Users can import \useStore\, \f7\, \f7ready\, \theme\, and \app\ directly from the package, with corresponding types provided in \framework7-svelte.d.ts\ to support static analysis and IDE autocomplete.

src/svelte · high confidence

The build process now automatically generates standard copyright and license headers for the Core, React, Svelte, and Vue packages. These headers are dynamically populated with the current version, description, homepage, author, license type, and release date by reading from each package's respective package.json file, ensuring that distributed bundles always contain accurate and up-to-date attribution information.

scripts/banners · high confidence

The Form component now includes explicit TypeScript definitions (form.d.ts) that expose the public API methods (convertToData, fillFromData, getFormData, storeFormData, removeFormData) and document the associated DOM and App events (form:todata, form:fromdata, form:storedata, formajax:success, formajax:complete, formajax:beforesend, formajax:error). Additionally, theme-specific styling is now separated into form-ios.less and form-md.less, with the main form.less file conditionally importing the appropriate theme based on the active iOS or Material Design theme.

src/core/components/form · high confidence

A new Svelte-based Kitchen Sink demo has been added to the project, providing a complete entry point for testing Framework7 components in a Svelte environment. The setup includes an HTML entry file, a Vite build configuration that resolves Framework7 core and Svelte packages from local build artifacts, and static assets such as an autocomplete language list. This allows users to run and interact with the Svelte implementation of the Kitchen Sink using the Vite development server.

kitchen-sink/svelte · high confidence

Users can now create custom modal instances via \app.customModal.create()\, which extends the standard modal behavior to support a dedicated \custom-modal-backdrop\ class. This new component type allows for unique backdrops per modal instance (controlled by \backdropUnique\ or \forceBackdropUnique\ parameters), ensuring that backdrop elements are correctly managed and removed when the modal closes. The change includes the new \CustomModal\ class implementation, TypeScript definitions for the \customModal\ API, and associated LESS styles to handle the specific z-index and styling for custom modal backdrops.

src/core/components/modal · high confidence

The Range Slider component is now available, providing a customizable UI element for selecting values from a range. It supports single and dual-knob modes, vertical orientation, and a scale with customizable steps and labels. The component features distinct styling for iOS and Material Design (MD) themes, including specific knob animations, bar colors, and label positioning, and exposes a JavaScript API for programmatic value control and event handling.

src/core/components/range · high confidence

This change adds a new \src/react/shared\ directory containing the foundational utilities and integration logic for the React component library. It introduces a \componentsRouter\ plugin that handles page, tab, and modal component loading, state tracking, and the \openIn\ functionality (launching views in popups, sheets, panels, etc.). The update also provides React hooks (\useStore\, \useTab\, \useTooltip\, \useSmartSelect\, \useTheme\) for managing Framework7 state and lifecycle events, context providers (\RouterContext\, \ListContext\, \TabbarContext\) for component communication, and helper utilities for props handling, class generation, and prototype pollution prevention.

src/react/shared · high confidence

The Color Picker component has been rewritten to support a modular architecture, allowing users to customize the interface by selecting specific modules such as hue sliders, brightness sliders, color wheels, palettes, and hex inputs. The component now provides distinct visual styles for iOS and Material Design (MD) themes, including updated slider knobs, spectrum handles, and layout padding, while maintaining consistent dark/light theme support through dedicated CSS variables. It also introduces new configuration options for opening the picker in popovers, sheets, or popups, with improved event handling and view integration.

src/core/components/color-picker · high confidence

Added a new Store module (\src/core/modules/store\) that provides a reactive state management system. The store exposes a \state\ object with automatic reactivity tracking via proxies, a \getters\ collection that return objects containing the current \value\ and an \onUpdated\ callback for dependency tracking, and a \dispatch\ method for executing asynchronous actions. TypeScript definitions are included to support this new API.

src/core/modules/store · high confidence

The core library now includes a new 'lite' entry point (\framework7-lite.js\) that provides a smaller bundle by excluding heavy components like the Router Component Loader and Template7, while still including essential modules like Store and Service Worker. This change is accompanied by a restructured core module layout, introducing dedicated files for the full build (\framework7.js\), type definitions (\framework7.d.ts\, \framework7-types.d.ts\), and CSS (\framework7.less\), alongside a new \demo-module.js\ for testing module integration. Users opting for the lite build will get a lighter footprint suitable for applications that do not require dynamic component loading via the router.

src/core · high confidence

A new Toast component has been added to the core library, providing a modal-like notification system that supports both iOS and Material Design (MD) visual themes. The component allows users to display text and optional icons, with configurable vertical positioning (top, center, bottom) and horizontal alignment (left, center, right) for wider screens. It features automatic closing via a configurable timeout, a manual close button, and distinct transition animations for each theme (300ms for iOS, 200ms for MD). The implementation includes TypeScript definitions for type safety and exposes events for lifecycle management (open, close, destroy).

src/core/components/toast · high confidence

This change introduces a comprehensive set of new Vue 3 component wrappers for the v6 framework release. The diff adds Vue implementations for core UI elements including Accordion, Actions, App, Area Chart, Badge, Block, Breadcrumbs, Button, Card, Checkbox, Chip, FAB, and Gauge. These components utilize the Vue Composition API (setup, computed, ref) and integrate with the framework's shared utilities for styling (color classes) and event handling, providing the Vue-specific bindings for the v6 component architecture.

src/vue/components · high confidence

A new support module has been added to the core, exposing a \getSupport\ utility that provides an object containing properties about supported features. This module is registered as a Framework7 plugin and is accessible via the app instance, allowing users to programmatically check for specific feature support within the application.

src/core/modules/support · high confidence

The Kitchen Sink demo application now includes a dedicated CSS file (app.css) that defines styles for demo components, including FAB morph sheets, messagebars, grids, cards, and panels. It also embeds the Roboto font and configures the Material Icons and Framework7 Icons font families for use within the demo interface.

kitchen-sink/core/css · high confidence

Added a new Area Chart component that renders SVG-based area or line charts. Users can configure datasets, enable tooltips on hover, display legends, and toggle individual data series visibility via legend clicks. The component supports custom formatting for axis labels, legend items, and tooltip content, and includes CSS variables for styling axis, tooltip, and legend elements across iOS and Material Design themes.

src/core/components/area-chart · high confidence

A new Breadcrumbs component has been added to the core library, providing a navigation aid for displaying the current location in a hierarchy. The implementation includes a JavaScript plugin registration and TypeScript definitions, along with a comprehensive styling system based on LESS. The styles define a flex-based layout with configurable spacing, padding, and typography, supporting both iOS and Material Design (MD) themes. Specific variables control item colors, active states, separator icons (chevron\_right), and a collapsed state represented by a three-dot menu icon, ensuring the component adapts to the active theme's color scheme and design language.

src/core/components/breadcrumbs · high confidence

A new Gauge component has been added, allowing users to display numeric values as circular or semi-circular SVG charts. The component supports customization of size, colors, border width, and text labels (value and label), and can be initialized via HTML elements with the \.gauge-init\ class or programmatically through the app instance. It includes lifecycle hooks for tab and page mounting/removal to ensure proper instance creation and cleanup.

src/core/components/gauge · high confidence

The Material Color Utilities library now includes a new 2025 dynamic color specification alongside the existing 2021 spec. This update introduces a \DislikeAnalyzer\ to automatically adjust universally disliked colors (dark yellow-greens) and adds a \ContrastCurve\ class for more granular control over contrast levels. The 2025 spec specifically modifies surface tones for phone platforms, applying different lightness values based on the color variant (e.g., Vibrant, Neutral) and hue, while maintaining backward compatibility through a versioned spec delegate system.

src/material-color-utilities · high confidence

A new Pie Chart component has been added to the core library, allowing users to render data visualizations as SVG elements. The component supports configurable datasets with values, labels, and colors, and includes built-in tooltip functionality that displays label, value, and percentage information on hover. It provides an API for creating, updating, and destroying chart instances, along with events for selection and destruction, and includes TypeScript definitions for type safety.

src/core/components/pie-chart · high confidence

The React component library in src/react/components has been significantly expanded with new implementations for v6, including Accordion, Actions, App, AreaChart, Badge, Block, Breadcrumbs, Button, Card, Checkbox, Chip, and Floating Action Buttons (FAB). These components provide React-specific wrappers around the core Framework7 functionality, enabling users to integrate these UI elements directly into their React applications with proper event handling, props, and styling support.

src/react/components · high confidence

A new Service Worker core module has been added, providing methods to register and unregister service workers via the app instance. Users can now configure service worker paths and scopes through app parameters, which are automatically registered during initialization. The module exposes events for registration and unregistration success or failure, and includes logic to skip initialization in Cordova or Capacitor native environments.

src/core/modules/service-worker · high confidence

This change introduces a new \src/svelte/shared\ directory containing the core infrastructure for the Svelte components library. It adds a \componentsRouter\ plugin that handles page, tab, and modal component loading, including support for the \openIn\ navigation option (opening routes in popups, sheets, panels, etc.). The update also provides several Svelte composition helpers (\useStore\, \useTheme\, \useIcon\, \useTooltip\, \useSmartSelect\, \useTab\, \useRouteProps\) and utility modules for managing router attributes, modal state classes, and rest props, establishing the foundation for the v6 Svelte build pipeline.

src/svelte/shared · high confidence

A new Text Editor component is introduced, providing a rich text editing experience with support for bold, italic, underline, strikethrough, lists, links, images, headings, alignment, and indentation. The editor supports three display modes: a standard toolbar, a popover, and a keyboard toolbar (which automatically falls back to popover on non-Android devices without Cordova/Capacitor). It includes a \clearValue()\ method, custom button support, and emits events for link and image insertion to allow post-processing. The component is styled with Material Design 3 (MD) and iOS themes, featuring touch ripples for MD and specific placeholder colors, while TypeScript definitions are provided for the API.

src/core/components/text-editor · high confidence

A new Toggle component is introduced, providing switch-style inputs with distinct visual styles for iOS and Material Design (MD) themes. The implementation includes core logic for touch interactions, state management, and event handling, along with LESS stylesheets defining theme-specific variables and animations. It supports automatic initialization via CSS classes (\.toggle-init\) and integrates with the framework's lifecycle events for tabs and pages, ensuring proper creation and destruction of instances.

src/core/components/toggle · high confidence

The framework now includes a new Tooltip component that supports 'hover', 'click', and 'manual' triggers, allowing for more flexible interaction patterns. It introduces a 'delegated' mode to attach event handlers to a parent element (like the document) for better performance with dynamic content, and allows specifying a custom 'containerEl' for positioning. The component automatically initializes on elements with the 'tooltip-init' class and 'data-tooltip' attribute, and provides API methods to show, hide, and update text dynamically.

src/core/components/tooltip · high confidence

A new Treeview component has been added to the core library, enabling users to display hierarchical lists with expandable and collapsible items. The implementation includes JavaScript logic for managing open/close states, handling click events on toggle elements, and supporting asynchronous child loading via a 'treeview:loadchildren' event that displays a preloader. The component is styled with CSS variables for theming (iOS and Material Design), supporting features like selectable items, nested indentation, and RTL layout adjustments.

src/core/components/treeview · high confidence

The component module has been replaced with a new implementation that uses a Virtual DOM (based on Snabbdom) for rendering, introducing a new class-based component syntax and a \$jsx\ helper for JSX-like template rendering. This update adds reactive state management via \$useState\ and \$ref\ variables, supports custom components and fragments, and exposes new lifecycle hooks and context properties (such as \$f7route\, \$f7router\, and \$store\) to component instances.

src/core/modules/component · high confidence

This change introduces a set of new CSS styles for custom page transitions within the router, including circle, cover, cover-v, dive, fade, flip, parallax, and push. These styles define the visual animations and keyframes for navigating between pages, utilizing CSS variables for transition durations and ensuring pointer events are disabled during animations to prevent user interaction issues.

src/core/components/page/page-transitions · high confidence

The toolbar component now supports a new visual highlight for tabbar links. On iOS, a new \tabbar-highlight.js\ module adds a glassmorphic, animated highlight that follows the user's finger during touch interactions before snapping to the active tab. On Material Design (MD), the highlight is a simple 2px colored underline that moves to the active tab. This behavior is controlled by the new \toolbar.setHighlight()\ API method and is automatically initialized for iOS tabbars. The styling is defined in new \toolbar-ios.less\ and \toolbar-md.less\ files, which also introduce CSS variables for customizing the highlight colors and sizes.

src/core/components/toolbar · high confidence

The color picker now supports a variety of new input modules, allowing users to select colors using an HSB spectrum, an HS spectrum, an SB spectrum, a color wheel, or individual sliders and bars for Hue, Saturation, Brightness, Red, Green, and Blue values. Additional modules provide an alpha (opacity) slider, a hex code input, a palette for quick color selection, and displays for the initial and current colors.

src/core/components/color-picker/modules · high confidence

A new touch highlight feature has been added to the core components, providing a radial visual feedback effect on touch interactions. For iOS users, this update resolves scrolling issues in popovers and scrollable tab bars by applying specific CSS touch-action rules to prevent the highlight overlay from blocking native scroll gestures.

src/core/components/touch-highlight · high confidence

The Popup component now supports closing via swipe gestures (configurable via \swipeToClose\ and \swipeHandler\ parameters) and includes new \swipeStart\, \swipeMove\, \swipeEnd\, and \swipeClose\ events. It also introduces a 'push' mode (\push\ parameter) that scales and pushes the underlying view behind the popup, along with a \closeOnEscape\ parameter to allow closing the popup by pressing the ESC key. Additionally, users can now specify a custom \containerEl\ for mounting the modal and control backdrop uniqueness with \backdropUnique\.

src/core/components/popup · high confidence

The View component now supports resizable Master Detail layouts. When the \masterDetailResizable\ parameter is enabled, a draggable resize handle appears between the master and detail panels, allowing users to adjust the master panel width interactively. The width is constrained by \min-width\ and \max-width\ CSS properties on the master page and is persisted via a CSS variable (\--f7-page-master-width\). This feature also exposes \view:resize\ and \viewMasterDetailBreakpoint\ events to notify applications of layout changes.

src/core/components/view · high confidence

The statusbar component has been updated to detect and interact with the Capacitor runtime in addition to Cordova. Users running their apps on native platforms via Capacitor can now utilize the same statusbar API methods (hide, show, setTextColor, setBackgroundColor, overlaysWebView, isVisible) and configuration parameters (iosTextColor, androidTextColor, etc.) to control the device statusbar, ensuring consistent behavior across both Cordova and Capacitor environments.

src/core/components/statusbar · high confidence

The Svelte Kitchen Sink application now includes a comprehensive set of demo pages for the Framework7 Svelte components. This change introduces new Svelte page files (such as 404, about, accordion, action-sheet, area-chart, autocomplete, badge, breadcrumbs, buttons, calendar, cards, and checkbox) that demonstrate component usage, including specific features like expandable cards, calendar events, and various button styles.

kitchen-sink/svelte/src/pages · high confidence

The Virtual List component now allows users to set the \height\ parameter to the string 'auto' to enable automatic calculation of individual item heights. This change introduces a new \autoHeight\ mode in the core logic, which iterates through rendered DOM elements to measure their actual heights and updates the list's total height accordingly. This feature is particularly useful for lists containing items with variable content or dynamic styling, ensuring the scroll container is sized correctly without requiring a fixed pixel height or a custom height function.

src/core/components/virtual-list · high confidence

The Accordion component has been updated to include 'beforeopen' and 'beforeclose' lifecycle events that allow users to prevent the opening or closing action via a provided 'prevent' method. Additionally, the component now manages ARIA attributes by setting 'aria-hidden' on content elements when closed and removing them when opened, improving screen reader accessibility. The implementation also supports an 'opposite' mode for layout variations and introduces new TypeScript definitions for the component's API and events.

src/core/components/accordion · high confidence

The Action Sheet component now automatically converts to a Popover on large screens (desktop, iPad, or width \>= 768px) when the \convertToPopover\ option is enabled, using the specified \targetEl\ or coordinates for positioning. This change includes a complete visual redesign with new Material Design and iOS-specific styles, updated CSS variables for theming, and a renamed \bold\ button class to \strong\. The component also supports unique backdrop elements and improved event handling during the popover transition.

src/core/components/actions · high confidence

The App component has been refactored to support modern styling and development workflows. TypeScript definitions (app-class.d.ts) now explicitly document the app instance, including new properties like \darkMode\, \userAgent\, and \url\ for SSR support, as well as methods like \setColorTheme\ and \setDarkMode\. The core JavaScript logic (app-class.js) has been updated to use shared utilities for device and support detection, and to handle dark mode changes via system media queries. Styling has been migrated to CSS variables (app-vars.less), introducing configurable safe areas, font families, and color themes for both iOS and Material Design, while app-ios.less and app-md.less handle theme-specific visibility rules.

src/core/components/app · high confidence

The Autocomplete component has been refactored to support modern theming and rendering patterns. The core logic in autocomplete-class.js now utilizes JSX for rendering and imports device detection via a dedicated shared utility. Theming is centralized through CSS variables defined in autocomplete-vars.less, with specific iOS and Material Design styles separated into their own files (autocomplete-ios.less, autocomplete-md.less). The component also introduces new configuration options for custom rendering (renderDropdown, renderPage, renderPopup, renderItem, renderSearchbar, renderNavbar) and updates the TypeScript definitions to reflect the current API surface.

src/core/components/autocomplete · high confidence

The build process now includes a Python-based script (generate.py) that automatically constructs the 'framework7-core-icons' font. This tool reads SVG files from the source directory, processes them (including cleaning up SVG tags), and uses FontForge to generate TTF, WOFF, and WOFF2 font files, ensuring the icon set is consistently built from the latest source assets.

scripts/icon-font · high confidence

The Badge component's appearance is now driven by CSS custom properties (e.g., --f7-badge-bg-color, --f7-badge-padding) rather than hardcoded values. This allows for easier theme customization and ensures consistent styling across iOS and Material Design themes, with specific padding and font-weight adjustments applied per platform via the new badge-vars.less file.

src/core/components/badge · high confidence

The Block component has been restructured to rely on CSS custom properties for all visual styling, enabling dynamic theming and easier customization. This change introduces theme-specific variants for iOS and Material Design, including distinct margin, padding, font sizes, and border radii for inset and outline states. It also adds support for new title sizes (medium and large) and allows for theme-specific strong states, ensuring the component adapts correctly to light and dark modes across different design languages.

src/core/components/block · high confidence

The build system now includes dedicated utility modules in scripts/utils to handle CSS transformations and file management. Specifically, autoprefixer.js and clean-css.js (using cssnano) are added to process and minify styles, while less.js provides a wrapper for compiling Less files. Additionally, fs-extra.js offers a custom set of synchronous file system operations, including recursive directory creation and file copying, to support the build pipeline.

scripts/utils · high confidence

The button component's styling has been migrated from hardcoded values to CSS custom properties (e.g., --f7-button-bg-color, --f7-button-height), allowing for easier theme customization. This change introduces new button variants including 'tonal' buttons and updates the visual appearance of iOS and Material Design buttons, such as adjusted border radii, padding, and transition durations, while also fixing specific issues like iOS outline button colors and Safari variable crashes.

src/core/components/button · high confidence

The Calendar component has been refactored to support new interactive pickers (Month, Year, and Time) presented as popovers, alongside a new range picker appearance. The implementation now uses CSS variables for consistent theming across iOS, Material Design, and dark modes, and includes specific fixes for date parsing, disabled day visibility, and touch interactions.

src/core/components/calendar · high confidence

The Card component has been refactored to use CSS custom properties for theming, introducing distinct style sets for iOS and Material Design (MD) via new \card-ios.less\, \card-md.less\, and \card-vars.less\ files. This change brings new visual styles, including \outline\ and \raised\ variants, and updates the expandable card behavior to support custom scrollable elements, backdrop configuration, and improved handling of navbars/toolbars during expansion. TypeScript definitions have been updated to reflect the new API, including parameters for hiding UI elements on open and custom scroll containers.

src/core/components/card · high confidence

The checkbox component has been updated to use CSS variables for styling (such as size, border-radius, and colors) and now supports the indeterminate state, displaying a horizontal line when the checkbox is neither checked nor unchecked. The component also includes theme-specific styles for iOS and Material Design, with support for dark mode and icon positioning.

src/core/components/checkbox · high confidence

The Contacts List component now uses CSS custom properties (e.g., --f7-contacts-list-title-font-size, --f7-contacts-list-title-bg-color) to define its appearance, replacing hardcoded values. This change introduces distinct styling rules for iOS and Material Design themes, allowing for easier theme customization and consistent integration with the framework's variable-based theming system.

src/core/components/contacts-list · high confidence

This change introduces foundational Less assets in src/core/less to support theme-specific styling and build-time icon embedding. The new mixins.less file provides conditional mixins (e.g., .if-ios-theme, .if-md-theme, .if-dark-theme) that gate styles based on theme flags, along with hairline utilities that use device-pixel-ratio-aware transforms for crisp 1px lines, and helper classes for scrollable/disabled states and modal backdrops. The plugin.js file adds a Less plugin that base64-encodes the core icons font (framework7-core-icons.woff) via the framework7\_coreIconsFont function, enabling inline font usage without external requests. The vars.less file defines a set of breakpoints (xsmall through xlarge) for responsive sizing. Together, these files standardize how themes, hairlines, and icons are handled in the Less build pipeline.

src/core/less · high confidence

The core library has been reorganized into the \src/core/shared\ directory, introducing a new modular architecture. This includes a lightweight \$jsx\ function for generating HTML strings, a \Framework7Class\ base for event handling and module installation, and a \ConstructorMethods\ helper for standardizing component APIs. Device detection (\get-device\) has been updated to support Capacitor and fix Chrome Android emulator recognition, while a new \History\ module manages browser state. A significant addition is the Material You color system, implemented via \material-color-utils\ and \material-colors\, which generates dynamic light and dark theme palettes (Tonal Spot, Vibrant, Monochrome) from a source color.

src/core/shared · high confidence

The data table component has been refactored to support distinct iOS and Material Design (MD) visual themes. The JavaScript logic now handles row selection states, sortable column interactions, and proper event cleanup on destroy. Styling is split into platform-specific LESS files (data-table-ios.less and data-table-md.less) that define layout, spacing, and icon sizes, while shared variables in data-table-vars.less manage colors and typography for both light and dark modes. TypeScript definitions have been updated to reflect the current API.

src/core/components/data-table · high confidence

The device module has been updated to automatically add \device-capacitor\ and \device-cordova\ classes to the HTML element when the app is running in those respective environments. This allows users to target these specific runtime contexts with CSS styles, alongside existing classes for OS, pixel ratio, and standalone mode.

src/core/modules/device · high confidence

The Dialog component has been refactored to use CSS variables for styling (defined in dialog-vars.less) and JSX for rendering (via $jsx in dialog-class.js). This change introduces a new backdrop parameter to control the semi-transparent overlay behind the dialog, and updates the iOS and Material Design themes to use the new variable-based styling system. The component now supports dynamic title requests and includes specific styling for inputs, buttons, and preloader states across both themes.

src/core/components/dialog · high confidence

The clicks module now supports opening external links via Capacitor's Browser plugin when the target is \_system or \_blank, in addition to existing Cordova InAppBrowser support. It also allows links to explicitly target the current view using data-view="current" and supports disabling links via the 'disabled' class. Additionally, navigation can be prevented by adding the 'router-prevent' class or setting the preventF7Router property on the click event.

src/core/modules/clicks · high confidence

The Grid component now leverages native CSS Grid layout instead of the previous implementation. This introduces utility classes for setting column and row counts (from 1 to 20) and adds responsive variants for xsmall, small, medium, large, and xlarge breakpoints. A new CSS variable, --f7-grid-gap, is introduced to control spacing between grid items, and the component structure has been simplified with theme-specific imports for iOS and Material Design.

src/core/components/grid · high confidence

The Vue package now includes updated type definition files (framework7-vue.d.ts and framework7-vue-bundle.d.ts) that explicitly export the useStore helper alongside the main framework instance, theme, and ready callback. This ensures that TypeScript users get accurate type checking and IntelliSense support when using the store integration within their Vue applications.

src/vue · high confidence

The infinite-scroll component has been refactored to support distinct visual styling for iOS and Material Design themes. New LESS files (infinite-scroll-ios.less, infinite-scroll-md.less) define specific preloader margins and sizes for each platform, imported conditionally via the main infinite-scroll.less entry point. Additionally, a TypeScript definition file (infinite-scroll.d.ts) has been added to provide type safety for the component's API, including methods for creating and destroying scroll listeners and event definitions.

src/core/components/infinite-scroll · high confidence

The Chip component now supports Material 3 (m3) design styles, utilizing new CSS variables (e.g., \--f7-chip-bg-color\, \--f7-chip-outline-border-color\) to manage appearance. This change introduces distinct visual treatments for iOS and MD themes, including specific padding, border-radius, and font-weight adjustments, as well as updated delete button icons and margins for both light and dark modes.

src/core/components/chip · high confidence

The React Kitchen Sink demo has migrated its build tooling from Webpack to Vite. This change introduces a new Vite configuration (vite.config.js) and an entry point (index.html) that loads the application via an ES module script. For users, this means the development server and build process are now powered by Vite, which typically offers faster startup and hot module replacement, while the application structure remains a standard React app served from the root directory.

kitchen-sink/react · high confidence

The React Kitchen Sink application has been restructured to use a new entry point (app.js) that initializes the app with React 18's createRoot and integrates Framework7 React. The main app component (app.jsx) now configures global behaviors such as closing modals (popup, sheet, popover, actions) on escape key press, supports theme switching via URL parameters, and enables browser history navigation conditionally. The app layout includes floating, resizable left and right panels, and a main view with master-detail breakpoint support. A new store.js file provides a simple state management example for loading users. The routes.js file defines the navigation structure for all demo pages, including new routable modals and master-detail views.

kitchen-sink/react/src · high confidence

The React Kitchen Sink demo pages have been updated to use the latest Framework7 v6 APIs, including the new hooks-based component patterns, and the project build system has been switched from Webpack to Vite. This change refreshes the demonstration code for components such as Accordion, Action Sheet, Area Chart, Autocomplete, Badge, Breadcrumbs, Buttons, Calendar, Cards, and Checkbox to reflect current best practices and improve the development experience.

kitchen-sink/react/src/pages · high confidence

The Kitchen Sink demo application has been restructured to use a new initialization flow. The app now initializes with a centralized store (store.js) instead of relying on app data/methods, enabling state management for features like user lists. Additionally, the app configuration now explicitly enables 'closeOnEscape' for popups, sheets, popovers, and actions, and supports browser history navigation via URL parameters. The demo also includes new safe-area handling and theme/mode detection logic.

kitchen-sink/core/js · high confidence

The kitchen-sink/core/index.html entry point has been updated to demonstrate new UI capabilities. It now includes a left panel with a list of component links and a right panel configured as a floating, resizable side panel. The main view is initialized with safe-area support and a master-detail breakpoint set to 768px, enabling responsive master-detail layouts. The page also loads specific JavaScript modules for routes, store, and app initialization.

kitchen-sink/core · high confidence

The Kitchen Sink demo application has been restructured to use the new Core page templates, replacing the previous layout structure. This update introduces demos for newly styled components, including M3-style Cards with outline and raised variants, Tonal buttons, and Breadcrumbs. The demos also reflect behavioral changes such as the removal of the legacy Request module in favor of native fetch, updated Swiper integration, and new iOS-style navbars and tabbars.

kitchen-sink/core/pages · high confidence

The Link component's styling has been restructured to rely on CSS variables for theming and visual states. New \link-vars.less\ defines variables for highlight colors and pressed opacity, while \link-ios.less\ implements the iOS-specific active-state opacity transition. The main \link.less\ file now imports these theme-specific styles conditionally and establishes base layout properties, including touch ripple color configuration, ensuring consistent styling across iOS and Material Design themes.

src/core/components/link · high confidence

The List Index component in src/core/components/list-index has been updated to support automatic initialization on elements with the .list-index-init class (triggered on pageInit, tabMounted, and vnode insert), allowing users to instantiate the component via HTML data attributes without explicit JavaScript calls. Additionally, the component's styling has been migrated to use CSS custom properties (e.g., --f7-list-index-width, --f7-list-index-label-size) defined in list-index-vars.less, replacing hardcoded values and ensuring compatibility with Vite's CSS processing. The component also now correctly adjusts its vertical position relative to navbars, subnavbars, and toolbars using these CSS variables.

src/core/components/list-index · high confidence

The List component's styling has been refactored to use CSS custom properties (e.g., \--f7-list-item-padding-horizontal\, \--f7-list-strong-bg-color\) instead of hardcoded values. This change introduces new theme-specific variable files (\list-ios.less\, \list-md.less\, \list-vars.less\) that define distinct visual properties for iOS and Material Design themes, including margins, font sizes, colors, and border styles. Users can now customize the appearance of list items, headers, footers, and menu lists more granularly by overriding these CSS variables, and the component supports new outline and strong states via corresponding variable-driven styles.

src/core/components/list, src/core/components/timeline · high confidence

The Login Screen component has been refactored to use CSS custom properties for styling, introducing variables for background colors, title typography, and transition timings. This change adds native support for dark mode by defining specific color variables for light and dark themes in the iOS and Material Design styles, ensuring the login screen background and content areas adapt correctly to the system theme. The component's JavaScript class and TypeScript definitions have also been updated to align with the new modal architecture.

src/core/components/login-screen · high confidence

The Messagebar component has been refactored to use CSS variables for theming, introducing distinct visual styles for iOS and Material Design (MD) themes. The iOS style now features a glassmorphism effect with backdrop filters and specific attachment sheet sizing, while the MD style adopts Material 3 color tokens and updated attachment layouts. This change also includes a new TypeScript definition file for improved type safety and updates to the component's lifecycle hooks to better handle initialization and destruction within tabs and pages.

src/core/components/messagebar · high confidence

The Messages component has been refactored to use CSS variables for theming (defined in messages-vars.less) and separate platform-specific styles for iOS and Material Design. The JavaScript implementation now uses JSX for rendering messages, supporting new parameters like scrollMessagesOnEdge and custom message rules, while the TypeScript definitions have been updated to reflect the new API surface.

src/core/components/messages · high confidence

The Svelte Kitchen Sink demo has been restructured with a new initialization pipeline. The app now uses a dedicated \app.js\ entry point that mounts the Svelte application and registers the Framework7 Svelte plugin. The main layout (\app.svelte\) configures the Framework7 app with specific parameters, including support for left and right floating panels, and enables browser history navigation conditionally based on the URL. A new routing configuration (\routes.js\) defines the navigation structure for all demo pages, and a new store (\store.js\) provides state management capabilities for the demo.

kitchen-sink/svelte/src · high confidence

The build system has been replaced with a new set of scripts that generate separate, modular outputs for the core library and the React, Vue, and Svelte wrappers. This pipeline produces distinct ESM and UMD bundles (including 'lite' variants), generates TypeScript declaration files for all components, compiles LESS styles into CSS, and updates package.json exports to support granular, tree-shakeable imports. It also handles the compilation of Material Color Utilities and updates the Kitchen Sink demo to use the newly built assets.

scripts · high confidence

The Panel component has been significantly updated to support new visual effects including 'floating' and 'push', alongside existing 'cover' and 'reveal' modes. Users can now configure visible and collapsed breakpoints to control panel visibility based on app width, and enable resizable panels that can be dragged to adjust width within defined limits. The component also introduces swipe-to-open/close gestures with configurable thresholds and areas, and improves the overall lifecycle management with better event emission for state changes like opening, closing, and breakpoint transitions.

src/core/components/panel · high confidence

The Photo Browser component has been refactored to support new configuration options and theming. Users can now control the swipe-to-close behavior via the \swipeToClose\ parameter and close the modal by clicking the backdrop using the new \closeByBackdropClick\ option. The component also introduces \pageBackLinkText\, \popupCloseLinkText\, and \navbarShowCount\ to customize navigation labels and the photo counter display. Styling has been modernized by migrating to CSS custom properties (e.g., \--f7-photobrowser-bg-color\), allowing for easier theme customization, while the underlying implementation now uses a dedicated class structure and JSX rendering.

src/core/components/photo-browser · high confidence

The Picker component in src/core/components/picker has been refactored to use native CSS Scroll Snap for column scrolling, replacing the previous JavaScript-based scroll logic. This change introduces a new set of LESS files (picker.less, picker-vars.less, picker-ios.less, picker-md.less) that define the layout, item heights, and theme-specific styling using CSS custom properties (e.g., --f7-picker-item-height, --f7-picker-item-selected-bg-color). The JavaScript implementation (picker-class.js, picker-column.js) now relies on these CSS properties for sizing and snapping behavior, while the TypeScript definitions (picker.d.ts) and module entry point (picker.js) have been updated to reflect the current API and structure.

src/core/components/picker · high confidence

A new directory named 'vue-temp' has been added under the 'src' folder, containing only a '.gitkeep' file to ensure the directory is tracked by version control. This serves as a structural placeholder for future Vue-related temporary files or components.

src/vue-temp · high confidence

The Popover component has been refactored to support more flexible positioning and interaction. Users can now force vertical alignment using the new \verticalPosition\ parameter ('auto', 'top', or 'bottom'). The component also introduces \backdropUnique\ to allow multiple popovers to be stacked with exclusive backdrops, and \closeOnEscape\ to dismiss the popover via the ESC key. Additionally, the popover now automatically resizes when the on-screen keyboard appears or disappears, and the iOS theme styling has been updated to use glassmorphism effects.

src/core/components/popover · high confidence

The preloader component has been refactored to use CSS custom properties (e.g., --f7-preloader-color, --f7-preloader-size) for theming, replacing previous hardcoded values. New LESS files define distinct visual styles for iOS (line-based spinner) and Material Design (circle-based spinner) themes, including multi-color support. The JavaScript implementation now supports showing and hiding the preloader in specific elements via new \showIn\ and \hideIn\ methods, in addition to the global overlay. TypeScript definitions have been updated to reflect these new API methods.

src/core/components/preloader · high confidence

The Progressbar component has been refactored to use CSS custom properties (e.g., --f7-progressbar-height, --f7-progressbar-bg-color) for styling, allowing for easier theme customization. New theme-specific LESS files (progressbar-ios.less, progressbar-md.less) define distinct visual behaviors for iOS and Material Design, including updated infinite progress animations and multi-color support. The component now initializes progress values on tab mount and page init, and supports dynamic updates via vnode insert/update hooks.

src/core/components/progressbar · high confidence

The pull-to-refresh component has been refactored to support bottom-positioned refreshes (via the .ptr-bottom class) and improved handling of transparent navbars. The implementation now uses theme-specific LESS files (iOS and Material Design) with CSS variables for sizing and colors, ensuring consistent visual behavior across platforms. The core logic has been updated to detect and adapt to large transparent navbars, and the component now properly manages event listeners during tab and page lifecycle events.

src/core/components/pull-to-refresh · high confidence

The Radio component's styling has been refactored to use CSS custom properties (e.g., --f7-radio-size, --f7-radio-active-color) defined in radio-vars.less, replacing hardcoded values. Theme-specific styles for iOS and Material Design are now isolated in radio-ios.less and radio-md.less respectively, allowing for distinct visual treatments such as different border widths and icon positioning logic. The main radio.less file now imports these theme-specific styles conditionally based on the active theme, ensuring that the component adapts its appearance correctly without cross-theme style leakage.

src/core/components/radio · high confidence

The Floating Action Button (FAB) component has been updated to support Material Design 3 (MD3) styling and iOS glassmorphism effects, with visual properties now driven by CSS variables for easier customization. The iOS theme features a translucent glass effect with specific light and dark mode shadows, while the MD theme adopts MD3 container colors and rounded corners. Additionally, the component now supports a 'morph' animation, allowing the FAB to smoothly transform into a target element upon opening, and includes a backdrop overlay for better focus management.

src/core/components/fab · high confidence

The Input component has been updated with a complete visual overhaul and enhanced behavior. The styling now uses a new set of CSS variables (e.g., --f7-input-height, --f7-label-text-color) and distinct LESS files for iOS and Material Design themes, introducing new visual states for focused, invalid, and outlined inputs. Functionally, the component now includes robust client-side validation via new \validate\ and \validateInputs\ methods that automatically display error messages and apply invalid styling. Additionally, textareas are now resizable by default, with a new \textarea:resize\ event emitted when their height changes, and the component exposes new DOM events like \input:notempty\ and \input:clear\ to track value changes.

src/core/components/input · high confidence

The Notification component has been updated with a new Material 3 design language, featuring increased transition durations (500ms for MD, 450ms for iOS) and larger padding (20px vertical, 16px horizontal) for a more spacious appearance. The component now supports a swipe-to-close gesture, allowing users to dismiss notifications by swiping down, and includes a dedicated close button. Visuals are driven by CSS variables for easy theming, with distinct styles for iOS (glassmorphism, rounded corners) and Material Design (elevation, specific typography). TypeScript definitions have been updated to reflect the new parameters and event handlers.

src/core/components/notification · high confidence

The navbar component has been restyled for both iOS and Material Design (MD) themes using a new set of CSS variables (e.g., \--f7-navbar-height\, \--f7-navbar-large-title-font-size\) defined in \navbar-vars.less\. iOS navbars now feature a glassmorphism effect with backdrop blur, rounded pane corners, and specific safe-area handling, while MD navbars have adjusted heights, padding, and large-title collapse animations. The JavaScript logic and TypeScript definitions have been updated to support these visual changes, including refined title centering, large title collapse/expand behaviors, and scroll-hide interactions.

src/core/components/navbar · high confidence

The Page component now features distinct visual styles and animations for iOS and Material Design themes, defined in new theme-specific LESS files. iOS pages use a 20% offset and shadow effects during transitions, while Material Design pages use a 128px offset with specific cubic-bezier easing curves. A new master-detail layout mode is supported, allowing a fixed-width master sidebar (default 320px) alongside a detail view, with proper handling for right-to-left (RTL) layouts. Page title styling is also updated to use CSS variables for font size, weight, and padding, ensuring consistency across themes.

src/core/components/page · high confidence

The resize module now provides app width, height, left, and top properties via the app instance, allowing users to programmatically access the app's current size and position. It also emits 'resize' and 'orientationchange' events when the window size or device orientation changes, and includes a specific fix for iPad body scroll behavior during orientation changes.

src/core/modules/resize · high confidence

The router module has been refactored from a monolithic structure into distinct files (e.g., \back.js\, \navigate.js\, \modal.js\, \tab.js\) to improve maintainability. A new \appRouterCheck\ utility now prevents the misuse of view-specific router methods on the global app router, throwing an error if called incorrectly. Additionally, the \async-component.js\ module was introduced to standardize how asynchronous components are resolved and rejected, ensuring errors are properly propagated. The \clearPreviousHistory\ functionality was also extracted into its own module.

src/core/modules/router · high confidence

The Searchbar component has been reorganized into a modular structure, introducing a dedicated \remove-diacritics.js\ utility that allows search queries to ignore accents and special characters (e.g., matching 'cafe' to 'café'). The component now supports configurable input events via the \inputEvents\ parameter and includes new CSS variables and theme-specific styles (iOS and Material Design) for expandable searchbars, backdrop handling, and group title visibility. TypeScript definitions have been updated to reflect these new parameters and the component's API.

src/core/components/searchbar · high confidence

The Sheet component now supports multi-step opening via swipe gestures, allowing users to define intermediate states using the \breakpoints\ parameter and control them programmatically with \stepOpen\, \stepClose\, and \setBreakpoint\. It also introduces a \push\ effect that scales and pushes the underlying view when the sheet opens, with configurable \pushBreakpoint\ and \backdropBreakpoint\ settings to manage visual transitions. These changes are accompanied by updated TypeScript definitions and theme-specific styling for iOS and Material Design.

src/core/components/sheet · high confidence

The Smart Select component has been reorganized into a modular structure (class, constructor, and styles) and introduces several new configuration parameters. Users can now control the sheet modal's backdrop visibility via the \sheetBackdrop\ option, prevent the modal from opening using the \beforeOpen\ event, and specify the position of checkbox/radio icons with \inputIconPosition\. Additionally, the component now supports a \popupTabletFullscreen\ parameter to force full-screen popups on tablets, and the \cssClass\ parameter replaces the previous \className\ for adding custom styles to the container.

src/core/components/smart-select · high confidence

The Sortable component now uses CSS variables for visual customization, introducing specific styles for iOS and Material Design themes. iOS theme files define a 'sort\_ios' icon for the handler, while Material Design uses 'sort\_md'. Theme-specific CSS variables control the handler width (36px for iOS, 42px for MD), handler color, and the background/box-shadow of items during sorting. The main stylesheet now imports these theme-specific files conditionally and applies the new variables to the sortable handler and sorting item states.

src/core/components/sortable · high confidence

The project now enforces consistent coding styles across all frameworks (React, Vue, Svelte, Core) by introducing ESLint and Prettier configurations alongside an EditorConfig file. This ensures uniform indentation, line endings, and formatting rules for developers, while specific overrides handle framework-specific syntax like JSX and Svelte components.

(repo-wide) · high confidence

The Stepper component has been refactored to use CSS variables for theming, introducing distinct styles for iOS and Material Design (MD) via separate LESS files and a new \stepper-vars.less\ configuration. This change adds a \manualInputMode\ parameter that allows users to type values directly into the input field, supporting fractional numbers with a configurable \decimalPoint\ precision. The component now handles auto-initialization via the \stepper-init\ class and Vite-compatible imports, while also fixing a bug where negative numbers were previously rejected in manual input mode.

src/core/components/stepper · high confidence

The Subnavbar component has been updated to rely on CSS custom properties (e.g., --f7-subnavbar-height, --f7-subnavbar-bg-color) for styling, replacing hardcoded values. This change introduces distinct visual behaviors for iOS and Material Design themes: iOS subnavbars now feature a glassmorphism effect with backdrop blur and specific height calculations, while Material Design styles adjust padding and alignment for icon-only links. Additionally, the component now automatically detects and applies a 'page-with-subnavbar' class to pages containing a subnavbar, ensuring correct layout positioning relative to the main navbar.

src/core/components/subnavbar · high confidence

The Svelte component library in src/svelte/components has been rewritten to align with Framework7 v6 and Svelte 5 conventions. The components now utilize Svelte 5's $props, $state, $derived, and $effect runes for reactive state management, replacing previous patterns. The component structure has been updated to use the new {@render children?.()} syntax for slotting content. Additionally, the components now integrate with the Framework7 v6 core API (app.f7) for features like actions, cards, and accordions, and support new v6-specific props such as tonal buttons, outline/inset states, and expanded tooltip capabilities.

src/svelte/components · high confidence

The Swipeout component has been updated to support new Material 3 (m3) visual styles alongside the existing iOS theme, utilizing a new CSS variable system for theming. This change introduces distinct styling for action buttons and active states per platform, adds overswipe enter/exit events for better interaction feedback, and includes TypeScript definitions for the updated API.

src/core/components/swipeout · high confidence

The Swiper component implementation has been updated to utilize the Swiper Custom Element (via \swiper/element/bundle\). This change shifts the initialization logic to handle \swiper-container\ elements natively, allowing the component to register the custom element and manage instances through the browser's native element API rather than solely relying on the standard Swiper class constructor. The component still exposes the \app.swiper\ API for programmatic creation and retrieval, but the underlying mechanism for DOM-based initialization now leverages the custom element registration.

src/core/components/swiper · high confidence

The tabs component now supports swipeable tab navigation by integrating the Swiper library. When a tab container uses the 'swiper-container' element, the component delegates tab switching to Swiper, enabling touch-swipe interactions between tabs. The implementation also ensures that tab show/hide events are correctly triggered for both animated CSS transitions and Swiper-based swipe transitions, and fixes issues with double event firing and initial tab state for routable swipeable tabs.

src/core/components/tabs · high confidence

The touch module now provides explicit configuration options for managing touch interactions, including enabling or disabling the active-state class and ripple effects, customizing the CSS selectors for elements that trigger these effects, and adjusting the tap-hold delay and distance thresholds. This allows users to fine-tune visual feedback and gesture sensitivity across different themes and devices.

src/core/modules/touch · high confidence

The touch ripple effect now uses a blurred radial gradient for interactive elements like buttons, links, and list items, replacing the previous solid-color approach. This change is driven by new CSS variables (--f7-touch-ripple-black, --f7-touch-ripple-white, and --f7-touch-ripple-color) that define the ripple appearance and automatically adapt to dark mode. The underlying JavaScript class has been restructured to support an 'inset' mode for specific elements and manages the ripple lifecycle with improved animation handling.

src/core/components/touch-ripple · high confidence

The typography module has been restructured to use CSS custom properties for padding and margin (defaulting to 16px), enabling easier theme customization. Additionally, new utility classes have been introduced to apply half-values for padding and margins (e.g., \.padding-half\, \.margin-vertical-half\), and helper classes for flex-direction and alignment have been added to support more flexible layout control within typography contexts.

src/core/components/typography · high confidence

The utils module in src/core/modules/utils has been refactored to import and expose the utility functions from the shared utils location (src/core/shared/utils.js) rather than defining them locally. This change ensures that the utils module acts as a wrapper, attaching the shared utility methods to both the app prototype and static properties, maintaining the existing API surface while centralizing the implementation.

src/core/modules/utils · high confidence

The Vue Kitchen Sink application entry point and configuration have been established, including the main app initialization, routing definitions, and state management setup. The app now supports theme switching via URL parameters, safe-area styling for specific demos, and dark mode toggling. Key UI behaviors include closing modals, sheets, popovers, and actions on escape key press, and enabling browser history for example previews. The main view is configured with safe-area classes, a master-detail breakpoint, and conditional swipe-back behavior based on history mode.

kitchen-sink/vue/src · high confidence

The Vue Kitchen Sink demo application has been restructured to use Vite as its build tool, replacing the previous setup. This change introduces a new entry point in index.html, a Vite configuration file (vite.config.js) that sets up the Vue plugin and resolves Framework7 bundles, and includes static assets like the autocomplete language data. Users will now interact with the demo app built via this new Vite-based pipeline.

kitchen-sink/vue · high confidence

The Vue Kitchen Sink demo pages have been completely rewritten to align with the latest Framework7 Vue component API. This update introduces new demonstration pages for features such as the 404 error view, breadcrumbs, and area charts, while significantly updating existing demos for components like cards, calendars, and action sheets. Users will see modernized UI patterns, including support for new card styles (outline, raised), expanded calendar interaction modes (date range, multiple values), and improved component usage via Vue's Composition API and new event hooks.

kitchen-sink/vue/src/pages · high confidence

The Vue integration in src/vue/shared has been restructured to provide a more robust foundation for Framework7 components. This change introduces a new components-router implementation that handles page, tab, and modal component loading, ensuring correct DOM tracking and initial route prop resolution. A new plugin system is established to initialize the Framework7 instance and register the router extensions. Additionally, a suite of Vue composables (useStore, useTheme, useTooltip, useSmartSelect, useTab, useIcon, useRouteProps) and shared mixins for color, router, and action attributes are added to streamline component development and state management within the Vue ecosystem.

src/vue/shared · high confidence

The icon component now applies distinct visual styles based on the active theme. iOS-specific icons (back, forward, close, etc.) are sized at 12x20px or 20x20px with specific font glyphs, while Material Design icons are uniformly 24x24px with their own corresponding glyphs. This separation ensures that icons render correctly according to the platform's design language when the iOS or Material theme is active.

src/core/components/icon · high confidence

This release updates the Framework7 core and framework packages (React, Vue, Svelte) to version 9.2.0. It includes dependency updates for Swiper to 12.1.2, DOM7 to 4.0.6, and Skeleton Elements to 4.0.1, along with updates to build tools like Vite, Rollup, and Babel.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 31 → 32 (+1.5)
• Rubric changed (rubric-2026.09.11 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 27 → 27 (+0.0)
• Architecture 97 → 87 (-10.0)
• Maturity 60 → 60 (+0.0)
• Readiness 23 → 25 (+2.2)
• Security 55 → 72 (+17.1)
• Accessibility 31 → 31 (+0.0)
• Performance 60 (new)

• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
• Documentation: no contributor guidance (README.md)
• Documentation: no installation or build instructions (README.md)
• Documentation: no usage examples (README.md)
• High CVE: [GHSA redacted] (package-lock.json)

• Medium: security finding (details withheld)
• Outdated (npm): path-to-regexp
• Outdated (npm): swiper
• Projects may be oversized for their cohesion
• find-common-css-vars.fs.readdirSync("./src/core/components").forEach() (cognitive 22) (scripts/find-common-css-vars.js)
• find-common-css-vars.fs.readdirSync("./src/core/components").forEach() (cyclomatic 20) (scripts/find-common-css-vars.js)
• link.Link (cognitive 18) (src/react/components/link.jsx)

• 6 commits — 3 feature/other, 3 fixes

• src/core — 4 commits
• (root) — 1 commit
• src/react — 1 commit

• fix: fix(input): reset outlined input bottom margin in iOS theme
• fix: fix(login-screen): match outlined label backgrounds to login screen
• fix: fix(sheet): reserve toolbar space in default bottom sheets
• change: 9.2.0
• change: Prevent chip delete event from bubbling (#4367)
• change: feat(link): support disabled links across component frameworks

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

framework7io/framework7 was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.