@ionic/core 8.2.3-dev.11719513154.1075733b → 8.2.3-dev.11719565135.1ab35bb2

package/dist/collection/components/action-sheet/test/trigger/action-sheet.e2e.js

@@ -0,0 +1,29 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ config, title }) => {
+    test.describe(title('action sheet: trigger'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/components/action-sheet/test/trigger', config);
+        });
+        test('should open the action sheet', async ({ page }) => {
+            const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+            const actionSheet = page.locator('#default-action-sheet');
+            await page.click('#default');
+            await ionActionSheetDidPresent.next();
+            await expect(actionSheet).toBeVisible();
+        });
+        test('should present a previously presented action sheet', async ({ page }) => {
+            const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+            const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
+            const actionSheet = page.locator('#timeout-action-sheet');
+            await page.click('#timeout');
+            await ionActionSheetDidDismiss.next();
+            await page.click('#timeout');
+            await ionActionSheetDidPresent.next();
+            await expect(actionSheet).toBeVisible();
+        });
+    });
+});

package/dist/collection/components/alert/alert.ios.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -74,8 +80,8 @@
   --max-height: 90%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -288,6 +294,12 @@ textarea.alert-input {
   resize: none;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -343,6 +355,12 @@ textarea.alert-input {
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/alert/alert.js

@@ -10,14 +10,15 @@ import { createDelegateController, createTriggerController, BACKDROP, dismiss, e
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class Alert {
     constructor() {
@@ -323,11 +324,11 @@ export class Alert {
     }
     renderCheckbox() {
         const inputs = this.processedInputs;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), h("div", { class: "alert-checkbox-label" }, i.label)), mode === 'md' && h("ion-ripple-effect", null))))));
