@ionic/core 8.2.3-dev.11719525475.1157acc5 → 8.2.3-dev.11719565135.1ab35bb2

package/dist/collection/components/action-sheet/action-sheet.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
@@ -98,8 +104,8 @@
   --max-height: calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: block;
@@ -116,8 +122,8 @@
 }
 
 .action-sheet-wrapper {
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   transform: translate3d(0,  100%,  0);
   display: block;
@@ -204,8 +210,8 @@
 }
 
 .action-sheet-button::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -246,6 +252,12 @@
     opacity: var(--button-background-hover-opacity);
   }
 }
+/**
+ * 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
@@ -306,11 +318,11 @@
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
   --button-background: linear-gradient(0deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08), rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 50%, transparent 50%) bottom/100% 1px no-repeat transparent;
   --button-background-activated: var(--ion-text-color, #000);
-  --button-background-activated-opacity: .08;
+  --button-background-activated-opacity: 0.08;
   --button-background-hover: currentColor;
-  --button-background-hover-opacity: .04;
+  --button-background-hover-opacity: 0.04;
   --button-background-focused: currentColor;
-  --button-background-focused-opacity: .12;
+  --button-background-focused-opacity: 0.12;
   --button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, var(--ion-background-color, #fff)));
   --button-background-selected-opacity: 1;
   --button-color: var(--ion-color-primary, #0054e9);

package/dist/collection/components/action-sheet/action-sheet.js

@@ -7,13 +7,14 @@ import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { BACKDROP, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
-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";
 /**
- * @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 ActionSheet {
     constructor() {
@@ -149,6 +150,7 @@ export class ActionSheet {
         setOverlayId(this.el);
     }
     componentDidLoad() {
+        const mode = getIonMode(this);
         /**
          * Only create gesture if:
          * 1. A gesture does not already exist
@@ -157,7 +159,7 @@ export class ActionSheet {
          * 4. A group ref exists
          */
         const { groupEl, wrapperEl } = this;
-        if (!this.gesture && getIonMode(this) === 'ios' && wrapperEl && groupEl) {
+        if (!this.gesture && mode === 'ios' && wrapperEl && groupEl) {
             readTask(() => {
                 const isScrollable = groupEl.scrollHeight > groupEl.clientHeight;
                 if (!isScrollable) {
@@ -186,30 +188,32 @@ export class ActionSheet {
     }
     render() {
         const { header, htmlAttributes, overlayIndex } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const allButtons = this.getButtons();
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (h(Host, Object.assign({ key: 'b640e9730af4bd9ec569884cf203c63102e0ea59', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '4926d42cea83073dbe46c767322078af6e15110b', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'bcfa5b7ffb5c265ef54caa114e697ada11f20c12', tappable: this.backdropDismiss }), h("div", { key: '207ae95b5365ce1d76170a05bdf8c83c3ba5de42', tabindex: "0" }), h("div", { key: 'bf2b4e8d57c822a4ea2bbe6c34b1b2f2067e4c02', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '9c4841eb03ca1378c5abc1e3aafbbcfaaa43c345', class: "action-sheet-container" }, h("div", { key: 'fa438b8663f5d30852e5967da0471489efa783b2', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '2c600f1cd8314d65137fb1bfa180312b4791121a', id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '105dd2cdad2b31c40142e784cddde5bb08eac968', tappable: this.backdropDismiss }), h("div", { key: 'd21b66922c3c6dcfd1698dbd44273def87d10c26', tabindex: "0" }), h("div", { key: '1d2777b45aafb073ca541b77cb813c4b0f36aa64', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '882816abae8fdea280eff1af401a4a3c98f9edc4', class: "action-sheet-container" }, h("div", { key: 'd89b2f6fc91b013f06a8d1648e5f3a00ff15b364', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: 'dd9ea553fb9f9c19f8d5b3f3659f01811be706e6', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { key: 'a98d6a3f7948733de22a07432e56255f11243b7b', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '5c5abd0e0b3d486ba2bfe437e28a23b2c7c4c955', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '520a23bbbe6c7436f5bc58bad162d7894b870e54' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '28c90f66786ee82316adc6cfd68d322d2038357d', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'fd49fcea260c7addc9b07718eeb02d4fa6e4d900', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'c83f636e171fe77635a4fce2b97161447e10546a' })))))), h("div", { key: 'd304920fc7cb006b87542183a3224a7e460abd3d', tabindex: "0" })));
+            } }, header, this.subHeader && h("div", { key: 'cbd1c671154f00317f716719478b98e96f34abcc', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), theme === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '4b588f9adf87aa92515f8061b5fee10d3e29dfca', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'a229a57032d9ba74d8b4753a3cb1aabdb603f603' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: 'd453f7c64fad5210c46dcdf9a14e29a578430bd7', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '4874280d228c76abeb43c43fc1de4714d1daad6c', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && h("ion-ripple-effect", { key: '61e0405b72b8ca7062937c36f405bddaef562560' })))))), h("div", { key: '22ed0b0e4cbad704cf4424250bb138e9c0aa8cb4', tabindex: "0" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["action-sheet.ios.scss"],
-            "md": ["action-sheet.md.scss"]
+            "md": ["action-sheet.md.scss"],
+            "ionic": ["action-sheet.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["action-sheet.ios.css"],
-            "md": ["action-sheet.md.css"]
+            "md": ["action-sheet.md.css"],
+            "ionic": ["action-sheet.md.css"]
         };
     }
     static get properties() {
@@ -442,7 +446,7 @@ export class ActionSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the action sheet 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 action sheet 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/action-sheet/action-sheet.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
@@ -98,8 +104,8 @@
   --max-height: calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: block;
@@ -116,8 +122,8 @@
 }
 
 .action-sheet-wrapper {
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   transform: translate3d(0,  100%,  0);
   display: block;
@@ -204,8 +210,8 @@
 }
 
 .action-sheet-button::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -246,6 +252,12 @@
     opacity: var(--button-background-hover-opacity);
   }
 }
