voyager-ionic-core 7.6.5 → 7.7.2

package/dist/collection/components/accordion/test/readonly/accordion.e2e.js

@@ -0,0 +1,94 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+// NOTE: these tests cannot be re-written as spec tests because the `getAccordions` method in accordion-group.tsx uses a `:scope` selector
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+    test.describe(title('accordion: readonly'), () => {
+        test('should properly set readonly on child accordions', async ({ page }) => {
+            await page.setContent(`
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `, config);
+            const accordionGroup = page.locator('ion-accordion-group');
+            const accordion = page.locator('ion-accordion');
+            await expect(accordion).toHaveJSProperty('readonly', false);
+            await accordionGroup.evaluate((el) => {
+                el.readonly = true;
+            });
+            await page.waitForChanges();
+            await expect(accordion).toHaveJSProperty('readonly', true);
+        });
+        test('should not open accordion on click when group is readonly', async ({ page }) => {
+            await page.setContent(`
+      <ion-accordion-group animated="false" readonly>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `, config);
+            const accordion = page.locator('ion-accordion');
+            await expect(accordion).toHaveClass(/accordion-collapsed/);
+            accordion.click();
+            await page.waitForChanges();
+            await expect(accordion).toHaveClass(/accordion-collapsed/);
+        });
+        test('should not open accordion on click when accordion is readonly', async ({ page }) => {
+            await page.setContent(`
+      <ion-accordion-group animated="false">
+        <ion-accordion readonly>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `, config);
+            const accordion = page.locator('ion-accordion');
+            await expect(accordion).toHaveClass(/accordion-collapsed/);
+            accordion.click();
+            await page.waitForChanges();
+            await expect(accordion).toHaveClass(/accordion-collapsed/);
+        });
+        test('should not open accordion via keyboard navigation when group is readonly', async ({ page, browserName }) => {
+            await page.setContent(`
+      <ion-accordion-group animated="false" readonly>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `, config);
+            const accordion = page.locator('ion-accordion');
+            const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+            await expect(accordion).toHaveClass(/accordion-collapsed/);
+            await page.keyboard.press(tabKey);
+            await page.waitForChanges();
+            await page.keyboard.press('Enter');
+            await page.waitForChanges();
+            await expect(accordion).toHaveClass(/accordion-collapsed/);
+        });
+        test('should not open accordion via keyboard navigation when accordion is readonly', async ({ page, browserName, }) => {
+            await page.setContent(`
+      <ion-accordion-group animated="false">
+        <ion-accordion readonly>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `, config);
+            const accordion = page.locator('ion-accordion');
+            const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+            await expect(accordion).toHaveClass(/accordion-collapsed/);
+            await page.keyboard.press(tabKey);
+            await page.waitForChanges();
+            await page.keyboard.press('Enter');
+            await page.waitForChanges();
+            await expect(accordion).toHaveClass(/accordion-collapsed/);
+        });
+    });
+});

package/dist/collection/components/accordion-group/accordion-group.js

@@ -197,12 +197,12 @@ export class AccordionGroup {
     render() {
         const { disabled, readonly, expand } = this;
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: 'ac2e26ac91c95d08172bd2b51daa7a711c21db9e', class: {
                 [mode]: true,
                 'accordion-group-disabled': disabled,
                 'accordion-group-readonly': readonly,
                 [`accordion-group-expand-${expand}`]: true,
-            }, role: "presentation" }, h("slot", null)));
+            }, role: "presentation" }, h("slot", { key: '444adc2af5730897eba57095da046d6bdb5af70f' })));
     }
     static get is() { return "ion-accordion-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/action-sheet/action-sheet.ios.css

@@ -318,7 +318,19 @@
   -webkit-margin-end: auto;
   margin-inline-end: auto;
   margin-top: var(--ion-safe-area-top, 0);
-  margin-bottom: var(--ion-safe-area-bottom, 0);
+  /**
+   * Bottom safe area is applied as padding so that it impacts the bounding box.
+   * When the action sheet is shown/hidden, this element is transformed by translating
+   * 100% of its height. This translation needs to include the bottom safe area
+   * otherwise part of the action sheet will still be visible at the end of
+   * the show transition.
+   *
+   * If this code is changed, reviewers should verify that the action
+   * sheet still translates out of the viewport completely when the bottom
+   * safe area is a positive value.
+   */
+  padding-bottom: var(--ion-safe-area-bottom, 0);
+  box-sizing: content-box;
 }
 
 .action-sheet-container {

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

@@ -79,6 +79,10 @@ export class ActionSheet {
      * This can be useful in a button handler for determining which button was
      * clicked to dismiss the action sheet.
      * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+     *
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      */
     async dismiss(data, role) {
         const unlock = await this.lockController.lock();
@@ -187,12 +191,12 @@ export class ActionSheet {
         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({ role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'cd141d12d7d86d3402fd220c4afb61cdbf064c04', 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", { tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { class: "action-sheet-container" }, h("div", { class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { id: headerID, class: {
+            }, 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: 'b6a051e2cf5e101edbf59c8a40a04d8f7107fb3c', tappable: this.backdropDismiss }), h("div", { key: '5bfa2b37a417aaff3776f06d92a8544dfcbf714f', tabindex: "0" }), h("div", { key: '77d5a217803fd7be8f8dbedcd0ef5e59f0fd9800', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '3901d56215f05cdab074e2ec321391281a165097', class: "action-sheet-container" }, h("div", { key: '275f5c7981b2ee44fb632b3d137c7209cbfcf45c', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { 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) }), 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", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { tabindex: "0" })));
+            } }, header, this.subHeader && h("div", { 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) }), 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", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { key: '4285893438675be9b40838a93c2ff382a1074cd3', tabindex: "0" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }
@@ -690,7 +694,7 @@ export class ActionSheet {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                            "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
                         }],
                     "references": {
                         "Promise": {
@@ -707,7 +711,7 @@ export class ActionSheet {
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                            "text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
                         }]
                 }
             },

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