+        return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), h("div", { class: "alert-checkbox-label" }, i.label)), theme === 'md' && h("ion-ripple-effect", null))))));
     }
     renderRadio() {
         const inputs = this.processedInputs;
@@ -365,12 +366,12 @@ export class Alert {
     }
     renderAlertButtons() {
         const buttons = this.processedButtons;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const alertButtonGroupClass = {
             'alert-button-group': true,
             'alert-button-group-vertical': buttons.length > 2,
         };
-        return (h("div", { class: alertButtonGroupClass }, buttons.map((button) => (h("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }), h("span", { class: "alert-button-inner" }, button.text), mode === 'md' && h("ion-ripple-effect", null))))));
+        return (h("div", { class: alertButtonGroupClass }, buttons.map((button) => (h("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }), h("span", { class: "alert-button-inner" }, button.text), theme === 'md' && h("ion-ripple-effect", null))))));
     }
     renderAlertMessage(msgId) {
         const { customHTMLEnabled, message } = this;
@@ -381,7 +382,7 @@ export class Alert {
     }
     render() {
         const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const hdrId = `alert-${overlayIndex}-hdr`;
         const subHdrId = `alert-${overlayIndex}-sub-hdr`;
         const msgId = `alert-${overlayIndex}-msg`;
@@ -391,22 +392,24 @@ export class Alert {
          * If neither is defined, don't set aria-labelledby.
          */
         const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, Object.assign({ key: 'b1875ea565c40a25915e26e61864f8c61d840ccc', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'da02eb325cd4b01121327a65dbc29144f4437c73', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '37d9d7d1a47bfa23c3bb8d8d9805f52a5bbedf61', tappable: this.backdropDismiss }), h("div", { key: '0134cc90b7f02dcdd13dfdc39a72f2259182de90', tabindex: "0" }), h("div", { key: 'ed054b063ec2d1847b3234d5bdf3e66054784ed7', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'fb81befae081424f03c64b434ffdd79bb1b00d0c', class: "alert-head" }, header && (h("h2", { key: '92596dfdd92c4f63c82ed86b4a2473b3110daae3', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: 'ba7a0734cf818224f453604ec638770ca61bfef6', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '41a2619836a4af5d158216ef14b49985c7941b78', tabindex: "0" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '5c9f99ce34d2cb61df940a8c8d3bd56d35399ee0', tappable: this.backdropDismiss }), h("div", { key: '9743836d244a46a8017ece6e0d0eb9e79de457ef', tabindex: "0" }), h("div", { key: '131a0ee4b1597766e45ca1e33989befbf4646bf9', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'b70bbd4c079186ae70368518b4182fb98b82f925', class: "alert-head" }, header && (h("h2", { key: '293d1422ff584a69e6c2f38ab9c53285b496cb4d', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: '78f41d03dee087153282db242c7cafdc30467f02', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '17564849cbe2ba5b3f86fb0c96f2a08e52f97476', tabindex: "0" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["alert.ios.scss"],
-            "md": ["alert.md.scss"]
+            "md": ["alert.md.scss"],
+            "ionic": ["alert.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["alert.ios.css"],
-            "md": ["alert.md.css"]
+            "md": ["alert.md.css"],
+            "ionic": ["alert.md.css"]
         };
     }
     static get properties() {
@@ -684,7 +687,7 @@ export class Alert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the alert will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/alert/alert.md.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -74,8 +80,8 @@
   --max-height: 90%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -288,6 +294,12 @@ textarea.alert-input {
   resize: none;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -343,6 +355,12 @@ textarea.alert-input {
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/alert/test/a11y/alert.e2e.js

@@ -0,0 +1,247 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import AxeBuilder from "@axe-core/playwright";
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+const testAria = async (page, buttonID, expectedAriaLabelledBy, expectedAriaDescribedBy) => {
+    const didPresent = await page.spyOnEvent('ionAlertDidPresent');
+    const button = page.locator(`#${buttonID}`);
+    await button.click();
+    await didPresent.next();
+    const alert = page.locator('ion-alert');
+    /**
+     * expect().toHaveAttribute() can't check for a null value, so grab and check
+     * the values manually instead.
+     */
+    const ariaLabelledBy = await alert.getAttribute('aria-labelledby');
+    const ariaDescribedBy = await alert.getAttribute('aria-describedby');
+    expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
+    expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);
+};
+configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ title, config }) => {
+    test.describe(title('alert: Axe testing'), () => {
+        test('should not have accessibility violations when header and message are defined', async ({ page }) => {
+            await page.setContent(`
+          <ion-alert></ion-alert>
+
+          <script>
+            const alert = document.querySelector('ion-alert');
+            alert.header = 'Header';
+            alert.subHeader = 'Subtitle';
+            alert.buttons = ['OK'];
+          </script>
+        `, config);
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const alert = page.locator('ion-alert');
+            await alert.evaluate((el) => el.present());
+            await ionAlertDidPresent.next();
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('alert: text wrapping'), () => {
+        test('should break on words and white spaces for radios', async ({ page }, testInfo) => {
+            testInfo.annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/28406',
+            });
+            await page.setContent(`
+        <ion-alert header='Text Wrapping'></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.inputs = [
+            { type: 'radio', value: 'a', label: 'ThisIsAllOneReallyLongWordThatShouldWrap' },
+            { type: 'radio', value: 'b', label: 'These are separate words that should wrap' }
+          ];
+        </script>
+      `, config);
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const alert = page.locator('ion-alert');
+            await alert.evaluate((el) => el.present());
+            await ionAlertDidPresent.next();
+            await expect(page).toHaveScreenshot(screenshot(`alert-radio-text-wrap`));
+        });
+        test('should break on words and white spaces for checkboxes', async ({ page }, testInfo) => {
+            testInfo.annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/28406',
+            });
+            await page.setContent(`
+        <ion-alert header='Text Wrapping'></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.inputs = [
+            { type: 'checkbox', value: 'a', label: 'ThisIsAllOneReallyLongWordThatShouldWrap' },
+            { type: 'checkbox', value: 'b', label: 'These are separate words that should wrap' }
+          ];
+        </script>
+      `, config);
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const alert = page.locator('ion-alert');
+            await alert.evaluate((el) => el.present());
+            await ionAlertDidPresent.next();
+            await expect(page).toHaveScreenshot(screenshot(`alert-checkbox-text-wrap`));
+        });
+    });
+});
+configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
+    test.describe(title('alert: a11y'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto(`/src/components/alert/test/a11y`, config);
+        });
+        test('should have aria-labelledby when header is set', async ({ page }) => {
+            await testAria(page, 'noMessage', 'alert-1-hdr', null);
+        });
+        test('should have aria-describedby when message is set', async ({ page }) => {
+            await testAria(page, 'noHeaders', null, 'alert-1-msg');
+        });
+        test('should fall back to subHeader for aria-labelledby if header is not defined', async ({ page }) => {
+            await testAria(page, 'subHeaderOnly', 'alert-1-sub-hdr', 'alert-1-msg');
+        });
+        test('should allow for manually specifying aria attributes', async ({ page }) => {
+            await testAria(page, 'customAria', 'Custom title', 'Custom description');
+        });
+        test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({ page, }) => {
+            const didPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const button = page.locator('#ariaLabelButton');
+            await button.click();
+            await didPresent.next();
+            const alertButton = page.locator('ion-alert .alert-button');
+            await expect(alertButton).toHaveAttribute('aria-labelledby', 'close-label');
+            await expect(alertButton).toHaveAttribute('aria-label', 'close button');
+        });
+        test('should not toggle the checkbox when pressing the Enter key', async ({ page }) => {
+            const didPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const button = page.locator('#checkbox');
+            await button.click();
+            await didPresent.next();
+            const alertCheckbox = page.locator('ion-alert .alert-checkbox');
+            const ariaChecked = await alertCheckbox.getAttribute('aria-checked');
+            await expect(alertCheckbox).toHaveAttribute('aria-checked', ariaChecked);
+            await alertCheckbox.press('Enter');
+            await expect(alertCheckbox).toHaveAttribute('aria-checked', ariaChecked);
+        });
+    });
+});
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('alert: font scaling'), () => {
+        test('should scale text on larger font sizes', async ({ page, skip }) => {
+            // TODO(ROU-8158): unskip this test when a solution is found
+            skip.browser('chromium', 'Rendering is flaky in Chrome.');
+            await page.setContent(`
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+
+        <ion-alert header="Header" sub-header="Sub Header" message="Message"></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.buttons = ['Ok', 'Cancel'];
+        </script>
+      `, config);
+            const alert = page.locator('ion-alert');
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            await alert.evaluate((el) => el.present());
+            await ionAlertDidPresent.next();
+            await expect(page).toHaveScreenshot(screenshot(`alert-scale`));
+        });
+        test('should scale text on larger font sizes with checkboxes', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+
+        <ion-alert header="Header" sub-header="Sub Header" message="Message"></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.inputs = [
+            { type: 'checkbox', value: 'a', label: 'Checkbox A', checked: true },
+            { type: 'checkbox', value: 'b', label: 'Checkbox B' },
+            { type: 'checkbox', value: 'c', label: 'Checkbox C' },
+            { type: 'checkbox', value: 'd', label: 'Checkbox D' },
+          ];
+          alert.buttons = ['Ok', 'Cancel'];
+        </script>
+      `, config);
+            const alert = page.locator('ion-alert');
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            await alert.evaluate((el) => el.present());
+            await ionAlertDidPresent.next();
+            await expect(page).toHaveScreenshot(screenshot(`alert-checkbox-scale`));
+        });
+        test('should scale text on larger font sizes with radios', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+
+        <ion-alert header="Header" sub-header="Sub Header" message="Message"></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.inputs = [
+            { type: 'radio', value: 'a', label: 'Radio A', checked: true },
+            { type: 'radio', value: 'b', label: 'Radio B' },
+            { type: 'radio', value: 'c', label: 'Radio C' },
+            { type: 'radio', value: 'd', label: 'Radio D' },
+          ];
+          alert.buttons = ['Ok', 'Cancel'];
+        </script>
+      `, config);
+            const alert = page.locator('ion-alert');
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            await alert.evaluate((el) => el.present());
+            await ionAlertDidPresent.next();
+            await expect(page).toHaveScreenshot(screenshot(`alert-radio-scale`));
+        });
+        test('should scale text on larger font sizes with text fields', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+
+        <ion-alert header="Header" sub-header="Sub Header" message="Message"></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.inputs = [
+            { type: 'text', value: 'My Input', label: 'Input' },
+            { type: 'textarea', value: 'My Textarea', label: 'Textarea' },
+          ];
+          alert.buttons = ['Ok', 'Cancel'];
+        </script>
+      `, config);
+            const alert = page.locator('ion-alert');
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            await alert.evaluate((el) => el.present());
+            await ionAlertDidPresent.next();
+            /**
+             * The borders on the text fields may not be visible in the screenshot
+             * when using Safari, this is due to a WebKit rendering quirk.
+             */
+            await expect(page).toHaveScreenshot(screenshot(`alert-text-fields-scale`));
+        });
+    });
+});

package/dist/collection/components/alert/test/alert-id.spec.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Alert } from "../alert";
+it('alert should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+        components: [Alert],
+        html: `<ion-alert is-open="true"></ion-alert>`,
+    });
+    let alert;
+    alert = page.body.querySelector('ion-alert');
+    expect(alert).not.toBe(null);
+    expect(alert.getAttribute('id')).toBe('ion-overlay-1');
+    // Remove the alert from the DOM
+    alert.remove();
+    await page.waitForChanges();
+    // Create a new alert to verify the id is incremented
+    alert = document.createElement('ion-alert');
+    alert.isOpen = true;
+    page.body.appendChild(alert);
+    await page.waitForChanges();
+    alert = page.body.querySelector('ion-alert');
+    expect(alert.getAttribute('id')).toBe('ion-overlay-2');
+    // Presenting the same alert again should reuse the existing id
+    alert.isOpen = false;
+    await page.waitForChanges();
+    alert.isOpen = true;
+    await page.waitForChanges();
+    alert = page.body.querySelector('ion-alert');
+    expect(alert.getAttribute('id')).toBe('ion-overlay-2');
+});

package/dist/collection/components/alert/test/alert.spec.js

@@ -0,0 +1,37 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { config } from "../../../global/config";
+import { Alert } from "../alert";
+describe('alert: custom html', () => {
+    it('should not allow for custom html by default', async () => {
+        const page = await newSpecPage({
+            components: [Alert],
+            html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
+        });
+        const content = page.body.querySelector('.alert-message');
+        expect(content.textContent).toContain('Custom Text');
+        expect(content.querySelector('button.custom-html')).toBe(null);
+    });
+    it('should allow for custom html', async () => {
+        config.reset({ innerHTMLTemplatesEnabled: true });
+        const page = await newSpecPage({
+            components: [Alert],
+            html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
+        });
+        const content = page.body.querySelector('.alert-message');
+        expect(content.textContent).toContain('Custom Text');
+        expect(content.querySelector('button.custom-html')).not.toBe(null);
+    });
+    it('should not allow for custom html', async () => {
+        config.reset({ innerHTMLTemplatesEnabled: false });
+        const page = await newSpecPage({
+            components: [Alert],
+            html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
+        });
+        const content = page.body.querySelector('.alert-message');
+        expect(content.textContent).toContain('Custom Text');
+        expect(content.querySelector('button.custom-html')).toBe(null);
+    });
+});

package/dist/collection/components/alert/test/basic/alert-tablet.e2e.js

@@ -0,0 +1,40 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test, Viewports } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('alert: rendering - tablet'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.setViewportSize(Viewports.tablet.portrait);
+            await page.goto('/src/components/alert/test/basic', config);
+        });
+        test('should expand width and height on larger displays with text', async ({ page }) => {
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const button = page.locator('#longMessage');
+            const alert = page.locator('ion-alert');
+            await button.click();
+            await ionAlertDidPresent.next();
+            await expect(alert).toHaveScreenshot(screenshot('alert-tablet-text'));
+        });
+        test('should expand width and height on larger displays with checkboxes', async ({ page }) => {
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const button = page.locator('#checkbox');
+            const alert = page.locator('ion-alert');
+            await button.click();
+            await ionAlertDidPresent.next();
+            await expect(alert).toHaveScreenshot(screenshot('alert-tablet-checkboxes'));
+        });
+        test('should expand width and height on larger displays with radios', async ({ page }) => {
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const button = page.locator('#radio');
+            const alert = page.locator('ion-alert');
+            await button.click();
+            await ionAlertDidPresent.next();
+            await expect(alert).toHaveScreenshot(screenshot('alert-tablet-radios'));
+        });
+    });
+});