ionic-team/ionic-framework
51.5
Adequate · 28 September 2026
71.2k
lines of production code
TypeScript
primary language
3
measurements over time
What this system is
This system is the Ionic Framework, a UI component library for building cross-platform mobile and web applications. It provides a comprehensive suite of native-style components, such as navigation, forms, and overlays, designed to render consistently across iOS and Material Design platforms. The codebase also includes framework-specific integrations for Angular, React, and Vue, along with tooling for migration, testing, and build optimization.
How it got here
2015–2018 — Ionic 9.0.0 modernization and component rewrite
168 changes.
This period focused on the major release of Ionic 9.0.0, which introduced breaking changes and required a comprehensive rewrite of core components to use Shadow DOM, CSS custom properties, and platform-specific theming. The work involved modernizing the framework's architecture by migrating to ESLint flat configs, updating build tooling for Angular and React, and implementing new features like sheet modals and dual-knob ranges. Extensive efforts were dedicated to aligning UI/UX with iOS and Material Design specifications while ensuring robust accessibility and testing coverage via Playwright.
2019–2022 — Comprehensive test coverage and framework modernization
146 changes.
This period focused on establishing extensive end-to-end and visual regression testing across the component library using Playwright, while introducing new components like accordion and datetime-button. It also involved significant architectural updates, including major rewrites for Vue 3 and React Router v6 integration, alongside improvements to security sanitization and native utility compatibility.
2023–2026 — comprehensive test coverage and new component features
110 changes.
This period focused on expanding end-to-end and visual regression test coverage across a wide range of core components, including form elements, overlays, and navigation utilities. It also introduced several new features such as the input password toggle, segment view, and OTP input, alongside tools for automated migration and improved accessibility handling.
Features
Add Breadcrumbs component
The new \ion-breadcrumbs\ component is now available, allowing users to display a navigational trail of links. It supports iOS and Material Design modes, handles automatic collapsing of items based on \maxItems\, \itemsBeforeCollapse\, and \itemsAfterCollapse\ props, and emits an \ionCollapsedClick\ event when the collapsed indicator is activated. The component also integrates with toolbar theming via the \in-toolbar\ and \in-toolbar-color\ classes.
core/src/components/breadcrumbs, core/src/components/progress-bar · high confidence
Add ion-item-group component
Introduces the new ion-item-group component, which acts as a container for grouping related items. The component renders as a block-level element and applies mode-specific styling (iOS and Material Design) via dedicated SCSS files and CSS variables, ensuring consistent visual presentation across themes.
core/src/components/item-group · high confidence
Add ion-item-options component for swipeable list actions
Users can now add swipeable action buttons to list items using the new \ion-item-options\ component. This component supports \start\ and \end\ sides, integrates with the existing \ion-item-sliding\ gesture system, and applies platform-specific styling for iOS and Material Design, including proper safe-area padding and border handling within lists.
core/src/components/item-options · high confidence
Add ion-note component with iOS and Material Design styling
A new ion-note component has been added to the core library, providing a text element styled according to the current platform mode. The implementation includes TypeScript logic for color handling via CSS variables and utility classes, alongside distinct SCSS files for iOS and Material Design themes that define specific font sizes and text colors. Users can now render notes with platform-appropriate aesthetics and support for custom color palettes.
core/src/components/breadcrumb, core/src/components/note · high confidence
Add ion-segment-content component for segment view scrolling
A new \ion-segment-content\ component has been introduced to support the \ion-segment-view\ architecture. This component acts as a scrollable container for segment content, utilizing CSS scroll-snap properties to ensure items align correctly during horizontal navigation. It includes specific styling to hide scrollbars across various browsers and applies a \min-height\ workaround to resolve a Safari/WebKit bug where dynamic height elements were excluded from the scrollable area, ensuring content scrolls to the correct position even when height is not explicitly set.
core/src/components/segment-content · high confidence
Add ion-text component for colored text wrappers
A new \ion-text\ component has been introduced to allow wrapping content with specific color styling. It supports the standard Ionic color palette (primary, secondary, tertiary, success, warning, danger, light, medium, dark) via a \color\ prop, which is reflected as an attribute for framework compatibility. The component uses Shadow DOM and applies mode-specific classes (ios/md) while respecting the application's color palette through the \createColorClasses\ utility.
core/src/components/text · high confidence
Add skeleton-text component with animated shimmer support
A new \ion-skeleton-text\ component is introduced to display loading placeholders. It supports an \animated\ prop that enables a shimmer effect via CSS animations, and exposes CSS custom properties (\--background\, \--border-radius\) to allow users to customize the appearance of the skeleton text.
core/src/components/skeleton-text · high confidence
Angular package scaffolding and build tooling
The \packages/angular\ directory now includes the foundational structure for the Angular integration, featuring a new \.prettierignore\ to exclude generated proxies and build artifacts, an \eslint.config.js\ for linting, and a \README.md\ documenting the project layout (common, standalone, lazy) and testing procedures. Build and verification scripts have been added to handle CSS synchronization, schematics compilation, and validation of exports and change detection strategies. Additionally, the \schematics\ directory contains the implementation for the \ng add\ workflow, which configures the Angular workspace, installs dependencies, and sets up Ionic styles and providers.
packages/angular · high confidence
Checkbox component rewritten with shadow DOM, new props, and improved accessibility
The checkbox component has been completely rewritten to use the Shadow DOM, introducing a suite of new features and behavioral changes. Users can now utilize new properties including \indeterminate\ for visual state, \helperText\ and \errorText\ for validation feedback, and \required\ for accessibility signaling. The component now supports \ionFocus\ and \ionBlur\ events, allows usage outside of \ion-item\ containers, and exposes CSS parts (\container\, \mark\, \label\, \supporting-text\, \helper-text\, \error-text\) for deeper styling. Accessibility has been significantly improved by using a native hidden input to ensure correct screen reader announcements and proper form integration, while visual styles have been updated to match iOS and Material Design specifications with new CSS variables for customization.
core/src/components/checkbox · high confidence
Complete rewrite of the datetime component with new styling, API, and features
The datetime component has been completely rewritten from scratch, introducing a new architecture that supports both grid-style and wheel-style pickers. This change brings native iOS 15 time picker styling, support for multiple date selection, and customizable date highlighting via CSS parts and variables. The component now exposes a richer API including \hourCycle\, \formatOptions\, and \showAdjacentDays\, while fixing numerous bugs related to scrolling, RTL layout, and accessibility. The underlying implementation uses Stencil's shadow DOM with separate SCSS files for iOS and Material Design modes, ensuring consistent theming and performance.
core/src/components/datetime · high confidence
Experimental focus manager for improved accessibility during navigation
An experimental focus controller has been added to manage focus within views, ensuring that assistive technologies are properly informed of navigation state changes in single-page applications. When enabled via the \focusManagerPriority\ configuration, the system automatically moves focus to specific semantic elements (such as headings, banners, or main content) upon view transitions, and restores the user's previous focus location when navigating back. This change also includes end-to-end tests verifying this behavior for both generic HTML elements and Ionic components.
core/src/utils/focus-controller · high confidence
Initial implementation of the infinite-scroll-content component
The \ion-infinite-scroll-content\ component is now available, providing the visual loading indicator (spinner and text) displayed during infinite scroll operations. It supports platform-specific styling for iOS and Material Design modes, allows customization of the spinner type and loading text via props, and includes built-in sanitization for HTML content in the loading text to ensure security.
core/src/components/badge, core/src/components/infinite-scroll-content · high confidence
Initial implementation of the ion-refresher-content component
The \ion-refresher-content\ component has been added to the core library, providing the UI elements for pull-to-refresh interactions. It supports configurable icons and text for both the pulling and refreshing states, with logic to automatically select appropriate defaults (such as native iOS spinners or Material Design icons) based on the device and mode. The component also introduces support for custom HTML content in text labels, controlled by the \innerHTMLTemplatesEnabled\ configuration flag, and ensures accessibility by marking decorative icons with \aria-hidden\.
core/src/components/backdrop, core/src/components/infinite-scroll, core/src/components/refresher-content · high confidence
Introduce @ionic/angular-server for Server-Side Rendering
The new @ionic/angular-server package provides an Angular module (IonicServerModule) that enables Server-Side Rendering (SSR) for Ionic components. It registers a provider that hydrates the document during the BEFORE\_APP\_SERIALIZED lifecycle, automatically handling shadow DOM serialization fallbacks for environments that lack native attachShadow support. The module also excludes specific non-serializable components (such as overlays, navigation, and tabs) from hydration and applies necessary Angular transition attributes to styles.
packages/angular-server · high confidence
Introduce @ionic/migrate tool for automated v8 to v9 upgrades
The \packages/migrate\ directory now contains the \@ionic/migrate\ CLI tool, which automates the migration of Ionic Framework applications from version 8 to version 9. The tool scans the project to detect the installed framework (Angular, React, Vue, or vanilla) and applies safe, deterministic edits—such as updating dependency ranges in \package.json\, rewriting imports, and adjusting \browserslist\ entries—while generating a checklist of manual steps for complex changes. It supports options for dry runs, CI checks, and experimental migrations, and uses \ts-morph\ for TypeScript/TSX transformations and a quote-aware scanner for HTML/Vue templates to ensure edits are precise and style-consistent.
packages/migrate · high confidence
Introduce @ionic/vue-router package with Vue Router 5 integration
The @ionic/vue-router package is now a standalone module that wraps Vue Router 5 to provide Ionic-specific navigation features, including tab-aware history stacks, view stack management, and animation control. This change upgrades the underlying router to Vue Router 5, bringing new capabilities like webHashHistory and memoryHistory support, while maintaining compatibility with Ionic's tab and navigation APIs. The package includes its own build configuration (Rollup), linting (ESLint), and test runner scripts, and is designed to work seamlessly with @ionic/vue applications.
packages/vue-router · high confidence
Introduce ion-accordion component with theming and animation support
Adds the new ion-accordion component, allowing users to create collapsible content sections. The component supports both iOS and Material Design themes via dedicated SCSS files, includes configurable transition animations (with an option to disable them), and handles state management for expanded/collapsed states. It integrates with ion-accordion-group for coordinated behavior and respects accessibility standards by making headers keyboard-navigable buttons.
core/src/components/accordion · high confidence
Introduce ion-accordion-group component
Adds the new ion-accordion-group component, which manages a collection of ion-accordion elements. This component exposes properties for controlling expansion behavior (compact or inset), enabling multiple simultaneous expansions, and toggling animations. It emits an ionChange event only when the value changes due to user interaction, not when set programmatically, and includes keyboard navigation support restricted to accordion headers to prevent interference with internal form controls.
core/src/components/accordion-group · high confidence
Introduce ion-item-option component with theming and shadow parts
The \ion-item-option\ component is now available, allowing users to define swipeable action buttons within \ion-item-sliding\. It supports both iOS and Material Design modes, with distinct styling for each (e.g., uppercase text in MD, specific font sizes). The component exposes CSS custom properties (\--background\, \--color\) for theming and shadow parts (\native\, \inner\, \container\) to allow deep customization of the internal button structure. It handles disabled states, expandable layouts, and includes ripple effects in Material Design mode.
core/src/components/item-option · high confidence
Introduce ion-label component with stacked, floating, and fixed positioning modes
The new ion-label component allows labels to be positioned as fixed, stacked, or floating within ion-item containers, providing better alignment and interaction states for inputs and textareas. The component supports iOS and Material Design modes, with specific styling for focused, invalid, and touched states, as well as dynamic font scaling and text wrapping. It integrates with the ion-item component to manage color inheritance and interactive states, ensuring consistent visual feedback across platforms.
core/src/components/label · high confidence
Introduce ion-picker-column-option component with platform-specific styling
A new \ion-picker-column-option\ component has been added to handle individual options within a picker column. This component manages the visual state of options, including disabled states and active highlighting, with specific styling logic for iOS and Material Design modes. The Material Design styles ensure that the active option is correctly colored even when the picker column is nested inside the shadow DOM of a datetime component, addressing reliability issues with WebKit's element detection. The component also handles accessibility labels and communicates value changes back to the parent picker column.
core/src/components/picker-column-option · high confidence
Introduce ion-select-modal component for select options
Adds the new \ion-select-modal\ component, which renders the list of options for a select popover or modal interface. This component supports both single-selection (radio) and multi-selection (checkbox) modes, allows for rich option content (start/end content, descriptions), and provides platform-specific styling for iOS and Material Design. It also includes keyboard accessibility, allowing users to dismiss the modal by pressing Enter or Space on a selected option, and exposes a customizable \cancelText\ prop for the close button.
core/src/components/select-modal · high confidence
Introduce large and small title size variants
The title component now supports explicit size variants via the new \size\ property, accepting 'large' or 'small' values. This allows users to render large iOS-style navigation titles with dynamic font scaling and specific padding, or compact small titles, in addition to the default sizing. The component automatically applies the corresponding CSS classes (e.g., \title-large\, \title-small\) to handle layout, font weight, and text overflow behavior for each mode.
core/src/components/title · high confidence
Introduce new Chip component with disabled state and theming support
Adds the \ion-chip\ component, enabling users to display interactive labels, icons, or avatars. The component supports a \disabled\ property to prevent user interaction and applies visual feedback via opacity and cursor changes. It features platform-specific styling for iOS and Material Design, including outline variants, color theming via CSS custom properties, and responsive font sizing. The component is rendered with Shadow DOM and includes ripple effects for Material Design mode.
core/src/components/chip · high confidence
Introduce unified ion-nav-link component for navigation actions
A new \ion-nav-link\ component has been added to \core/src/components/nav-link\, consolidating previous separate navigation utilities into a single element. This component accepts a \routerDirection\ prop (supporting 'forward', 'back', and 'root') and an optional \component\ prop to specify the target page, allowing developers to wrap any clickable element (like a button) to trigger navigation within an \ion-nav\. The implementation includes a utility function that delegates to the underlying \nav.push\, \nav.pop\, or \nav.setRoot\ methods, ensuring consistent behavior for forward, backward, and root navigation transitions.
core/src/components/nav-link · high confidence
Introduction of the ion-textarea component
A new ion-textarea component is introduced, providing a multi-line text input control with support for iOS and Material Design modes. The component features auto-growing height, floating and stacked label placements, and customizable fills (solid and outline) for Material Design. It includes start and end slots for adding icons or buttons, accessibility improvements such as proper ARIA labeling and screen reader announcements, and event handling for user input and changes. The component is designed to work both inside and outside of ion-item containers, with comprehensive styling and theming options via CSS custom properties.
core/src/components/ripple-effect, core/src/components/textarea · high confidence
Item component receives comprehensive styling and interface updates
The ion-item component has been updated with new CSS variables and SCSS structure to support improved layout, theming, and interaction states. This includes dedicated iOS and Material Design style sheets with specific variables for padding, borders, and slot margins, as well as a new CounterFormatter interface for customizing counter text display. The component now supports hover and focused states, better handling of slotted content like avatars and icons, and improved accessibility through proper ARIA attribute mirroring.
core/src/components/item · high confidence
New CSS utility classes and core styles for layout and theming
This change introduces a new set of CSS utility classes and core styles to \core/src/css\. It adds responsive display utilities (\.ion-display-{breakpoint}-{value}\) and flexbox utilities (\.ion-flex-{breakpoint}-{value}\) for controlling layout, alignment, and sizing across breakpoints. It also includes padding and margin utilities (\.ion-padding\, \.ion-margin\), text alignment and transformation classes, and float utilities. Additionally, it establishes core theming by generating CSS variables for all defined colors and sets up global structural styles, including a CSS reset (normalize), typography defaults, and modal-specific adjustments for iOS safe areas and card-style modals.
core/src/css · high confidence
New Floating Action Button (FAB) component with safe-area and edge positioning
A new \ion-fab\ component has been introduced to manage Floating Action Button containers. It supports horizontal and vertical alignment (start, end, center, top, bottom) and includes specific logic for 'edge' positioning, allowing the button to sit on the header or footer edges. The styling explicitly accounts for safe-area insets on both left and right sides to ensure correct placement on devices with notches or dynamic islands, and adjusts slotted button and list margins to prevent visual gaps when placed at edges.
core/src/components/fab · high confidence
New HTML sanitization utilities for safe innerHTML rendering and DOM tree cleaning
The core sanitization module now exports \sanitizeDOMString\ and \sanitizeDOMTree\ to handle untrusted HTML safely. \sanitizeDOMString\ parses an HTML string into a detached DOM, strips blocked tags and non-allowed attributes, and scrubs script-scheme URLs; it specifically detects and discards content containing \onload\ handlers (case- and space-insensitively) to prevent execution during parsing. \sanitizeDOMTree\ allows in-place sanitization of existing DOM subtrees using a wider allowlist for rich content, preserving component-specific attributes while removing dangerous ones like \style\ and event handlers. These utilities provide a robust foundation for rendering untrusted content via \innerHTML\ without exposing users to XSS risks.
core/src/utils/sanitization · high confidence
New Input OTP component for one-time password entry
Adds the \ion-input-otp\ component, enabling users to enter one-time passwords across multiple input boxes. The component supports configurable lengths, input types (text or number), custom character patterns, and visual separators. It includes accessibility features such as proper ARIA labels and focus management, along with styling options for size, shape, and fill variants to match application themes.
core/src/components/input-otp · high confidence
New RTL direction detection utility
Added a new \isRTL\ utility function in \core/src/utils/rtl\ that determines if an element's direction is right-to-left by checking the nearest ancestor's \dir\ attribute (ignoring \auto\ or empty values) and falling back to the document's direction, defaulting to left-to-right if none is set.
core/src/utils/rtl · high confidence
New core build and deployment scripts
Added several new scripts to the core build system: an API spec generator to export component metadata, a treeshaking checker to verify bundle optimization, a script to update README unpkg links, a clean utility, and a Vercel preview build script that builds and deploys core tests alongside Angular, React, and Vue framework test apps. Also added a Docker script for running Playwright tests in headed mode and a README redirect.
core/scripts · high confidence
New core theme infrastructure and utility functions
The theme system has been restructured with new foundational files in core/src/themes. This introduces global SCSS utility functions for dynamic font sizing (supporting min/max clamping), color manipulation (generating shades, tints, and alpha variations), and string processing. It also establishes the global variable definitions for breakpoints, z-indexes, and form control styles, alongside the default color palettes and specific iOS and Material Design theme variable sets.
core/src/themes · high confidence
New dark and high-contrast theme palettes
The core CSS palettes directory now includes dedicated files for dark and high-contrast themes, providing users with improved visual options. The new \dark\ palette defines base colors and platform-specific styles for iOS and Material Design, while the \high-contrast\ variants (light and dark) introduce increased contrast for text and item borders to enhance readability. These themes are available via class-based activation (e.g., \.ion-palette-dark\) or system preference detection (e.g., \prefers-color-scheme: dark\), allowing applications to easily adopt these accessibility-focused color schemes.
core/src/css/palettes · high confidence
New floating-point utility functions to prevent rounding errors
Added \getDecimalPlaces\ and \roundToMaxDecimalPlaces\ utilities to handle floating-point precision issues. These functions allow components to round calculation results to the same number of decimal places as their input references, preventing common floating-point errors (e.g., 3.1000000004) in arithmetic operations.
core/src/utils/floating-point · high confidence
New form utility controllers for click handling, label positioning, and value comparison
The \core/src/utils/forms\ module now includes several new internal utilities to improve form control behavior. A \ClickController\ prevents duplicate click events when slotted content is clicked inside components like \ion-input\ and \ion-select\. A \StartContainerController\ dynamically adjusts label positioning for outline-style inputs to account for start-slot content width. A \NotchController\ calculates explicit notch widths for slotted label content in outline inputs. Additionally, \compare-with-utils\ provides logic for custom value comparison in selection controls, and \item-multiple-inputs\ observes class changes on parent items to trigger re-renders for controls with multiple inputs.
core/src/utils/forms · high confidence
New gesture handling for sheet and card-style modals
This change introduces dedicated gesture controllers for sheet and card-style modals, enabling native-like swipe interactions. Sheet modals now support multi-breakpoint dragging with a spring-physics animation, dynamic footer positioning that moves with the sheet to prevent layout shifts, and proper handling of safe areas and status bar colors. Card-style modals gain a swipe-to-close gesture that respects content scroll states, prevents dismissal when a refresher is present, and correctly manages focus trapping and backdrop interactivity based on the current breakpoint.
core/src/components/modal/gestures · high confidence
New gesture system with swipe-to-back and button-active support
The core gesture utilities have been replaced with a new implementation that introduces a dedicated swipe-to-back gesture (with RTL support and priority over other horizontal swipes) and a new button-active gesture that provides haptic feedback and visual activation states for touch targets. The new system also includes a gesture controller for managing priorities and scroll blocking, a pan recognizer, and robust pointer event handling that ensures gestures fire correctly even if the target element is removed from the DOM.
core/src/utils/gesture · high confidence
New input-password-toggle component for password visibility control
A new \ion-input-password-toggle\ component has been added, allowing users to reveal or hide password text within an \ion-input\. The component renders a clear, round button with eye icons that toggle the input's type between 'password' and 'text'. It supports custom icons via \showIcon\ and \hideIcon\ props, inherits mode and color from the parent input, and includes accessibility features such as \aria-label\ and \aria-pressed\ attributes that update dynamically. The toggle is automatically hidden when the parent input is disabled or readonly.
core/src/components/input-password-toggle · high confidence
New ion-buttons component for toolbar button grouping
Added the \ion-buttons\ component, which acts as a container for grouping buttons within toolbars. It provides platform-specific styling for iOS and Material Design modes, handling layout, padding, margins, and color inheritance (using toolbar theme colors) for default, solid, outline, and clear button variants. The component also supports a \collapse\ prop to hide buttons when the parent toolbar collapses.
core/src/components/buttons · high confidence
New ion-datetime-button component for linking datetime inputs to overlays
A new \ion-datetime-button\ component has been added, providing a UI button (or pair of buttons for date and time) that displays the current value of an associated \ion-datetime\ and opens it in an overlay (modal or popover) when clicked. The component links to a specific \ion-datetime\ instance via its \datetime\ ID, updates its displayed text when the datetime value changes, and handles accessibility states like \aria-expanded\ and visual highlighting based on whether the datetime is visible on screen. It supports both iOS and Material Design styling, respects the datetime's presentation mode (date, time, or date-time), and includes error logging if an invalid or missing datetime reference is provided.
core/src/components/datetime-button · high confidence
New ion-fab-list component for expanding FAB button groups
Added the \ion-fab-list\ component, which allows a group of \ion-fab-button\ elements to expand and collapse relative to a main Floating Action Button. The component supports positioning on the start, end, top, or bottom sides via the \side\ prop and manages the animated appearance of child buttons through the \activated\ prop, using staggered timeouts for a smooth reveal effect.
core/src/components/fab-list · high confidence
New ion-footer component with iOS fade and translucent modes
The footer component is now available, providing platform-specific styling for iOS and Material Design. On iOS, users can enable a translucent background that allows content to scroll behind the footer (when combined with a fullscreen content area) and a 'fade' collapse effect that gradually hides the footer as the user scrolls to the bottom of the page. The component also handles safe-area padding at the bottom and manages visibility during keyboard open/close events to prevent layout shifts.
core/src/components/footer · high confidence
New ion-route-redirect component for URL redirection
Added the ion-route-redirect component, which allows users to define URL redirection rules within the router. The component accepts 'from' and 'to' properties to specify the source and destination paths, triggering a virtual redirect inside the ion-router context without a browser refresh. It emits an ionRouteRedirectChanged event to notify the router of any changes to the redirect rule.
core/src/components/route-redirect · high confidence
New ion-router-link component for router-aware navigation
A new \ion-router-link\ component has been introduced to handle navigation within the Ionic router. It wraps an anchor tag and intercepts clicks to trigger router transitions, supporting properties for \href\, \target\, \rel\, \routerDirection\, and \routerAnimation\. The component includes default styling for background and text color, allowing users to integrate router-based navigation with standard link semantics.
core/src/components/router-link · high confidence
New ion-segment-view component for swipeable segment content
The new ion-segment-view component provides a horizontally scrollable container for segment content, enabling users to swipe between sections in addition to using segment buttons. It includes a swipeGesture property to disable swiping, handles RTL layouts correctly, and emits scroll events to track position. The component also supports programmatic navigation via the setContent method and ensures proper synchronization with associated segment buttons.
core/src/components/segment-view · high confidence
New menu-toggle component with auto-hide and ESM menu controller
The menu-toggle component has been introduced to wrap content and toggle a specific menu when clicked. It now uses the ESM menuController for menu interactions and supports an auto-hide feature that automatically hides the toggle when the associated menu is not active. The component also listens for split pane visibility changes to adjust its visibility accordingly.
core/src/components/menu-toggle · high confidence
New picker-column component with accessibility and scroll improvements
The picker-column component has been introduced to handle individual columns within a picker, featuring enhanced accessibility support through an assistive focusable element for screen reader navigation and custom aria-label support. It implements scroll-snap behavior for smoother selection, fixes iOS-specific shadow DOM bugs, and ensures correct value commitment on outside presses. The component also supports prefix/suffix slots for flexible content layout and includes haptic feedback for iOS wheel pickers.
core/src/components/picker-column · high confidence
New script to calculate Lerna dev build patch versions
A new Node.js script at .scripts/bump-version.js has been added to support the dev-build workflow. When executed, it reads the current version from lerna.json, increments the patch number using the semver library, and outputs the resulting version string, enabling automated generation of dev build version numbers.
.scripts · high confidence
New segment component implementation with segment-view integration
The segment component has been rewritten to support the new \ion-segment-view\ architecture, allowing it to connect to a segment view in the \componentDidLoad\ callback for synchronized scrolling and state management. This update introduces a grid-based layout with scrollable support, adds a \swipeGesture\ property to control drag interactions, and ensures the \ionChange\ event only emits on user-committed actions rather than programmatic changes. The component now uses a new \SegmentValue\ type that accepts both strings and numbers, and includes improved styling for iOS and Material Design modes with specific toolbar integrations.
core/src/components/segment · high confidence
New tab-bar component with keyboard handling and theming
The tab-bar component has been implemented to manage tab navigation, featuring automatic hiding when the keyboard is open (unless positioned at the top) and proper safe-area padding support. It includes iOS-specific translucent styling with backdrop-filter and MD design alignment, while exposing color customization via CSS custom properties and emitting change events only when a valid selected tab is defined.
core/src/components/tab-bar · high confidence
New utility modules for accessibility, overlays, and platform detection
The core/src/utils directory now includes several new utility modules that enhance accessibility, overlay management, and platform detection. The attribute-controller.ts module provides a mechanism to copy and watch ARIA attributes from host elements to shadow DOM children, ensuring screen readers receive up-to-date information. The focus-trap.ts and focus-visible.ts modules improve keyboard navigation and focus management within overlays and components. The overlays.ts module centralizes overlay creation, dismissal, and focus trapping logic, while the hardware-back-button.ts module adds support for hardware back button events, including experimental CloseWatcher API support. The platform.ts module enhances device detection with improved iPad and tablet detection logic. Additionally, the config.ts module defines the IonicConfig interface with various configuration options for animations, overlays, and platform behavior.
core/src/utils · high confidence
Radio component rewritten with Shadow DOM and CSS variables
The radio component has been completely rewritten to use Shadow DOM and CSS variables, replacing the previous implementation. This change introduces new CSS custom properties (such as --color, --color-checked, --border-radius, and --inner-border-radius) for easier customization, adds support for shadow parts (container, label, mark) for styling internal elements, and implements modern layout behaviors including block display when justify or alignment properties are set. The component now handles keyboard focus indicators, disabled states, and label placement (start, end, fixed, stacked) natively within the shadow tree, ensuring consistent styling across iOS and Material Design modes while improving accessibility and form control integration.
core/src/components/radio · high confidence
Radio group component implementation with validation and selection features
The radio-group component now supports \allowEmptySelection\ to let users deselect the current option, a \compareWith\ property for custom object comparison logic, and \helperText\/\errorText\ properties for form validation feedback. The \ionChange\ event is configured to emit only on user-initiated changes, excluding programmatic updates, and the component ensures proper participation in native form submissions.
core/src/components/radio-group · high confidence
Redesigned Toggle component with iOS 17/18 styling and accessibility improvements
The toggle component has been completely rewritten to align with iOS 17/18 design specifications and improve accessibility. The visual appearance now features updated track and handle styles for both iOS and Material Design modes, including new CSS variables for customization (e.g., --track-background, --handle-border-radius). Accessibility is significantly enhanced by using a native hidden input for better screen reader support, adding proper focus indicators, and supporting on/off labels. The component also introduces new properties such as \helperText\, \errorText\, \required\, and \enableOnOffLabels\, along with improved event handling where \ionChange\ only emits on user interaction.
core/src/components/toggle · high confidence
Redesigned ion-input component with new fill styles and slot support
The ion-input component has been completely rewritten to support new Material Design fill styles (solid and outline) and experimental start/end slots for adding slotted buttons. The component now exposes extensive CSS custom properties for theming, including dedicated variables for placeholder styling, highlight colors, and border configuration. Accessibility and behavior have been improved with better screen reader announcements for validation errors, proper focus management when clicking the clear button, and support for enterkeyhint and debounce controls on the ionInput event.
core/src/components/input · high confidence
Refresher component rewritten with native support and new events
The refresher component has been completely rewritten to support native pull-to-refresh gestures on both iOS and Material Design platforms, replacing the previous implementation. This update introduces new \ionPullStart\ and \ionPullEnd\ events for better gesture tracking, adds a \pullFactor\ property to control pull speed, and includes platform-specific styling for native spinners and animations. The component now handles native refresher detection and cleanup more robustly, ensuring correct behavior in modals, side menus, and with custom scroll targets.
core/src/components/refresher · high confidence
Route component now supports navigation hooks for enter/leave control
The \ion-route\ component has been updated to include \beforeEnter\ and \beforeLeave\ props, allowing developers to intercept navigation events. These hooks can return a boolean to allow or cancel navigation, or an object with a \redirect\ property to redirect the user to a different path. This change introduces a new \route-interface.ts\ file defining the \NavigationHookCallback\ and \NavigationHookResult\ types to support this behavior.
core/src/components/route · high confidence
Router now supports relative path navigation
The router's push method now accepts relative paths (e.g., paths starting with '.'). When a relative path is provided, the router resolves it against the current URL, allowing for more flexible navigation patterns without requiring absolute paths.
core/src/components/router · high confidence
Segment button component restructured with new layout options and CSS variables
The segment button component has been refactored to support new layout configurations (icon-top, icon-start, icon-end, icon-bottom, icon-hide, label-hide) and extensive CSS custom properties for styling. This change introduces a new interface file defining layout types and separates iOS and Material Design styles into dedicated SCSS files with corresponding variable files. The component now uses a native button element with shadow DOM, improving accessibility and theming consistency across platforms.
core/src/components/segment-button · high confidence
Select component modernized with new interfaces, styling, and rich content support
The select component has been refactored to support modern usage patterns, including the ability to be used outside of ion-item and the addition of a 'modal' interface option. It now features improved accessibility with correct ARIA attributes and screen reader announcements, supports rich content in options (icons, images, custom HTML), and introduces new CSS parts and custom properties for deeper styling control. The component also adds helperText and errorText properties for better form validation feedback, and improves performance by only emitting ionChange on user-initiated value changes.
core/src/components/select · high confidence
Select options now support rich content and layout customization in overlays
The ion-select-option component has been updated to support rich content (such as icons, images, and descriptions) within select overlays like alerts, popovers, and modals. Users can now customize the layout of these options using new props: labelPlacement controls whether the label appears to the start or end of the selection control, and justify controls the horizontal alignment of the label and control. The component also introduces named slots (start, end) for adding custom content, with specific styling rules to ensure visual consistency across iOS and Material Design modes.
core/src/components/select-option · high confidence
Sheet modals with breakpoints, drag gestures, and safe-area handling
The modal component now supports sheet-style presentations with configurable breakpoints, allowing modals to snap to specific heights (e.g., 25%, 50%, 100%) and be dragged between them. Users can control this behavior via new properties like \breakpoints\, \initialBreakpoint\, \backdropBreakpoint\, and \expandToScroll\. The component includes native swipe-to-close gestures, a draggable handle for sheet modals, and proper handling of device safe areas (notches) to prevent content overlap. Accessibility is improved with correct focus trapping and screen reader support, while visual styling adapts to iOS and Material Design specifications for card and sheet variants.
core/src/components/modal · high confidence
Split pane now supports CSS custom properties for theming
The split pane component has been converted to use Shadow DOM and now exposes CSS custom properties (\--border\, \--side-min-width\, \--side-max-width\, and \--side-width\) that allow users to customize the border style and the minimum/maximum width of the side pane. These properties are defined in the component's core styles and themed per platform (iOS and Material Design) via new SCSS variable files, enabling consistent styling across modes without modifying component internals.
core/src/components/split-pane · high confidence
Tabs component now supports standalone navigation without a router
The ion-tabs component can now function without an ion-router, allowing for basic tab-based navigation in vanilla JavaScript projects or when the router is not present. This is achieved by detecting the absence of an ion-router or ion-router-outlet and falling back to internal selection logic. The component exposes new methods like getSelected() and updated event handling (ionTabsWillChange/ionTabsDidChange) to manage state in this standalone mode, while still integrating with the router when available.
core/src/components/tabs · high confidence
Architecture
Animation utility refactored with new interfaces and cubic-bezier support
The animation utility in core/src/utils/animation has been refactored to introduce a formal Animation interface (animation-interface.ts) defining the public API, including lifecycle methods like play, pause, stop, and destroy, as well as property setters. A new utility module (animation-utils.ts) handles style property setting and class management, while a new cubic-bezier.ts module provides experimental mathematical support for converting cubic-bezier easing curves. The main animation implementation (animation.ts) has been updated to use these new types and utilities, improving type safety and feature detection for Web Animations.
core/src/utils/animation · high confidence
Refactored datetime utility logic into modular, reusable functions
The internal logic for the datetime component has been reorganized from a monolithic structure into distinct, focused utility modules (comparison, data, format, helpers, manipulation, parse, state, and validate). This change improves code maintainability and testability by separating concerns such as date comparison, ISO parsing, hour cycle handling, and UI state generation. For users, this refactor underpins several existing and new behaviors, including more robust handling of min/max date boundaries, support for various hour cycles (h11, h12, h23, h24), and improved localization of day periods and calendar layouts, without altering the public API.
core/src/components/datetime/utils · high confidence
Behavioural changes
Action Sheet component restructured with new interface and theming
The Action Sheet component has been refactored to align with the Material Design specification and improve accessibility. The component now exposes a new \ActionSheetButton\ interface that supports a \disabled\ state, allowing buttons to be non-interactive (except for 'cancel' role buttons). Theming has been updated to use CSS custom properties for button states (activated, hovered, focused, selected) and includes specific iOS and Material Design styles, such as translucent backgrounds for iOS and proper safe-area handling for both modes. Accessibility improvements include the use of the 'radio' role for selectable options and correct ARIA attributes for keyboard navigation.
core/src/components/action-sheet · high confidence
Action sheet animations now use the new animation utility API
The iOS and Material Design action sheet enter and leave animations have been rewritten to use the new \createAnimation\ utility. This change updates the animation implementation to use the new API, ensuring consistent behavior for backdrop opacity and wrapper sliding transitions across both design languages.
core/src/components/action-sheet/animations · high confidence
Alert component redesigned with new theming, layout, and input capabilities
The Alert component has been updated to follow the latest iOS and Material Design specifications, featuring distinct styling for each platform (including translucent backgrounds and specific border treatments). It now supports a wider variety of input types, including text fields, checkboxes, radio buttons, and textareas, with improved handling for long text wrapping and vertical button layouts. Additionally, the component allows passing arbitrary HTML attributes to the host element, individual alert buttons, and inputs, enabling deeper customization.
core/src/components/alert · high confidence
Avatar component restructured with theme-specific styling and CSS variables
The avatar component has been refactored to support distinct iOS and Material Design themes using separate SCSS files (avatar.ios.scss, avatar.md.scss) and their corresponding variable definitions. The iOS theme sets the avatar to 48x48 pixels, while the Material Design theme uses 64x64 pixels, both with a 50% border radius. The component now utilizes CSS custom properties (specifically --border-radius) for styling, allowing for easier customization. The underlying implementation uses Stencil's shadow DOM and implements the ComponentInterface, ensuring consistent behavior across platforms while maintaining the ability to slot in images or other content.
core/src/components/avatar · high confidence
Back button component rewritten with Shadow DOM and CSS variables
The back button component has been refactored to use Shadow DOM, replacing the previous implementation. This change introduces extensive CSS variable customization for styling (such as background, color, border-radius, and ripple effects) and exposes new shadow parts (native, icon, text) for deeper styling control. The component now inherits ARIA attributes from its host element for better accessibility, supports dynamic font scaling, and correctly handles RTL icon flipping. Visual updates include specific iOS and Material Design styles, with the iOS mode now using a chevron icon by default and the MD mode using an arrow icon, along with improved hover and focus states.
core/src/components/back-button · high confidence
Card component restructured with Shadow DOM and native button/anchor support
The Card component has been refactored to use Shadow DOM, introducing distinct iOS and Material Design styles via new SCSS files. It now supports a 'button' mode that renders a native HTML button or anchor element, enabling direct navigation via href, click handling, and ripple effects on Material Design. The component also exposes CSS custom properties for theming and ensures accessibility by reflecting aria-labels to the inner interactive element.
core/src/components/card · high confidence
Card header now uses Shadow DOM with platform-specific styling
The ion-card-header component has been refactored to use Shadow DOM, isolating its styles and ensuring consistent rendering across browsers. This change introduces distinct visual behaviors for iOS and Material Design modes: iOS headers now support a translucent background effect (when backdrop-filter is available) and reverse the order of title and subtitle elements, while Material Design headers apply specific padding and spacing for slotted content. The component also now supports a 'color' prop for theming and a 'translucent' prop to enable the iOS glass-morphism effect.
core/src/components/card-header, core/src/components/card-subtitle, core/src/components/card-title · high confidence
Deprecation of ion-img component
The ion-img component is now deprecated and will be removed in Ionic v10. Users should migrate to the native HTML \<img\> element with the loading="lazy" attribute. The component still functions but emits a console warning upon loading. It supports lazy loading via IntersectionObserver (with a setTimeout fallback for older browsers), emits ionImgWillLoad, ionImgDidLoad, and ionError events, and allows styling the inner image via the 'image' part.
core/src/components/img · high confidence
FAB Button component rewritten with CSS variables and new properties
The FAB button component has been refactored to use CSS custom properties for styling, allowing users to customize appearance via variables like --background, --color, and --box-shadow. New features include a closeIcon property to display a close icon when the button is activated, a size property to set the button to 'small', and support for translucent mode on iOS. The component also now properly handles form submission by injecting a hidden native button, ensuring submit and reset types work correctly within Shadow DOM.
core/src/components/fab-button · high confidence
Grid component refactored to use Shadow DOM and CSS variables
The ion-grid component has been updated to render within the Shadow DOM and utilize CSS custom properties for styling, allowing users to customize grid padding and fixed widths via properties like --ion-grid-padding and --ion-grid-width. This change also introduces an ion-no-padding class that removes padding from the grid and its immediate child columns, and adds flex styling to ensure the grid renders correctly inside ion-item elements.
core/src/components/grid, core/src/components/thumbnail · high confidence
Improved iOS contenteditable selection and new status bar padding controls
The ion-app component now ensures that contenteditable elements remain selectable on iOS devices by explicitly setting user-select: text, resolving a WebKit issue where global user-select: none prevented editing. Additionally, a new \_forceStatusbarPadding configuration option allows developers to force a 20px safe-area top padding on the app container via the .force-statusbar-padding class, and the component dynamically initializes platform-specific utilities like tap-click, status tap, and hardware back button handling on load.
core/src/components/app · high confidence
Improved lazy-loading reliability and performance for ion-tab
The ion-tab component now implements a caching mechanism for lazy-loaded components, ensuring that the component is attached only once even if setActive is called multiple times or concurrently. Additionally, if a lazy-load attempt fails, the component can be retried on subsequent activations, preventing permanent failure states. These changes improve performance by avoiding redundant attachments and increase robustness by handling transient load errors gracefully.
core/src/components/tab · high confidence
Input shims now disable input blurring by default
The input-shims utility has been updated to disable the input blurring feature by default (configurable via the \inputBlurring\ config option). This change reflects an evaluation that the utility may no longer be necessary and could be removed in a future release, though developers can temporarily re-enable it if needed. The module continues to provide scroll assist and caret hiding functionalities for iOS and Android platforms.
core/src/utils/input-shims · high confidence
Introduce configurable log level filtering for Ionic warnings and errors
A new logging utility has been added to core/src/utils/logging that allows developers to control the verbosity of Ionic's console output via a \logLevel\ configuration option. The implementation defines four levels (OFF, ERROR, WARN, DEBUG) and ensures that warnings and errors are only printed to the console if the configured level permits it, effectively suppressing noisy diagnostic messages when a higher threshold is set.
core/src/utils/logging · high confidence
Introduce dedicated Select Popover component with rich content and multi-select support
The select popover UI is now implemented as a dedicated \ion-select-popover\ component, replacing the previous overlay-based approach. This change introduces a new \SelectPopoverOption\ interface and enables rich content features (start/end content, descriptions) for individual options, allowing for more detailed and styled selection lists. It also adds native support for multiple value selection via checkboxes, while maintaining single-selection behavior with radio buttons. The component includes specific styling for iOS and Material Design modes, handles keyboard navigation (Enter key), and ensures proper scrolling within the popover container.
core/src/components/select-popover · high confidence
Introduce iOS and Material Design themes for card content
The card content component now supports distinct iOS and Material Design (MD) visual styles. Users will see platform-specific padding, font sizes, and line heights applied automatically based on the current mode, with specific adjustments such as removing top padding when content follows a card header. This change aligns the card content appearance with the respective design language guidelines.
core/src/components/card-content · high confidence
Introduce strongly typed global configuration and initialization system
The global configuration system has been refactored to use a new \Config\ class with strongly typed accessors (\getBoolean\, \getNumber\) and support for persisting settings via session storage or URL parameters. The \initialize\ function now orchestrates the setup of this configuration, platform detection, and default mode resolution (iOS vs Material Design), ensuring that user-provided config, session data, and URL overrides are merged correctly before initializing the application's visual mode.
core/src/global · high confidence
Ionic Framework 9.0.0 release with major breaking changes
This release introduces Ionic 9.0.0, bringing significant breaking changes across the framework. Minimum supported versions are now Angular 18+, React 18/19, Vue 3.5+, and Capacitor 7+. The \@ionic/core\ package now uses explicit ESM package exports to resolve subpath imports. Several components have been updated: \ion-input\'s \autocorrect\ property is now a boolean, and its internal DOM structure has changed to support floating labels with slotted content. The legacy picker components (\ion-picker-legacy\) have been removed in favor of the inline picker. \ion-modal\'s \handleBehavior\ now defaults to "cycle" for sheet modals, and \ion-nav\ no longer integrates with \ion-router\, becoming a standalone imperative navigation component.
(repo-wide) · high confidence
Ionic Vue v9.0.0: Complete rewrite with Vue 3 Composition API and Vue Router 5
The @ionic/vue package has been completely rewritten for version 9.0.0, shifting from the Options API to the Vue 3 Composition API and upgrading the underlying router to Vue Router 5. This change introduces new composition API lifecycle hooks (such as useIonRouter and useBackButton), enables the use of Ionic components outside of ion-item wrappers, and allows overlays like modals and popovers to be rendered inline. The package now includes dedicated build scripts for generating web-types and vetur support, and enforces strict type checking. This is a major breaking change that requires migrating to the new Composition API patterns and updating router configurations.
packages/vue · high confidence
Item Divider component restructured with CSS variables and sticky support
The item-divider component has been rewritten to use CSS custom properties for theming (background, color, padding) and logical properties for safe-area and RTL support. It now exposes 'inner' and 'container' shadow parts for deeper styling, supports 'start' and 'end' slots for icons or labels, and includes a new 'sticky' prop to keep the divider pinned to the top of the viewport. The component also implements specific iOS and Material Design styles, including dynamic font scaling and distinct padding/border behaviors for each mode.
core/src/components/item-divider · high confidence
Item sliding component reimplementation with gesture and async support
The item-sliding component has been rewritten to use a new gesture-based sliding mechanism, introducing a \disabled\ property to control interactivity and an \open()\ method for programmatic control. The implementation now robustly handles asynchronous changes, such as items or options added after initial render, by utilizing a MutationObserver to update the sliding state dynamically. Additionally, the component prevents page scrolling during the swipe gesture and correctly manages RTL (right-to-left) layouts and side-specific option visibility.
core/src/components/item-sliding · high confidence
Loading component redesign with CSS variables and overlay integration
The Loading component has been updated to use CSS custom properties (such as --background, --spinner-color, and --backdrop-opacity) for theming, allowing easier customization of appearance across iOS and Material Design modes. It now supports a translucent mode for iOS devices that support backdrop-filter, and includes new properties like backdropDismiss, animated, and htmlAttributes to provide finer control over presentation and accessibility. The component also integrates with the overlay system for improved focus management and animation handling.
core/src/components/loading · high confidence
Menu button now supports CSS variables for hover and focus states
The menu button component now exposes CSS custom properties (such as --background-hover, --background-focused, --color-hover, and --color-focused) that allow developers to customize the visual appearance of the button when it is hovered or focused. This change also introduces mode-specific styling for iOS and Material Design, including updated border radii and padding, and ensures the button correctly inherits toolbar colors and respects auto-hide logic.
core/src/components/menu-button · high confidence
Menu component refactored with new styling variables and interface types
The menu component has been restructured to use a modular SCSS architecture with dedicated files for iOS and Material Design themes (menu.ios.scss, menu.md.scss) and their respective variables, introducing CSS custom properties for width, height, and background. A new menu-interface.ts file defines strict TypeScript types for the menu controller and component state, while the main component (menu.tsx) now supports configurable menu types (overlay, reveal, push) and exposes parts for styling the container and backdrop.
core/src/components/menu · high confidence
Migrate linting and formatting tooling to ESLint and Stylelint
The core package has replaced its previous linting and formatting setup with modern, dedicated tools. ESLint is now the primary linter, configured via a flat config file that bridges the existing @ionic/eslint-config and enforces strict TypeScript rules, while Prettier is configured to handle code formatting with specific overrides for SCSS files. Additionally, Stylelint has been introduced to enforce consistent CSS/SCSS ordering and style rules, replacing the older sass-lint/scss-lint approach. These changes standardize the development environment and improve code quality checks for contributors.
core · high confidence
Navigation component refactored with customizable animations and swipe gestures
The \ion-nav\ component has been refactored to support customizable page transitions and improved swipe-to-go-back gestures. Users can now define custom animations via the \animation\ prop using an \AnimationBuilder\, and the swipe-back behavior is controlled by the \swipeGesture\ property. The component also supports passing parameters to the root component via \rootParams\ and exposes lifecycle events for navigation changes.
core/src/components/nav · high confidence
New ESLint custom rules for Playwright assertions and component usage
The project now includes three new custom ESLint rules in core/custom-rules to enforce best practices. The 'await-playwright-promise-assertion' rule flags Playwright assertions (such as toBeVisible, click, etc.) that are not awaited, helping to prevent flaky tests. The 'no-playwright-to-match-snapshot-assertion' rule disallows the use of toMatchSnapshot in favor of toHaveScreenshot, which offers better performance and anti-flake behaviors. Additionally, the 'no-component-on-ready-method' rule prevents direct usage of the componentOnReady method, requiring developers to use the provided helper utility instead.
core/custom-rules · high confidence
Picker component restructured with new interfaces and input mode support
The picker component has been refactored to support an 'input mode' that allows users to type values directly into columns, controlled by the new \ionInputModeChange\ event and \PickerChangeEventDetail\ interface. The component's styling has been reorganized into a shared \picker.scss\ base with platform-specific overrides in \picker.ios.scss\ and \picker.md.scss\, introducing CSS variables for highlight and fade backgrounds. Additionally, the layout now enforces LTR direction for columns to prevent order changes in RTL contexts, and the component uses Shadow DOM for encapsulation.
core/src/components/picker · high confidence
Popover animations now respect safe-area insets and CSS zoom
The iOS and Material Design popover enter/leave animations have been rewritten to correctly handle modern device constraints. Popovers now automatically account for safe-area insets (such as notches and system bars) by adjusting their positioning and sizing, ensuring they remain visible on edge-to-edge displays. Additionally, the animations normalize geometry calculations to handle CSS zoom levels on ancestor elements, preventing positioning errors when the page is zoomed. This ensures consistent visual behavior across different devices and browser settings.
core/src/components/popover/animations · high confidence
Popover component reimplementation with enhanced positioning and desktop support
The popover component has been rewritten to support inline usage, desktop interactions (hover, context-menu), and precise positioning that accounts for CSS zoom, safe-area insets, and dynamic content sizing. Users can now configure trigger actions, arrow placement, and alignment, while the component ensures correct rendering of nested popovers, translucent styles, and scrollable content.
core/src/components/popover · high confidence
Range component rewritten with dual-knob support and modern styling
The range component has been completely rewritten to support dual knobs (allowing a lower and upper value range), with the value property now accepting either a number or an object with lower/upper properties. The component introduces new events (knobMoveStart, knobMoveEnd) for tracking individual knob interactions, exposes CSS parts for granular styling of knobs, bars, pins, and ticks, and includes improved RTL support, form participation, and accessibility features. The iOS and Material Design styles have been updated to match their respective design specifications, with CSS custom properties exposed for theming.
core/src/components/range · high confidence
React Router integration refactored to support React Router v6
The \@ionic/react-router\ package has been rewritten to integrate with React Router v6, replacing the previous v3-based implementation. This change introduces new wrapper components (\IonReactRouter\, \IonReactHashRouter\, \IonReactMemoryRouter\) that bridge React Router's context and hooks with Ionic's internal navigation stack. The underlying view management logic has been completely overhauled to use React Router v6's \RouteContext\ and \matchRoutes\ for path matching, enabling support for nested routes, relative paths, and index routes. Additionally, the package now includes a new test runner script (\scripts/test\_runner.sh\) that utilizes Playwright and Cypress for end-to-end testing.
packages/react-router · high confidence
React package restructured with inline overlays and new build tooling
The @ionic/react package has been restructured to support inline overlay components (such as IonModal, IonPopover, IonAlert, IonActionSheet, and IonToast) rendered directly within the React tree rather than as detached controller overlays, managed via a new IonOverlayManager and createInlineOverlayComponent utility. This change introduces a new React Animations wrapper (CreateAnimation), updates the build pipeline to use Rollup 4 and a new ESLint flat config, and enforces React 18 as the minimum supported version. Additionally, the package now includes dedicated test mocks and scripts for syncing and packing, improving developer experience and build consistency.
packages/react · high confidence
Redesigned ion-col component with CSS variables and responsive sizing
The \<code\>ion-col\</code\> component has been rewritten to use Shadow DOM and CSS custom properties, allowing users to style column padding via \<code\>--ion-grid-column-padding\</code\> and its breakpoint-specific variants. The component now supports responsive sizing and positioning through new props (\<code\>size\</code\>, \<code\>offset\</code\>, \<code\>pull\</code\>, \<code\>push\</code\>) that accept breakpoint suffixes (e.g., \<code\>sizeMd\</code\>, \<code\>offsetSm\</code\>) to adjust layout dynamically. It also handles server-side rendering safely by checking for window existence and fixes previous issues with RTL offsets and IE11 compatibility.
core/src/components/col · high confidence
Redesigned list component with new lines property and inset styling
The list component has been updated to support a new \lines\ property ('full', 'inset', or 'none') that controls the visibility and style of item borders, replacing previous implicit behaviors. Inset lists now feature consistent 16px margins and platform-specific border radii (10px for iOS, 2px for Material Design). The component also introduces a \closeSlidingItems()\ method to programmatically close open sliding items and ensures correct border rendering for the last item in various scenarios, including when used with \ion-item-sliding\ or nested lists.
core/src/components/list · high confidence
Redesigned list-header with iOS/MD theming and inner part
The list-header component has been redesigned to align with iOS and Material Design specifications, introducing distinct styling for each mode (iOS uses specific font weights and padding, while MD uses a minimum height and different font sizing). It now supports an 'inner' shadow DOM part for easier styling of the content wrapper, exposes CSS custom properties for background, color, and border control, and correctly applies safe-area padding on both left and right sides regardless of text direction. The component also supports 'full', 'inset', or 'none' line variants to control border visibility.
core/src/components/list-header · high confidence
Redesigned toast animations with safe-area and anchor support
The toast component's enter and leave animations have been rewritten to support precise positioning relative to screen edges or specific anchor elements, while correctly accounting for iOS safe areas. The iOS design now uses transform-based slide-in/slide-out effects for top and bottom positions, whereas the Material Design (MD) style uses opacity fades. A new utility layer calculates exact offsets for top, bottom, and middle placements, ensuring toasts appear in the correct location even when anchored to specific DOM elements or when safe-area insets are present.
core/src/components/toast/animations · high confidence
Refactored menu animation logic to use new animation API
The menu controller's animation logic has been rewritten to use the updated \createAnimation\ API. The previous animation utilities were removed and replaced with new modules (\base.ts\, \overlay.ts\, \push.ts\, \reveal.ts\) that define how menus slide, push, or reveal content. These animations now explicitly handle iOS and Material Design modes, applying specific durations (400ms for iOS, 300ms for MD) and easing curves consistent with platform guidelines, and manage backdrop opacity transitions alongside content movement.
core/src/utils/menu-controller/animations · high confidence
Refactored menu controller to use a new modular structure with explicit animation registration
The menu controller utility has been restructured into a new file (\core/src/utils/menu-controller/index.ts\) that centralizes menu management logic. This change introduces explicit registration for menu animations (overlay, push, reveal) via \registerAnimation\, replacing previous implicit or scattered animation handling. The core controller logic now explicitly manages menu instances, handles hardware back button events for dismissing side menus, and ensures that querying menus by side correctly prioritizes enabled menus while warning if multiple menus exist on the same side. This refactor also includes fixes for duplicate menu controller instances in Angular and improved SSR compatibility for hardware back button updates.
core/src/utils/menu-controller · high confidence
Refactored tap-click utility to use Pointer Events API
The tap-click interaction utility has been rewritten to utilize the Pointer Events API (pointerdown, pointerup, pointercancel) instead of legacy touch/mouse events. This change improves compatibility with various input devices and simplifies the event handling logic. The implementation now includes specific checks to prevent errors in document-less environments and ensures that instant activation states are applied immediately without unnecessary delays, while also preserving the activated state during long-press interactions.
core/src/utils/tap-click · high confidence
Regenerated TypeScript definitions and public exports for core components
The \core/src\ directory now includes freshly generated TypeScript definition files (\components.d.ts\, \interface.d.ts\) and an updated public entry point (\index.ts\). This regeneration ensures that all component props, interfaces, and event details are strongly typed and correctly exported for consumers. The \index.ts\ file explicitly re-exports core utilities (such as animation builders, gesture creation, and platform detection) and overlay controllers, while \interface.d.ts\ consolidates type definitions for components like Accordion, Datetime, and Modal, along with global types like \Color\ and \Mode\. A new Jest matcher (\toHaveShadowPart\) is also available in \jest.d.ts\ for testing shadow DOM parts.
core/src · high confidence
Reorder component restructured with shadow DOM and mode-specific styling
The reorder component has been refactored to use the Shadow DOM, introducing mode-specific SCSS files (iOS and Material Design) that define distinct icon font sizes and opacities for each theme. The component now supports a 'part' named 'icon' for styling the reorder handle and ensures that custom slotted icons scale with dynamic font settings. Additionally, the click event handler has been updated to allow event propagation when the parent reorder group is disabled, enabling interaction with clickable children in that state.
core/src/components/reorder · high confidence
Reorder group emits granular lifecycle events and deprecates legacy event
The ion-reorder-group component now exposes three new events—ionReorderStart, ionReorderMove, and ionReorderEnd—to provide detailed feedback during the drag-and-drop interaction, replacing the legacy ionItemReorder event which is now deprecated. The ionReorderEnd event always includes the final from and to indices, even if the item did not move, and requires calling the complete() method to finalize the reorder action. This change improves compatibility with frameworks by providing clearer lifecycle hooks and ensures consistent behavior when reordering items.
core/src/components/reorder-group · high confidence
Router outlet now supports per-instance swipe-to-go-back control
The \ion-router-outlet\ component now exposes a \swipeGesture\ property, allowing developers to enable or disable the swipe-to-go-back gesture on a specific outlet instance rather than relying solely on global configuration. This change also introduces a new \router-outlet.scss\ file to handle absolute positioning and z-indexing for the outlet, and refactors the internal navigation locking mechanism to use a shared \lockController\ utility for better state management.
core/src/components/router-outlet · high confidence
Router utility layer refactored with new constants, interfaces, and matching logic
The router's internal utility layer has been restructured to improve type safety and navigation accuracy. New constants define explicit navigation intents (root, forward, back), while updated interfaces formalize route chains, redirects, and outlet interactions. The matching logic now correctly accounts for query strings and URL fragments during route resolution, and parameter merging has been simplified to ensure stateless route information. These changes provide a more robust foundation for navigation, ensuring that redirects and route matches accurately reflect the full URL context.
core/src/components/router/utils · high confidence
SSR-safe browser utilities and type definitions for experimental features
A new utility module at core/src/utils/browser/index.ts has been introduced to provide SSR-safe access to the window and document objects, preventing crashes in server-side rendering environments by using optional chaining on the exported win and doc variables. This file also establishes TypeScript definitions for Ionic-specific custom events (such as ionKeyboardDidShow, ionInputDidLoad, ionInputDidUnload, and ionBackButton) and declares types for experimental browser features like CloseWatcher, ensuring type safety for these capabilities within the framework.
core/src/utils/browser · high confidence
Searchbar component restructured with new interfaces and platform-specific styling
The Searchbar component has been refactored to introduce a dedicated TypeScript interface file (searchbar-interface.ts) defining event details for change and input events, and to separate platform-specific styles into distinct iOS and Material Design SCSS files (searchbar.ios.scss, searchbar.md.scss) with their own variable sets. This change establishes a cleaner architecture for styling and event typing, ensuring consistent behavior across iOS and MD modes while maintaining the core search functionality.
core/src/components/searchbar · high confidence
Spinner component restructured with new animation configurations and types
The spinner component has been refactored to use a centralized configuration system (\spinner-configs.ts\) that defines animation parameters for all supported spinner types, including the newly added \lines-sharp\ and \lines-sharp-small\ variants. This change introduces a more robust, data-driven approach to rendering spinners, allowing for easier maintenance and extension of animation behaviors. The component now supports a \paused\ property to control animation state and ensures proper color theming via CSS custom properties. Additionally, the underlying interface and styling have been updated to support these new configurations and improve compatibility with modern Stencil APIs.
core/src/components/spinner · high confidence
Support for custom scroll targets in content utilities
The content utility functions in core/src/utils/content now recognize and interact with custom scroll hosts (elements with the .ion-content-scroll-host class) in addition to standard ion-content elements. This allows components like ion-refresher and modal gestures to correctly attach scroll listeners and manage scroll states when used with virtual scroll implementations or other custom scrolling containers, ensuring features like pull-to-refresh and swipe-to-close work as expected in these scenarios.
core/src/utils/content · high confidence
Tab button layout and styling updated to match iOS 17 and Material Design specifications
The tab button component has been restyled to align with the latest platform design guidelines. For iOS, the layout, padding, and icon/label sizing have been updated to match iOS 17 specifications, including specific adjustments for badge positioning and icon-only or label-only states. For Material Design, the styling now reflects updated margins, font sizes, and badge border radii. The component also supports flexible layouts (icon top, bottom, start, end, hide) via CSS classes, ensuring consistent visual presentation across both modes.
core/src/components/tab-button · high confidence
Toast component restructured with new layout modes and swipe-to-dismiss
The Toast component has been significantly updated to support a 'stacked' layout mode (in addition to the existing 'baseline'), allowing buttons to stack vertically below the message for better handling of long button text. A new swipe-to-dismiss gesture has been added, configurable via the \swipeGesture\ property. The component now exposes extensive CSS variables for styling (including border, shadow, and spacing) and supports custom positioning relative to a specific element via the \positionAnchor\ property. Additionally, the interface has been expanded to include \htmlAttributes\ for passing attributes to buttons and the host, and the \message\ property now supports custom HTML when \innerHTMLTemplatesEnabled\ is configured.
core/src/components/toast · high confidence
Toolbar component restructured with shadow DOM and CSS custom properties
The toolbar component has been refactored to use Shadow DOM, exposing CSS custom properties (such as --background, --color, and --padding) for theming and adding named shadow parts (background, container, content) for direct styling. The layout now uses a flex-based container with explicit slot ordering for start, secondary, primary, and end content, and includes specific styles for iOS and Material Design modes, including support for large titles and search bars.
core/src/components/toolbar · high confidence
Update IonicSlides configuration for Swiper 7 compatibility
The IonicSlides component has been updated to provide a new set of default configuration parameters compatible with Swiper 7. This change introduces specific settings for effects (coverflow, flip, cube, fade), accessibility (a11y messages), and touch interactions (touchRatio, threshold, resistance), ensuring the slides component behaves correctly with the newer Swiper version.
core/src/components/slides · high confidence
Updated iOS and Material Design alert animations to match MD spec
The alert component's enter and leave animations for both iOS and Material Design modes have been updated to align with the Material Design specification. This change modifies the visual behavior of alerts, specifically adjusting the backdrop opacity transitions and the wrapper scaling/opacity keyframes (e.g., iOS enter now scales from 1.1 to 1, while Material Design enter scales from 0.9 to 1). These updates ensure that alert appearances and dismissals follow the standardized motion guidelines.
core/src/components/alert/animations · high confidence
Updated iOS and Material Design loading animations
The loading component's enter and leave animations for both iOS and Material Design modes have been updated to use the new animation utility API. The visual behavior now includes a subtle scale effect on the loading wrapper (scaling from 1.1 to 1 on enter, and 1 to 0.9 on leave) alongside the existing opacity transitions for the backdrop and wrapper, providing a smoother and more consistent user experience across platforms.
core/src/components/loading/animations · high confidence
iOS and Material Design button styles are now driven by CSS custom properties
The visual appearance of \ion-button\ in both iOS and Material Design modes is now controlled via CSS custom properties (such as \--border-radius\, \--padding-top\, \--background\, and \--color\) rather than hardcoded SCSS values. This change introduces dedicated style sheets for iOS (\button.ios.scss\) and Material Design (\button.md.scss\) along with their respective variable files, allowing users to easily customize button dimensions, colors, and spacing by overriding these variables on the host element or in global styles.
core/src/components/button · high confidence
Fixes
Improved input scrolling and keyboard handling on mobile
The input-shims utility module has been refactored to provide more reliable scroll assist behavior when the on-screen keyboard appears. This update introduces a cloned-input technique to prevent native browser scrolling from disrupting the layout, ensures inputs remain visible above the keyboard, and fixes issues with placeholder overlap and duplicate click events. It also adds support for scroll padding in environments where the webview does not automatically resize, improving compatibility with native keyboard plugins and various mobile browsers.
core/src/utils/input-shims/hacks · high confidence
Improved keyboard event reliability on Android and native platforms
The keyboard utility now uses a dedicated controller to listen for native keyboard lifecycle events (keyboardWillShow/Hide) when a native engine is present, ensuring events fire consistently on Android and other native platforms. For web-only environments, it continues to track the Visual Viewport to detect keyboard state changes. This change ensures that keyboard events are emitted correctly even when Capacitor is available but the specific Keyboard plugin is not, resolving issues where events were previously missed or fired inconsistently.
core/src/utils/keyboard · high confidence
Native utility modules now use Capacitor v7 plugin interfaces
The native utility layer (haptics, keyboard, status bar) has been refactored to interact with Capacitor v7's plugin system. These modules now retrieve the Capacitor instance from the window and explicitly check for plugin availability before calling native APIs, ensuring that haptic feedback, keyboard resizing, and status bar styling work correctly without throwing errors on unsupported platforms or when plugins are not installed.
core/src/utils/native · high confidence
Redesigned ion-content component with improved scrolling and accessibility
The ion-content component has been rewritten to fix persistent scrolling, layout, and accessibility issues. The new implementation uses a Shadow DOM structure with dedicated background and inner-scroll elements, ensuring correct height inheritance and offset handling for headers and footers. Scroll events are now disabled by default to improve performance and must be explicitly enabled via the scrollEvents prop. Accessibility is enhanced by allowing custom ARIA roles and attributes, and by fixing touch-action behaviors to prevent zoom/pan deadlocks. The component also introduces a fixedSlotPlacement prop to control the DOM order of fixed content, improving keyboard focus management.
core/src/components/content · high confidence
Refactored page transition logic to prevent header flickering and improve navigation reliability
The core navigation transition utilities have been restructured to explicitly manage header visibility states during iOS page transitions, preventing visual flickering that occurred with condensed headers. The implementation now correctly handles large title animations, ensuring they only trigger when appropriate (e.g., when a back button is present in the start slot) and properly account for safe area values. Additionally, the transition flow now disables pointer events on entering and leaving pages during the animation to prevent double-tap navigation issues, and restores focus correctly after the transition completes.
core/src/utils/transition · high confidence
Verify script ensures lazy component chunks are correctly imported
Added a new verification script at core/scripts/verify/lazy-imports.js that checks the built ESM and CJS distributions to ensure every lazy component bundle is explicitly imported by path in the generated lazy loader. This addresses issues where Vite 8 might fail to include literal import paths for component bundles, preventing runtime errors for lazy-loaded components.
core/scripts/verify · high confidence
iOS card-style modal animations now support viewport transitions and sheet breakpoints
The iOS modal animation logic has been updated to handle card-style modals during device orientation changes (portrait to landscape and vice versa), ensuring the presenting element and modal backdrop transition smoothly without visual glitches. Additionally, the animations now respect the \backdropBreakpoint\ and \expandToScroll\ properties for sheet-style modals, allowing the backdrop and content to animate correctly based on the current breakpoint rather than assuming a full-screen presentation.
core/src/components/modal/animations · high confidence
iOS collapsible header styling and flicker fixes
The iOS header component now implements the collapsible large title and fade collapse modes with improved visual stability. The new styles prevent flickering during page transitions and initial load by correctly managing opacity and background colors for the main and collapsible headers. It also fixes a backdrop-filter distortion issue on non-collapsed large titles and ensures proper ARIA roles are applied to avoid multiple banner landmarks. Additionally, the Material Design header box shadow has been updated to match the specification.
core/src/components/header · high confidence
Test coverage
Action Sheet test suite migrated to Playwright with expanded coverage; Add Angular 18 test application for regression testing; Add Playwright visual regression tests for skeleton-text; Added Angular 19 test application with standalone modal example; Added Angular 22 test applications for zoneless and zone-based change detection; Added CSS variable test fixtures for dark, oceanic, toolbar, and vibrant themes; Added CSS variable theme testing page; Added E2E screenshot test for textarea inside card; Added E2E tests and demo page for readonly datetime mode; Added E2E tests for checkbox helper and error text rendering; Added E2E tests for datetime date-disabling logic; Added E2E tests for datetime presentation modes; Added E2E tests for disabled and readonly accordion states; Added E2E tests for footer with tabs layout; Added E2E tests for ion-img draggable attribute inheritance; Added E2E tests for ion-input inside ion-item; Added EventSpy utility for Playwright E2E tests; Added Playwright E2E tests for Accordion multiple selection; Added Playwright E2E tests for checkbox component; Added Playwright E2E tests for condensed header accessibility; Added Playwright E2E tests for datetime value constraints; Added Playwright E2E tests for ion-textarea click behavior; Added Playwright E2E tests for router navigation guards; Added Playwright E2E tests for tab-bar safe area padding; Added Playwright E2E tests for tab-button basic rendering; Added Playwright E2E tests for translucent tab-bar; Added Playwright custom matchers for event spy assertions; Added Playwright e2e tests for accordion visual regression and ionChange behavior; Added Playwright e2e tests for basic and nested navigation scenarios; Added Playwright e2e tests for custom tab-bar styling; Added Playwright e2e tests for infinite-scroll basic and custom scroll target scenarios; Added Playwright e2e tests for infinite-scroll positioned at the top; Added Playwright e2e tests for menu focus trapping with overlays; Added Playwright e2e tests for split-pane basic layout and viewport behavior; Added Playwright screenshot tests for button size and strong variants; Added Playwright test utilities for item-sliding visual regression testing; Added Playwright viewport configuration for testing; Added Playwright visual regression tests for Breadcrumbs collapsed and color states; Added Playwright visual regression tests for back-button; Added Playwright-based accessibility and form integration tests for FAB Button; Added Playwright-based accessibility tests for the header component; Added Playwright-based e2e tests for Picker component; Added Playwright-based visual regression tests for Button component; Added RTL icon flip tests and demo page; Added React 19 Suspense reproduction test app; Added React 19 test application; Added accessibility and basic tests for the router-link component; Added accessibility and focus-indicator tests for the checkbox component; Added accessibility and font-scaling tests for the select component; Added accessibility and keyboard navigation tests for the radio component; Added accessibility and mode override tests for Segment component; Added accessibility and text-wrapping tests for the Alert component; Added accessibility and visual regression tests for the label component; Added accessibility test for list-header font scaling; Added accessibility tests for button font scaling; Added accessibility tests for datetime keyboard navigation and font scaling; Added accessibility tests for dynamic font scaling in searchbar; Added accessibility tests for font scaling in Chip and Item Divider components; Added accessibility tests for ion-item; Added accessibility tests for progress-bar and select-popover components; Added accessibility tests for the Toast component; Added basic e2e tests for the ion-text component; Added basic modal component tests; Added basic test suite for the Loading component; Added color palette contrast tests; Added dark-mode e2e test for modal text color; Added disabled-state tests for datetime-button; Added e2e and unit tests for the datetime wheel picker; Added e2e test for async menu re-mounting; Added e2e test for card modal refresher swipe behavior; Added e2e test for custom modal dialog sizing; Added e2e test for iOS condense header visibility in modal; Added e2e test for infinite-scroll threshold behavior; Added e2e test for ion-label rendering within ion-item; Added e2e test for list-header inner part customization; Added e2e test for menu styling in split pane; Added e2e test for modal animation cleanup; Added e2e test for popover adjustment logic; Added e2e test for radio-group search filtering behavior; Added e2e test for range component scroll behavior; Added e2e test for reorder-group font scaling; Added e2e test for spinner transform behavior; Added e2e test for tap-click activated state; Added e2e tests and demo page for datetime hour-cycle property; Added e2e tests for FAB custom size positioning; Added e2e tests for Loading component isOpen behavior; Added e2e tests for Loading component trigger behavior; Added e2e tests for Searchbar ionChange and ionInput events; Added e2e tests for Select component CSS parts and properties; Added e2e tests for Toast isOpen behavior; Added e2e tests for action-sheet trigger functionality; Added e2e tests for async popover mounting and empty content handling; Added e2e tests for async select option population; Added e2e tests for basic input component scenarios; Added e2e tests for basic menu rendering and behavior; Added e2e tests for basic tab navigation and dynamic content; Added e2e tests for breadcrumbs reactivity; Added e2e tests for card font scaling and aria-label synchronization; Added e2e tests for card modal rendering, swipe-to-close, and drag events; Added e2e tests for card modal swipe-to-close behavior; Added e2e tests for clearOnEdit behavior in input and textarea components; Added e2e tests for custom modal rendering; Added e2e tests for custom styling of datetime components; Added e2e tests for datetime first-day-of-week configuration; Added e2e tests for datetime month-year picker and time label; Added e2e tests for disabled select options; Added e2e tests for framework-delegate modal scenarios; Added e2e tests for inline popover usage; Added e2e tests for input scroll-assist and keyboard padding behavior; Added e2e tests for ion-content fullscreen mode; Added e2e tests for ion-content safe-area offset handling; Added e2e tests for ion-img load and error events; Added e2e tests for ion-item CSS shadow parts and variables; Added e2e tests for ion-item form control integration; Added e2e tests for ion-nav routing isolation; Added e2e tests for item-divider shadow parts; Added e2e tests for item-sliding basic and scroll-target scenarios; Added e2e tests for label component with heading content; Added e2e tests for menu safe-area padding; Added e2e tests for modal navigation stack behavior; Added e2e tests for multiple date selection in datetime component; Added e2e tests for multiple split panes with menus; Added e2e tests for nested popover rendering and dismissal; Added e2e tests for nested reorder-group scenarios; Added e2e tests for popover dismiss-on-select behavior; Added e2e tests for popover size and reference positioning; Added e2e tests for radio component focus indicators; Added e2e tests for radio-group form integration; Added e2e tests for radio-group interaction and selection behavior; Added e2e tests for range dual-knob positioning and toggling; Added e2e tests for refresher in fullscreen mode; Added e2e tests for refresher pull-to-refresh and new pull events; Added e2e tests for refresher slot validation; Added e2e tests for reorder-group events and basic behavior; Added e2e tests for reorder-group with custom scroll target; Added e2e tests for router anchor fragments and relative paths; Added e2e tests for router-outlet basic navigation and route parameters; Added e2e tests for safe-area handling; Added e2e tests for scrollable segment rendering and active button visibility; Added e2e tests for segment component rendering; Added e2e tests for select compareWith functionality; Added e2e tests for select component inside ion-item; Added e2e tests for select popover sizing with various label placements and fills; Added e2e tests for select text wrapping behavior; Added e2e tests for select-option label placement and justify props; Added e2e tests for select-popover basic interactions; Added e2e tests for sheet modal scroll and refresher behavior; Added e2e tests for swipe gestures in card modals with navigation; Added e2e tests for textarea bottom content rendering and accessibility; Added e2e tests for the Toggle component; Added e2e tests for the basic Floating Action Button component; Added e2e tests for toast CSS part customization; Added e2e tests for toast position-anchor feature; Added e2e tests for toast stacked layout; Added e2e tests for toast swipe-to-dismiss gestures; Added e2e tests for typography accessibility and font scaling; Added e2e visual regression tests for ion-content; Added end-to-end tests for datetime min/max boundary handling; Added end-to-end tests for datetime-button overlay interactions; Added end-to-end tests for display and flex CSS utility classes; Added end-to-end tests for picker keyboard entry; Added end-to-end tests for the datetime show-adjacent-days feature; Added form submission test case for ion-button; Added host-element test fixture for the back-button component; Added host-element test page for Modal component; Added icon button test page; Added layout screenshot tests for tab-button; Added locale-specific localization tests for the datetime component; Added manual validation test page for Select component; Added modal spec test page; Added server-side rendering test app for Angular 21; Added standalone e2e test for Modal component; Added standalone test page and Playwright accessibility test for Accordion; Added standalone test page and Playwright e2e tests for the Loading component; Added standalone visual regression tests for ion-content; Added test for card aria-label reflection; Added test harness for late-prop assignment scenarios; Added test page for custom datetime button icons; Added test page for datetime component in modal cover presentation; Added test page for datetime size property; Added test page for item-sliding lines variants; Added test suite for overlay utilities and behavior; Added test utilities for refresher component; Added test utility for detecting calendar month changes; Added tests for ActionSheet ID assignment and preservation; Added tests for Alert component ID handling and custom HTML configuration; Added tests for Loading component ID assignment and HTML sanitization; Added tests for Range component label rendering and accessibility; Added tests for Select bottom content (helper and error text); Added tests for button form submission and hidden button synchronization; Added tests for custom HTML handling in infinite-scroll and refresher components; Added tests for customizing Range component parts; Added tests for datetime highlightedDates styling; Added tests for datetime overlay dismissal roles; Added tests for datetime-button multiple selection display; Added tests for disabled datetime component behavior; Added tests for fixed slot placement behavior; Added tests for font icon support in ion-icon; Added tests for input bottom content rendering and accessibility; Added tests for ion-item focus state and indicator room logic; Added tests for keyboard utility functions and controller; Added tests for logging level filtering; Added tests for modal canDismiss behavior; Added tests for modal content height sizing; Added tests for modal dismissal, ID handling, and attribute inheritance; Added tests for multiple menus on the same side; Added tests for picker-column scroll commit behavior; Added tests for popover CSS zoom handling and ID assignment; Added tests for radio-group compareWith and ionChange behavior; Added tests for range component event handling and scroll behavior; Added tests for segment event emission and async state updates; Added tests for select toggle and expanded icon customization; Added tests for split-pane with wrapped menu components; Added tests for textarea event emission, attribute inheritance, and label rendering; Added tests for toggle helper and error text support; Added theme step visualization test page; Added translucent alert demo page for testing; Added unit and E2E tests for the Datetime component; Added unit and E2E tests for the animation utility; Added unit and visual regression tests for picker-column-option; Added unit and visual regression tests for the Range component; Added unit tests for Accordion and AccordionGroup components; Added unit tests for DOM sanitization functions; Added unit tests for NavController push, pop, and insert operations; Added unit tests for Searchbar attribute inheritance; Added unit tests for Toast component configuration, accessibility, and gestures; Added unit tests for checkbox component behavior; Added unit tests for core utility functions; Added unit tests for ion-select component behavior; Added unit tests for picker-column accessibility features; Added unit tests for router utilities and integration scenarios; Added unit tests for the Back Button component; Added unit tests for the global configuration controller; Added validation test pages for Input and Textarea components; Added visual and functional tests for textarea inside item components; Added visual regression and color-prop tests for the datetime component; Added visual regression and functional tests for rich content select options; Added visual regression and interaction tests for datetime display; Added visual regression and layout stability tests for Input component states; Added visual regression test for input component inside card; Added visual regression test for range component color variants; Added visual regression tests for FAB button states; Added visual regression tests for Input color theming; Added visual regression tests for Item images and media layouts; Added visual regression tests for Progress Bar buffer and determinate modes; Added visual regression tests for Range component inside IonItem; Added visual regression tests for Select component highlights and colors; Added visual regression tests for Select fill variants; Added visual regression tests for Textarea fill modes; Added visual regression tests for Textarea slotting; Added visual regression tests for Toggle component size variations; Added visual regression tests for Toggle inside Ion-Item; Added visual regression tests for checkbox label placement and justification; Added visual regression tests for component states and label placement; Added visual regression tests for custom Segment styling; Added visual regression tests for fixed content positioning; Added visual regression tests for footer with custom scroll target; Added visual regression tests for grid offset behavior; Added visual regression tests for iOS header fade and custom scroll target; Added visual regression tests for input component highlight states; Added visual regression tests for inset list line rendering; Added visual regression tests for ion-item button, color, and state variants; Added visual regression tests for item alignment scenarios; Added visual regression tests for item-sliding icon slots; Added visual regression tests for label color inheritance; Added visual regression tests for list-header component; Added visual regression tests for nested accordion states; Added visual regression tests for picker-column disabled states and slot content; Added visual regression tests for radio label placement and justification; Added visual regression tests for segment button text wrapping; Added visual regression tests for segment icons; Added visual regression tests for select slot configurations; Added visual regression tests for slotted form controls in ion-item; Added visual regression tests for spinner resize behavior; Added visual regression tests for tab bar placement; Added visual regression tests for tab-button focus states; Added visual regression tests for textarea disabled and readonly states; Added visual regression tests for the Button expand prop; Added visual regression tests for the checkbox indeterminate state; Added visual regression tests for the disabled state of the item component; Added visual regression tests for the iOS footer fade effect; Added visual regression tests for the outline button variant; Added visual regression tests for the range component's activeBarStart property; Added visual regression tests for the round button shape; Added visual regression tests for toggle on/off labels; Added visual regression tests for toolbar color variants; Added visual regression tests for translucent FAB on iOS; New Playwright test utilities for hydration, event spying, and viewport handling; New Playwright test utilities for keyboard focus, drag gestures, and DOM reattachment; New testing infrastructure for prerendering and environment configuration; React 18 test app migrated to Vite.
Dependencies
Add custom ESLint rules package and lockfile for core
The @ionic/core package now includes a local ESLint plugin (eslint-plugin-custom-rules) and a generated package-lock.json. This allows the core build and validation processes to enforce custom linting rules defined within the project itself, ensuring consistent code quality and style across the framework's source.
(dependencies) · high confidence
Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.
How this codebase got here
Baseline
- First survey — no prior run to compare against. CAI 51.
Lenses
- Code Health 75
- Architecture 64
- Maturity 63
- Readiness 39
- Security 65
- Accessibility 65
- Performance 60
Changes since last survey
- 300 commits — 220 feature/other, 80 fixes
By area
- core/src — 70 commits
- (repo) — 49 commits
- core/package-lock.json — 43 commits
- packages/angular — 41 commits
- .github/workflows — 28 commits
- packages/vue — 15 commits
- packages/migrate — 14 commits
- packages/react — 13 commits
- packages/react-router — 7 commits
- (root) — 6 commits
- core/Dockerfile — 2 commits
- core/scripts — 2 commits
- .github/ISSUE_TEMPLATE — 1 commit
- core/api.txt — 1 commit
- core/tsconfig.json — 1 commit
- docs/CONTRIBUTING.md — 1 commit
- docs/angular — 1 commit
- docs/component-guide.md — 1 commit
- docs/core — 1 commit
- docs/vue — 1 commit
Notable commits
- fix: chore(vercel): add react-router preview build and fix dir-index navigation (#31105)
- fix: fix(action-sheet): restore action-sheet-selected class on non-radio buttons (#31109)
- fix: fix(alert): switch to vertical layout when two buttons wrap (#31130)
- fix: fix(angular): guard transition against destroyed router outlet (#31297)
- fix: fix(angular): honor modifier-click on routerLink (#31230)
- fix: fix(angular): restore change detection for routed pages (#31414)
- fix: fix(angular): run change detection on attached overlay views (#31235)
- fix: fix(angular-server): fallback to scoped+annotations when SSR DOM lacks attachShadow (#30967)
- fix: fix(button): sync aria attributes between host and native button (#31264)
- fix: fix(button): sync disabled state and type in renderHiddenButton (#31225)
- fix: fix(checkbox): show labels after page navigation (#31062)
- fix: fix(checkbox,radio,toggle): add missing keyboard focus indicators (#31295)
- fix: fix(core): resolve lazy component chunks under Vite 8 (#31341)
- fix: fix(core): restore prop defaults when consumers downlevel (#31375)
- fix: fix(core): update offsets when safe-area insets arrive late (#31343)
- fix: fix(datetime): don't setActiveParts from month/year wheels when multiple=true (#31248)
- fix: fix(datetime): multiple month selected and flakiness display (#31053)
- fix: fix(datetime): prevent hidden-state observer from tearing down ready class on initial entry (#31108)
- fix: fix(datetime): respect config animated setting when paging month calendar (#31227)
- fix: fix(datetime): scroll failing for adjacent days on ios (#31033)
- …and 280 more
Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.
Survey your own repository
ionic-team/ionic-framework 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.
About this page
- The score is its most recent published measurement, taken on 28 September 2026 at a pinned commit. It is not a live figure and does not change until the project is measured again.
- Measured at commit 879e91d5e9c2115041758d708157d9785baa41c2 — the exact code this score is about.
- Scored under rubric-2026.09.16 — the same rubric and the same method as every other entry in this index.
- Measured by watchdog.canine.dev using codehealth-analyzer preprod-24a00d372a4b.