@ionic/core 8.7.4-dev.11757083062.19f546ed → 8.7.4-dev.11757091109.1d47c1bd

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

@@ -4,7 +4,9 @@
  * @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.
  *
@@ -276,21 +278,21 @@ input {
 }
 
 :host {
-  --color: var(--token-primitives-neutral-500, #a2a2a2);
-  --color-checked: var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)));
-  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-style: var(--token-border-style-solid, solid);
-  --border-radius: var(--token-border-radius-full, 999px);
-  --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
-  --focus-ring-width: var(--token-border-size-050, var(--token-scale-050, 2px));
-  font-size: var(--token-font-size-350, 0.875rem);
-  font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  --color: var(--ion-primitives-neutral-500, #a2a2a2);
+  --color-checked: var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)));
+  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
+  --border-style: var(--ion-border-style-solid, solid);
+  --border-radius: var(--ion-border-radius-full, 999px);
+  --focus-ring-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
+  --focus-ring-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
+  font-size: var(--ion-font-size-350, 0.875rem);
+  font-weight: var(--ion-font-weight-regular, 400);
+  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
-  min-height: var(--token-scale-1200, 48px);
-  color: var(--token-primitives-neutral-1200, #242424);
+  min-height: var(--ion-scale-1200, 48px);
+  color: var(--ion-primitives-neutral-1200, #242424);
 }
 
 :host(.ion-color.radio-checked) .radio-icon {
@@ -299,12 +301,12 @@ input {
 }
 
 :host(.in-item.radio-label-placement-stacked) .native-wrapper {
-  margin-bottom: var(--token-space-250, var(--token-scale-250, 10px));
+  margin-bottom: var(--ion-space-250, var(--ion-scale-250, 10px));
 }
 
 .native-wrapper .radio-icon {
-  width: var(--token-scale-600, 24px);
-  height: var(--token-scale-600, 24px);
+  width: var(--ion-scale-600, 24px);
+  height: var(--ion-scale-600, 24px);
 }
 
 .radio-icon {
@@ -316,14 +318,14 @@ input {
   border-width: var(--border-width);
   border-style: var(--border-style);
   border-color: var(--color);
-  background-color: var(--token-primitives-base-white, #ffffff);
+  background-color: var(--ion-primitives-base-white, #ffffff);
 }
 
 .radio-inner {
   border-radius: var(--inner-border-radius);
   width: calc(32% + var(--border-width));
   height: calc(32% + var(--border-width));
-  background-color: var(--token-primitives-base-white, #ffffff);
+  background-color: var(--ion-primitives-base-white, #ffffff);
 }
 
 :host(.radio-checked) .radio-icon {
@@ -340,8 +342,8 @@ input {
    */
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 /**
@@ -350,8 +352,8 @@ input {
  * when the label sits at the end.
  */
 :host(.radio-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
@@ -365,7 +367,7 @@ input {
    */
   margin-left: 0;
   margin-right: 0;
-  margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
   /**
    * Label text should not extend
    * beyond the bounds of the radio.
@@ -374,7 +376,7 @@ input {
 }
 
 :host(:not(.in-item):not(:last-of-type)) {
-  margin-bottom: var(--token-space-200, var(--token-scale-200, 8px));
+  margin-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
 }
 
 :host(.radio-disabled) .radio-icon::after {
@@ -383,7 +385,7 @@ input {
   top: 0;
   bottom: 0;
   position: absolute;
-  background-color: var(--token-state-disabled, rgba(255, 255, 255, 0.6));
+  background-color: var(--ion-state-disabled, rgba(255, 255, 255, 0.6));
   content: "";
   pointer-events: none;
   border-radius: inherit;
@@ -399,7 +401,7 @@ input {
 
 :host(.ion-focused) .radio-icon {
   outline-offset: var(--focus-ring-width);
-  outline: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
+  outline: var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);
 }
 
 :host(.ion-activated) .radio-icon::after {
@@ -408,7 +410,7 @@ input {
   top: 0;
   bottom: 0;
   position: absolute;
-  background-color: var(--token-state-press, rgba(36, 36, 36, 0.08));
+  background-color: var(--ion-state-press, rgba(36, 36, 36, 0.08));
   content: "";
   border-radius: inherit;
   top: calc(var(--border-width) * -1);

package/dist/collection/components/radio-group/radio-group.ionic.css

@@ -4,7 +4,9 @@
  * @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.
  *
@@ -84,42 +86,42 @@ ion-radio-group {
 }
 
 .radio-group-top {
-  font-size: var(--token-font-size-350, 0.875rem);
-  font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  font-size: var(--ion-font-size-350, 0.875rem);
+  font-weight: var(--ion-font-weight-regular, 400);
+  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
-  margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 .radio-group-top .error-text {
-  color: var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222));
+  color: var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222));
 }
 
 .radio-group-top .helper-text {
-  color: var(--token-primitives-neutral-800, #626262);
+  color: var(--ion-primitives-neutral-800, #626262);
 }
 
 ion-list .radio-group-top {
   /* stylelint-disable */
-  padding-right: var(--token-space-400, var(--token-scale-400, 16px));
-  padding-left: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-left, 0px));
+  padding-right: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-left: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-left, 0px));
   /* stylelint-enable */
 }
 :host-context([dir=rtl]) ion-list .radio-group-top {
-  padding-right: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
-  padding-left: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-right: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
+  padding-left: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 [dir=rtl] ion-list .radio-group-top {
-  padding-right: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
-  padding-left: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-right: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
+  padding-left: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 @supports selector(:dir(rtl)) {
   ion-list .radio-group-top:dir(rtl) {
-    padding-right: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
-    padding-left: var(--token-space-400, var(--token-scale-400, 16px));
+    padding-right: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
+    padding-left: var(--ion-space-400, var(--ion-scale-400, 16px));
   }
 }

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

@@ -4,7 +4,9 @@
  * @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.
  *
@@ -345,33 +347,33 @@
 }
 
 :host {
-  --knob-border-radius: var(--token-border-radius-full, 999px);
-  --knob-background: var(--token-bg-input-default, var(--token-primitives-base-white, #ffffff));
+  --knob-border-radius: var(--ion-border-radius-full, 999px);
+  --knob-background: var(--ion-bg-input-default, var(--ion-primitives-base-white, #ffffff));
   --knob-box-shadow: none;
-  --knob-size: var(--token-scale-600, 24px);
-  --knob-handle-size: var(--token-scale-1100, 44px);
-  --bar-height: var(--token-scale-200, 8px);
-  --bar-background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #efefef));
-  --bar-background-active: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
-  --bar-border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
-  --height: var(--token-scale-1100, 44px);
-  font-size: var(--token-font-size-350, 0.875rem);
-  font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  --knob-size: var(--ion-scale-600, 24px);
+  --knob-handle-size: var(--ion-scale-1100, 44px);
+  --bar-height: var(--ion-scale-200, 8px);
+  --bar-background: var(--ion-bg-neutral-subtle-default, var(--ion-primitives-neutral-200, #efefef));
+  --bar-background-active: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
+  --bar-border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
+  --height: var(--ion-scale-1100, 44px);
+  font-size: var(--ion-font-size-350, 0.875rem);
+  font-weight: var(--ion-font-weight-regular, 400);
+  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
-  z-index: var(--token-z-index-100, 100);
+  z-index: var(--ion-z-index-100, 100);
 }
 
 :host(.range-item-start-adjustment) {
-  -webkit-padding-start: var(--token-space-600, var(--token-scale-600, 24px));
-  padding-inline-start: var(--token-space-600, var(--token-scale-600, 24px));
+  -webkit-padding-start: var(--ion-space-600, var(--ion-scale-600, 24px));
+  padding-inline-start: var(--ion-space-600, var(--ion-scale-600, 24px));
 }
 
 :host(.range-item-end-adjustment) {
-  -webkit-padding-end: var(--token-space-600, var(--token-scale-600, 24px));
-  padding-inline-end: var(--token-space-600, var(--token-scale-600, 24px));
+  -webkit-padding-end: var(--ion-space-600, var(--ion-scale-600, 24px));
+  padding-inline-end: var(--ion-space-600, var(--ion-scale-600, 24px));
 }
 
 :host(.ion-color) .range-bar-active,
@@ -380,21 +382,21 @@
 }
 
 ::slotted(ion-icon[slot]) {
-  font-size: var(--token-font-size-600, 1.5rem);
+  font-size: var(--ion-font-size-600, 1.5rem);
 }
 
 ::slotted([slot=start]) {
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
   margin-top: 0;
   margin-bottom: 0;
 }
 
 ::slotted([slot=end]) {
-  -webkit-margin-start: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
   -webkit-margin-end: 0;
   margin-inline-end: 0;
   margin-top: 0;
@@ -402,7 +404,7 @@
 }
 
 ::slotted([slot=label]) {
-  max-width: var(--token-scale-5000, 200px);
+  max-width: var(--ion-scale-5000, 200px);
 }
 
 :host(.range-has-pin:not(.range-label-placement-stacked)) {
@@ -418,7 +420,7 @@
   * overlapping the range. The buffer is added to the
   * bottom of the range label instead of the host.
   */
-  padding-top: calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--token-scale-600, 24px));
+  padding-top: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-scale-600, 24px));
 }
 
 :host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
@@ -427,7 +429,7 @@
   * 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(--token-space-200, var(--token-scale-200, 8px)) + var(--token-font-size-300, 0.75rem));
+  margin-bottom: calc(var(--ion-space-200, var(--ion-scale-200, 8px)) + var(--ion-font-size-300, 0.75rem));
 }
 
 .range-bar.range-bar-active {
@@ -437,21 +439,21 @@
 }
 .range-bar.range-bar-active.has-ticks {
   border-radius: 0;
-  -webkit-margin-start: calc(-1 * var(--token-scale-100, 4px) * 0.5);
-  margin-inline-start: calc(-1 * var(--token-scale-100, 4px) * 0.5);
-  -webkit-margin-end: calc(-1 * var(--token-scale-100, 4px) * 0.5);
-  margin-inline-end: calc(-1 * var(--token-scale-100, 4px) * 0.5);
+  -webkit-margin-start: calc(-1 * var(--ion-scale-100, 4px) * 0.5);
+  margin-inline-start: calc(-1 * var(--ion-scale-100, 4px) * 0.5);
+  -webkit-margin-end: calc(-1 * var(--ion-scale-100, 4px) * 0.5);
+  margin-inline-end: calc(-1 * var(--ion-scale-100, 4px) * 0.5);
 }
 
 .range-tick {
-  -webkit-margin-start: calc(var(--token-scale-100, 4px) * -0.5);
-  margin-inline-start: calc(var(--token-scale-100, 4px) * -0.5);
-  border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
+  -webkit-margin-start: calc(var(--ion-scale-100, 4px) * -0.5);
+  margin-inline-start: calc(var(--ion-scale-100, 4px) * -0.5);
+  border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
   position: absolute;
-  top: calc(var(--height) * 0.5 - var(--token-scale-300, 12px) * 0.5);
-  width: var(--token-scale-100, 4px);
-  height: var(--token-scale-300, 12px);
-  background: var(--token-primitives-neutral-100, #f5f5f5);
+  top: calc(var(--height) * 0.5 - var(--ion-scale-300, 12px) * 0.5);
+  width: var(--ion-scale-100, 4px);
+  height: var(--ion-scale-300, 12px);
+  background: var(--ion-primitives-neutral-100, #f5f5f5);
   pointer-events: none;
 }
 
@@ -460,28 +462,28 @@
 }
 
 .range-pin {
-  padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
-  min-width: var(--token-scale-700, 28px);
+  padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
+  min-width: var(--ion-scale-700, 28px);
   transform: translate3d(0, -100%, 0);
   background: transparent;
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
-  font-size: var(--token-font-size-300, 0.75rem);
+  color: var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));
+  font-size: var(--ion-font-size-300, 0.75rem);
   text-align: center;
 }
 
 .range-knob {
-  border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  border-style: var(--token-border-style-solid, solid);
-  border-color: var(--token-border-primary, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));
+  border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
+  border-style: var(--ion-border-style-solid, solid);
+  border-color: var(--ion-border-primary, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef))));
   box-sizing: border-box;
 }
 
 :host(.range-disabled) {
-  --bar-background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #efefef));
+  --bar-background: var(--ion-bg-neutral-subtle-default, var(--ion-primitives-neutral-200, #efefef));
 }
 :host(.range-disabled) .range-knob {
-  border-color: var(--token-border-input-default, var(--token-primitives-neutral-500, #a2a2a2));
-  background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f5f5f5));
+  border-color: var(--ion-border-input-default, var(--ion-primitives-neutral-500, #a2a2a2));
+  background: var(--ion-bg-input-disabled, var(--ion-primitives-neutral-100, #f5f5f5));
 }
 
 :host(.range-label-placement-start) .label-text-wrapper {
@@ -492,8 +494,8 @@
    */
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -504,8 +506,8 @@
    * the range should be on the start
    * when the label sits at the end.
    */
-  -webkit-margin-start: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
   -webkit-margin-end: 0;
   margin-inline-end: 0;
   margin-top: 0;
@@ -520,8 +522,8 @@
    */
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -535,7 +537,7 @@
   */
   margin-left: 0;
   margin-right: 0;
-  margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
   /**
    * Label text should not extend
    * beyond the bounds of the range.
@@ -544,20 +546,20 @@
 }
 
 :host(.in-item.range-label-placement-stacked) .label-text-wrapper {
-  margin-top: var(--token-space-250, var(--token-scale-250, 10px));
-  margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-top: var(--ion-space-250, var(--ion-scale-250, 10px));
+  margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 :host(.in-item.range-label-placement-stacked) .native-wrapper {
-  margin-bottom: var(--token-space-0, var(--token-scale-0, 0px));
+  margin-bottom: var(--ion-space-0, var(--ion-scale-0, 0px));
 }
 
 .range-knob-handle.ion-focused .range-knob {
-  outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
-  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  outline-offset: var(--ion-border-size-050, var(--ion-scale-050, 2px));
+  outline: var(--ion-border-size-050, var(--ion-scale-050, 2px)) var(--ion-border-style-solid, solid) var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
 }
 
 .range-knob-handle.ion-activated .range-knob,
 .range-knob-handle.range-knob-pressed .range-knob {
-  background: var(--token-bg-input-press, var(--token-primitives-neutral-200, #efefef));
+  background: var(--ion-bg-input-press, var(--ion-primitives-neutral-200, #efefef));
 }

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

@@ -123,7 +123,9 @@
  * @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.
  *
@@ -188,7 +190,7 @@
 
 @keyframes rippleAnimation {
   from {
-    animation-timing-function: var(--token-transition-curve-expressive, 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/row/row.css

@@ -143,6 +143,8 @@
  * }
  */
 :host {
+  --ion-grid-gap: 0px;
   display: flex;
   flex-wrap: wrap;
+  gap: var(--ion-grid-gap, 0px);
 }