@ionic/core 7.5.2-dev.11697834896.1fed55cc → 7.5.2-dev.11698269070.1738c1a7

package/dist/collection/components/item/test/disabled/item.e2e.js

@@ -11,6 +11,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item/test/disabled`, config);
       await page.setIonViewport();
+      // TODO: FW-4037 - Fix label color inconsistency between disabled controls
       await expect(page).toHaveScreenshot(screenshot(`item-disabled-diff`));
     });
   });

package/dist/collection/components/item/test/text/item.e2e.js

@@ -0,0 +1,14 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('item: text'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/item/test/text`, config);
+      await page.setIonViewport();
+      await expect(page).toHaveScreenshot(screenshot(`item-text-diff`));
+    });
+  });
+});

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

@@ -41,24 +41,17 @@
   font-family: var(--ion-font-family, inherit);
   font-size: inherit;
   text-overflow: ellipsis;
-  box-sizing: border-box;
-}
-
-:host-context(.item-legacy) {
   white-space: nowrap;
   overflow: hidden;
-}
-
-:host-context(.item:not(.item-input):not(.item-legacy)) {
-  flex-grow: 1;
+  box-sizing: border-box;
 }
 
 :host(.ion-color) {
   color: var(--ion-color-base);
 }
 
-:host(.ion-text-nowrap) {
-  overflow: hidden;
+:host(.ion-text-wrap) {
+  white-space: normal;
 }
 
 :host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
@@ -77,10 +70,6 @@
   align-self: baseline;
 }
 
-:host-context(.item-skeleton-text) {
-  overflow: hidden;
-}
-
 :host(.label-fixed) {
   flex: 0 0 100px;
   width: 100px;

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

@@ -41,24 +41,17 @@
   font-family: var(--ion-font-family, inherit);
   font-size: inherit;
   text-overflow: ellipsis;
-  box-sizing: border-box;
-}
-
-:host-context(.item-legacy) {
   white-space: nowrap;
   overflow: hidden;
-}
-
-:host-context(.item:not(.item-input):not(.item-legacy)) {
-  flex-grow: 1;
+  box-sizing: border-box;
 }
 
 :host(.ion-color) {
   color: var(--ion-color-base);
 }
 
-:host(.ion-text-nowrap) {
-  overflow: hidden;
+:host(.ion-text-wrap) {
+  white-space: normal;
 }
 
 :host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
@@ -77,10 +70,6 @@
   align-self: baseline;
 }
 
