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

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

@@ -111,29 +111,11 @@ ion-backdrop {
 }
 
 .modal-handle::before {
-  /**
-   * Adds a 4px tap area to the perimeter
-   * of the handle.
-   */
-  -webkit-padding-start: 4px;
-  padding-inline-start: 4px;
-  -webkit-padding-end: 4px;
-  padding-inline-end: 4px;
-  padding-top: 4px;
-  padding-bottom: 4px;
   position: absolute;
   transform: translate(-50%, -50%);
   content: "";
 }
 
-/**
- * Ensure that the sheet modal does not
- * completely cover the content.
- */
-:host(.modal-sheet) {
-  --height: calc(100% - (var(--ion-safe-area-top) + 10px));
-}
-
 :host(.modal-sheet) .modal-wrapper,
 :host(.modal-sheet) .modal-shadow {
   position: absolute;
@@ -146,6 +128,67 @@ ion-backdrop {
   width: var(--width);
 }
 
+/**
+ * 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;
+ *   }
+ * }
+ */
 /**
  * Convert a pixels given value into rem
  * 
@@ -240,10 +283,28 @@ ion-backdrop {
   background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
 }
 .modal-handle::before {
+  /**
+  * Adds a 4px tap area to the perimeter
+  * of the handle.
+  */
+  -webkit-padding-start: 4px;
+  padding-inline-start: 4px;
+  -webkit-padding-end: 4px;
+  padding-inline-end: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
   width: 36px;
   height: 5px;
 }
 
+/**
+ * Ensure that the sheet modal does not
+ * completely cover the content.
+ */
+:host(.modal-sheet) {
+  --height: calc(100% - (var(--ion-safe-area-top) + 10px));
+}
+
 /**
  * Convert a pixels given value into rem
  * 

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

@@ -111,29 +111,11 @@ ion-backdrop {
 }
 
 .modal-handle::before {
-  /**
-   * Adds a 4px tap area to the perimeter
-   * of the handle.
-   */
-  -webkit-padding-start: 4px;
-  padding-inline-start: 4px;
-  -webkit-padding-end: 4px;
-  padding-inline-end: 4px;
-  padding-top: 4px;
-  padding-bottom: 4px;
   position: absolute;
   transform: translate(-50%, -50%);
   content: "";
 }
 
-/**
- * Ensure that the sheet modal does not
- * completely cover the content.
- */
-:host(.modal-sheet) {
-  --height: calc(100% - (var(--ion-safe-area-top) + 10px));
-}
-
 :host(.modal-sheet) .modal-wrapper,
 :host(.modal-sheet) .modal-shadow {
   position: absolute;
@@ -146,6 +128,67 @@ ion-backdrop {
   width: var(--width);
 }
 
+/**
+ * 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;
+ *   }
+ * }
+ */
 /**
  * Convert a pixels given value into rem
  * 
@@ -240,10 +283,28 @@ ion-backdrop {
   background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
 }
 .modal-handle::before {
+  /**
+  * Adds a 4px tap area to the perimeter
+  * of the handle.
+  */
+  -webkit-padding-start: 4px;
+  padding-inline-start: 4px;
+  -webkit-padding-end: 4px;
+  padding-inline-end: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
   width: 36px;
   height: 5px;
 }
 
+/**
+ * Ensure that the sheet modal does not
+ * completely cover the content.
+ */
+:host(.modal-sheet) {
+  --height: calc(100% - (var(--ion-safe-area-top) + 10px));
+}
+
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/progress-bar/progress-bar.ionic.css

@@ -61,45 +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.
@@ -123,12 +84,6 @@ Do not edit directly, this file was auto-generated.
  * }
  */
 :host {
-  /**
-   * @prop --background: Background of the progress track, or the buffer bar if `buffer` is set
-   * @prop --progress-background: Background of the progress bar representing the current value
-   */
-  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);
-  --progress-background: var(--ion-color-primary, #0054e9);
   display: block;
   position: relative;
   width: 100%;
@@ -239,13 +194,9 @@ Do not edit directly, this file was auto-generated.
   animation-play-state: paused;
 }
 
-:host(.ion-color) .buffer-circles {
-  background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
-}
-
 :host(.ion-color) .progress,
 :host(.ion-color) .progress-indeterminate {
-  background: var(--ion-color-base);
+  background: current-color(base);
 }
 
 @keyframes primary-indeterminate-translate {
@@ -321,6 +272,7 @@ Do not edit directly, this file was auto-generated.
 }
 :host {
   --background: var(--ion-bg-neutral-subtle-default, #efefef);
+  --progress-background: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
   height: var(--ion-scale-100, 4px);
 }
 
@@ -330,4 +282,8 @@ Do not edit directly, this file was auto-generated.
 
 :host(.progress-bar-shape-rectangular) {
   border-radius: var(--ion-rectangular-xs, 0px);
+}
+
+:host(.ion-color) .buffer-circles {
+  background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
 }

package/dist/collection/components/progress-bar/progress-bar.ios.css

@@ -59,13 +59,29 @@
  *   }
  * }
  */
