@ionic/core 7.5.8-dev.11701806358.1ca1b519 → 7.5.8-dev.11701876182.1e71e7a0

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

@@ -161,7 +161,7 @@ class TimePickerFixture {
         await this.page.waitForChanges();
     }
     async expectTime(hour, minute, ampm) {
-        const pickerColumns = this.timePicker.locator('ion-picker-column');
+        const pickerColumns = this.timePicker.locator('ion-picker-column-internal');
         await expect(pickerColumns.nth(0)).toHaveJSProperty('value', hour);
         await expect(pickerColumns.nth(1)).toHaveJSProperty('value', minute);
         await expect(pickerColumns.nth(2)).toHaveJSProperty('value', ampm);

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

@@ -34,7 +34,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             await expect(calendarMonthYear).toHaveText('February 2022');
             await calendarMonthYear.click();
             await page.waitForChanges();
-            await page.locator('.month-column ion-picker-column-option').nth(2).click();
+            await page.locator('.month-column .picker-item[data-value="3"]').click();
             await page.waitForChanges();
             await expect(calendarMonthYear).toHaveText('March 2022');
             await expect(ionChange).not.toHaveReceivedEvent();
@@ -46,14 +46,14 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
             await page.waitForSelector('.datetime-ready');
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
-            const monthYearButton = page.locator('.calendar-month-year-toggle');
+            const monthYearButton = page.locator('.calendar-month-year ion-item');
             await expect(calendarMonthYear).toHaveText('February 2022');
             await page.keyboard.press(tabKey);
             await expect(monthYearButton).toBeFocused();
             await page.waitForChanges();
             await page.keyboard.press('Enter');
             await page.waitForChanges();
-            const marchPickerItem = page.locator('.month-column ion-picker-column-option').nth(2);
+            const marchPickerItem = page.locator('.month-column .picker-item[data-value="3"]');
             await expect(marchPickerItem).toBeVisible();
         });
         test('should view next month via next button', async ({ page }) => {
@@ -75,7 +75,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
     `, config);
             const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
             const datetime = page.locator('ion-datetime');
-            const monthYearButton = page.locator('.calendar-month-year-toggle');
+            const monthYearButton = page.locator('.calendar-month-year ion-item');
             const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
             const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');

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

@@ -22,28 +22,28 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="month-year" month-values="5,6,10"></ion-datetime>
       `, config);
-            const items = page.locator('.month-column ion-picker-column-option');
+            const items = page.locator('.month-column .picker-item:not(.picker-item-empty)');
             await expect(items).toHaveText(['May', 'June', 'October']);
         });
         test('should render correct years', async ({ page }) => {
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="month-year" year-values="2022,2021,2020"></ion-datetime>
       `, config);
-            const items = page.locator('.year-column ion-picker-column-option');
+            const items = page.locator('.year-column .picker-item:not(.picker-item-empty)');
             await expect(items).toHaveText(['2022', '2021', '2020']);
         });
         test('should render correct hours', async ({ page }) => {
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="time" hour-values="1,2,3"></ion-datetime>
       `, config);
-            const items = page.locator('ion-picker-column:first-of-type ion-picker-column-option');
+            const items = page.locator('ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
             await expect(items).toHaveText(['1', '2', '3']);
         });
         test('should render correct minutes', async ({ page }) => {
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="time" minute-values="1,2,3"></ion-datetime>
       `, config);
-            const items = page.locator('ion-picker-column:nth-of-type(2) ion-picker-column-option');
+            const items = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
             await expect(items).toHaveText(['01', '02', '03']);
         });
         test('should adjust default parts for allowed hour and minute values', async ({ page }) => {
@@ -69,22 +69,19 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </script>
       `, config);
             await page.waitForSelector('.datetime-ready');
-            const minuteColumn = page.locator('ion-picker-column').nth(1);
-            const minuteItems = minuteColumn.locator('ion-picker-column-option');
+            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(minuteColumn).toHaveJSProperty('value', 15);
-            const hourColumn = page.locator('ion-picker-column').nth(0);
-            const hourItems = hourColumn.locator('ion-picker-column-option');
+            await expect(minuteItems.nth(1)).toHaveClass(/picker-item-active/);
+            const hourItems = page.locator('ion-picker-column-internal:nth-of-type(1) .picker-item:not(.picker-item-empty)');
             await expect(hourItems).toHaveText(['2']);
-            await expect(hourColumn).toHaveJSProperty('value', 2);
+            await expect(hourItems.nth(0)).toHaveClass(/picker-item-active/);
             /**
              * Since the allowed hour is 2AM, the time period
              * should switch from PM to AM.
              */
-            const ampmColumn = page.locator('ion-picker-column').nth(2);
-            const ampmItems = ampmColumn.locator('ion-picker-column-option');
+            const ampmItems = page.locator('ion-picker-column-internal:nth-of-type(3) .picker-item:not(.picker-item-empty)');
             await expect(ampmItems).toHaveText(['AM', 'PM']);
-            await expect(ampmColumn).toHaveJSProperty('value', 'am');
+            await expect(ampmItems.nth(0)).toHaveClass(/picker-item-active/);
         });
         test('should adjust default parts month for allowed month values', async ({ page }) => {
             /**
@@ -109,9 +106,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </script>
       `, config);
             await page.waitForSelector('.datetime-ready');
-            const monthItems = page.locator('.month-column ion-picker-column-option');
+            const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
             await expect(monthItems).toHaveText(['January']);
-            await expect(monthItems.nth(0)).toHaveClass(/option-active/);
+            await expect(monthItems.nth(0)).toHaveClass(/picker-item-active/);
         });
         test('today date highlight should persist even if disallowed from dayValues', async ({ page }) => {
             /**

package/dist/collection/components/datetime/utils/data.js

@@ -323,7 +323,7 @@ export const getMonthColumnData = (locale, refParts, minParts, maxParts, monthVa
  * @param minParts The minimum bound on the date that can be returned
  * @param maxParts The maximum bound on the date that can be returned
  * @param dayValues The allowed date values
- * @returns Date data to be used in ion-picker-column
+ * @returns Date data to be used in ion-picker-column-internal
  */
 export const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues, formatOptions = {
     day: 'numeric',

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

@@ -8,6 +8,13 @@ export class InfiniteScroll {
     constructor() {
         this.thrPx = 0;
         this.thrPc = 0;
+        /**
+         * didFire exists so that ionInfinite
+         * does not fire multiple times if
+         * users continue to scroll after
+         * scrolling into the infinite
+         * scroll threshold.
+         */
         this.didFire = false;
         this.isBusy = false;
         this.onScroll = () => {
@@ -35,9 +42,6 @@ export class InfiniteScroll {
                     return 3;
                 }
             }
-            else {
-                this.didFire = false;
-            }
             return 4;
         };
         this.isLoading = false;
@@ -137,11 +141,15 @@ export class InfiniteScroll {
                         writeTask(() => {
                             scrollEl.scrollTop = newScrollTop;
                             this.isBusy = false;
+                            this.didFire = false;
                         });
                     });
                 });
             });
         }
