feat(toast): add shadow part for cancel button (#27921)

resolves #27920

core/api.txt

@@ -1471,6 +1471,7 @@ ion-toast,css-prop,--start
 ion-toast,css-prop,--white-space
 ion-toast,css-prop,--width
 ion-toast,part,button
+ion-toast,part,button cancel
 ion-toast,part,container
 ion-toast,part,header
 ion-toast,part,icon

core/src/components/toast/test/toast.spec.tsx

@@ -129,3 +129,18 @@ describe('toast: htmlAttributes', () => {
     await expect(toast.getAttribute('data-testid')).toBe('basic-toast');
   });
 });
+
+describe('toast: button cancel', () => {
+  it('should render the cancel button with part button-cancel', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      template: () => <ion-toast buttons={[{ text: 'Cancel', role: 'cancel' }]}></ion-toast>,
+    });
+
+    const toast = page.body.querySelector('ion-toast');
+
+    const buttonCancel = toast?.shadowRoot?.querySelector('.toast-button-cancel');
+
+    expect(buttonCancel.getAttribute('part')).toBe('button cancel');
+  });
+});

core/src/components/toast/toast.tsx

@@ -35,6 +35,7 @@ import type { ToastButton, ToastPosition, ToastLayout } from './toast-interface'
  * @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 header - The header text of the toast.
  * @part message - The body text of the toast.
@@ -422,7 +423,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
             class={buttonClass(b)}
             tabIndex={0}
             onClick={() => this.buttonClick(b)}
-            part="button"
+            part={buttonPart(b)}
           >
             <div class="toast-button-inner">
               {b.icon && (
@@ -586,5 +587,9 @@ const buttonClass = (button: ToastButton): CssClassMap => {
   };
 };
 
+const buttonPart = (button: ToastButton): string => {
+  return isCancel(button.role) ? 'button cancel' : 'button';
+};
+
 type ToastPresentOptions = ToastPosition;
 type ToastDismissOptions = ToastPosition;