+/**
+ * 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 progress track, or the buffer bar if `buffer` is set
-   * @prop --progress-background: Background of the progress bar representing the current value
-   */
-  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);
-  --progress-background: var(--ion-color-primary, #0054e9);
   display: block;
   position: relative;
   width: 100%;
@@ -176,10 +192,6 @@
   animation-play-state: paused;
 }
 
-:host(.ion-color) .buffer-circles {
-  background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
-}
-
 :host(.ion-color) .progress,
 :host(.ion-color) .progress-indeterminate {
   background: var(--ion-color-base);
@@ -256,6 +268,19 @@
     transform: translateX(-10px);
   }
 }
+:host {
+  /**
+     * @prop --background: Background of the progress track, or the buffer bar if `buffer` is set
+     * @prop --progress-background: Background of the progress bar representing the current value
+     */
+  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);
+  --progress-background: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .buffer-circles {
+  background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
+}
+
 :host {
   border-radius: 9999px;
   height: 4px;

package/dist/collection/components/progress-bar/progress-bar.md.css

@@ -59,13 +59,29 @@
  *   }
  * }
  */
+/**
+ * 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 progress track, or the buffer bar if `buffer` is set
-   * @prop --progress-background: Background of the progress bar representing the current value
-   */
-  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);
-  --progress-background: var(--ion-color-primary, #0054e9);
   display: block;
   position: relative;
   width: 100%;
@@ -176,10 +192,6 @@
   animation-play-state: paused;
 }
 
-:host(.ion-color) .buffer-circles {
-  background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
-}
-
 :host(.ion-color) .progress,
 :host(.ion-color) .progress-indeterminate {
   background: var(--ion-color-base);
@@ -256,6 +268,19 @@
     transform: translateX(-10px);
   }
 }
+:host {
+  /**
+     * @prop --background: Background of the progress track, or the buffer bar if `buffer` is set
+     * @prop --progress-background: Background of the progress bar representing the current value
+     */
+  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);
+  --progress-background: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .buffer-circles {
+  background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
+}
+
 :host {
   height: 4px;
 }

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

@@ -429,7 +429,7 @@ Do not edit directly, this file was auto-generated.
   * margin to the bottom of the label, it provides a buffer
   * for the pin to move into when it is pressed.
   */
-  margin-bottom: calc(var(--ion-space-200, 8px) + 0.75rem);
+  margin-bottom: calc(var(--ion-space-200, 8px) + var(--ion-font-size-300, 0.75rem));
 }
 
 .range-bar-active {
@@ -466,7 +466,7 @@ Do not edit directly, this file was auto-generated.
   min-width: var(--ion-scale-700, 28px);
   transform: translate3d(0, -100%, 0);
   background: transparent;
-  font-size: 0.75rem;
+  font-size: var(--ion-font-size-300, 0.75rem);
   text-align: center;
 }
 

package/dist/collection/components/ripple-effect/ripple-effect.ionic.css

@@ -117,6 +117,69 @@
     opacity: 0;
   }
 }
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/*
+Do not edit directly, this file was auto-generated.
+*/ /**
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * 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.
+ */
 .ripple-effect {
   animation-name: rippleAnimation, fadeInAnimation;
 }
@@ -127,7 +190,7 @@
 
 @keyframes rippleAnimation {
   from {
-    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    animation-timing-function: var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
     transform: scale(1);
   }
   to {

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

@@ -295,7 +295,7 @@ Do not edit directly, this file was auto-generated.
    */
 }
 :host(.in-toolbar.searchbar-should-show-cancel) .searchbar-cancel-button {
-  inset-inline-start: 9px;
+  inset-inline-start: var(--ion-space-200, 8px);
 }
 
 /* Hover */
@@ -516,7 +516,7 @@ Do not edit directly, this file was auto-generated.
    * the size of the leading icon (search or cancel),
    * and the gap between the icon and the input.
    */
-  padding-inline-start: calc(9px + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-start: var(--ion-space-800, 32px);
 }
 
 /* Large */
@@ -615,7 +615,7 @@ Do not edit directly, this file was auto-generated.
    * the size of the leading icon (search or cancel),
    * and the gap between the icon and the input.
    */
-  padding-inline-start: calc(9px + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
+  padding-inline-start: var(--ion-space-900, 36px);
 }
 
 :host(.searchbar-size-large) .searchbar-search-icon,