+        else {
+            this.didFire = false;
+        }
     }
     canStart() {
         return !this.disabled && !this.isBusy && !!this.scrollEl && !this.isLoading;

package/dist/collection/components/infinite-scroll/test/small-dom-update/infinite-scroll.e2e.js

@@ -0,0 +1,31 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('infinite-scroll: appending small amounts to dom'), () => {
+        test('should load more after remaining in threshold', async ({ page }) => {
+            await page.goto('/src/components/infinite-scroll/test/small-dom-update', config);
+            const ionInfiniteComplete = await page.spyOnEvent('ionInfiniteComplete');
+            const content = page.locator('ion-content');
+            const items = page.locator('#list .item');
+            expect(await items.count()).toBe(30);
+            await content.evaluate((el) => el.scrollToBottom(0));
+            await ionInfiniteComplete.next();
+            /**
+             * Even after appending we'll still be within
+             * the infinite scroll's threshold
+             */
+            expect(await items.count()).toBe(33);
+            await content.evaluate((el) => el.scrollToBottom(0));
+            await ionInfiniteComplete.next();
+            /**
+             * Scrolling down again without leaving
+             * the threshold should still trigger
+             * infinite scroll again.
+             */
+            expect(await items.count()).toBe(36);
+        });
+    });
+});

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

@@ -350,6 +350,7 @@
   display: flex;
   position: relative;
   flex-grow: 1;
+  align-items: center;
   width: 100%;
 }
 
@@ -654,9 +655,7 @@
 /**
  * This makes the label sit above the input.
  */
