voyager-ionic-core 8.8.12 → 9.0.1

package/dist/collection/components/fab-button/fab-button.js

@@ -2,7 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { inheritAriaAttributes } from "../../utils/helpers";
+import { inheritAriaAttributes, hasShadowDom } from "../../utils/helpers";
+import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { close } from "ionicons/icons";
 import { getIonMode } from "../../global/ionic-global";
@@ -15,6 +16,8 @@ import { getIonMode } from "../../global/ionic-global";
 export class FabButton {
     constructor() {
         this.fab = null;
+        this.formButtonEl = null;
+        this.formEl = null;
         this.inheritedAttributes = {};
         /**
          * If `true`, the fab button will be show a close icon.
@@ -55,34 +58,105 @@ export class FabButton {
         this.onBlur = () => {
             this.ionBlur.emit();
         };
-        this.onClick = () => {
-            const { fab } = this;
-            if (!fab) {
-                return;
+        this.onClick = (ev) => {
+            const { el, fab } = this;
+            if (this.type !== 'button' && hasShadowDom(el)) {
+                this.submitForm(ev);
+            }
+            if (fab) {
+                fab.toggle();
             }
-            fab.toggle();
         };
     }
+    disabledChanged() {
+        const { disabled } = this;
+        if (this.formButtonEl) {
+            this.formButtonEl.disabled = disabled;
+        }
+    }
     connectedCallback() {
         this.fab = this.el.closest('ion-fab');
     }
+    /**
+     * The native button rendered inside `ion-fab-button` is in the Shadow DOM and
+     * does not participate in form submission, so a hidden native button is added
+     * to the associated form and clicked instead.
+     */
+    renderHiddenButton() {
+        const formEl = (this.formEl = this.findForm());
+        if (formEl) {
+            const { formButtonEl } = this;
+            // Reuse the existing hidden button, syncing values that changed since it was created.
+            if (formButtonEl !== null && formEl.contains(formButtonEl)) {
+                formButtonEl.disabled = this.disabled;
+                formButtonEl.type = this.type;
+                return;
+            }
+            const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
+            newFormButtonEl.type = this.type;
+            newFormButtonEl.style.display = 'none';
+            newFormButtonEl.disabled = this.disabled;
+            formEl.appendChild(newFormButtonEl);
+        }
+    }
+    // TODO(FW-7663): share the hidden button and form lookup with ion-button
+    findForm() {
+        const { form } = this;
+        if (form instanceof HTMLFormElement) {
+            return form;
+        }
+        if (typeof form === 'string') {
+            const el = document.getElementById(form);
+            if (el) {
+                if (el instanceof HTMLFormElement) {
+                    return el;
+                }
+                else {
+                    printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`, this.el);
+                    return null;
+                }
+            }
+            else {
+                printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`, this.el);
+                return null;
+            }
+        }
+        if (form !== undefined) {
+            printIonWarning(`[ion-fab-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, this.el);
+            return null;
+        }
+        return this.el.closest('form');
+    }
+    submitForm(ev) {
+        if (this.formEl && this.formButtonEl) {
+            ev.preventDefault();
+            this.formButtonEl.click();
+        }
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     render() {
-        const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
+        const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes, type } = this;
         const inList = hostContext('ion-fab-list', el);
         const mode = getIonMode(this);
         const TagType = href === undefined ? 'button' : 'a';
         const attrs = TagType === 'button'
-            ? { type: this.type }
+            ? { type }
             : {
                 download: this.download,
                 href,
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(Host, { key: '4eee204d20b0e2ffed49a88f6cb3e04b6697965c', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        /**
+         * The hidden button is created during render so that setting `type` or
+         * `form` after the component loads still adds it to the form.
+         */
+        if (type !== 'button') {
+            this.renderHiddenButton();
+        }
+        return (h(Host, { key: '89e8f2564f12f8c1cd8509a40359202347948846', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -93,7 +167,7 @@ export class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({ key: '914561622c0c6bd41453e828a7d8a39f924875ac' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: '2c8090742a64c62a79243667027a195cca9d5912', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'c3e55291e4c4d306d34a4b95dd2e727e87bdf39c', class: "button-inner" }, h("slot", { key: 'f8e57f71d8f8878d9746cfece82f57f19ef9e988' })), mode === 'md' && h("ion-ripple-effect", { key: 'a5e94fa0bb9836072300617245ed0c1b4887bac6' }))));
+            }) }, h(TagType, { key: '9e2fd462316e1aec50f53fa1b7ad7f02fd399592', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: 'c3bdb8614eb249297afc963810066658dc85efd6', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'a6a505b24d21cc716d2e3351ad4c380b95c768d7', class: "button-inner" }, h("slot", { key: 'f44fc1e95533438ee3adc8cc5bdd9e1e85849fd6' })), mode === 'md' && h("ion-ripple-effect", { key: 'b7c7dc7fceb0bb5613239608225f040010b7b2bd' }))));
     }
     static get is() { return "ion-fab-button"; }
     static get encapsulation() { return "shadow"; }
@@ -364,6 +438,30 @@ export class FabButton {
                 "attribute": "type",
                 "defaultValue": "'button'"
             },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | HTMLFormElement",
+                    "resolved": "HTMLFormElement | string | undefined",
+                    "references": {
+                        "HTMLFormElement": {
+                            "location": "global",
+                            "id": "global::HTMLFormElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -439,4 +537,10 @@ export class FabButton {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }];
+    }
 }

package/dist/collection/components/footer/footer.js

@@ -106,7 +106,7 @@ export class Footer {
         const { translucent, collapse } = this;
         const mode = getIonMode(this);
         const tabs = this.el.closest('ion-tabs');
-        const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
+        const tabBar = tabs?.querySelector(':scope > ion-tab-bar');
         return (h(Host, { key: '71939c4bbaef5062532a99ee2e33574102a9abad', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling

package/dist/collection/components/header/header.js

@@ -148,14 +148,14 @@ export class Header {
         const isCondensed = collapse === 'condense';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);
-        return (h(Host, Object.assign({ key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
+        return (h(Host, { key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
+            }, ...inheritedAttributes }, mode === 'ios' && translucent && h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/img/img.js

@@ -3,8 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
+import { printIonWarning } from "../../utils/logging/index";
 import { getIonMode } from "../../global/ionic-global";
 /**
+ * @deprecated
+ *
  * @part image - The inner `img` element.
  */
 export class Img {
@@ -24,6 +27,8 @@ export class Img {
         this.inheritedAttributes = inheritAttributes(this.el, ['draggable']);
     }
     componentDidLoad() {
+        printIonWarning('[ion-img] - This component is deprecated and will be removed in Ionic v10. ' +
+            'Use a native <img> with the loading="lazy" attribute instead.', this.el);
         this.addIO();
     }
     disconnectedCallback() {
@@ -76,7 +81,7 @@ export class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { key: '9bfaa659b0680189fd29f3acb2fdce7f70be6060', class: getIonMode(this) }, h("img", { key: 'd484beae0d5cbe0406958bfad40cdd6c05625340', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (h(Host, { key: '57bfb44d9850381fe7b6fcf0c9019b03f7ef86ec', class: getIonMode(this) }, h("img", { key: '888ec06a266fa2751fc0147ede6a567f4e2b29a6', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     static get is() { return "ion-img"; }
     static get encapsulation() { return "shadow"; }

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

@@ -206,12 +206,6 @@
 }
 
 .input-clear-icon {
-  -webkit-margin-start: auto;
-  margin-inline-start: auto;
-  -webkit-margin-end: auto;
-  margin-inline-end: auto;
-  margin-top: auto;
-  margin-bottom: auto;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -269,14 +263,47 @@
   line-height: normal;
 }
 
+.input-control {
+  display: flex;
+  flex-grow: 1;
+  width: 100%;
+  /**
+  * Allows the control to shrink below the label and input's intrinsic
+  * width, preventing the start and end slots from being pushed outside
+  * the wrapper. The label and input truncate independently, so it can
+  * use whatever space remains after accounting for the slots.
+  */
+  min-width: 0;
+}
+
 .native-wrapper {
   display: flex;
   position: relative;
   flex-grow: 1;
-  align-items: center;
   width: 100%;
 }
 
+/**
+ * When the label sits beside the input, the label should size to its content
+ * and the input should take the remaining space. A zero flex basis prevents
+ * the input from requesting its full width and forcing the label to shrink.
+ * Stacked and floating placements use a column layout, so their flex basis
+ * controls height instead and does not need to be overridden.
+ */
+:host(.input-label-placement-start) .native-wrapper,
+:host(.input-label-placement-end) .native-wrapper,
+:host(.input-label-placement-fixed) .native-wrapper {
+  flex: 1 1 0;
+}
+
+.input-start,
+.input-end {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+}
+
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -377,6 +404,12 @@
    */
   display: flex;
   align-items: center;
+  /**
+  * Allows the label to shrink below its intrinsic content width.
+  * Without this the label keeps its full width and can push the
+  * input and end slot outside the wrapper.
+  */
+  min-width: 0;
   /**
    * Label text should not extend
    * beyond the bounds of the input.
@@ -395,6 +428,18 @@
   pointer-events: none;
 }
 
+/**
+ * When start/end slots are added or removed, we temporarily
+ * disable the label transition to prevent the floating label
+ * from animating as its position is adjusted.
+ *
+ * This class is applied by the start container controller, so
+ * renaming it here requires renaming it there too.
+ */
+:host(.skip-label-transition) .label-text-wrapper {
+  transition: none;
+}
+
 /**
  * We need to use two elements instead of
  * one. The .label-text-wrapper is responsible
@@ -438,7 +483,7 @@
  * Label is on the left of the input in LTR and
  * on the right in RTL.
  */
-:host(.input-label-placement-start) .input-wrapper {
+:host(.input-label-placement-start) .input-control {
   flex-direction: row;
 }
 
@@ -460,7 +505,7 @@
  * Label is on the right of the input in LTR and
  * on the left in RTL.
  */
-:host(.input-label-placement-end) .input-wrapper {
+:host(.input-label-placement-end) .input-control {
   flex-direction: row-reverse;
 }
 
@@ -508,10 +553,9 @@
  * Floating: Label sits over the input when the input has no
  * value and is blurred. Label sits above the input and is scaled
  * down when the input is focused or has a value.
- *
  */
-:host(.input-label-placement-stacked) .input-wrapper,
-:host(.input-label-placement-floating) .input-wrapper {
+:host(.input-label-placement-stacked) .input-control,
+:host(.input-label-placement-floating) .input-control {
   flex-direction: column;
   align-items: start;
 }
@@ -542,18 +586,6 @@
   }
 }
 
-/**
- * Ensures the input does not
- * overlap the label.
- */
-:host(.input-label-placement-stacked) input,
-:host(.input-label-placement-floating) input {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 1px;
-  margin-bottom: 0;
-}
-
 /**
  * This makes the label sit over the input
  * when the input is blurred and has no value.
@@ -725,8 +757,7 @@
 }
 
 .input-clear-icon ion-icon {
-  width: 18px;
-  height: 18px;
+  font-size: 18px;
 }
 
 :host(.input-disabled) {

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

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, } from "@stencil/core";
-import { createNotchController, checkInvalidState } from "../../utils/forms/index";
+import { createNotchController, createStartContainerController, checkInvalidState } from "../../utils/forms/index";
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -56,7 +56,7 @@ export class Input {
         /**
          * Whether auto correction should be enabled when the user is entering/editing the text value.
          */
-        this.autocorrect = 'off';
+        this.autocorrect = false;
         /**
          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
          *
@@ -155,13 +155,18 @@ export class Input {
             this.emitInputChange(ev);
         };
         /**
-         * Stops propagation when the label is clicked,
-         * otherwise, two clicks will be triggered.
+         * Stops propagation for clicks on the input's own content (label text,
+         * input field) to prevent double-click events. Allows clicks on slotted
+         * content to propagate so event delegation works for parent handlers.
+         *
+         * Only slots belonging directly to this input should be considered.
+         * The input itself may have a slot attribute when placed in an item
+         * or toolbar, which does not make its content slotted content.
          */
         this.onLabelClick = (ev) => {
-            // Only stop propagation if the click was directly on the label
-            // and not on the input or other child elements
-            if (ev.target === ev.currentTarget) {
+            const target = ev.target;
+            const slotted = target.closest('[slot="start"], [slot="end"]');
+            if (slotted === null || slotted === this.el || !this.el.contains(slotted)) {
                 ev.stopPropagation();
             }
         };
@@ -172,7 +177,7 @@ export class Input {
          * If debounce is undefined, we have to manually revert the ionInput emitter in case
          * debounce used to be set to a number. Otherwise, the event would stay debounced.
          */
-        this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
+        this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
     }
     /**
      * Whenever the type on the input changes we need
@@ -211,7 +216,10 @@ export class Input {
      * to the inner `<input>` element.
      */
     onDirChanged(newValue) {
-        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
+        this.inheritedAttributes = {
+            ...this.inheritedAttributes,
+            dir: newValue,
+        };
         forceUpdate(this);
     }
     /**
@@ -226,16 +234,24 @@ export class Input {
         }
     }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+            ...inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']),
+        };
     }
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
+            this.startContainerController?.calculateStartContainerWidth();
             this.setSlottedLabelId();
             forceUpdate(this);
         });
         this.setSlottedLabelId();
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        this.startContainerController = createStartContainerController(el, () => this.startContainerEl, () => {
+            return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline';
+        });
+        this.startContainerController.calculateStartContainerWidth();
         // Watch for class changes to update validation state
         if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
             this.validationObserver = new MutationObserver(() => {
@@ -272,8 +288,8 @@ export class Input {
         this.debounceChanged();
     }
     componentDidRender() {
-        var _a;
-        (_a = this.notchController) === null || _a === void 0 ? void 0 : _a.calculateNotchWidth();
+        this.notchController?.calculateNotchWidth();
+        this.startContainerController?.calculateStartContainerWidth();
     }
     disconnectedCallback() {
         if (Build.isBrowser) {
@@ -289,6 +305,10 @@ export class Input {
             this.notchController.destroy();
             this.notchController = undefined;
         }
+        if (this.startContainerController) {
+            this.startContainerController.destroy();
+            this.startContainerController = undefined;
+        }
         // Clean up validation observer to prevent memory leaks
         if (this.validationObserver) {
             this.validationObserver.disconnect();
@@ -465,14 +485,13 @@ export class Input {
      * or undefined if aria-label is explicitly set (to avoid conflicts).
      */
     getLabelledById() {
-        var _a;
         if (this.inheritedAttributes['aria-label']) {
             return undefined;
         }
         if (this.label !== undefined) {
             return this.labelTextId;
         }
-        return ((_a = this.labelSlot) === null || _a === void 0 ? void 0 : _a.id) || undefined;
+        return this.labelSlot?.id || undefined;
     }
     /**
      * Returns `true` if label content is provided
@@ -484,63 +503,31 @@ export class Input {
         return this.label !== undefined || this.labelSlot !== null;
     }
     /**
-     * Renders the border container
-     * when fill="outline".
+     * Renders the outline border with a notch for the label.
      */
-    renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
-        if (hasOutlineFill) {
-            /**
-             * The outline fill has a special outline
-             * that appears around the input and the label.
-             * Certain stacked and floating label placements cause the
-             * label to translate up and create a "cut out"
-             * inside of that border by using the notch-spacer element.
-             */
-            return [
-                h("div", { class: "input-outline-container" }, h("div", { class: "input-outline-start" }), h("div", { class: {
-                        'input-outline-notch': true,
-                        'input-outline-notch-hidden': !this.hasLabel,
-                    } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "input-outline-end" })),
-                this.renderLabel(),
-            ];
-        }
-        /**
-         * If not using the outline style,
-         * we can render just the label.
-         */
-        return this.renderLabel();
+    renderOutlineContainer() {
+        return (h("div", { class: "input-outline-container" }, h("div", { class: "input-outline-start" }), h("div", { class: {
+                'input-outline-notch': true,
+                'input-outline-notch-hidden': !this.hasLabel,
+            } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "input-outline-end" })));
     }
     render() {
-        const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus, clearInputIcon } = this;
+        const { disabled, fill, readonly, shape, inputId, labelPlacement, hasFocus, clearInputIcon } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
         const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
         const defaultClearIcon = mode === 'ios' ? closeCircle : closeSharp;
-        const clearIconData = clearInputIcon !== null && clearInputIcon !== void 0 ? clearInputIcon : defaultClearIcon;
+        const clearIconData = clearInputIcon ?? defaultClearIcon;
         const hasValue = this.hasValue();
-        const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
+        const hasOutlineFill = mode === 'md' && fill === 'outline';
         /**
          * 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
+         * the input has a value or is focused.
          */
-        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '9ba9cf425b573d2ca9ac34455a0e6b8474c4de6d', class: createColorClasses(this.color, {
+        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
+        return (h(Host, { key: '9e9495b8f962372d526343ff76b80fb9700fce19', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -551,14 +538,14 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '74b989d0aa5ab38f29f952519868f05119df6005', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '47f2b42e2f74ea866b4f871026e08ab375d7a726', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: 'eaabe5a4a329a356cac3294d15c087d0d131fff2', name: "start" }), h("input", Object.assign({ key: 'c821a984a8a9b7f96f30892c06d8deda093ff24b', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, 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, 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '62069c11016ee190dc46ab941372e1c4ad8a36ed', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '7121f34ed782caf7a7b82703b94fc9d6c78ce5ba', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '0c1f8526d86c8a2433c23873fa64b1edc0eafe29', class: "input-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'a50323fde0fb12997c2324eded132908680ea450', name: "start" })), h("div", { key: '626360c4e115a5286baab49680b2a02cd39614c8', class: "input-control" }, this.renderLabel(), h("div", { key: '1cefd9d8cd6ed96fab7b58237f8f8b0c5e1be92e', class: "native-wrapper", onClick: this.onLabelClick }, h("input", { key: '3dee5302f3a685a848fedd7e1face5095e3ac64b', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', 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, 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById(), ...this.inheritedAttributes }))), h("div", { key: '39fff82e00e63963fe5f17794900ace2a3faa208', class: "input-end" }, this.clearInput && !readonly && !disabled && (h("button", { key: '1fa86fdb5baf4a7cd531ee0fe767a42b44fb33fc', "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", { key: 'dd75a516d32110d85382b664c663bd41f177ce12', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '330d4b9389f2c62223a5ee24003e96ef3e6b2473', name: "end" })), shouldRenderHighlight && h("div", { key: '8e442bed130ddc84976ab70fd3f8578d6bcc6316', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'ced39304f97e56870f7480afa025ffe232010cfb', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'f4098769eef1cc5aa2074c369f757ccb94a98e1c', name: "end" })), shouldRenderHighlight && h("div", { key: '258fe6ff8f9f57836f2a3a0b6163bd2b7dbf0699', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }
@@ -650,11 +637,11 @@ export class Input {
                 "defaultValue": "'off'"
             },
             "autocorrect": {
-                "type": "string",
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'on' | 'off'",
-                    "resolved": "\"off\" | \"on\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -667,7 +654,7 @@ export class Input {
                 "setter": false,
                 "reflect": false,
                 "attribute": "autocorrect",
-                "defaultValue": "'off'"
+                "defaultValue": "false"
             },
             "autofocus": {
                 "type": "boolean",