@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

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) {