@@ -663,6 +663,29 @@ textarea.alert-input {
   flex-wrap: wrap;
 }
 
+/**
+  * The right border should only be applied to the first button
+  * when the group has 2 or less buttons (horizontal).
+  * Otherwise, the right border should not be applied
+  * when the group has 3 or more buttons (vertical).
+  */
+.alert-button-group-vertical .alert-button {
+  border-right: none;
+}
+:host-context([dir=rtl]) .alert-button-group-vertical .alert-button:last-child {
+  border-right: none;
+}
+
+[dir=rtl] .alert-button-group-vertical .alert-button:last-child {
+  border-right: none;
+}
+
+@supports selector(:dir(rtl)) {
+  .alert-button-group-vertical .alert-button:last-child:dir(rtl) {
+    border-right: none;
+  }
+}
+
 .alert-button {
   /**
    * This padding ensures that alerts

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

@@ -220,6 +220,10 @@ export class Alert {
      * This can be useful in a button handler for determining which button was
      * clicked to dismiss the alert.
      * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+     *
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      */
     async dismiss(data, role) {
         const unlock = await this.lockController.lock();
@@ -387,9 +391,9 @@ export class Alert {
          * If neither is defined, don't set aria-labelledby.
          */
         const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, Object.assign({ role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '4b7f7880dc5f39aa9b61981af0a821ac0350af7f', 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", { tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { class: "alert-head" }, header && (h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { tabindex: "0" })));
+            }, 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: '961a2684013ac61d59882914fd8d759ddb542fe7', tappable: this.backdropDismiss }), h("div", { key: '2ec08c3719b3cd8a4cae09d2c6ac778ffad5f940', tabindex: "0" }), h("div", { key: 'ee543683d20693c9a9497aca4d41f032aa580c9c', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '55015102b67d080249a8859fc8788f3a82d5ead9', class: "alert-head" }, header && (h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'df7bcfb0cb41965f169de05edd631a050d5ce648', tabindex: "0" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }
@@ -932,7 +936,7 @@ export class Alert {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                            "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
                         }],
                     "references": {
                         "Promise": {
@@ -949,7 +953,7 @@ export class Alert {
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                            "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
                         }]
                 }
             },

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

@@ -55,10 +55,6 @@ configs().forEach(({ config, screenshot, title }) => {
             await alertFixture.open('#longMessage');
             await alertFixture.screenshot('longMessage');
         });
-        test('more than two buttons', async () => {
-            await alertFixture.open('#multipleButtons');
-            await alertFixture.screenshot('multipleButtons');
-        });
         test('no message', async () => {
             await alertFixture.open('#noMessage');
             await alertFixture.screenshot('noMessage');
@@ -81,6 +77,35 @@ configs().forEach(({ config, screenshot, title }) => {
         });
     });
 });