+/**
+ * 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
@@ -310,9 +322,9 @@
   --button-background-activated: transparent;
   --button-background-activated-opacity: 0;
   --button-background-hover: currentColor;
-  --button-background-hover-opacity: .04;
+  --button-background-hover-opacity: 0.04;
   --button-background-focused: currentColor;
-  --button-background-focused-opacity: .12;
+  --button-background-focused-opacity: 0.12;
   --button-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   --button-color-disabled: var(--button-color);
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);

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

@@ -0,0 +1,99 @@
+/*!
+ * (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) => {
+    const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+    const button = page.locator(`#${buttonID}`);
+    await button.click();
+    await didPresent.next();
+    const actionSheet = page.locator('ion-action-sheet');
+    /**
+     * expect().toHaveAttribute() can't check for a null value, so grab and check
+     * the value manually instead.
+     */
+    const ariaLabelledBy = await actionSheet.getAttribute('aria-labelledby');
+    expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
+};
+const testAriaButton = async (page, buttonID, expectedAriaLabelledBy, expectedAriaLabel) => {
+    const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+    const button = page.locator(`#${buttonID}`);
+    await button.click();
+    await didPresent.next();
+    const actionSheetButton = page.locator('ion-action-sheet .action-sheet-button');
+    await expect(actionSheetButton).toHaveAttribute('aria-labelledby', expectedAriaLabelledBy);
+    await expect(actionSheetButton).toHaveAttribute('aria-label', expectedAriaLabel);
+};
+configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ config, title }) => {
+    test.describe(title('action-sheet: Axe testing'), () => {
+        test('should not have accessibility violations when header is defined', async ({ page }) => {
+            await page.setContent(`
+          <ion-action-sheet></ion-action-sheet>
+
+          <script>
+            const actionSheet = document.querySelector('ion-action-sheet');
+            actionSheet.header = 'Header';
+            actionSheet.subHeader = 'Subtitle';
+            actionSheet.buttons = ['Confirm'];
+          </script>
+        `, config);
+            const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+            const actionSheet = page.locator('ion-action-sheet');
+            await actionSheet.evaluate((el) => el.present());
+            await ionActionSheetDidPresent.next();
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
+configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
+    test.describe(title('action-sheet: aria attributes'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto(`/src/components/action-sheet/test/a11y`, config);
+        });
+        test('should have aria-labelledby when header is set', async ({ page }) => {
+            await testAria(page, 'bothHeaders', 'action-sheet-1-header');
+        });
+        test('should not have aria-labelledby when header is not set', async ({ page }) => {
+            await testAria(page, 'noHeaders', null);
+        });
+        test('should allow for manually specifying aria attributes', async ({ page }) => {
+            await testAria(page, 'customAria', 'Custom title');
+        });
+        test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({ page, }) => {
+            await testAriaButton(page, 'ariaLabelButton', 'close-label', 'close button');
+        });
+        test('should have aria-labelledby and aria-label added to the cancel button when htmlAttributes is set', async ({ page, }) => {
+            await testAriaButton(page, 'ariaLabelCancelButton', 'cancel-label', 'cancel button');
+        });
+    });
+});
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('action-sheet: font scaling'), () => {
+        test('should scale text on larger font sizes', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+        <ion-action-sheet></ion-action-sheet>
+
+        <script>
+          const actionSheet = document.querySelector('ion-action-sheet');
+          actionSheet.header = 'Header';
+          actionSheet.subHeader = 'Sub Header';
+          actionSheet.buttons = ['Ok', { role: 'cancel', text: 'Cancel' }];
+        </script>
+      `, config);
+            const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+            const actionSheet = page.locator('ion-action-sheet');
+            await actionSheet.evaluate((el) => el.present());
+            await ionActionSheetDidPresent.next();
+            await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-scale`));
+        });
+    });
+});