-:host(.input-label-placement-stacked) .label-text-wrapper,
-:host(.has-focus.input-label-placement-floating) .label-text-wrapper,
-:host(.has-value.input-label-placement-floating) .label-text-wrapper {
+:host(.label-floating) .label-text-wrapper {
   transform: translateY(50%) scale(0.75);
   /**
    * Label text should not extend
@@ -665,6 +664,14 @@
   max-width: calc(100% / 0.75);
 }
 
+::slotted([slot=start]) {
+  margin-inline-end: 16px;
+}
+
+::slotted([slot=end]) {
+  margin-inline-start: 16px;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -14,6 +14,8 @@ import { getCounterText } from "./input.utils";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
+ * @slot start - Content to display at the leading edge of the input. (EXPERIMENTAL)
+ * @slot end - Content to display at the trailing edge of the input. (EXPERIMENTAL)
  */
 export class Input {
     constructor() {
@@ -157,7 +159,7 @@ export class Input {
     connectedCallback() {
         const { el } = this;
         this.legacyFormController = createLegacyFormController(el);
-        this.slotMutationController = createSlotMutationController(el, 'label', () => forceUpdate(this));
+        this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
         this.emitStyle();
         this.debounceChanged();
@@ -258,6 +260,8 @@ export class Input {
                 'has-value': this.hasValue(),
                 'has-focus': this.hasFocus,
                 'interactive-disabled': this.disabled,
+                // TODO(FW-2764): remove this
+                legacy: !!this.legacy,
             });
         }
     }
@@ -363,29 +367,50 @@ export class Input {
         return this.renderLabel();
     }
     renderInput() {
-        const { disabled, fill, readonly, shape, inputId, labelPlacement } = this;
+        const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
         const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const hasValue = this.hasValue();
+        const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
+        /**
+         * If the label is stacked, it should always sit above the input.
+         * For floating labels, the label should move above the input if
+         * the input has a value, is focused, or has anything in either
+         * the start or end slot.
+         *
+         * If there is content in the start slot, the label would overlap
+         * it if not forced to float. This is also applied to the end slot
+         * because with the default or solid fills, the input is not
+         * vertically centered in the container, but the label is. This
+         * causes the slots and label to appear vertically offset from each
+         * other when the label isn't floating above the input. This doesn't
+         * apply to the outline fill, but this was not accounted for to keep
+         * things consistent.
+         *
+         * TODO(FW-5592): Remove hasStartEndSlots condition
+         */
+        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
         return (h(Host, { class: createColorClasses(this.color, {
                 [mode]: true,
-                'has-value': this.hasValue(),
-                'has-focus': this.hasFocus,
+                'has-value': hasValue,
+                'has-focus': hasFocus,
+                'label-floating': labelShouldFloat,
                 [`input-fill-${fill}`]: fill !== undefined,
                 [`input-shape-${shape}`]: shape !== undefined,
                 [`input-label-placement-${labelPlacement}`]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { class: "input-wrapper" }, this.renderLabelContainer(), h("div", { class: "native-wrapper" }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { class: "native-wrapper" }, h("slot", { name: "start" }), h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp })))), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
     }
     // TODO FW-2764 Remove this
     renderLegacyInput() {

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

@@ -350,6 +350,7 @@
   display: flex;
   position: relative;
   flex-grow: 1;
+  align-items: center;
   width: 100%;
 }
 
@@ -654,9 +655,7 @@
 /**
  * This makes the label sit above the input.
  */
-:host(.input-label-placement-stacked) .label-text-wrapper,
-:host(.has-focus.input-label-placement-floating) .label-text-wrapper,
-:host(.has-value.input-label-placement-floating) .label-text-wrapper {
+:host(.label-floating) .label-text-wrapper {
   transform: translateY(50%) scale(0.75);
   /**
    * Label text should not extend
@@ -665,6 +664,14 @@
   max-width: calc(100% / 0.75);
 }
 
+::slotted([slot=start]) {
+  margin-inline-end: 16px;
+}
+
+::slotted([slot=end]) {
+  margin-inline-start: 16px;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -907,9 +914,7 @@
   }
 }
 
-:host(.input-fill-solid.input-label-placement-stacked) .label-text-wrapper,
-:host(.has-focus.input-fill-solid.input-label-placement-floating) .label-text-wrapper,
-:host(.has-value.input-fill-solid.input-label-placement-floating) .label-text-wrapper {
+:host(.label-floating.input-fill-solid.input-label-placement-floating) .label-text-wrapper {
   /**
    * Label text should not extend
    * beyond the bounds of the input.
@@ -1063,9 +1068,7 @@
 /**
  * This makes the label sit above the input.
  */
-:host(.has-focus.input-fill-outline.input-label-placement-floating) .label-text-wrapper,
-:host(.has-value.input-fill-outline.input-label-placement-floating) .label-text-wrapper,
-:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
+:host(.label-floating.input-fill-outline) .label-text-wrapper {
   transform: translateY(-32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
@@ -1226,9 +1229,7 @@
  * the floating/stacked label. We simulate this "cut out"
  * by removing the top border from the notch fragment.
  */
-:host(.has-focus.input-fill-outline.input-label-placement-floating) .input-outline-notch,
-:host(.has-value.input-fill-outline.input-label-placement-floating) .input-outline-notch,
-:host(.input-fill-outline.input-label-placement-stacked) .input-outline-notch {
+:host(.label-floating.input-fill-outline) .input-outline-notch {
   border-top: none;
 }
 

package/dist/collection/components/input/test/slot/input.e2e.js

@@ -0,0 +1,51 @@
+/*!
+ * (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('input: start and end slots (visual checks)'), () => {
+        test('should not have visual regressions with a start-positioned label', async ({ page }) => {
+            await page.setContent(`
+          <ion-input label-placement="start" fill="solid" value="100" label="Weight" clear-input="true">
+            <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+            <ion-label slot="end">lbs</ion-label>
+          </ion-input>
+        `, config);
+            const input = page.locator('ion-input');
+            await expect(input).toHaveScreenshot(screenshot(`input-slots-label-start`));
+        });
+        test('should not have visual regressions with a floating label', async ({ page }) => {
+            await page.setContent(`
+          <ion-input label-placement="floating" fill="solid" value="100" label="Weight" clear-input="true">
+            <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+            <ion-label slot="end">lbs</ion-label>
+          </ion-input>
+        `, config);
+            const input = page.locator('ion-input');
+            await expect(input).toHaveScreenshot(screenshot(`input-slots-label-floating`));
+        });
+    });
+});
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('input: start and end slots (functionality checks)'), () => {
+        test('should raise floating label when there is content in the start slot', async ({ page }) => {
+            await page.setContent(`
+          <ion-input label-placement="floating" fill="solid" label="Weight">
+            <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+          </ion-input>
+        `, config);
+            const input = page.locator('ion-input');
+            await expect(input).toHaveClass(/label-floating/);
+        });
+        test('should raise floating label when there is content in the end slot', async ({ page }) => {
+            await page.setContent(`
+          <ion-input label-placement="floating" fill="solid" label="Weight">
+            <ion-icon slot="end" name="barbell" aria-hidden="true"></ion-icon>
+          </ion-input>
+        `, config);
+            const input = page.locator('ion-input');
+            await expect(input).toHaveClass(/label-floating/);
+        });
+    });
+});

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

@@ -100,6 +100,14 @@
    * @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;
@@ -230,6 +238,7 @@
   /* stylelint-enable */
   display: flex;
   position: relative;
+  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -241,8 +250,8 @@
   outline: none;
   background: var(--background);
   overflow: inherit;
-  box-sizing: border-box;
   z-index: 1;
+  box-sizing: border-box;
 }
 :host-context([dir=rtl]) .item-native {
   padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
@@ -261,6 +270,10 @@
   }
 }
 
+:host(.item-legacy) .item-native {
+  flex-wrap: unset;
+}
+
 .item-native::-moz-focus-inner {
   border: 0;
 }
@@ -296,10 +309,20 @@ button, a {
   /* stylelint-enable */
   display: flex;
   position: relative;
-  flex: 1;
+  flex: 1 0 0;
   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);
@@ -325,6 +348,12 @@ button, a {
   }
 }
 
+:host(.item-legacy) .item-inner {
+  flex: 1;
+  flex-wrap: unset;
+  max-width: unset;
+}
+
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
@@ -388,6 +417,7 @@ button, a {
 
 ::slotted(ion-label:not([slot=end])) {
   flex: 1;
+  width: min-content;
 }
 
 :host(.item-input) {
@@ -396,15 +426,23 @@ button, a {
 
 .input-wrapper {
   display: flex;
-  flex: 1;
+  flex: 1 0 auto;
   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

@@ -100,6 +100,14 @@
    * @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;
@@ -230,6 +238,7 @@
   /* stylelint-enable */
   display: flex;
   position: relative;
+  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -241,8 +250,8 @@
   outline: none;
   background: var(--background);
   overflow: inherit;
-  box-sizing: border-box;
   z-index: 1;
+  box-sizing: border-box;
 }
 :host-context([dir=rtl]) .item-native {
   padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
@@ -261,6 +270,10 @@
   }
 }
 
+:host(.item-legacy) .item-native {
+  flex-wrap: unset;
+}
+
 .item-native::-moz-focus-inner {
   border: 0;
 }
@@ -296,10 +309,20 @@ button, a {
   /* stylelint-enable */
   display: flex;
   position: relative;
-  flex: 1;
+  flex: 1 0 0;
   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);
@@ -325,6 +348,12 @@ button, a {
   }
 }
 
+:host(.item-legacy) .item-inner {
+  flex: 1;
+  flex-wrap: unset;
+  max-width: unset;
+}
+
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
@@ -388,6 +417,7 @@ button, a {
 
 ::slotted(ion-label:not([slot=end])) {
   flex: 1;
+  width: min-content;
 }
 
 :host(.item-input) {
@@ -396,15 +426,23 @@ button, a {
 
 .input-wrapper {
   display: flex;
-  flex: 1;
+  flex: 1 0 auto;
   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;