-:host-context(.item-skeleton-text) {
-  overflow: hidden;
-}
-
 :host(.label-fixed) {
   flex: 0 0 100px;
   width: 100px;

package/dist/collection/components/loading/loading.js

@@ -146,7 +146,7 @@ export class Loading {
     const ariaLabelledBy = message !== undefined ? msgId : null;
     return (h(Host, Object.assign({ role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
         zIndex: `${40000 + this.overlayIndex}`,
-      }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { class: "loading-spinner" }, h("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { tabindex: "0" })));
+      }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { class: "loading-spinner" }, h("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { tabindex: "0" })));
   }
   static get is() { return "ion-loading"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/menu/menu.js

@@ -173,6 +173,18 @@ export class Menu {
     this.contentEl = undefined;
   }
   onSplitPaneChanged(ev) {
+    const { target } = ev;
+    const closestSplitPane = this.el.closest('ion-split-pane');
+    /**
+     * Menu listens on the body for "ionSplitPaneVisible".
+     * However, this means the callback will run any time
+     * a SplitPane changes visibility. As a result, we only want
+     * Menu's visibility state to update if its parent SplitPane
+     * changes visibility.
+     */
+    if (target !== closestSplitPane) {
+      return;
+    }
     this.isPaneVisible = ev.detail.isPane(this.el);
     this.updateState();
   }
@@ -331,11 +343,11 @@ export class Menu {
       this.animation = undefined;
     }
     // Create new animation
-    this.animation = await menuController._createAnimation(this.type, this);
+    const animation = (this.animation = await menuController._createAnimation(this.type, this));
     if (!config.getBoolean('animated', true)) {
-      this.animation.duration(0);
+      animation.duration(0);
     }
-    this.animation.fill('both');
+    animation.fill('both');
   }
   async startAnimation(shouldOpen, animated) {
     const isReversed = !shouldOpen;

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

@@ -48,48 +48,5 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       const note = page.locator('ion-note');
       await expect(note).toHaveScreenshot(screenshot(`note-item-divider-scale`));
     });
-    test('should wrap label to the next line without truncating', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-list>
-          <ion-item>
-            <ion-note slot="start">Really really long note</ion-note>
-            <ion-label>Label</ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Label</ion-label>
-            <ion-note slot="end">Really really long note</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-note slot="start">Note</ion-note>
-            <ion-label>Really really long label</ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Really really long label</ion-label>
-            <ion-note slot="end">Note</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-note slot="start">Really really long note</ion-note>
-            <ion-label>Really really long label</ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Really really long label</ion-label>
-            <ion-note slot="end">Really really long note</ion-note>
-          </ion-item>
-        </ion-list>
-      `, config);
-      const list = page.locator('ion-list');
-      await expect(list).toHaveScreenshot(screenshot(`note-wrapping-label-scale`));
-    });
   });
 });

package/dist/collection/components/picker/picker.js

@@ -174,7 +174,7 @@ export class Picker {
         zIndex: `${20000 + this.overlayIndex}`,
       }, class: Object.assign({ [mode]: true,
         // Used internally for styling
-        [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { class: "picker-columns" }, h("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-column", { col: c })), h("div", { class: "picker-below-highlight" }))), h("div", { tabindex: "0" })));
+        [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { class: "picker-columns" }, h("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-column", { col: c })), h("div", { class: "picker-below-highlight" }))), h("div", { tabindex: "0" })));
   }
   static get is() { return "ion-picker"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/popover/popover.js

@@ -323,7 +323,7 @@ export class Popover {
     const enableArrow = arrow && !parentPopover;
     return (h(Host, Object.assign({ "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
         zIndex: `${20000 + this.overlayIndex}`,
-      }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { class: "popover-content", part: "content" }, h("slot", null)))));
+      }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && (h("ion-backdrop", { ref: (el) => (this.backdropEl = el), tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" })), h("div", { class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { class: "popover-content", part: "content" }, h("slot", null)))));
   }
   static get is() { return "ion-popover"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio/radio.js

@@ -85,7 +85,6 @@ export class Radio {
   }
   /** @internal */
   async setFocus(ev) {
-    // TODO(FW-2832): type (using Event triggers a build error due to conflict with Stencil Event import)
     ev.stopPropagation();
     ev.preventDefault();
     this.el.focus();
@@ -121,8 +120,6 @@ export class Radio {
   emitStyle() {
     const style = {
       'interactive-disabled': this.disabled,
-      // TODO(FW-3125): remove this
-      legacy: !!this.legacy,
     };
     if (this.legacyFormController.hasLegacyControl()) {
       style['radio-checked'] = this.checked;
@@ -418,7 +415,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     return {
       "setFocus": {
         "complexType": {
-          "signature": "(ev: any) => Promise<void>",
+          "signature": "(ev: globalThis.Event) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -427,6 +424,10 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
             "Promise": {
               "location": "global",
               "id": "global::Promise"
+            },
+            "globalThis": {
+              "location": "global",
+              "id": "global::globalThis"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/radio/test/legacy/a11y/radio.e2e.js

@@ -8,9 +8,11 @@ import { configs, test } from "../../../../../utils/test/playwright/index";
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('radio: a11y'), () => {
-    // TODO(FW-5218)
-    test.fixme('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
+    test.beforeEach(async ({ page, skip }) => {
+      skip.browser('webkit', 'Tabbing is flaky in Safari');
       await page.goto(`/src/components/radio/test/legacy/a11y`, config);
+    });
+    test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
       const firstGroupRadios = page.locator('#first-group ion-radio');
       const secondGroupRadios = page.locator('#second-group ion-radio');
       await pageUtils.pressKeys('Tab');
@@ -20,9 +22,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await pageUtils.pressKeys('shift+Tab');
       await expect(firstGroupRadios.nth(0)).toBeFocused();
     });
-    // TODO(FW-5218)
-    test.fixme('using arrow keys should move between enabled radios within group', async ({ page, pageUtils }) => {
-      await page.goto(`/src/components/radio/test/legacy/a11y`, config);
+    test('using arrow keys should move between enabled radios within group', async ({ page, pageUtils }) => {
       const firstGroupRadios = page.locator('#first-group ion-radio');
       await pageUtils.pressKeys('Tab');
       await expect(firstGroupRadios.nth(0)).toBeFocused();

package/dist/collection/components/range/range.js

@@ -226,8 +226,6 @@ export class Range {
       this.ionStyle.emit({
         interactive: true,
         'interactive-disabled': this.disabled,
-        // TODO(FW-2997): remove this
-        legacy: !!this.legacy,
       });
     }
   }

package/dist/collection/components/refresher/refresher.utils.js

@@ -16,7 +16,6 @@ export const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
     : createTranslateAnimation(pullingSpinner, refresherEl);
 };
 const createBaseAnimation = (pullingRefresherIcon) => {
-  // TODO(FW-2832): add types/re-evaluate asserting so many things
   const spinner = pullingRefresherIcon.querySelector('ion-spinner');
   const circle = spinner.shadowRoot.querySelector('circle');
   const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
@@ -173,6 +172,14 @@ export const shouldUseNativeRefresher = async (referenceEl, mode) => {
   const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
   return (pullingSpinner !== null &&
     refreshingSpinner !== null &&
+    /**
+     * We use webkitOverflowScrolling for feature detection with rubber band scrolling
+     * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
+     * However, it will be the empty string on iOS.
+     * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
+     * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
+     * set on the element, even if the platform does not support that.
+     */
     ((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
       mode === 'md'));
 };

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

@@ -1,36 +1,3 @@
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 :host([slot]) {
   display: none;
   line-height: 0;
@@ -46,7 +13,7 @@
  * icons resize with Dynamic Type.
  */
 ::slotted(ion-icon) {
-  font-size: 1rem;
+  font-size: dynamic-font(16px);
 }
 
 /**

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

@@ -1,36 +1,3 @@
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 :host([slot]) {
   display: none;
   line-height: 0;
@@ -46,7 +13,7 @@
  * icons resize with Dynamic Type.
  */
 ::slotted(ion-icon) {
-  font-size: 1rem;
+  font-size: dynamic-font(16px);
 }
 
 /**

package/dist/collection/components/searchbar/searchbar.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, forceUpdate, h } from "@stencil/core";
-import { debounceEvent, raf } from "../../utils/helpers";
+import { debounceEvent, raf, componentOnReady } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from "ionicons/icons";
@@ -189,7 +189,14 @@ export class Searchbar {
   /**
    * Returns the native `<input>` element used under the hood.
    */
-  getInputElement() {
+  async getInputElement() {
+    /**
+     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
+     * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
+     */
+    if (!this.nativeInput) {
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
+    }
     return Promise.resolve(this.nativeInput);
   }
   /**

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

@@ -99,11 +99,6 @@
   overflow: hidden;
 }
 
-:host(.in-item:not(.legacy-select)) {
-  flex: 1 1 0;
-  width: 0;
-}
-
 :host(.in-item.legacy-select) {
   position: static;
   max-width: 45%;

package/dist/collection/components/select/select.js

@@ -465,8 +465,6 @@ export class Select {
       style['has-placeholder'] = this.placeholder !== undefined;
       style['has-value'] = this.hasValue();
       style['has-focus'] = this.isExpanded;
-      // TODO(FW-3194): remove this
-      style['legacy'] = !!this.legacy;
     }
     this.ionStyle.emit(style);
   }

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

@@ -99,11 +99,6 @@
   overflow: hidden;
 }
 
-:host(.in-item:not(.legacy-select)) {
-  flex: 1 1 0;
-  width: 0;
-}
-
 :host(.in-item.legacy-select) {
   position: static;
   max-width: 45%;

package/dist/collection/components/select/test/legacy/wrapping/select.e2e.js

@@ -27,7 +27,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await page.setContent(`
         <ion-item>
           <ion-label>Really long label should not wrap</ion-label>
-          <ion-select value="wrap" legacy="true" class="ion-text-wrap">
+          <ion-select value="wrap" class="ion-text-wrap">
             <ion-select-option value="wrap">Should wrap value only when label exists and really long text exists to make it wrap the text</ion-select-option>
           </ion-select>
         </ion-item>

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -9,18 +9,6 @@ export class SkeletonText {
   constructor() {
     this.animated = false;
   }
-  componentWillLoad() {
-    this.emitStyle();
-  }
-  emitStyle() {
-    // The emitted property is used by item in order
-    // to add the item-skeleton-text class which applies
-    // overflow: hidden to its label
-    const style = {
-      'skeleton-text': true,
-    };
-    this.ionStyle.emit(style);
-  }
   render() {
     const animated = this.animated && config.getBoolean('animated', true);
     const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
@@ -65,32 +53,5 @@ export class SkeletonText {
       }
     };
   }
-  static get events() {
-    return [{
-        "method": "ionStyle",
-        "name": "ionStyle",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": "Emitted when the styles change."
-        },
-        "complexType": {
-          "original": "StyleEventDetail",
-          "resolved": "StyleEventDetail",
-          "references": {
-            "StyleEventDetail": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::StyleEventDetail"
-            }
-          }
-        }
-      }];
-  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/split-pane/test/multiple/split-pane.e2e.js

@@ -0,0 +1,31 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test, Viewports } from "../../../../utils/test/playwright/index";
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('split-pane: multiple'), () => {
+    test('using multiple split panes should not hide a menu in another split pane', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/18683',
+      });
+      await page.setViewportSize(Viewports.large);
+      await page.goto(`/src/components/split-pane/test/multiple`, config);
+      const paneOneMenuOne = page.locator('ion-menu#pane-one-menu-one');
+      const paneOneMenuTwo = page.locator('ion-menu#pane-one-menu-two');
+      const paneTwoMenuOne = page.locator('ion-menu#pane-two-menu-one');
+      const paneTwoMenuTwo = page.locator('ion-menu#pane-two-menu-two');
+      const showPaneOne = page.locator('button#show-pane-one');
+      const showPaneTwo = page.locator('button#show-pane-two');
+      await expect(paneOneMenuOne).toBeVisible();
+      await expect(paneOneMenuTwo).toBeVisible();
+      await showPaneTwo.click();
+      await expect(paneTwoMenuOne).toBeVisible();
+      await expect(paneTwoMenuTwo).toBeVisible();
+      await showPaneOne.click();
+      await expect(paneOneMenuOne).toBeVisible();
+      await expect(paneOneMenuTwo).toBeVisible();
+    });
+  });
+});

package/dist/collection/components/textarea/textarea.js

@@ -3,7 +3,7 @@
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
 import { createLegacyFormController, createNotchController } from "../../utils/forms/index";
-import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from "../../utils/helpers";
+import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes, componentOnReady, } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -169,7 +169,14 @@ export class Textarea {
   /**
    * Returns the native `<textarea>` element used under the hood.
    */
-  getInputElement() {
+  async getInputElement() {
+    /**
+     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
+     * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
+     */
+    if (!this.nativeInput) {
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
+    }
     return Promise.resolve(this.nativeInput);
   }
   emitStyle() {
@@ -182,8 +189,6 @@ export class Textarea {
         'has-placeholder': this.placeholder !== undefined,
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus,
-        // TODO(FW-2876): remove this
-        legacy: !!this.legacy,
       });
     }
   }

package/dist/collection/components/toggle/toggle.js

@@ -123,8 +123,6 @@ export class Toggle {
     if (this.legacyFormController.hasLegacyControl()) {
       this.ionStyle.emit({
         'interactive-disabled': this.disabled,
-        // TODO(FW-2990): remove this
-        legacy: !!this.legacy,
       });
     }
   }