+configs({ themes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) => {
+    test.describe(title('should not have visual regressions'), () => {
+        test('more than two buttons', async ({ page }) => {
+            await page.setContent(`
+        <ion-alert
+          header="Alert"
+          sub-header="Subtitle"
+          message="This is an alert message."
+          is-open="true"
+        ></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.buttons = [
+            'Open Modal',
+            {
+              text: 'Delete',
+              id: 'delete-button',
+              role: 'destructive',
+            },
+            'Cancel'
+          ];
+        </script>
+      `, config);
+            const alert = page.locator('ion-alert');
+            await expect(alert).toHaveScreenshot(screenshot(`alert-multipleButtons`));
+        });
+    });
+});
 class AlertFixture {
     constructor(page, screenshot) {
         this.page = page;

package/dist/collection/components/app/app.js

@@ -2,6 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, h } from "@stencil/core";
+import { shoudUseCloseWatcher } from "../../utils/hardware-back-button";
+import { printIonWarning } from "../../utils/logging/index";
 import { isPlatform } from "../../utils/platform";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
@@ -25,10 +27,18 @@ export class App {
                     import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
                 }
                 const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
-                if (config.getBoolean('hardwareBackButton', isHybrid)) {
+                const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
+                if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
                     hardwareBackButtonModule.startHardwareBackButton();
                 }
                 else {
+                    /**
+                     * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
+                     * then the close watcher will not be used.
+                     */
+                    if (shoudUseCloseWatcher()) {
+                        printIonWarning('experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
+                    }
                     hardwareBackButtonModule.blockHardwareBackButton();
                 }
                 if (typeof window !== 'undefined') {
@@ -55,7 +65,7 @@ export class App {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: '3535eb5c0dab78a78011e552524a98599b2b650f', class: {
                 [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),

package/dist/collection/components/avatar/avatar.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Avatar {
     render() {
-        return (h(Host, { class: getIonMode(this) }, h("slot", null)));
+        return (h(Host, { key: '95d7ca334f9b66e0983cbc1b782ded0b9a54eaa9', class: getIonMode(this) }, h("slot", { key: '011d20189acdb03bee328aa4fa0511826a0b3a36' })));
     }
     static get is() { return "ion-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/back-button/back-button.js

@@ -72,7 +72,7 @@ export class BackButton {
         const showBackButton = defaultHref !== undefined;
         const mode = getIonMode(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '175fff2d7a41d2deaaf7b781c5ba2aac9311ebf4', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
@@ -82,7 +82,7 @@ export class BackButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h("button", { key: '59fe30c167ea82e2431e45d46060a01bcb2aea77', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '3d704fb7ef001446361e7a09d43763a771b242b9', class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     static get is() { return "ion-back-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/backdrop/backdrop.js

@@ -35,7 +35,7 @@ export class Backdrop {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { tabindex: "-1", "aria-hidden": "true", class: {
+        return (h(Host, { key: 'b2adb9dabef01fa49388d67d9e8a4a370931f633', tabindex: "-1", "aria-hidden": "true", class: {
                 [mode]: true,
                 'backdrop-hide': !this.visible,
                 'backdrop-no-tappable': !this.tappable,

package/dist/collection/components/badge/badge.js

@@ -13,9 +13,9 @@ export class Badge {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '043eea016721e53f0af1cbf1371bc08694281204', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", null)));
+            }) }, h("slot", { key: 'bd510450d6b60f2794491244e68a83049a5ef6dd' })));
     }
     static get is() { return "ion-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -64,7 +64,7 @@ export class Breadcrumb {
         // to show the separator as long as it isn't also the last breadcrumb
         // otherwise if not collapsed use the value in separator
         const showSeparator = last ? false : collapsed ? (showCollapsedIndicator && !last ? true : false) : separator;
-        return (h(Host, { onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '632efa1bc6dc446e81efe8cd7763cb9b16466563', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
@@ -74,7 +74,7 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, Object.assign({}, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, Object.assign({ key: '6f232cfc590b2e2a23a2e1ee40d6658e7d8b4953' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: 'fec56c6f92c147fbd6273d3efb82b1a6c944699c', name: "start" }), h("slot", { key: '80aa33cdcaab810f544803c6105b489172542846' }), h("slot", { key: '6e1d3f332ae35f5061204bece9756a9bac4aaf4a', name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
             } }, h("ion-icon", { "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -105,12 +105,12 @@ export class Breadcrumbs {
     render() {
         const { color, collapsed } = this;
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(color, {
+        return (h(Host, { key: '35f8a2bffdd85ba6dc31834ebef69602a5a7cca1', class: createColorClasses(color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'breadcrumbs-collapsed': collapsed,
-            }) }, h("slot", { onSlotchange: this.slotChanged })));
+            }) }, h("slot", { key: 'ada062b5d17380d311861d1cf1a22dd62bac5497', onSlotchange: this.slotChanged })));
     }
     static get is() { return "ion-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/button.js

@@ -199,7 +199,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '8533314504b286ec10e26722f93376d86a7ca1c9', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -214,7 +214,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { class: "button-inner" }, h("slot", { name: "icon-only" }), h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: '79bf020fdac0c2ceb2b05547b3e5a9a11e60abb4' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '109481ba86102647023b746b054b2718d3c9d92a', class: "button-inner" }, h("slot", { key: 'f824ddd9f988b9bd33136555b16aa790d9291b49', name: "icon-only" }), h("slot", { key: 'd614f4e430792c5f93be4b3a8c57a826d74b9cfd', name: "start" }), h("slot", { key: '95d00c8a980c31cc7f84732f51a17a0cd285a7cb' }), h("slot", { key: 'a228ff52cbe04dc9d2e22bb66611ecc96d130e6f', name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/test/basic/button.e2e.js

@@ -44,7 +44,7 @@ configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => {
                 await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
                 await page.mouse.down();
             }
-            await page.waitForSelector('#default.ion-activated');
+            await page.locator('#default.ion-activated').waitFor();
             await expect(button).toHaveScreenshot(screenshot(`button-ripple-effect`));
         });
     });

package/dist/collection/components/buttons/buttons.js

@@ -9,7 +9,7 @@ export class Buttons {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: '52c0c5535f5688a481746fe8fd92b6c02941526f', class: {
                 [mode]: true,
                 ['buttons-collapse']: this.collapse,
             } }));

package/dist/collection/components/card/card.js

@@ -49,7 +49,7 @@ export class Card {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '9e35c114ce466623024b94dd6797118ad027417d', class: createColorClasses(this.color, {
                 [mode]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),

package/dist/collection/components/card-content/card-content.js

@@ -9,7 +9,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class CardContent {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: 'd4da147bb0b0b14684b54d37d04ba5a8f7a7d71d', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`card-content-${mode}`]: true,

package/dist/collection/components/card-header/card-header.js

@@ -14,11 +14,11 @@ export class CardHeader {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '070294064c4b17c941961c9cccf1ae6592b385b6', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", null)));
+            }) }, h("slot", { key: 'adac918d5e93bf69b07c5bda329ebf8c719bd623' })));
     }
     static get is() { return "ion-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-subtitle/card-subtitle.js

@@ -13,10 +13,10 @@ export class CardSubtitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        return (h(Host, { key: 'ae115cf349cd13f88d20b1fbab6b8a813a87b925', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", null)));
+            }) }, h("slot", { key: 'f5dd779b34b5c5c541cbbe56cc8a877e50513252' })));
     }
     static get is() { return "ion-card-subtitle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-title/card-title.js

@@ -13,10 +13,10 @@ export class CardTitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        return (h(Host, { key: '432d7bf971fda63c30c748986143ec2a8be9e4af', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", null)));
+            }) }, h("slot", { key: '3c5dcf6ac1bf981c6c0488f0027765269c80db5a' })));
     }
     static get is() { return "ion-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/chip.js

@@ -15,12 +15,12 @@ export class Chip {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'eca7cc616c0c9dd2ab28efd41e203fa094880e9e', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-            }) }, h("slot", null), mode === 'md' && h("ion-ripple-effect", null)));
+            }) }, h("slot", { key: 'b64c9067132791f73a8434c37d5a335fb2d96f74' }), mode === 'md' && h("ion-ripple-effect", null)));
     }
     static get is() { return "ion-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/col/col.js

@@ -111,9 +111,9 @@ export class Col {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: 'c186972dd12d10a4600975c326f20666fed96abf', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", null)));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '54cc8bd92f94cfd30d9f3e8e59e0f0dc38abfd63' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.js

@@ -336,7 +336,7 @@ export class Content {
         const transitionShadow = mode === 'ios';
         const TagType = isMainContent ? 'main' : 'div';
         this.resize();
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '65d85e1f7f85876a76eec79addc4bd9f697a5d84', class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -344,12 +344,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { class: {
+            } }, h("div", { key: 'e2ac474a62cbc864772c497469100436f41289ff', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { key: '567a4bc2bcb13adfd987b088f95ac4b20b789f2c', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", null)), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '13909f87dd9f49bf1664ad95038499da376b9480' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: '05b56c139e203cfd1e3dd08054e99328e97e9243', name: "fixed" })));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }