@ionic/core 7.5.7-dev.11701273756.1eb73d4c → 7.5.7-dev.11701896424.13d40ac9

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

@@ -704,14 +704,24 @@ export class Datetime {
    * or modal that the datetime was presented in.
    */
   async confirm(closeOverlay = false) {
-    const { isCalendarPicker, activeParts } = this;
+    const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
     /**
      * We only update the value if the presentation is not a calendar picker.
      */
     if (activeParts !== undefined || !isCalendarPicker) {
       const activePartsIsArray = Array.isArray(activeParts);
       if (activePartsIsArray && activeParts.length === 0) {
-        this.setValue(undefined);
+        if (preferWheel) {
+          /**
+           * If the datetime is using a wheel picker, but the
+           * active parts are empty, then the user has confirmed the
+           * initial value (working parts) presented to them.
+           */
+          this.setValue(convertDataToISO(workingParts));
+        }
+        else {
+          this.setValue(undefined);
+        }
       }
       else {
         this.setValue(convertDataToISO(activeParts));
@@ -915,9 +925,18 @@ export class Datetime {
     const yearValues = (this.parsedYearValues = convertToArrayOfNumbers(this.yearValues));
     const dayValues = (this.parsedDayValues = convertToArrayOfNumbers(this.dayValues));
     const todayParts = (this.todayParts = parseDate(getToday()));
-    this.defaultParts = getClosestValidDate(todayParts, monthValues, dayValues, yearValues, hourValues, minuteValues);
     this.processMinParts();
     this.processMaxParts();
+    this.defaultParts = getClosestValidDate({
+      refParts: todayParts,
+      monthValues,
+      dayValues,
+      yearValues,
+      hourValues,
+      minuteValues,
+      minParts: this.minParts,
+      maxParts: this.maxParts,
+    });
     this.processValue(this.value);
     this.emitStyle();
   }
@@ -985,7 +1004,7 @@ export class Datetime {
       : this.renderIndividualDatePickerColumns(forcePresentation);
   }
   renderCombinedDatePickerColumn() {
-    const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
+    const { defaultParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
     const activePart = this.getActivePartsWithFallback();
     /**
      * By default, generate a range of 3 months:
@@ -1036,7 +1055,7 @@ export class Datetime {
     const todayString = workingParts.day !== null
       ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
       : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
-    return (h("ion-picker-column-internal", { class: "date-column", color: this.color, disabled: disabled, items: items, value: todayString, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { class: "date-column", color: this.color, items: items, value: todayString, onIonChange: (ev) => {
         // TODO(FW-1823) Remove this when iOS 14 support is dropped.
         // Due to a Safari 14 issue we need to destroy
         // the scroll listener before we update state
@@ -1118,9 +1137,9 @@ export class Datetime {
     if (days.length === 0) {
       return [];
     }
-    const { disabled, workingParts } = this;
+    const { workingParts } = this;
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { class: "day-column", color: this.color, disabled: disabled, items: days, value: (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { class: "day-column", color: this.color, items: days, value: (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined, onIonChange: (ev) => {
         // TODO(FW-1823) Remove this when iOS 14 support is dropped.
         // Due to a Safari 14 issue we need to destroy
         // the scroll listener before we update state
@@ -1140,9 +1159,9 @@ export class Datetime {
     if (months.length === 0) {
       return [];
     }
-    const { disabled, workingParts } = this;
+    const { workingParts } = this;
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { class: "month-column", color: this.color, disabled: disabled, items: months, value: workingParts.month, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { class: "month-column", color: this.color, items: months, value: workingParts.month, onIonChange: (ev) => {
         // TODO(FW-1823) Remove this when iOS 14 support is dropped.
         // Due to a Safari 14 issue we need to destroy
         // the scroll listener before we update state
@@ -1162,9 +1181,9 @@ export class Datetime {
     if (years.length === 0) {
       return [];
     }
-    const { disabled, workingParts } = this;
+    const { workingParts } = this;
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { class: "year-column", color: this.color, disabled: disabled, items: years, value: workingParts.year, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { class: "year-column", color: this.color, items: years, value: workingParts.year, onIonChange: (ev) => {
         // TODO(FW-1823) Remove this when iOS 14 support is dropped.
         // Due to a Safari 14 issue we need to destroy
         // the scroll listener before we update state
@@ -1203,35 +1222,35 @@ export class Datetime {
     ];
   }
   renderHourPickerColumn(hoursData) {
-    const { disabled, workingParts } = this;
+    const { workingParts } = this;
     if (hoursData.length === 0)
       return [];
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.hour, items: hoursData, numericInput: true, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { color: this.color, value: activePart.hour, items: hoursData, numericInput: true, onIonChange: (ev) => {
         this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
         this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value }));
         ev.stopPropagation();
       } }));
   }
   renderMinutePickerColumn(minutesData) {
-    const { disabled, workingParts } = this;
+    const { workingParts } = this;
     if (minutesData.length === 0)
       return [];
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.minute, items: minutesData, numericInput: true, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { color: this.color, value: activePart.minute, items: minutesData, numericInput: true, onIonChange: (ev) => {
         this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
         this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value }));
         ev.stopPropagation();
       } }));
   }
   renderDayPeriodPickerColumn(dayPeriodData) {
-    const { disabled, workingParts } = this;
+    const { workingParts } = this;
     if (dayPeriodData.length === 0) {
       return [];
     }
     const activePart = this.getActivePartsWithFallback();
     const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
-    return (h("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, items: dayPeriodData, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, value: activePart.ampm, items: dayPeriodData, onIonChange: (ev) => {
         const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
         this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
         this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));

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

@@ -325,7 +325,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/test/manipulation.spec.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { getPreviousYear, getNextYear, getPreviousMonth, getNextMonth, getPreviousDay, getNextDay, getPreviousWeek, getNextWeek, getEndOfWeek, getStartOfWeek, convert12HourTo24Hour, getInternalHourValue, calculateHourFromAMPM, subtractDays, addDays, validateParts, } from "../utils/manipulation";
+import { getPreviousYear, getNextYear, getPreviousMonth, getNextMonth, getPreviousDay, getNextDay, getPreviousWeek, getNextWeek, getEndOfWeek, getStartOfWeek, convert12HourTo24Hour, getInternalHourValue, calculateHourFromAMPM, subtractDays, addDays, validateParts, getClosestValidDate, } from "../utils/manipulation";
 describe('addDays()', () => {
   it('should correctly add days', () => {
     expect(addDays({
@@ -431,3 +431,135 @@ describe('validateParts()', () => {
     })).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 30 });
   });
 });
+describe('getClosestValidDate()', () => {
+  it('should match a date with only month/day/year', () => {
+    // October 10, 2023
+    const refParts = { month: 10, day: 10, year: 2023 };
+    // April 10, 2021
+    const minParts = { month: 4, day: 10, year: 2021 };
+    // September 14, 2021
+    const maxParts = { month: 9, day: 14, year: 2021 };
+    // September 4, 2021
+    const expected = { month: 9, day: 4, year: 2021, dayOfWeek: undefined };
+    expect(getClosestValidDate({
+      refParts,
+      monthValues: [2, 3, 7, 9, 10],
+      dayValues: [4, 15, 25],
+      yearValues: [2020, 2021, 2023],
+      maxParts,
+      minParts,
+    })).toEqual(expected);
+  });
+  it('should match a date when the reference date is before the min', () => {
+    // April 2, 2020 3:20 PM
+    const refParts = { month: 4, day: 2, year: 2020, hour: 15, minute: 20 };
+    // September 10, 2021 10:10 AM
+    const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+    // September 14, 2021 10:11 AM
+    const maxParts = { month: 9, day: 14, year: 2021, hour: 10, minute: 11 };
+    // September 11, 2021 11:15 AM
+    const expected = {
+      year: 2021,
+      day: 11,
+      month: 9,
+      hour: 11,
+      minute: 15,
+      ampm: 'am',
+      dayOfWeek: undefined,
+    };
+    expect(getClosestValidDate({
+      refParts,
+      monthValues: [4, 9, 11],
+      dayValues: [11, 12, 13, 14],
+      yearValues: [2020, 2021, 2023],
+      hourValues: [9, 10, 11],
+      minuteValues: [11, 12, 13, 14, 15],
+      maxParts,
+      minParts,
+    })).toEqual(expected);
+  });
+  it('should match a date when the reference date is before the min', () => {
+    // April 2, 2020 3:20 PM
+    const refParts = { month: 4, day: 2, year: 2020, hour: 15, minute: 20 };
+    // September 10, 2021 10:10 AM
+    const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+    // September 10, 2021 10:15 AM
+    const maxParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 15 };
+    // September 10, 2021 10:15 AM
+    const expected = {
+      month: 9,
+      day: 10,
+      year: 2021,
+      hour: 10,
+      minute: 15,
+      ampm: 'am',
+      dayOfWeek: undefined,
+    };
+    expect(getClosestValidDate({
+      refParts,
+      monthValues: [4, 9, 11],
+      dayValues: [10, 12, 13, 14],
+      yearValues: [2020, 2021, 2023],
+      hourValues: [9, 10, 11],
+      minuteValues: [11, 12, 13, 14, 15],
+      minParts,
+      maxParts,
+    })).toEqual(expected);
+  });
+  it('should only clamp minutes if within the same day and hour as min/max', () => {
+    // April 2, 2020 9:16 AM
+    const refParts = { month: 4, day: 2, year: 2020, hour: 9, minute: 16 };
+    // September 10, 2021 10:10 AM
+    const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+    // September 10, 2021 11:15 AM
+    const maxParts = { month: 9, day: 10, year: 2021, hour: 11, minute: 15 };
+    // September 10, 2021 10:16 AM
+    const expected = {
+      month: 9,
+      day: 10,
+      year: 2021,
+      hour: 10,
+      minute: 16,
+      ampm: 'am',
+      dayOfWeek: undefined,
+    };
+    expect(getClosestValidDate({
+      refParts,
+      monthValues: [4, 9, 11],
+      dayValues: [10, 12, 13, 14],
+      yearValues: [2020, 2021, 2023],
+      hourValues: [9, 10, 11],
+      minuteValues: [10, 15, 16],
+      minParts,
+      maxParts,
+    })).toEqual(expected);
+  });
+  it('should return the closest valid date after adjusting the allowed year', () => {
+    // April 2, 2022 9:16 AM
+    const refParts = { month: 4, day: 2, year: 2022, hour: 9, minute: 16 };
+    // September 10, 2021 10:10 AM
+    const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+    // September 10, 2023 11:15 AM
+    const maxParts = { month: 9, day: 10, year: 2023, hour: 11, minute: 15 };
+    // April 2, 2022 9:16 AM
+    const expected = {
+      month: 4,
+      day: 2,
+      year: 2022,
+      hour: 9,
+      minute: 16,
+      ampm: 'am',
+      dayOfWeek: undefined,
+    };
+    expect(getClosestValidDate({
+      refParts,
+      monthValues: [4, 9, 11],
+      dayValues: [2, 10, 12, 13, 14],
+      yearValues: [2020, 2021, 2022, 2023],
+      hourValues: [9, 10, 11],
+      minuteValues: [10, 15, 16],
+      minParts,
+      maxParts,
+    })).toEqual(expected);
+  });
+});

package/dist/collection/components/datetime/test/prefer-wheel/datetime.spec.js

@@ -0,0 +1,27 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Datetime } from "../../datetime";
+describe('datetime: preferWheel', () => {
+  beforeEach(() => {
+    const mockIntersectionObserver = jest.fn();
+    mockIntersectionObserver.mockReturnValue({
+      observe: () => null,
+      unobserve: () => null,
+      disconnect: () => null,
+    });
+    global.IntersectionObserver = mockIntersectionObserver;
+  });
+  it('should select the working day when clicking the confirm button', async () => {
+    const page = await newSpecPage({
+      components: [Datetime],
+      html: '<ion-datetime prefer-wheel="true" max="2021" show-default-buttons="true"></ion-datetime>',
+    });
+    const datetime = page.body.querySelector('ion-datetime');
+    const confirmButton = datetime.shadowRoot.querySelector('#confirm-button');
+    confirmButton.click();
+    await page.waitForChanges();
+    expect(datetime.value).toBe('2021-12-31T23:59:00');
+  });
+});

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

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { isSameDay } from "./comparison";
+import { isAfter, isBefore, isSameDay } from "./comparison";
 import { getNumDaysInMonth } from "./helpers";
 import { clampDate, parseAmPm } from "./parse";
 const twoDigit = (val) => {
@@ -355,32 +355,82 @@ export const validateParts = (parts, minParts, maxParts) => {
  * Returns the closest date to refParts
  * that also meets the constraints of
  * the *Values params.
- * @param refParts The reference date
- * @param monthValues The allowed month values
- * @param dayValues The allowed day (of the month) values
- * @param yearValues The allowed year values
- * @param hourValues The allowed hour values
- * @param minuteValues The allowed minute values
  */
-export const getClosestValidDate = (refParts, monthValues, dayValues, yearValues, hourValues, minuteValues) => {
+export const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValues, hourValues, minuteValues, minParts, maxParts, }) => {
   const { hour, minute, day, month, year } = refParts;
   const copyParts = Object.assign(Object.assign({}, refParts), { dayOfWeek: undefined });
+  if (yearValues !== undefined) {
+    // Filters out years that are out of the min/max bounds
+    const filteredYears = yearValues.filter((year) => {
+      if (minParts !== undefined && year < minParts.year) {
+        return false;
+      }
+      if (maxParts !== undefined && year > maxParts.year) {
+        return false;
+      }
+      return true;
+    });
+    copyParts.year = findClosestValue(year, filteredYears);
+  }
   if (monthValues !== undefined) {
-    copyParts.month = findClosestValue(month, monthValues);
+    // Filters out months that are out of the min/max bounds
+    const filteredMonths = monthValues.filter((month) => {
+      if (minParts !== undefined && copyParts.year === minParts.year && month < minParts.month) {
+        return false;
+      }
+      if (maxParts !== undefined && copyParts.year === maxParts.year && month > maxParts.month) {
+        return false;
+      }
+      return true;
+    });
+    copyParts.month = findClosestValue(month, filteredMonths);
   }
   // Day is nullable but cannot be undefined
   if (day !== null && dayValues !== undefined) {
-    copyParts.day = findClosestValue(day, dayValues);
-  }
-  if (yearValues !== undefined) {
-    copyParts.year = findClosestValue(year, yearValues);
+    // Filters out days that are out of the min/max bounds
+    const filteredDays = dayValues.filter((day) => {
+      if (minParts !== undefined && isBefore(Object.assign(Object.assign({}, copyParts), { day }), minParts)) {
+        return false;
+      }
+      if (maxParts !== undefined && isAfter(Object.assign(Object.assign({}, copyParts), { day }), maxParts)) {
+        return false;
+      }
+      return true;
+    });
+    copyParts.day = findClosestValue(day, filteredDays);
   }
   if (hour !== undefined && hourValues !== undefined) {
-    copyParts.hour = findClosestValue(hour, hourValues);
+    // Filters out hours that are out of the min/max bounds
+    const filteredHours = hourValues.filter((hour) => {
+      if ((minParts === null || minParts === void 0 ? void 0 : minParts.hour) !== undefined && isSameDay(copyParts, minParts) && hour < minParts.hour) {
+        return false;
+      }
+      if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.hour) !== undefined && isSameDay(copyParts, maxParts) && hour > maxParts.hour) {
+        return false;
+      }
+      return true;
+    });
+    copyParts.hour = findClosestValue(hour, filteredHours);
     copyParts.ampm = parseAmPm(copyParts.hour);
   }
   if (minute !== undefined && minuteValues !== undefined) {
-    copyParts.minute = findClosestValue(minute, minuteValues);
+    // Filters out minutes that are out of the min/max bounds
+    const filteredMinutes = minuteValues.filter((minute) => {
+      if ((minParts === null || minParts === void 0 ? void 0 : minParts.minute) !== undefined &&
+        isSameDay(copyParts, minParts) &&
+        copyParts.hour === minParts.hour &&
+        minute < minParts.minute) {
+        return false;
+      }
+      if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.minute) !== undefined &&
+        isSameDay(copyParts, maxParts) &&
+        copyParts.hour === maxParts.hour &&
+        minute > maxParts.minute) {
+        return false;
+      }
+      return true;
+    });
+    copyParts.minute = findClosestValue(minute, filteredMinutes);
   }
   return copyParts;
 };

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

@@ -350,7 +350,6 @@
   display: flex;
   position: relative;
   flex-grow: 1;
-  align-items: center;
   width: 100%;
 }
 
@@ -655,7 +654,9 @@
 /**
  * This makes the label sit above the input.
  */
-:host(.label-floating) .label-text-wrapper {
+: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 {
   transform: translateY(50%) scale(0.75);
   /**
    * Label text should not extend
@@ -664,14 +665,6 @@
   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,8 +14,6 @@ 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() {
@@ -159,7 +157,7 @@ export class Input {
   connectedCallback() {
     const { el } = this;
     this.legacyFormController = createLegacyFormController(el);
-    this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
+    this.slotMutationController = createSlotMutationController(el, 'label', () => forceUpdate(this));
     this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
     this.emitStyle();
     this.debounceChanged();
@@ -258,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,
       });
     }
   }
@@ -365,50 +361,29 @@ export class Input {
     return this.renderLabel();
   }
   renderInput() {
-    const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this;
+    const { disabled, fill, readonly, shape, inputId, labelPlacement } = 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': hasValue,
-        'has-focus': hasFocus,
-        'label-floating': labelShouldFloat,
+        'has-value': this.hasValue(),
+        'has-focus': this.hasFocus,
         [`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", 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) => {
+      }) }, 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) => {
         /**
          * 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 }))), h("slot", { name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
+      }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp })))), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
   }
   // TODO FW-2764 Remove this
   renderLegacyInput() {

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

@@ -350,7 +350,6 @@
   display: flex;
   position: relative;
   flex-grow: 1;
-  align-items: center;
   width: 100%;
 }
 
@@ -655,7 +654,9 @@
 /**
  * This makes the label sit above the input.
  */
-:host(.label-floating) .label-text-wrapper {
+: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 {
   transform: translateY(50%) scale(0.75);
   /**
    * Label text should not extend
@@ -664,14 +665,6 @@
   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
@@ -914,7 +907,9 @@
   }
 }
 
-:host(.label-floating.input-fill-solid.input-label-placement-floating) .label-text-wrapper {
+: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 {
   /**
    * Label text should not extend
    * beyond the bounds of the input.
@@ -1068,7 +1063,9 @@
 /**
  * This makes the label sit above the input.
  */
-:host(.label-floating.input-fill-outline) .label-text-wrapper {
+: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 {
   transform: translateY(-32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
@@ -1229,7 +1226,9 @@
  * the floating/stacked label. We simulate this "cut out"
  * by removing the top border from the notch fragment.
  */
-:host(.label-floating.input-fill-outline) .input-outline-notch {
+: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 {
   border-top: none;
 }