Announcing Ionic Framework 8.8

We’re excited to announce the release of Ionic Framework 8.8! This update makes customizing components easier and more flexible by adding new CSS classes, exposing internal elements through CSS Shadow Parts, and introducing new events for the Modal and Refresher components.

Many of the features in this release support community-driven projects adapting Ionic Framework to implement both the latest iOS design system (Liquid Glass) and a Material Design 3 theme, giving developers the tools to create modern, fully branded design systems.

Take a look at the new features that make customizing Ionic Framework simpler and more flexible. ⤵

🫳 New Drag Events for Sheet & Card Modals

Modals now expose new drag events that let you hook into the complete drag lifecycle. With detailed movement data available, you can respond to position, velocity, progress, and breakpoint changes in real time, enabling richer, more interactive experiences.

New Events

• ionDragStart — fires at the start of the drag gesture without any details
• ionDragMove — fires continuously while the modal is being dragged with currentY, deltaY, velocityY, progress, and, for sheet modals, snapBreakpoint
• ionDragEnd — fires at the end of the drag gesture with currentY, deltaY, velocityY, progress, and, for sheet modals, snapBreakpoint

These events make it possible to coordinate surrounding UI with the gesture. As the modal moves, you can reveal or conceal headers, footers, tab bars, or other interface elements, adjust layout and styling based on progress, and react instantly as the modal shifts position or approaches a breakpoint.

For more information, refer to the Modal documentation.

🎢 Enhanced Dual Knob Support in Range

Range now includes significant improvements to dual knob behavior, bringing more predictable interactions and powerful new styling capabilities.

We fixed an issue where knob identities (A and B) would unintentionally swap when crossing over each other. Knobs now retain their static identity, ensuring consistent behavior and styling.

Beyond behavior improvements, Range now exposes additional host classes and Shadow Parts when dualKnobs is enabled, giving you complete control over styling and interaction states.

New Host Classes

When dualKnobs is enabled, the following classes will be applied to the host element:

• range-dual-knobs — always applied
• range-pressed-a — applied when the knob with identity A is pressed
• range-pressed-b — applied when the knob with identity B is pressed
• range-pressed-lower — applied when the knob with position lower is pressed
• range-pressed-upper — applied when the knob with position upper is pressed

These classes allow you to style the component based on the existence of the dualKnobs property and which knob is currently being interacted with.

New Shadow Parts

Dual knob ranges now support two styling models:

Static Identity (A / B)
These parts always refer to the same physical knob, even if the knobs cross.

• knob-handle-a, knob-handle-b — applied to the handle of the knob with identity A or B, respectively
• knob-a, knob-b — applied to the knob itself with identity A or B
• pin-a, pin-b — applied to the pin of the knob with identity A or B

Dynamic Position (Lower / Upper)
These parts reflect the knob’s current value position. If the knobs cross, these parts swap automatically.

• knob-handle-lower, knob-handle-upper — applied to the knob handle in the lower or upper position, respectively
• knob-lower, knob-upper — applied to the knob itself in the lower or upper position
• pin-lower, pin-upper — applied to the pin of the knob in the lower or upper position

This makes it possible to style knobs either by consistent identity or by their relative position within the range.

New State Parts

To support advanced interaction styling, Range now applies state parts to the active knob’s handle, knob, and pin:

• activated — applied when the knob is active
• focused — applied when the knob is focused
• hover — applied when the knob is hovered
• pressed — applied when the knob is being pressed

Only one set of these state parts is applied at a time when dualKnobs is enabled, ensuring only the knob that has that state will be styled.

These updates make dual knob ranges more reliable, more accessible, and significantly more customizable. Build advanced filtering controls, price selectors, or ranges fully branded to match your design system.

For more information, refer to the Range documentation.

🔄 New Pull Events for Refresher

Refresher now emits two new events that give more visibility into the pull gesture lifecycle, letting you respond to user interactions in real time. You can detect exactly when a user starts pulling, and when the refresher has fully returned to its inactive state, including whether the pull completed successfully or was canceled.

New Events

• ionPullStart — fires when the user begins pulling down, without any details
• ionPullEnd — fires after the refresher returns to its inactive state, with a reason property ('complete' or 'cancel') indicating how the pull gesture ended

Deprecated Event

ionStart has been deprecated in favor of ionPullStart to improve consistency across event names. Going forward, event names follow a structure of action + timing (such as Start, Move, or End) to make their purpose more explicit and to allow for better scalability as new events are added.

The event payload is unchanged, so migrating only requires updating the event name.

Example Migration:

// Before
refresher.addEventListener('ionStart', () => {
  console.log('Pull Start');
});

// After
refresher.addEventListener('ionPullStart', () => {
  console.log('Pull Start');
});

For more information, refer to the Refresher documentation.

🎨 New CSS Shadow Parts and Classes

We’ve introduced several new CSS Shadow Parts and classes to provide granular control over component internals previously inaccessible via global CSS.

Content

The .content-fullscreen class is now added to ion-content when the fullscreen property is set to true.

Datetime

The following Shadow Parts give developers control over the headers and calendar elements in the Datetime component:

• calendar-days-of-week — container for the day-of-the-week header (both weekdays and weekends) when using a grid style layout
• calendar-header — container for the month/year picker, navigation buttons, and days of the week in a grid layout
• datetime-header — contains the content for the title slot and the selected date
• datetime-selected-date — contains the selected date
• datetime-title — contains the title slot content
• navigation-button — buttons used to navigate to the next or previous month in grid layout
• previous-button — button used to navigate to the previous month in grid layout
• next-button — button used to navigate to the next month in grid layout
• wheel — wheel container when using a wheel style layout or in the month/year picker in grid layout

Item & List Components

To provide greater flexibility in customizing the appearance and structure of list elements, the following Shadow Parts have been added for Item, Item Divider, Item Option, and List Header components:

Item

• inner — arranges the item content
• container — contains the default slot

Item Divider

• inner — arranges the divider content
• container — contains the default slot

Item Option

• inner — arranges the option content
• container — contains the start, icon-only, default, and end slots

List Header

• inner — arranges the list header content

Range

The .range-value-min and .range-value-max classes are applied to ion-range when the value reaches the configured min or max. When dualKnobs is enabled, both classes may be applied at the same time if the lower and upper knobs are set to the minimum and maximum values, respectively.

Select

The following Shadow Parts allow developers to adjust the appearance of the Select component:

• bottom — container for helper text, error text, and counter
• wrapper — clickable label element wrapping the entire form field
• inner — manages the slots, selected values or placeholder, and toggle icons

Toast

The following Shadow Parts enable customization of the Toast overlay and its content:

• wrapper — outer wrapper for the toast overlay
• content — live region containing the header and message

✨ New and Updated Properties

Segment View

A new swipeGesture property has been added to Segment View to control whether the view can be swiped.

This setting is independent of the swipeGesture property on Segment. If you want to fully disable swiping, you must set swipeGesture to "false" on both the Segment and Segment View components.

Select

A new cancelText property has been added to the modal interface for Select.

When using interface="modal", developers can now customize the cancel button text by setting the cancelText property on ion-select. The value will be passed through to the underlying modal.

<ion-select label="Fruit" interface="modal" value="bananas" cancel-text="Close me">
  <ion-select-option value="apples">Apples</ion-select-option>
  <ion-select-option value="bananas">Bananas</ion-select-option>
  <ion-select-option value="oranges">Oranges</ion-select-option>
</ion-select>

Textarea

The disabled and readonly properties on Textarea now reflect to the host element.

When either property is set, the corresponding HTML attribute is applied to the component’s host element. This improves consistency with native behavior and enables styling via attribute selectors.

🅰️ Angular Injector Support

ModalController and PopoverController in Angular now support passing a custom Injector when creating overlays.

By default, overlays use the root injector for dependency injection. With this update, you can provide a custom injector so that components rendered inside a modal or popover can access services and tokens that are scoped to a specific route or component tree.

This is especially useful when:

• Using route-scoped services
• Providing Angular CDK’s Dir directive for bidirectional text support
• Accessing providers that are not registered at the root level

You can pass the current component’s injector directly:

const modal = await this.modalController.create({
  component: MyModalComponent,
  injector: this.injector,
});

Or create a custom injector with specific providers:

const customInjector = Injector.create({
  providers: [{ provide: MyService, useValue: myServiceInstance }],
  parent: this.injector,
});

const modal = await this.modalController.create({
  component: MyModalComponent,
  injector: customInjector,
});

PopoverController supports the same injector option.

This enhancement removes the need for wrapper components or other workarounds when overlays need access to locally scoped dependencies.

Check out the Angular Overlays documentation for more information.

🧩 Stencil Update

Stencil has been updated from v4.38 to v4.43. This update includes various compiler improvements and bug fixes. For a complete list of changes, check out the Stencil Changelog.

As with any dependency update, if you encounter issues related to this Stencil upgrade, please open a new issue so we can investigate.

🔮 Looking Ahead: Ionic Framework 9

Ionic Framework 8.8 marks the final minor release in the Ionic 8 lifecycle. As we look ahead, our focus is shifting to the next major evolution of the framework: Ionic Framework 9.

Modular Ionic

Ionic Framework 9 will introduce significant architectural changes aimed at making the framework more modular and easier to extend. These changes lay the foundation for greater flexibility in how developers customize and build on top of Ionic Framework.

One of the main areas to benefit from Ionic Framework 9’s new architecture is theming. Developers will be able to:

• Create and distribute custom themes without modifying the core framework
• Share reusable themes across projects
• Configure component behavior based on the theme
• Build themes inspired by design systems such as Liquid Glass

While we are not planning to ship an official Liquid Glass theme right now, the goal is to provide the underlying architecture that enables developers to implement these types of design systems themselves without waiting on us.

React Router Support

Ionic Framework 9 will add support for React Router 6, enabling developers to adopt modern React routing patterns. This update lays the groundwork for future support of React Router 7. We’ll share more details on this soon.

---

Ionic Framework 8.8 enhances customization today while also paving the way for the modular architecture and React Router 6 support coming in Ionic Framework 9. We can’t wait to see what you build with it! 🚀