voyager-ionic-core 8.8.17 → 9.0.1

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",

package/dist/collection/components/input/input.md.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.
@@ -906,6 +938,14 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  /**
+   * The measured width of the start container, as a negative offset
+   * in LTR and a positive one in RTL. Written to the host by the
+   * start container controller, so renaming it here requires renaming
+   * it there too. Declared with a default so the label is positioned
+   * correctly before the first measurement runs.
+   */
+  --internal-start-container-adjustment: 0px;
   min-height: 56px;
 }
 
@@ -960,15 +1000,25 @@
   border-bottom: none;
 }
 
+/**
+ * The resting label is positioned relative to the control so it can size to
+ * the space between the start and end slots. When floating, the label needs
+ * to escape the control and position itself relative to the wrapper instead.
+ */
+:host(.input-fill-outline:not(.label-floating)) .input-control {
+  position: relative;
+}
+
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper,
 :host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper {
   transform-origin: left top;
   position: absolute;
   /**
-   * Label text should not extend
-   * beyond the bounds of the input.
+   * While resting this is the width of the text input, which already
+   * excludes the start and end slots. Once the label floats the
+   * containing block becomes the wrapper and the rule below takes over.
    */
-  max-width: calc(100% - var(--padding-start) - var(--padding-end));
+  max-width: 100%;
 }
 :host-context([dir=rtl]):host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).input-fill-outline.input-label-placement-stacked .label-text-wrapper, :host-context([dir=rtl]):host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper, :host-context([dir=rtl]).input-fill-outline.input-label-placement-floating .label-text-wrapper {
   transform-origin: right top;
@@ -993,7 +1043,7 @@
  * This makes the label sit above the input.
  */
 :host(.label-floating.input-fill-outline) .label-text-wrapper {
-  transform: translateY(-32%) scale(0.75);
+  transform: translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -1005,19 +1055,6 @@
   max-width: calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75);
 }
 
-/**
- * This ensures that the input does not
- * overlap the floating label while still
- * remaining visually centered.
- */
-:host(.input-fill-outline.input-label-placement-stacked) input,
-:host(.input-fill-outline.input-label-placement-floating) input {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 6px;
-  margin-bottom: 6px;
-}
-
 :host(.input-fill-outline) .input-outline-container {
   left: 0;
   right: 0;
@@ -1190,8 +1227,7 @@
 }
 
 .input-clear-icon ion-icon {
-  width: 22px;
-  height: 22px;
+  font-size: 22px;
 }
 
 :host(.input-disabled) {