package/dist/collection/components/action-sheet/test/action-sheet-id.spec.js

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

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

@@ -0,0 +1,60 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+import { ActionSheetFixture } from "./fixture";
+configs().forEach(({ config, screenshot, title }) => {
+    test.describe(title('action sheet: variant rendering'), () => {
+        let actionSheetFixture;
+        test.beforeEach(async ({ page }) => {
+            actionSheetFixture = new ActionSheetFixture(page, screenshot);
+            await page.goto(`/src/components/action-sheet/test/basic`, config);
+        });
+        test('should open basic action sheet', async () => {
+            await actionSheetFixture.open('#basic');
+            await actionSheetFixture.screenshot('basic');
+            /**
+             * We want to test that the dismiss method
+             * actually works, but we do not need to test
+             * it every time. As a result, we only
+             * call dismiss in this test.
+             */
+            await actionSheetFixture.dismiss();
+        });
+        test('should open cancel only action sheet', async () => {
+            await actionSheetFixture.open('#cancelOnly');
+            await actionSheetFixture.screenshot('cancel-only');
+        });
+        test('should open custom action sheet', async () => {
+            await actionSheetFixture.open('#custom');
+            await actionSheetFixture.screenshot('custom');
+        });
+        test('should open scrollable action sheet', async () => {
+            await actionSheetFixture.open('#scrollableOptions');
+            await actionSheetFixture.screenshot('scrollable-options');
+        });
+        test('should open scrollable action sheet without cancel', async () => {
+            await actionSheetFixture.open('#scrollWithoutCancel');
+            await actionSheetFixture.screenshot('scroll-without-cancel');
+        });
+    });
+});
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('action sheet: disabled buttons'), () => {
+        test('should render disabled button', async ({ page }) => {
+            await page.setContent(`
+        <ion-action-sheet></ion-action-sheet>
+        <script>
+          const actionSheet = document.querySelector('ion-action-sheet');
+          actionSheet.buttons = [
+            { text: 'Disabled', disabled: true }
+          ];
+        </script>
+      `, config);
+            const actionSheet = page.locator('ion-action-sheet');
+            await actionSheet.evaluate((el) => el.present());
+            await expect(actionSheet).toHaveScreenshot(screenshot('action-sheet-disabled'));
+        });
+    });
+});

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

