@ionic/core 8.5.5-dev.11744821352.11e7a84f → 8.5.5-dev.11746020351.1d3165fc

package/dist/collection/components/select/select.ionic.css

@@ -61,67 +61,6 @@ Do not edit directly, this file was auto-generated.
  * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
  * convert to a unit other than $baselineUnit.
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
 :host {
   /**
    * @prop --background: Background of the select
@@ -152,9 +91,9 @@ Do not edit directly, this file was auto-generated.
   --placeholder-color: currentColor;
   --background: transparent;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: ion-color(primary, base);
+  --highlight-color-valid: ion-color(success, base);
+  --highlight-color-invalid: ion-color(danger, base);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -165,13 +104,12 @@ Do not edit directly, this file was auto-generated.
   display: block;
   position: relative;
   width: 100%;
-  min-height: 44px;
   white-space: nowrap;
   cursor: pointer;
 }
 
 :host(.ion-color) {
-  --highlight-color-focused: var(--ion-color-base);
+  --highlight-color-focused: current-color(base);
 }
 
 :host(.in-item) {
@@ -182,10 +120,6 @@ Do not edit directly, this file was auto-generated.
   pointer-events: none;
 }
 
-:host(.ion-focused) button {
-  border: 2px solid #5e9ed6;
-}
-
 /**
  * Select can be slotted
  * in components such as item and
@@ -258,7 +192,6 @@ button {
 
 .select-text {
   flex: 1;
-  min-width: 16px;
   font-size: inherit;
   text-overflow: ellipsis;
   white-space: inherit;
@@ -286,15 +219,6 @@ button {
   box-sizing: border-box;
 }
 
-.select-wrapper .select-placeholder {
-  /**
-   * When the floating label appears on top of the
-   * select, we need to fade the text out so that the
-   * label does not overlap with the placeholder.
-   */
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .select-wrapper-inner {
   display: flex;
   align-items: center;
@@ -371,16 +295,6 @@ button {
    */
   display: flex;
   align-items: center;
-  /**
-   * Label text should not extend
-   * beyond the bounds of the select.
-   * However, we do not set the max
-   * width to 100% because then
-   * only the label would show and users
-   * would not be able to see what they are typing.
-   */
-  max-width: 200px;
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
   /**
    * This ensures that double tapping this text
    * clicks the <label> and focuses the input
@@ -422,12 +336,6 @@ button {
 .native-wrapper {
   display: flex;
   align-items: center;
-  /**
-   * When the floating label appears on top of the
-   * input, we need to fade the input out so that the
-   * label does not overlap with the placeholder.
-   */
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
   /**
    * This ensures that the .select-text gets
    * truncated with ellipses when the text is
@@ -464,17 +372,6 @@ button {
   flex-direction: row-reverse;
 }
 
-/**
- * Label is on the left of the select in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.select-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
 /**
  * Stacked: Label sits above the select and is scaled down.
  * Floating: Label sits over the select when the select has no
@@ -640,6 +537,7 @@ button {
   --highlight-color-focused: var(--ion-border-focus-default, #b5c0f7);
   --highlight-color-valid: var(--ion-semantics-success-900, #126f23);
   --highlight-color-invalid: var(--ion-semantics-danger-800, #bf2222);
+  min-height: var(--ion-scale-1100, 44px);
 }
 
 .select-bottom {
@@ -656,6 +554,10 @@ button {
   color: var(--ion-primitives-neutral-800, #626262);
 }
 
+.select-text {
+  min-width: var(--ion-space-400, 16px);
+}
+
 .label-text-wrapper {
   font-size: var(--ion-font-size-300, 0.75rem);
   font-weight: var(--ion-font-weight-medium, 500);
@@ -663,6 +565,16 @@ button {
   line-height: var(--ion-font-line-height-500, 20px);
   text-decoration: none;
   text-transform: none;
+  /**
+   * Label text should not extend
+   * beyond the bounds of the select.
+   * However, we do not set the max
+   * width to 100% because then
+   * only the label would show and users
+   * would not be able to see what they are typing.
+   */
+  max-width: var(--ion-scale-5000, 200px);
+  transition: color var(--ion-transition-time-150, 150ms) var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--ion-transition-time-150, 150ms) var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
   color: var(--ion-primitives-neutral-1000, #3b3b3b);
 }
 
@@ -681,6 +593,13 @@ button {
   margin-bottom: 0;
 }
 
+:host(.select-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, 4px));
+  width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, 4px));
+  min-width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, 4px));
+  max-width: var(--ion-scale-5000, 200px);
+}
+
 :host(.select-label-placement-end) .label-text-wrapper {
   /**
    * The margin between the label and
@@ -713,6 +632,15 @@ button {
   background: transparent;
 }
 
+.select-wrapper .select-placeholder {
+  /**
+   * When the floating label appears on top of the
+   * select, we need to fade the text out so that the
+   * label does not overlap with the placeholder.
+   */
+  transition: opacity var(--ion-transition-time-150, 150ms) var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
 .select-wrapper-inner {
   border-radius: var(--border-radius);
   -webkit-padding-start: var(--padding-start);
@@ -739,6 +667,12 @@ button {
   line-height: var(--ion-font-line-height-600, 24px);
   text-decoration: none;
   text-transform: none;
+  /**
+   * When the floating label appears on top of the
+   * input, we need to fade the input out so that the
+   * label does not overlap with the placeholder.
+   */
+  transition: opacity var(--ion-transition-time-150, 150ms) var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
   color: var(--ion-primitives-neutral-1200, #242424);
 }
 
@@ -763,10 +697,10 @@ button {
 ::slotted(ion-button[slot=start].button-has-icon-only),
 ::slotted(ion-button[slot=end].button-has-icon-only) {
   --border-radius: 50%;
-  --padding-start: 8px;
-  --padding-end: 8px;
-  --padding-top: 8px;
-  --padding-bottom: 8px;
+  --padding-start: var(--ion-space-200, 8px);
+  --padding-end: var(--ion-space-200, 8px);
+  --padding-top: var(--ion-space-200, 8px);
+  --padding-bottom: var(--ion-space-200, 8px);
   aspect-ratio: 1;
 }
 
@@ -777,7 +711,7 @@ button {
 }
 
 .select-icon {
-  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.15s var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 /**

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

@@ -81,67 +81,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
 :host {
   /**
    * @prop --background: Background of the select
@@ -185,7 +124,6 @@
   display: block;
   position: relative;
   width: 100%;
-  min-height: 44px;
   white-space: nowrap;
   cursor: pointer;
 }
@@ -202,10 +140,6 @@
   pointer-events: none;
 }
 
-:host(.ion-focused) button {
-  border: 2px solid #5e9ed6;
-}
-
 /**
  * Select can be slotted
  * in components such as item and
@@ -278,7 +212,6 @@ button {
 
 .select-text {
   flex: 1;
-  min-width: 16px;
   font-size: inherit;
   text-overflow: ellipsis;
   white-space: inherit;
@@ -306,15 +239,6 @@ button {
   box-sizing: border-box;
 }
 
-.select-wrapper .select-placeholder {
-  /**
-   * When the floating label appears on top of the
-   * select, we need to fade the text out so that the
-   * label does not overlap with the placeholder.
-   */
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .select-wrapper-inner {
   display: flex;
   align-items: center;
@@ -391,16 +315,6 @@ button {
    */
   display: flex;
   align-items: center;
-  /**
-   * Label text should not extend
-   * beyond the bounds of the select.
-   * However, we do not set the max
-   * width to 100% because then
-   * only the label would show and users
-   * would not be able to see what they are typing.
-   */
-  max-width: 200px;
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
   /**
    * This ensures that double tapping this text
    * clicks the <label> and focuses the input
@@ -442,12 +356,6 @@ button {
 .native-wrapper {
   display: flex;
   align-items: center;
-  /**
-   * When the floating label appears on top of the
-   * input, we need to fade the input out so that the
-   * label does not overlap with the placeholder.
-   */
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
   /**
    * This ensures that the .select-text gets
    * truncated with ellipses when the text is
@@ -484,17 +392,6 @@ button {
   flex-direction: row-reverse;
 }
 
-/**
- * Label is on the left of the select in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.select-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
 /**
  * Stacked: Label sits above the select and is scaled down.
  * Floating: Label sits over the select when the select has no
@@ -585,12 +482,78 @@ button {
   margin-inline-end: 0;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 :host {
   --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  min-height: 44px;
   font-family: var(--ion-font-family, inherit);
   z-index: 2;
 }
 
+:host(.ion-focused) button {
+  border: 2px solid #5e9ed6;
+}
+
 .select-icon {
   -webkit-margin-start: 4px;
   margin-inline-start: 4px;
@@ -622,6 +585,15 @@ button {
   border-radius: var(--border-radius);
 }
 
+.select-wrapper .select-placeholder {
+  /**
+   * When the floating label appears on top of the
+   * select, we need to fade the text out so that the
+   * label does not overlap with the placeholder.
+   */
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .select-bottom {
   /**
    * The bottom content should take on the start and end
@@ -641,6 +613,23 @@ button {
   color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
+.select-text {
+  min-width: 16px;
+}
+
+.label-text-wrapper {
+  /**
+   * Label text should not extend
+   * beyond the bounds of the select.
+   * However, we do not set the max
+   * width to 100% because then
+   * only the label would show and users
+   * would not be able to see what they are typing.
+   */
+  max-width: 200px;
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 :host(.select-label-placement-start) .label-text-wrapper {
   /**
    * The margin between the label and
@@ -681,6 +670,14 @@ button {
   margin-inline-end: 16px;
   margin-top: 0;
   margin-bottom: 0;
+  /**
+  * Label is on the left of the select in LTR and
+  * on the right in RTL. Label also has a fixed width.
+  */
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
 }
 
 /**
@@ -753,6 +750,15 @@ button {
   margin-inline-start: 16px;
 }
 
+.native-wrapper {
+  /**
+   * When the floating label appears on top of the
+   * input, we need to fade the input out so that the
+   * label does not overlap with the placeholder.
+   */
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 /**
  * Convert a pixels given value into rem
  *