voyager-ionic-core 7.6.5 → 7.7.0

package/dist/collection/components/datetime/test/set-value/datetime.e2e.js

@@ -7,7 +7,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test.describe(title('datetime: set-value'), () => {
         test('should update the active date when value is initially set', async ({ page }) => {
             await page.goto('/src/components/datetime/test/set-value', config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             await datetime.evaluate((el) => (el.value = '2021-11-25T12:40:00.000Z'));
             await page.waitForChanges();
@@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
         test('should update the active time when value is initially set', async ({ page }) => {
             await page.goto('/src/components/datetime/test/set-value', config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             await datetime.evaluate((el) => (el.value = '2021-11-25T12:40:00.000Z'));
             await page.waitForChanges();
@@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime presentation="date" locale="en-US"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             const activeDayButton = page.locator('.calendar-day-active');
             await datetime.evaluate((el) => (el.value = '2021-10-05'));
@@ -39,7 +39,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
         test('should scroll to new month when value is initially set and then updated', async ({ page }) => {
             await page.goto('/src/components/datetime/test/set-value', config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
             await page.waitForChanges();

package/dist/collection/components/datetime/test/time-label/datetime.e2e.js

@@ -9,7 +9,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const timeLabel = page.locator('ion-datetime .time-header');
             await expect(timeLabel).toHaveText('Time');
         });
@@ -17,7 +17,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime show-default-time-label="false"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const timeLabel = page.locator('ion-datetime .time-header');
             await expect(timeLabel).toHaveText('');
         });

package/dist/collection/components/datetime/test/values/datetime.e2e.js

@@ -9,7 +9,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="date" day-values="1,2,3"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const items = page.locator('.calendar-day:not([disabled])');
             /**
              * Datetime calendar grid renders 3 months by default,
@@ -68,7 +68,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           }
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const minuteItems = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
             await expect(minuteItems).toHaveText(['00', '15', '30', '45']);
             await expect(minuteItems.nth(1)).toHaveClass(/picker-item-active/);
@@ -105,7 +105,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           }
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
             await expect(monthItems).toHaveText(['January']);
             await expect(monthItems.nth(0)).toHaveClass(/picker-item-active/);
@@ -132,7 +132,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           }
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const todayButton = page.locator('.calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
             await expect(todayButton).toHaveClass(/calendar-day-today/);
         });

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

@@ -336,7 +336,7 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(color, {
+        return (h(Host, { key: '36fe34d4225940611d74bdef5b954d54749d2dca', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,

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

@@ -14,7 +14,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
         });
         test('should switch to a date-only view when the date button is clicked', async ({ page }) => {
             const datetime = page.locator('ion-datetime');
@@ -37,7 +37,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('Jan 1, 2022');
             await expect(page.locator('#time-button')).toContainText('6:30 AM');
         });
@@ -46,7 +46,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="month-year"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('January 2022');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -55,7 +55,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="year"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('2022');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -64,7 +64,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="month"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('January');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -73,7 +73,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#time-button')).toContainText('6:30 AM');
             await expect(page.locator('#date-button')).toBeHidden();
         });
@@ -82,7 +82,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             const dateTarget = page.locator('#date-button');
             await expect(dateTarget).toContainText('Jan 1, 2022');
@@ -99,7 +99,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01" presentation="month-year"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('January 2022');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -112,7 +112,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022" presentation="year"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('2022');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -123,7 +123,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="es-ES" id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             /**
              * The entire text reads 1 ene 2022, but some browsers will add
              * a period after "ene". Just checking ene allows us to verify the
@@ -137,7 +137,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime hour-cycle="h23" locale="en-US" id="datetime" value="2022-01-01T16:30:00" presentation="date-time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#time-button')).toContainText('16:30');
         });
         test('should ignore the timezone when selecting a date', async ({ page }) => {
@@ -145,7 +145,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="en-US" id="datetime" value="2022-01-02T06:30:00" presentation="date-time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const timeTarget = page.locator('#time-button');
             await expect(timeTarget).toContainText('6:30');
             const firstOfMonth = page.locator('ion-datetime .calendar-day[data-month="1"][data-day="1"]');
@@ -160,7 +160,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="date-time" prefer-wheel="true"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
             await expect(page.locator('#time-button')).not.toBeVisible();
         });
@@ -169,7 +169,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="time-date" prefer-wheel="true"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
             await expect(page.locator('#time-button')).not.toBeVisible();
         });

package/dist/collection/components/datetime-button/test/disabled/datetime-button.e2e.js

@@ -10,7 +10,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
         <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toBeDisabled();
             await expect(page.locator('#time-button')).toBeDisabled();
         });
@@ -19,7 +19,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
         <ion-datetime id="datetime" presentation="date-time" value="2022-01-01T16:30:00"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetimeButton = page.locator('ion-datetime-button');
             await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-disabled`));
         });

package/dist/collection/components/datetime-button/test/multiple/datetime-button.e2e.js

@@ -19,7 +19,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           datetime.value = ['2022-06-01', '2022-06-02', '2022-06-03'];
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('3 days');
         });
         test('should render number of dates when 0 dates are selected', async ({ page }) => {
@@ -27,7 +27,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toHaveText('0 days');
         });
         test('should render date when only 1 day is selected', async ({ page }) => {
@@ -40,7 +40,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           datetime.value = ['2022-06-01'];
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
         });
         test('should use customFormatter', async ({ page }) => {
@@ -56,7 +56,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           datetime.value = ['2022-06-01', '2022-06-02', '2022-06-03'];
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toHaveText('Selected: 3');
         });
         test('should re-render when value is programmatically changed', async ({ page }) => {
@@ -69,7 +69,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           datetime.value = ['2022-06-01', '2022-06-02'];
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             const ionValueChange = await page.spyOnEvent('ionValueChange');
             const dateButton = page.locator('#date-button');
@@ -88,7 +88,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           datetime.value = ['2022-06-01T16:30', '2022-06-02'];
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
             await expect(page.locator('#time-button')).toHaveText('4:30 PM');
         });

package/dist/collection/components/fab/fab.js

@@ -47,12 +47,12 @@ export class Fab {
     render() {
         const { horizontal, vertical, edge } = this;
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: 'eb7470763cfaadd229036fe4e04913cb4a0551c7', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, h("slot", null)));
+            } }, h("slot", { key: 'daf53f8c644db866f69d41401dba7a2791c37ac3' })));
     }
     static get is() { return "ion-fab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,7 +63,7 @@ export class FabButton {
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(Host, { onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '78f11aaac39bf0fcb25b64885ee61619223e4241', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -74,7 +74,7 @@ export class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { class: "button-inner" }, h("slot", null)), mode === 'md' && h("ion-ripple-effect", null))));
+            }) }, h(TagType, Object.assign({ key: 'a29b5eff122006d463ef3e10e1abe8378de07dc5' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: 'e554c978fd9825eec9ca958f5b481f662ed6daa4', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'd7dd93e93343767d223800899f0fd4c405845023', class: "button-inner" }, h("slot", { key: 'dd5df0945385480e7551e24117d136cd6b231638' })), mode === 'md' && h("ion-ripple-effect", null))));
     }
     static get is() { return "ion-fab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fab-list/fab-list.js

@@ -18,11 +18,11 @@ export class FabList {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: 'c786680f9868700913a182f908f25a612ec08498', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", null)));
+            } }, h("slot", { key: '547f8cb69ab2371095e3deeef1dc13fc1053bdf6' })));
     }
     static get is() { return "ion-fab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer.js

@@ -80,7 +80,7 @@ export class Footer {
         const mode = getIonMode(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { role: "contentinfo", class: {
+        return (h(Host, { key: '550b8b8fb614e541e1d369fc1ac5ba1f083913b4', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`footer-${mode}`]: true,
@@ -88,7 +88,7 @@ export class Footer {
                 [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", null)));
+            } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", { key: 'd25187ecc2ce7848ba882af078cb634e9d5e8814' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/grid/grid.js

@@ -9,10 +9,10 @@ export class Grid {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: '03a8975bb9320192033219fc9e06fe7afa4fae4a', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", null)));
+            } }, h("slot", { key: '8d95abb4614e73a46a274668c13fe7c7f011c537' })));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -140,14 +140,14 @@ export class Header {
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (h(Host, Object.assign({ role: roleType, class: {
+        return (h(Host, Object.assign({ key: 'a33e7e1818cb4718ae36b8bcfa811c4138b85fac', role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", null)));
+            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", { key: '7e2fa75034f7422a3dc5691e9b3c25393e16c0ca' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/header/test/condense/header.e2e.js

@@ -15,7 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
             await content.evaluate(async (el) => {
                 await el.scrollToBottom();
             });
-            await page.waitForSelector('#largeTitleHeader.header-collapse-condense-inactive');
+            await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor();
             await expect(smallTitleHeader).toHaveScreenshot(screenshot(`header-condense-large-title-collapsed-diff`));
             /**
              * Playwright can't do .not.toHaveAttribute() because a value is expected,
@@ -26,7 +26,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
             await content.evaluate(async (el) => {
                 await el.scrollToTop();
             });
-            await page.waitForSelector('#smallTitleHeader.header-collapse-condense-inactive');
+            await page.locator('#smallTitleHeader.header-collapse-condense-inactive').waitFor();
             await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
         });
     });

package/dist/collection/components/img/img.js

@@ -71,7 +71,7 @@ export class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { class: getIonMode(this) }, h("img", { decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (h(Host, { key: '1983ddd575d8f870f249d37a3897dbcc110bf4d7', class: getIonMode(this) }, h("img", { key: 'f2ba013804f6ed9e5dadb08c75e47c0f844e67f3', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     static get is() { return "ion-img"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/infinite-scroll/infinite-scroll.js

@@ -167,7 +167,7 @@ export class InfiniteScroll {
     render() {
         const mode = getIonMode(this);
         const disabled = this.disabled;
-        return (h(Host, { class: {
+        return (h(Host, { key: '8b5da92c7a1c118cd6c6a6be8f21b11b79f166bd', class: {
                 [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js

@@ -27,11 +27,11 @@ export class InfiniteScrollContent {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: '8ffd8ff4c951be0c2b1f48fd4be3a2d7765a989f', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${mode}`]: true,
-            } }, h("div", { class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, h("div", { key: 'd7d03485501b5e2fde7c132309bb6358818eb0cd', class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get is() { return "ion-infinite-scroll-content"; }
     static get originalStyleUrls() {

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

@@ -100,14 +100,6 @@
    * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    */
-  /**
-   * We change the minimum width as the
-   * font size changes. Using a fixed minimum
-   * width means that fewer and fewer characters
-   * can be displayed in the same space as the
-   * text grows.
-   */
-  --inner-min-width: 4rem;
   --border-radius: 0px;
   --border-width: 0px;
   --border-style: solid;
@@ -238,7 +230,6 @@
   /* stylelint-enable */
   display: flex;
   position: relative;
-  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -270,10 +261,6 @@
   }
 }
 
-:host(.item-legacy) .item-native {
-  flex-wrap: unset;
-}
-
 .item-native::-moz-focus-inner {
   border: 0;
 }
@@ -309,20 +296,10 @@ button, a {
   /* stylelint-enable */
   display: flex;
   position: relative;
-  flex: 1 0 0;
+  flex: 1;
   flex-direction: inherit;
-  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
-  /**
-   * The min-width defines when the
-   * content in the default slot should
-   * stop wrapping/truncating within its own
-   * container. At this point the entire
-   * container will wrap to the next line.
-   */
-  min-width: var(--inner-min-width);
-  max-width: 100%;
   min-height: inherit;
   border-width: var(--inner-border-width);
   border-style: var(--border-style);
@@ -348,12 +325,6 @@ button, a {
   }
 }
 
-:host(.item-legacy) .item-inner {
-  flex: 1;
-  flex-wrap: unset;
-  max-width: unset;
-}
-
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
@@ -432,23 +403,15 @@ button, a {
 
 .input-wrapper {
   display: flex;
-  flex: 1 0 auto;
+  flex: 1;
   flex-direction: inherit;
-  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
-  max-width: 100%;
   text-overflow: ellipsis;
   overflow: inherit;
   box-sizing: border-box;
 }
 
-:host(.item-legacy) .input-wrapper {
-  flex: 1;
-  flex-wrap: unset;
-  max-width: unset;
-}
-
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;

package/dist/collection/components/item/item.js

@@ -45,6 +45,10 @@ export class Item {
         this.counterFormatter = undefined;
         this.counterString = undefined;
     }
+    buttonChanged() {
+        // Update the focusable option when the button option is changed
+        this.focusable = this.isFocusable();
+    }
     counterFormatterChanged() {
         this.updateCounterOutput(this.getFirstInput());
     }
@@ -260,7 +264,7 @@ export class Item {
         const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null;
         const fillValue = fill || 'none';
         const inList = hostContext('ion-list', this.el) && !hostContext('ion-radio-group', this.el);
-        return (h(Host, { "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '3930f26d52eda4034d42313cc0a0b6d04fcd0207', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
                 [mode]: true,
                 'item-lines-default': lines === undefined,
@@ -274,7 +278,7 @@ export class Item {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { name: "start" }), h("div", { class: "item-inner" }, h("div", { class: "input-wrapper" }, h("slot", null)), h("slot", { name: "end" }), showDetail && (h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward })), h("div", { class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null), h("div", { class: "item-highlight" })), h("div", { class: "item-bottom" }, h("slot", { name: "error" }), h("slot", { name: "helper" }), counterString && h("ion-note", { class: "item-counter" }, counterString))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'df7163aa8dd09e0d673be0559fe662d4ca484fc6' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '7aedeb350eb4a696a653a8dea512547c8cae3642', name: "start" }), h("div", { key: '7c857fc6bfc7930633736181429856cf3f63e515', class: "item-inner" }, h("div", { key: '42a8d34d3d68c281afe53dcefc3a673f066b6fde', class: "input-wrapper" }, h("slot", { key: 'e973256fdebc582072aa5767dcb3b48a34ab4afa' })), h("slot", { key: 'b4407dbe381f11177f369d4d5baa638e8cfb624d', name: "end" }), showDetail && (h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward })), h("div", { key: '6d769eeb4443c34005a78b732ee62497997083be', class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null), h("div", { key: '02481875de55eb6d58e66ad495ecefd46480808a', class: "item-highlight" })), h("div", { key: '1f73891b7f670253784f5b146fc01955ea2190fe', class: "item-bottom" }, h("slot", { key: '23b3d4c1e1f712f18340155dda8623c88d025c40', name: "error" }), h("slot", { key: 'fac325a8a6ce0280b6abac92b2b2352de218a50f', name: "helper" }), counterString && h("ion-note", { class: "item-counter" }, counterString))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -628,6 +632,9 @@ export class Item {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "button",
+                "methodName": "buttonChanged"
+            }, {
                 "propName": "counterFormatter",
                 "methodName": "counterFormatterChanged"
             }];