@@ -0,0 +1,142 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+import { ActionSheetFixture } from "./fixture";
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
+    test.describe(title('action sheet: data'), () => {
+        let actionSheetFixture;
+        test.beforeEach(async ({ page }) => {
+            actionSheetFixture = new ActionSheetFixture(page);
+            await page.goto(`/src/components/action-sheet/test/basic`, config);
+        });
+        test('should return data', async ({ page }) => {
+            const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
+            await actionSheetFixture.open('#buttonData');
+            const buttonOption = page.locator('ion-action-sheet button#option');
+            await buttonOption.click();
+            await ionActionSheetDidDismiss.next();
+            expect(ionActionSheetDidDismiss).toHaveReceivedEventDetail({ data: { type: '1' }, role: undefined });
+        });
+        test('should return cancel button data', async ({ page }) => {
+            const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
+            await actionSheetFixture.open('#buttonData');
+            const buttonOption = page.locator('ion-action-sheet button.action-sheet-cancel');
+            await buttonOption.click();
+            await ionActionSheetDidDismiss.next();
+            expect(ionActionSheetDidDismiss).toHaveReceivedEventDetail({ data: { type: 'cancel' }, role: 'cancel' });
+        });
+    });
+});
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
+    test.describe(title('action sheet: variant functionality'), () => {
+        let actionSheetFixture;
+        test.beforeEach(async ({ page }) => {
+            actionSheetFixture = new ActionSheetFixture(page);
+            await page.goto(`/src/components/action-sheet/test/basic`, config);
+        });
+        test('should open custom backdrop action sheet', async ({ page }) => {
+            await actionSheetFixture.open('#customBackdrop');
+            const backdrop = page.locator('ion-action-sheet ion-backdrop');
+            await expect(backdrop).toHaveCSS('opacity', '1');
+        });
+        test('should open alert from action sheet', async ({ page }) => {
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            await actionSheetFixture.open('#alertFromActionSheet');
+            await page.click('#open-alert');
+            await ionAlertDidPresent.next();
+        });
+        test('should not dismiss action sheet when backdropDismiss: false', async ({ page }) => {
+            await actionSheetFixture.open('#noBackdropDismiss');
+            const actionSheet = page.locator('ion-action-sheet');
+            await actionSheet.locator('ion-backdrop').click();
+            await expect(actionSheet).toBeVisible();
+        });
+    });
+});
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
+    test.describe(title('action sheet: focus trap'), () => {
+        test('it should trap focus in action sheet', async ({ page, browserName }) => {
+            await page.goto(`/src/components/action-sheet/test/basic`, config);
+            const actionSheetFixture = new ActionSheetFixture(page);
+            const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+            await actionSheetFixture.open('#basic');
+            const buttons = page.locator('ion-action-sheet button');
+            await page.keyboard.press(tabKey);
+            await expect(buttons.nth(0)).toBeFocused();
+            await page.keyboard.press(`Shift+${tabKey}`);
+            await expect(buttons.nth(4)).toBeFocused();
+            await page.keyboard.press(tabKey);
+            await expect(buttons.nth(0)).toBeFocused();
+        });
+    });
+});
+/**
+ * This behavior needs to be tested in both modes but does not vary
+ * across directions due to the component only applying safe area
+ * to the top and bottom
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('action-sheet: basic'), () => {
+        test.describe('safe area', () => {
+            test('should have padding added by the safe area', async ({ page }, testInfo) => {
+                testInfo.annotations.push({
+                    type: 'issue',
+                    description: 'https://github.com/ionic-team/ionic-framework/issues/27777',
+                });
+                await page.setContent(`
+          <style>
+            :root {
+              --ion-safe-area-top: 60px;
+              --ion-safe-area-bottom: 40px;
+            }
+          </style>
+
+          <ion-action-sheet></ion-action-sheet>
+
+          <script>
+            const actionSheet = document.querySelector('ion-action-sheet');
+            actionSheet.header = 'Header';
+            actionSheet.subHeader = 'Sub Header';
+            actionSheet.buttons = [
+              'Add Reaction',
+              'Copy Text',
+              'Share Text',
+              'Copy Link to Message',
+              'Remind Me',
+              'Pin File',
+              'Star File',
+              'Mark Unread',
+              'Mark Read',
+              'Edit Title',
+              'Erase Title',
+              'Save Image',
+              'Copy Image',
+              'Erase Image',
+              'Delete File',
+              {
+                text: 'Cancel',
+                role: 'cancel'
+              },
+            ];
+          </script>
+        `, config);
+                const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+                const actionSheet = page.locator('ion-action-sheet');
+                await actionSheet.evaluate((el) => el.present());
+                await ionActionSheetDidPresent.next();
+                await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-safe-area`));
+            });
+        });
+    });
+});

package/dist/collection/components/action-sheet/test/basic/action-sheet.spec.js

@@ -0,0 +1,40 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { ActionSheet } from "../../action-sheet";
+describe('action sheet: htmlAttributes inheritance', () => {
+    it('should correctly inherit attributes on host', async () => {
+        const page = await newSpecPage({
+            components: [ActionSheet],
+            template: () => (h("ion-action-sheet", { htmlAttributes: {
+                    'data-testid': 'basic-action-sheet',
+                }, overlayIndex: 1 })),
+        });
+        const actionSheet = page.body.querySelector('ion-action-sheet');
+        await expect(actionSheet.getAttribute('data-testid')).toBe('basic-action-sheet');
+    });
+});
+describe('action sheet: disabled buttons', () => {
+    it('regular button should be disabled', async () => {
+        const page = await newSpecPage({
+            components: [ActionSheet],
+            template: () => (h("ion-action-sheet", { buttons: [{ text: 'cancel', disabled: true }], overlayIndex: 1 })),
+        });
+        const actionSheet = page.body.querySelector('ion-action-sheet');
+        await actionSheet.present();
+        const button = actionSheet.querySelector('.action-sheet-button');
+        await expect(button.hasAttribute('disabled')).toBe(true);
+    });
+    it('cancel button should not be disabled', async () => {
+        const page = await newSpecPage({
+            components: [ActionSheet],
+            template: () => (h("ion-action-sheet", { buttons: [{ text: 'cancel', role: 'cancel', disabled: true }], overlayIndex: 1 })),
+        });
+        const actionSheet = page.body.querySelector('ion-action-sheet');
+        await actionSheet.present();
+        const cancelButton = actionSheet.querySelector('.action-sheet-cancel');
+        await expect(cancelButton.hasAttribute('disabled')).toBe(false);
+    });
+});

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

@@ -0,0 +1,33 @@
+/*!
+ * (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: isOpen'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/components/action-sheet/test/is-open', config);
+        });
+        test('should open the action sheet', async ({ page }) => {
+            const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+            const actionSheet = page.locator('ion-action-sheet');
+            await page.click('#default');
+            await ionActionSheetDidPresent.next();
+            await expect(actionSheet).toBeVisible();
+        });
+        test('should open the action sheet then close after a timeout', async ({ page }) => {
+            const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+            const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
+            const actionSheet = page.locator('ion-action-sheet');
+            await page.click('#timeout');
+            await ionActionSheetDidPresent.next();
+            await expect(actionSheet).toBeVisible();
+            await ionActionSheetDidDismiss.next();
+            await expect(actionSheet).toBeHidden();
+        });
+        test('should open if isOpen is true on load', async ({ page }) => {
+            await page.setContent('<ion-action-sheet is-open="true"></ion-action-sheet>', config);
+            await expect(page.locator('ion-action-sheet')).toBeVisible();
+        });
+    });
+});

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

@@ -0,0 +1,18 @@
+/*!
+ * (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, screenshot, title }) => {
+    test.describe(title('action sheet: translucent'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/components/action-sheet/test/translucent`, config);
+            const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+            const basic = page.locator('#basic');
+            await basic.click();
+            await ionActionSheetDidPresent.next();
+            const actionSheet = page.locator('ion-action-sheet');
+            await expect(actionSheet).toHaveScreenshot(screenshot('action-sheet-translucent'));
+        });
+    });
+});