voyager-ionic-core 7.6.3 → 7.7.0

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/input/input.ios.css

@@ -308,13 +308,13 @@
   visibility: visible;
 }
 
-:host(.has-focus) {
+:host(.has-focus.legacy-input) {
   pointer-events: none;
 }
 
-:host(.has-focus) input,
-:host(.has-focus) a,
-:host(.has-focus) button {
+:host(.has-focus.legacy-input) input,
+:host(.has-focus.legacy-input) a,
+:host(.has-focus.legacy-input) button {
   pointer-events: auto;
 }
 

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

@@ -308,13 +308,13 @@
   visibility: visible;
 }
 
-:host(.has-focus) {
+:host(.has-focus.legacy-input) {
   pointer-events: none;
 }
 
-:host(.has-focus) input,
-:host(.has-focus) a,
-:host(.has-focus) button {
+:host(.has-focus.legacy-input) input,
+:host(.has-focus.legacy-input) a,
+:host(.has-focus.legacy-input) button {
   pointer-events: auto;
 }
 

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"
             }];

package/dist/collection/components/item/item.md.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/test/item.spec.js

@@ -0,0 +1,20 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { Item } from "../item";
+describe('item', () => {
+    it('should change focusable option after switching button option status', async () => {
+        const page = await newSpecPage({
+            components: [Item],
+            template: () => h("ion-item", { button: false }),
+        });
+        const item = page.body.querySelector('ion-item');
+        // Change button attribute to true
+        item.setAttribute('button', 'true');
+        await page.waitForChanges();
+        // Check if it has the expected class that gives the highlight style to .item-highlight element
+        expect(item).toHaveClass('ion-focusable');
+    });
+});

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

@@ -18,11 +18,11 @@ export class ItemDivider {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '8422b960dfcce4ff1370d9c185e285bb4a3688d5', class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { name: "start" }), h("div", { class: "item-divider-inner" }, h("div", { class: "item-divider-wrapper" }, h("slot", null)), h("slot", { name: "end" }))));
+            }) }, h("slot", { key: '240514b96ec48262040460775c8eb0a58d6acfa8', name: "start" }), h("div", { key: 'ec18c092c81cb96f8c49ed7d4dede96c9a3e3f97', class: "item-divider-inner" }, h("div", { key: '9c3f3dcb9b14fd1d37fb1104b3ba953dc9a3e894', class: "item-divider-wrapper" }, h("slot", { key: '6b8e51eb86a5567b80a91034b26228105796a82d' })), h("slot", { key: '7ccb661e1309c1ecca09a823f8e08b1cf90d95dd', name: "end" }))));
     }
     static get is() { return "ion-item-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class ItemGroup {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { role: "group", class: {
+        return (h(Host, { key: 'b33f23544ddeeeb61847b146b1dcb7a9ba30af18', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,

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

@@ -44,12 +44,12 @@ export class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '8d8ef0455e0e46d31a84b6f9e83e377e0579f04b', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { class: "button-inner" }, h("slot", { name: "top" }), h("div", { class: "horizontal-wrapper" }, h("slot", { name: "start" }), h("slot", { name: "icon-only" }), h("slot", null), h("slot", { name: "end" })), h("slot", { name: "bottom" })), mode === 'md' && h("ion-ripple-effect", null))));
+            }) }, h(TagType, Object.assign({ key: '0d4833cefd206862a75fdef8744e659cff24a39f' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'bfbdab3ee6cfc884eb2bd60c92cf919f4b671c27', class: "button-inner" }, h("slot", { key: '968ebecbd9e8ca5015106d79e5d29b4a1999d39b', name: "top" }), h("div", { key: '38677cd72df6447a4e934695ab08857460be800d', class: "horizontal-wrapper" }, h("slot", { key: 'e65131d2e3f12c3743c7229b0a7f381824a45281', name: "start" }), h("slot", { key: 'c3a9bd83c455a79395574ff4d862299fd9340cd2', name: "icon-only" }), h("slot", { key: '161ca1daed265e8990d28f74744476a37d555d85' }), h("slot", { key: 'd5ecafceada1f8c3c16a2cb6511368828009081f', name: "end" })), h("slot", { key: '39e6a9dffc2cb9e2e9a200f6c669ed47f9a485aa', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", null))));
     }
     static get is() { return "ion-item-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class ItemOptions {
     render() {
         const mode = getIonMode(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { class: {
+        return (h(Host, { key: '04d6baf62154da6ab9db5e679f982fe3fe276f89', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,

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

@@ -386,7 +386,7 @@ export class ItemSliding {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: 'f666dd119a72247feac11dcd704059fce7677325', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -491,11 +491,9 @@ export class ItemSliding {
                 "complexType": {
                     "signature": "(side: Side | undefined) => Promise<void>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
-                                }],
-                            "text": "The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
+                            "name": "side",
+                            "type": "Side | undefined",
+                            "docs": "The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item."
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/label/label.js

@@ -55,7 +55,7 @@ export class Label {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '813192a6460057c6d1e42f50f3f257bee2f550d8', class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,

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

@@ -25,7 +25,7 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
         <ion-item>
           <ion-label position="stacked">My Label</ion-label>
-          <ion-input></ion-input>
+          <ion-input aria-label="My Label"></ion-input>
         </ion-item>
       `, config);
             const itemEl = page.locator('ion-item');
@@ -35,7 +35,7 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
         <ion-item>
           <ion-label position="floating">My Label</ion-label>
-          <ion-input></ion-input>
+          <ion-input aria-label="My Label"></ion-input>
         </ion-item>
       `, config);
             const itemEl = page.locator('ion-item');

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

@@ -27,7 +27,7 @@ export class List {
     render() {
         const mode = getIonMode(this);
         const { lines, inset } = this;
-        return (h(Host, { role: "list", class: {
+        return (h(Host, { key: '2cb1b689d9460d9576b471bb8b13d14fe34d1c2c', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,