@ionic/core 8.8.19-dev.11787007863.1976a30e → 8.8.19-dev.11787083540.1511caf2

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

@@ -206,6 +206,12 @@
 }
 
 .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;
@@ -263,45 +269,12 @@
   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;
-  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;
+  width: 100%;
 }
 
 :host(.ion-touched.ion-invalid) {
@@ -404,12 +377,6 @@
    */
   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.
@@ -428,18 +395,6 @@
   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
@@ -483,7 +438,7 @@
  * Label is on the left of the input in LTR and
  * on the right in RTL.
  */
-:host(.input-label-placement-start) .input-control {
+:host(.input-label-placement-start) .input-wrapper {
   flex-direction: row;
 }
 
@@ -505,7 +460,7 @@
  * Label is on the right of the input in LTR and
  * on the left in RTL.
  */
-:host(.input-label-placement-end) .input-control {
+:host(.input-label-placement-end) .input-wrapper {
   flex-direction: row-reverse;
 }
 
@@ -553,9 +508,10 @@
  * 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-control,
-:host(.input-label-placement-floating) .input-control {
+:host(.input-label-placement-stacked) .input-wrapper,
+:host(.input-label-placement-floating) .input-wrapper {
   flex-direction: column;
   align-items: start;
 }
@@ -586,6 +542,18 @@
   }
 }
 
+/**
+ * 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.
@@ -938,14 +906,6 @@
   --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;
 }
 
@@ -1000,25 +960,15 @@
   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;
   /**
-   * 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.
+   * Label text should not extend
+   * beyond the bounds of the input.
    */
-  max-width: 100%;
+  max-width: calc(100% - var(--padding-start) - var(--padding-end));
 }
 :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;
@@ -1043,7 +993,7 @@
  * This makes the label sit above the input.
  */
 :host(.label-floating.input-fill-outline) .label-text-wrapper {
-  transform: translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);
+  transform: translateY(-32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -1055,6 +1005,19 @@
   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;
@@ -1227,7 +1190,8 @@
 }
 
 .input-clear-icon ion-icon {
-  font-size: 22px;
+  width: 22px;
+  height: 22px;
 }
 
 :host(.input-disabled) {