merge release-8.8.1

CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.1](https://github.com/ionic-team/ionic-framework/compare/v8.8.0...v8.8.1) (2026-03-06)
+
+
+### Bug Fixes
+
+* **accordion:** update tabindex based on disabled state ([#30986](https://github.com/ionic-team/ionic-framework/issues/30986)) ([0e76a69](https://github.com/ionic-team/ionic-framework/commit/0e76a69370083702568825c29d63cf257d6b88f1))
+* **angular:** export RefresherPullEnd types ([#30991](https://github.com/ionic-team/ionic-framework/issues/30991)) ([72abcca](https://github.com/ionic-team/ionic-framework/commit/72abccaad8df3c1db004da28610fddd95ac93c02))
+
+
+### Features
+
+* **toast:** add wrapper and content parts (originally intended for 8.8.0 but omitted from that release) ([#30992](https://github.com/ionic-team/ionic-framework/issues/30992)) ([366f00e](https://github.com/ionic-team/ionic-framework/commit/366f00e25f06e28aa7166275445716c2d301e44a)), closes [#30735](https://github.com/ionic-team/ionic-framework/issues/30735)
+
+
+
+
+
 # [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
 
 
@@ -16,7 +33,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **item-option:** add inner and container parts ([#30929](https://github.com/ionic-team/ionic-framework/issues/30929)) ([f8f7ffd](https://github.com/ionic-team/ionic-framework/commit/f8f7ffda318c0143d9bb5c79fe55b4ecb88e6ce3))
 * **item:** add inner and container parts ([#30927](https://github.com/ionic-team/ionic-framework/issues/30927)) ([a2c6559](https://github.com/ionic-team/ionic-framework/commit/a2c655923bb1cff51864949575e19028623c695d))
 * **list-header:** add inner part ([#30930](https://github.com/ionic-team/ionic-framework/issues/30930)) ([ef73476](https://github.com/ionic-team/ionic-framework/commit/ef73476e08670630907e775a38f9ed30a84e3f1f))
-* **modal:** add drag events for sheet and card modals ([#30962](https://github.com/ionic-team/ionic-framework/issues/30962)) ([d29ac71](https://github.com/ionic-team/ionic-framework/commit/d29ac713fad604c256fb385eb0c26eb9717e1ff4))
+* **modal:** add drag events for sheet and card modals ([#30962](https://github.com/ionic-team/ionic-framework/issues/30962)) ([d29ac71](https://github.com/ionic-team/ionic-framework/commit/d29ac713fad604c256fb385eb0c26eb9717e1ff4)), closes [#23955](https://github.com/ionic-team/ionic-framework/issues/23955)
 * **range:** add classes and expose parts to allow individual styling of dual knobs ([#30941](https://github.com/ionic-team/ionic-framework/issues/30941)) ([5bcf921](https://github.com/ionic-team/ionic-framework/commit/5bcf92184118055483bf306ab9e319b8e3e61870)), closes [#29862](https://github.com/ionic-team/ionic-framework/issues/29862)
 * **range:** add classes to the range when the value is at the min or max ([#30932](https://github.com/ionic-team/ionic-framework/issues/30932)) ([fac1a66](https://github.com/ionic-team/ionic-framework/commit/fac1a6673c88a531f1d79656be4eb544f235f819))
 * **refresher:** add ionPullStart and ionPullEnd events ([#30946](https://github.com/ionic-team/ionic-framework/issues/30946)) ([814c2e5](https://github.com/ionic-team/ionic-framework/commit/814c2e5ccd6d5bfda12bdf13a566cd66ff830d5b)), closes [#24524](https://github.com/ionic-team/ionic-framework/issues/24524)

core/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.1](https://github.com/ionic-team/ionic-framework/compare/v8.8.0...v8.8.1) (2026-03-06)
+
+
+### Bug Fixes
+
+* **accordion:** update tabindex based on disabled state ([#30986](https://github.com/ionic-team/ionic-framework/issues/30986)) ([0e76a69](https://github.com/ionic-team/ionic-framework/commit/0e76a69370083702568825c29d63cf257d6b88f1))
+* **angular:** export RefresherPullEnd types ([#30991](https://github.com/ionic-team/ionic-framework/issues/30991)) ([72abcca](https://github.com/ionic-team/ionic-framework/commit/72abccaad8df3c1db004da28610fddd95ac93c02))
+
+
+### Features
+
+* **toast:** add wrapper and content parts (originally intended for 8.8.0 but omitted from that release) ([#30992](https://github.com/ionic-team/ionic-framework/issues/30992)) ([366f00e](https://github.com/ionic-team/ionic-framework/commit/366f00e25f06e28aa7166275445716c2d301e44a)), closes [#30735](https://github.com/ionic-team/ionic-framework/issues/30735)
+
+
+
+
+
 # [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
 
 
@@ -15,7 +32,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **item-option:** add inner and container parts ([#30929](https://github.com/ionic-team/ionic-framework/issues/30929)) ([f8f7ffd](https://github.com/ionic-team/ionic-framework/commit/f8f7ffda318c0143d9bb5c79fe55b4ecb88e6ce3))
 * **item:** add inner and container parts ([#30927](https://github.com/ionic-team/ionic-framework/issues/30927)) ([a2c6559](https://github.com/ionic-team/ionic-framework/commit/a2c655923bb1cff51864949575e19028623c695d))
 * **list-header:** add inner part ([#30930](https://github.com/ionic-team/ionic-framework/issues/30930)) ([ef73476](https://github.com/ionic-team/ionic-framework/commit/ef73476e08670630907e775a38f9ed30a84e3f1f))
-* **modal:** add drag events for sheet and card modals ([#30962](https://github.com/ionic-team/ionic-framework/issues/30962)) ([d29ac71](https://github.com/ionic-team/ionic-framework/commit/d29ac713fad604c256fb385eb0c26eb9717e1ff4))
+* **modal:** add drag events for sheet and card modals ([#30962](https://github.com/ionic-team/ionic-framework/issues/30962)) ([d29ac71](https://github.com/ionic-team/ionic-framework/commit/d29ac713fad604c256fb385eb0c26eb9717e1ff4)), closes [#23955](https://github.com/ionic-team/ionic-framework/issues/23955)
 * **range:** add classes and expose parts to allow individual styling of dual knobs ([#30941](https://github.com/ionic-team/ionic-framework/issues/30941)) ([5bcf921](https://github.com/ionic-team/ionic-framework/commit/5bcf92184118055483bf306ab9e319b8e3e61870)), closes [#29862](https://github.com/ionic-team/ionic-framework/issues/29862)
 * **range:** add classes to the range when the value is at the min or max ([#30932](https://github.com/ionic-team/ionic-framework/issues/30932)) ([fac1a66](https://github.com/ionic-team/ionic-framework/commit/fac1a6673c88a531f1d79656be4eb544f235f819))
 * **refresher:** add ionPullStart and ionPullEnd events ([#30946](https://github.com/ionic-team/ionic-framework/issues/30946)) ([814c2e5](https://github.com/ionic-team/ionic-framework/commit/814c2e5ccd6d5bfda12bdf13a566cd66ff830d5b)), closes [#24524](https://github.com/ionic-team/ionic-framework/issues/24524)

core/api.txt

@@ -2059,9 +2059,11 @@ ion-toast,css-prop,--width,md
 ion-toast,part,button
 ion-toast,part,button cancel
 ion-toast,part,container
+ion-toast,part,content
 ion-toast,part,header
 ion-toast,part,icon
 ion-toast,part,message
+ion-toast,part,wrapper
 
 ion-toggle,shadow
 ion-toggle,prop,alignment,"center" | "start" | undefined,undefined,false,false

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.0",
+  "version": "8.8.1",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"

core/src/components.d.ts

@@ -8046,7 +8046,7 @@ declare namespace LocalJSX {
          */
         "onIonRefresh"?: (event: IonRefresherCustomEvent<RefresherEventDetail>) => void;
         /**
-          * Emitted when the user begins to start pulling down. TODO(FW-7044): Remove this in a major release
+          * Emitted when the user begins to start pulling down.
           * @deprecated Use `ionPullStart` instead.
          */
         "onIonStart"?: (event: IonRefresherCustomEvent<void>) => void;

core/src/components/accordion/accordion.tsx

@@ -514,6 +514,7 @@ export class Accordion implements ComponentInterface {
 
           'accordion-animated': this.shouldAnimate(),
         }}
+        tabindex={disabled ? '-1' : undefined}
       >
         <div
           onClick={() => this.toggleExpanded()}

core/src/components/refresher/refresher.tsx

@@ -141,9 +141,9 @@ export class Refresher implements ComponentInterface {
    */
   @Event() ionPull!: EventEmitter<void>;
 
+  // TODO(FW-7044): Remove this in a major release
   /**
    * Emitted when the user begins to start pulling down.
-   * TODO(FW-7044): Remove this in a major release
    *
    * @deprecated Use `ionPullStart` instead.
    */

core/src/components/toast/test/custom/toast.e2e.ts

@@ -0,0 +1,133 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('toast: custom'), () => {
+    test('should be able to customize toast wrapper, container, and content using css parts', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toast is-open="true" header="Header" message="Hello World"></ion-toast>
+
+        <style>
+          ion-toast::part(wrapper) {
+            background-color: red;
+          }
+          ion-toast::part(container) {
+            background-color: green;
+          }
+          ion-toast::part(content) {
+            background-color: blue;
+          }
+        </style>
+      `,
+        config
+      );
+
+      const wrapperColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="wrapper"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).backgroundColor : null;
+      });
+
+      expect(wrapperColor).toBe('rgb(255, 0, 0)');
+
+      const containerColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="container"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).backgroundColor : null;
+      });
+
+      expect(containerColor).toBe('rgb(0, 128, 0)');
+
+      const contentColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="content"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).backgroundColor : null;
+      });
+
+      expect(contentColor).toBe('rgb(0, 0, 255)');
+    });
+
+    test('should be able to customize toast header and message using css parts', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toast is-open="true" header="Header" message="Hello World"></ion-toast>
+
+        <style>
+          ion-toast::part(header) {
+            color: red;
+          }
+          ion-toast::part(message) {
+            color: green;
+          }
+        </style>
+      `,
+        config
+      );
+
+      const headerColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="header"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).color : null;
+      });
+
+      expect(headerColor).toBe('rgb(255, 0, 0)');
+
+      const messageColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="message"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).color : null;
+      });
+
+      expect(messageColor).toBe('rgb(0, 128, 0)');
+    });
+
+    test('should be able to customize toast icon, button, and button cancel using css parts', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toast is-open="true" header="Header" message="Hello World" icon="alert"></ion-toast>
+
+        <style>
+          ion-toast::part(icon) {
+            color: red;
+          }
+          ion-toast::part(button) {
+            color: green;
+          }
+          ion-toast::part(button cancel) {
+            color: blue;
+          }
+        </style>
+
+        <script>
+          const toast = document.querySelector('ion-toast');
+          toast.buttons = [
+            { text: 'Cancel', role: 'cancel' },
+            { text: 'OK' }
+          ];
+        </script>
+      `,
+        config
+      );
+
+      const iconColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="icon"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).color : null;
+      });
+
+      expect(iconColor).toBe('rgb(255, 0, 0)');
+
+      const buttonColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="button"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).color : null;
+      });
+
+      expect(buttonColor).toBe('rgb(0, 128, 0)');
+
+      const buttonCancelColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="button cancel"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).color : null;
+      });
+
+      expect(buttonCancelColor).toBe('rgb(0, 0, 255)');
+    });
+  });
+});

core/src/components/toast/toast.tsx

@@ -47,12 +47,14 @@ import type {
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
- * @part button - Any button element that is displayed inside of the toast.
- * @part button cancel - Any button element with role "cancel" that is displayed inside of the toast.
- * @part container - The element that wraps all child elements.
+ * @part wrapper - The outer wrapper for the toast overlay.
+ * @part container - Groups the icon, content, and buttons.
+ * @part content - The live region that contains the header and message.
  * @part header - The header text of the toast.
  * @part message - The body text of the toast.
  * @part icon - The icon that appears next to the toast content.
+ * @part button - Any button element that is displayed inside of the toast.
+ * @part button cancel - Any button element with role "cancel" that is displayed inside of the toast.
  */
 @Component({
   tag: 'ion-toast',
@@ -727,7 +729,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
         })}
         onIonToastWillDismiss={this.dispatchCancelHandler}
       >
-        <div class={wrapperClass}>
+        <div class={wrapperClass} part="wrapper">
           <div class="toast-container" part="container">
             {this.renderButtons(startButtons, 'start')}
 
@@ -746,7 +748,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
               not interrupt the user which is why this has
               a "status" role and a "polite" presentation.
             */}
-            <div class="toast-content" role="status" aria-atomic="true" aria-live="polite">
+            <div class="toast-content" part="content" role="status" aria-atomic="true" aria-live="polite">
               {/*
                 This logic below is done to improve consistency
                 across platforms when showing and updating live regions.

lerna.json

@@ -3,5 +3,5 @@
     "core",
     "packages/*"
   ],
-  "version": "8.8.0"
+  "version": "8.8.1"
 }

packages/angular-server/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.1](https://github.com/ionic-team/ionic-framework/compare/v8.8.0...v8.8.1) (2026-03-06)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 # [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
 
 **Note:** Version bump only for package @ionic/angular-server

packages/angular-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.8.0",
+  "version": "8.8.1",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^8.8.0"
+    "@ionic/core": "^8.8.1"
   }
 }