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

package/dist/cjs/{md.transition-992379b5.js → md.transition-efcc0ad3.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-const animation = require('./animation-1a53c50e.js');
-const index = require('./index-d0fdb56d.js');
+const animation = require('./animation-1083855c.js');
+const index = require('./index-174dc666.js');
 require('./index-306a7476.js');
 require('./helpers-ea4ccbcb.js');
 require('./index-305a23dc.js');

package/dist/cjs/{overlays-1a734051.js → overlays-3e58eaad.js}

@@ -391,6 +391,9 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
     return;
   }
   setRootAriaHidden(true);
+  if (overlay.backdropEl) {
+    overlay.backdropEl.block();
+  }
   overlay.presented = true;
   overlay.willPresent.emit();
   (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -474,6 +477,9 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     if (role !== GESTURE) {
       await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     }
+    if (overlay.backdropEl) {
+      overlay.backdropEl.unblock();
+    }
     overlay.didDismiss.emit({ data, role });
     (_b = overlay.didDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
     activeAnimations.delete(overlay);

package/dist/cjs/{status-tap-778e8054.js → status-tap-b19eb3c8.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-305a23dc.js');
-const index$1 = require('./index-10873539.js');
+const index$1 = require('./index-da2c7a37.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 require('./index-cc7dfb7c.js');
 

package/dist/cjs/{watch-options-f3f77e54.js → watch-options-53bbb124.js}

@@ -3,7 +3,6 @@
  */
 'use strict';
 
-// TODO(FW-2832): types
 const watchForOptions = (containerEl, tagName, onChange) => {
   if (typeof MutationObserver === 'undefined') {
     return;
@@ -27,10 +26,22 @@ const getSelectedOption = (mutationList, tagName) => {
   });
   return newOption;
 };
-const findCheckedOption = (el, tagName) => {
-  if (el.nodeType !== 1) {
+/**
+ * The "value" key is only set on some components such as ion-select-option.
+ * As a result, we create a default union type of HTMLElement and the "value" key.
+ * However, implementers are required to provide the appropriate component type
+ * such as HTMLIonSelectOptionElement.
+ */
+const findCheckedOption = (node, tagName) => {
+  /**
+   * https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+   * The above check ensures "node" is an Element (nodeType 1).
+   */
+  if (node.nodeType !== 1) {
     return undefined;
   }
+  // HTMLElement inherits from Element, so we cast "el" as T.
+  const el = node;
   const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
   return options.find((o) => o.value === el.value);
 };

package/dist/collection/collection-manifest.json

@@ -94,7 +94,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.5.0",
+    "version": "4.6.0",
     "typescriptVersion": "5.2.2"
   },
   "collections": [

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

@@ -153,10 +153,23 @@
   background: var(--background);
 }
 
-.action-sheet-group::-webkit-scrollbar {
-  display: none;
+/**
+  * Scrollbars on mobile devices will be hidden.
+  * Users can still scroll the content by swiping.
+  * If a user has a fine pointing device, such as a
+  * mouse or trackpad, then scrollbars will be
+  * visible. This allows users to scroll the
+  * content with their pointing device.
+  * Otherwise, the user would have to use the
+  * keyboard to navigate through the options.
+  * This may not be intuitive for users who
+  * are not familiar with keyboard navigation.
+  */
+@media (any-pointer: coarse) {
+  .action-sheet-group::-webkit-scrollbar {
+    display: none;
+  }
 }
-
 .action-sheet-group-cancel {
   flex-shrink: 0;
   overflow: hidden;

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

@@ -179,7 +179,7 @@ export class ActionSheet {
     const headerID = `action-sheet-${overlayIndex}-header`;
     return (h(Host, Object.assign({ role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
         zIndex: `${20000 + this.overlayIndex}`,
-      }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { class: "action-sheet-container" }, h("div", { class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { id: headerID, class: {
+      }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { ref: (el) => (this.backdropEl = el), tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { class: "action-sheet-container" }, h("div", { class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { id: headerID, class: {
         'action-sheet-title': true,
         'action-sheet-has-sub-title': this.subHeader !== undefined,
       } }, header, this.subHeader && h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b) }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { tabindex: "0" })));

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

@@ -153,10 +153,23 @@
   background: var(--background);
 }
 
-.action-sheet-group::-webkit-scrollbar {
-  display: none;
+/**
+  * Scrollbars on mobile devices will be hidden.
+  * Users can still scroll the content by swiping.
+  * If a user has a fine pointing device, such as a
+  * mouse or trackpad, then scrollbars will be
+  * visible. This allows users to scroll the
+  * content with their pointing device.
+  * Otherwise, the user would have to use the
+  * keyboard to navigate through the options.
+  * This may not be intuitive for users who
+  * are not familiar with keyboard navigation.
+  */
+@media (any-pointer: coarse) {
+  .action-sheet-group::-webkit-scrollbar {
+    display: none;
+  }
 }
-
 .action-sheet-group-cancel {
   flex-shrink: 0;
   overflow: hidden;

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

@@ -122,12 +122,25 @@
   overscroll-behavior-y: contain;
 }
 
-.alert-checkbox-group::-webkit-scrollbar,
-.alert-radio-group::-webkit-scrollbar,
-.alert-message::-webkit-scrollbar {
-  display: none;
+/**
+  * Scrollbars on mobile devices will be hidden.
+  * Users can still scroll the content by swiping.
+  * If a user has a fine pointing device, such as a
+  * mouse or trackpad, then scrollbars will be
+  * visible. This allows users to scroll the
+  * content with their pointing device.
+  * Otherwise, the user would have to use the
+  * keyboard to navigate through the options.
+  * This may not be intuitive for users who
+  * are not familiar with keyboard navigation.
+  */
+@media (any-pointer: coarse) {
+  .alert-checkbox-group::-webkit-scrollbar,
+  .alert-radio-group::-webkit-scrollbar,
+  .alert-message::-webkit-scrollbar {
+    display: none;
+  }
 }
-
 .alert-input {
   padding-left: 0;
   padding-right: 0;

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

@@ -379,7 +379,7 @@ export class Alert {
     const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
     return (h(Host, Object.assign({ role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
         zIndex: `${20000 + overlayIndex}`,
-      }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { class: "alert-head" }, header && (h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { tabindex: "0" })));
+      }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { ref: (el) => (this.backdropEl = el), tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { class: "alert-head" }, header && (h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { tabindex: "0" })));
   }
   static get is() { return "ion-alert"; }
   static get encapsulation() { return "scoped"; }

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

@@ -122,12 +122,25 @@
   overscroll-behavior-y: contain;
 }
 
-.alert-checkbox-group::-webkit-scrollbar,
-.alert-radio-group::-webkit-scrollbar,
-.alert-message::-webkit-scrollbar {
-  display: none;
+/**
+  * Scrollbars on mobile devices will be hidden.
+  * Users can still scroll the content by swiping.
+  * If a user has a fine pointing device, such as a
+  * mouse or trackpad, then scrollbars will be
+  * visible. This allows users to scroll the
+  * content with their pointing device.
+  * Otherwise, the user would have to use the
+  * keyboard to navigate through the options.
+  * This may not be intuitive for users who
+  * are not familiar with keyboard navigation.
+  */
+@media (any-pointer: coarse) {
+  .alert-checkbox-group::-webkit-scrollbar,
+  .alert-radio-group::-webkit-scrollbar,
+  .alert-message::-webkit-scrollbar {
+    display: none;
+  }
 }
-
 .alert-input {
   padding-left: 0;
   padding-right: 0;

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

@@ -7,19 +7,23 @@ import { getIonMode } from "../../global/ionic-global";
 export class Backdrop {
   constructor() {
     this.blocker = GESTURE_CONTROLLER.createBlocker({
-      disableScroll: true,
+      disableScroll: false,
     });
     this.visible = true;
     this.tappable = true;
     this.stopPropagation = true;
   }
-  connectedCallback() {
+  /** @internal */
+  async block() {
     if (this.stopPropagation) {
       this.blocker.block();
     }
   }
-  disconnectedCallback() {
-    this.blocker.unblock();
+  /** @internal */
+  async unblock() {
+    if (this.stopPropagation) {
+      this.blocker.unblock();
+    }
   }
   onMouseDown(ev) {
     this.emitTap(ev);
@@ -131,6 +135,51 @@ export class Backdrop {
         }
       }];
   }
+  static get methods() {
+    return {
+      "block": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }]
+        }
+      },
+      "unblock": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
   static get listeners() {
     return [{
         "name": "click",

package/dist/collection/components/checkbox/checkbox.js

@@ -80,8 +80,6 @@ export class Checkbox {
   emitStyle() {
     const style = {
       'interactive-disabled': this.disabled,
-      // TODO(FW-3100): remove this
-      legacy: !!this.legacy,
     };
     // TODO(FW-3100): remove this
     if (this.legacyFormController.hasLegacyControl()) {

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

@@ -283,7 +283,6 @@ ion-picker-column-internal {
 :host .calendar-action-buttons ion-item ion-label {
   display: flex;
   align-items: center;
-  width: auto;
 }
 
 :host .calendar-action-buttons ion-item ion-icon {

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

@@ -283,7 +283,6 @@ ion-picker-column-internal {
 :host .calendar-action-buttons ion-item ion-label {
   display: flex;
   align-items: center;
-  width: auto;
 }
 
 :host .calendar-action-buttons ion-item ion-icon {

package/dist/collection/components/fab/fab.css

@@ -146,49 +146,37 @@
   margin-inline-end: auto;
 }
 
-@supports (inset-inline-start: 0) {
-  :host(.fab-horizontal-start) {
-    inset-inline-start: calc(10px + var(--ion-safe-area-left, 0px));
-  }
+:host(.fab-horizontal-start) {
+  /* stylelint-disable */
+  left: calc(10px + var(--ion-safe-area-left, 0px));
+  /* stylelint-enable */
 }
-@supports not (inset-inline-start: 0) {
-  :host(.fab-horizontal-start) {
-    left: calc(10px + var(--ion-safe-area-left, 0px));
-  }
-  :host-context([dir=rtl]):host(.fab-horizontal-start), :host-context([dir=rtl]).fab-horizontal-start {
+:host-context([dir=rtl]):host(.fab-horizontal-start), :host-context([dir=rtl]).fab-horizontal-start {
+  right: calc(10px + var(--ion-safe-area-right, 0px));
+  left: unset;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.fab-horizontal-start:dir(rtl)) {
+    right: calc(10px + var(--ion-safe-area-right, 0px));
     left: unset;
-    right: unset;
-    right: calc(10px + var(--ion-safe-area-left, 0px));
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.fab-horizontal-start:dir(rtl)) {
-      left: unset;
-      right: unset;
-      right: calc(10px + var(--ion-safe-area-left, 0px));
-    }
   }
 }
 
-@supports (inset-inline-start: 0) {
-  :host(.fab-horizontal-end) {
-    inset-inline-end: calc(10px + var(--ion-safe-area-right, 0px));
-  }
+:host(.fab-horizontal-end) {
+  /* stylelint-disable */
+  right: calc(10px + var(--ion-safe-area-right, 0px));
+  /* stylelint-enable */
 }
-@supports not (inset-inline-start: 0) {
-  :host(.fab-horizontal-end) {
-    right: calc(10px + var(--ion-safe-area-right, 0px));
-  }
-  :host-context([dir=rtl]):host(.fab-horizontal-end), :host-context([dir=rtl]).fab-horizontal-end {
-    left: unset;
+:host-context([dir=rtl]):host(.fab-horizontal-end), :host-context([dir=rtl]).fab-horizontal-end {
+  left: calc(10px + var(--ion-safe-area-left, 0px));
+  right: unset;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.fab-horizontal-end:dir(rtl)) {
+    left: calc(10px + var(--ion-safe-area-left, 0px));
     right: unset;
-    left: calc(10px + var(--ion-safe-area-right, 0px));
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.fab-horizontal-end:dir(rtl)) {
-      left: unset;
-      right: unset;
-      left: calc(10px + var(--ion-safe-area-right, 0px));
-    }
   }
 }
 

package/dist/collection/components/fab/test/safe-area/fab.e2e.js

@@ -0,0 +1,63 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('fab: safe area'), () => {
+    test('should ignore document direction in safe area positioning for start-positioned fab', async ({ page }) => {
+      await page.setContent(`
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-content>
+            <ion-fab vertical="center" horizontal="start">
+              <ion-fab-button>
+                <ion-icon name="add"></ion-icon>
+              </ion-fab-button>
+            </ion-fab>
+          </ion-content>
+        `, config);
+      /**
+       * We need to capture the entire page to check the fab's position,
+       * but we don't need much extra white space.
+       */
+      await page.setViewportSize({
+        width: 200,
+        height: 200,
+      });
+      await expect(page).toHaveScreenshot(screenshot('fab-safe-area-horizontal-start'));
+    });
+    test('should ignore document direction in safe area positioning for end-positioned fab', async ({ page }) => {
+      await page.setContent(`
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-content>
+            <ion-fab vertical="center" horizontal="end">
+              <ion-fab-button>
+                <ion-icon name="add"></ion-icon>
+              </ion-fab-button>
+            </ion-fab>
+          </ion-content>
+        `, config);
+      /**
+       * We need to capture the entire page to check the fab's position,
+       * but we don't need much extra white space.
+       */
+      await page.setViewportSize({
+        width: 200,
+        height: 200,
+      });
+      await expect(page).toHaveScreenshot(screenshot('fab-safe-area-horizontal-end'));
+    });
+  });
+});

package/dist/collection/components/input/input.js

@@ -3,7 +3,7 @@
  */
 import { Build, Host, forceUpdate, h } 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";
@@ -207,7 +207,14 @@ export class Input {
   /**
    * 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);
   }
   /**
@@ -249,8 +256,6 @@ export class Input {
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus,
         'interactive-disabled': this.disabled,
-        // TODO(FW-2764): remove this
-        legacy: !!this.legacy,
       });
     }
   }

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

@@ -208,7 +208,6 @@
   color: inherit;
   display: flex;
   position: relative;
-  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -220,12 +219,8 @@
   outline: none;
   background: var(--background);
   overflow: inherit;
-  z-index: 1;
   box-sizing: border-box;
-}
-
-:host(.item-legacy) .item-native {
-  flex-wrap: unset;
+  z-index: 1;
 }
 
 .item-native::-moz-focus-inner {
@@ -263,12 +258,10 @@ button, a {
   padding-bottom: var(--inner-padding-bottom);
   display: flex;
   position: relative;
-  flex: 1 0 auto;
+  flex: 1;
   flex-direction: inherit;
-  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
-  max-width: 100%;
   min-height: inherit;
   border-width: var(--inner-border-width);
   border-style: var(--border-style);
@@ -278,12 +271,6 @@ button, a {
   box-sizing: border-box;
 }
 
-:host(.item-legacy) .item-inner {
-  flex: 1;
-  flex-wrap: unset;
-  max-width: unset;
-}
-
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
@@ -331,7 +318,6 @@ button, a {
 
 ::slotted(ion-label:not([slot=end])) {
   flex: 1;
-  width: min-content;
 }
 
 :host(.item-input) {
@@ -340,23 +326,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.md.css

@@ -208,7 +208,6 @@
   color: inherit;
   display: flex;
   position: relative;
-  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -220,12 +219,8 @@
   outline: none;
   background: var(--background);
   overflow: inherit;
-  z-index: 1;
   box-sizing: border-box;
-}
-
-:host(.item-legacy) .item-native {
-  flex-wrap: unset;
+  z-index: 1;
 }
 
 .item-native::-moz-focus-inner {
@@ -263,12 +258,10 @@ button, a {
   padding-bottom: var(--inner-padding-bottom);
   display: flex;
   position: relative;
-  flex: 1 0 auto;
+  flex: 1;
   flex-direction: inherit;
-  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
-  max-width: 100%;
   min-height: inherit;
   border-width: var(--inner-border-width);
   border-style: var(--border-style);
@@ -278,12 +271,6 @@ button, a {
   box-sizing: border-box;
 }
 
-:host(.item-legacy) .item-inner {
-  flex: 1;
-  flex-wrap: unset;
-  max-width: unset;
-}
-
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
@@ -331,7 +318,6 @@ button, a {
 
 ::slotted(ion-label:not([slot=end])) {
   flex: 1;
-  width: min-content;
 }
 
 :host(.item-input) {
@@ -340,23 +326,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;