@ionic/core 7.6.7-dev.11707240912.19856295 → 7.6.7-dev.11707512150.1fe9dca5

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

@@ -170,12 +170,12 @@ ion-spinner {
  * }
  */
 :host {
-  --background: var(--ion-color-step-50, #f2f2f2);
+  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
   --max-width: 280px;
   --max-height: 90%;
   --spinner-color: var(--ion-color-primary, #0054e9);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
-  color: var(--ion-color-step-850, #262626);
+  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 0.875rem;
 }
 

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

@@ -118,11 +118,32 @@
   top: 0;
   bottom: 0;
 }
-:host(.menu-side-start) .menu-inner {
-  inset-inline-start: 0;
-  inset-inline-end: auto;
+@supports (inset-inline-start: 0) {
+  :host(.menu-side-start) .menu-inner {
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.menu-side-start) .menu-inner {
+    left: 0;
+    right: auto;
+  }
+  :host-context([dir=rtl]):host(.menu-side-start) .menu-inner, :host-context([dir=rtl]).menu-side-start .menu-inner {
+    left: unset;
+    right: unset;
+    left: auto;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.menu-side-start:dir(rtl)) .menu-inner {
+      left: unset;
+      right: unset;
+      left: auto;
+      right: 0;
+    }
+  }
 }
-
 :host-context([dir=rtl]):host(.menu-side-start) .menu-inner, :host-context([dir=rtl]).menu-side-start .menu-inner {
   /**
     * Menu does not cover the whole screen so we need to set the safe area for the
@@ -180,11 +201,32 @@
   top: 0;
   bottom: 0;
 }
-:host(.menu-side-end) .menu-inner {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
+@supports (inset-inline-start: 0) {
+  :host(.menu-side-end) .menu-inner {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.menu-side-end) .menu-inner {
+    left: auto;
+    right: 0;
+  }
+  :host-context([dir=rtl]):host(.menu-side-end) .menu-inner, :host-context([dir=rtl]).menu-side-end .menu-inner {
+    left: unset;
+    right: unset;
+    left: 0;
+    right: auto;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.menu-side-end:dir(rtl)) .menu-inner {
+      left: unset;
+      right: unset;
+      left: 0;
+      right: auto;
+    }
+  }
 }
-
 :host-context([dir=rtl]):host(.menu-side-end) .menu-inner, :host-context([dir=rtl]).menu-side-end .menu-inner {
   /**
     * Menu does not cover the whole screen so we need to set the safe area for the

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

@@ -118,11 +118,32 @@
   top: 0;
   bottom: 0;
 }
-:host(.menu-side-start) .menu-inner {
-  inset-inline-start: 0;
-  inset-inline-end: auto;
+@supports (inset-inline-start: 0) {
+  :host(.menu-side-start) .menu-inner {
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.menu-side-start) .menu-inner {
+    left: 0;
+    right: auto;
+  }
+  :host-context([dir=rtl]):host(.menu-side-start) .menu-inner, :host-context([dir=rtl]).menu-side-start .menu-inner {
+    left: unset;
+    right: unset;
+    left: auto;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.menu-side-start:dir(rtl)) .menu-inner {
+      left: unset;
+      right: unset;
+      left: auto;
+      right: 0;
+    }
+  }
 }
-
 :host-context([dir=rtl]):host(.menu-side-start) .menu-inner, :host-context([dir=rtl]).menu-side-start .menu-inner {
   /**
     * Menu does not cover the whole screen so we need to set the safe area for the
@@ -180,11 +201,32 @@
   top: 0;
   bottom: 0;
 }
-:host(.menu-side-end) .menu-inner {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
+@supports (inset-inline-start: 0) {
+  :host(.menu-side-end) .menu-inner {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.menu-side-end) .menu-inner {
+    left: auto;
+    right: 0;
+  }
+  :host-context([dir=rtl]):host(.menu-side-end) .menu-inner, :host-context([dir=rtl]).menu-side-end .menu-inner {
+    left: unset;
+    right: unset;
+    left: 0;
+    right: auto;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.menu-side-end:dir(rtl)) .menu-inner {
+      left: unset;
+      right: unset;
+      left: 0;
+      right: auto;
+    }
+  }
 }
-
 :host-context([dir=rtl]):host(.menu-side-end) .menu-inner, :host-context([dir=rtl]).menu-side-end .menu-inner {
   /**
     * Menu does not cover the whole screen so we need to set the safe area for the

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

@@ -165,7 +165,7 @@ ion-backdrop {
    */
   transform: translateZ(0);
   border: 0;
-  background: var(--ion-color-step-350, #c0c0be);
+  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
   cursor: pointer;
   z-index: 11;
 }

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

@@ -165,7 +165,7 @@ ion-backdrop {
    */
   transform: translateZ(0);
   border: 0;
-  background: var(--ion-color-step-350, #c0c0be);
+  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
   cursor: pointer;
   z-index: 11;
 }

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

@@ -122,6 +122,6 @@
 }
 
 :host {
-  --color: var(--ion-color-step-350, #a6a6a6);
+  --color: var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6));
   font-size: max(14px, 1rem);
 }

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

@@ -122,6 +122,6 @@
 }
 
 :host {
-  --color: var(--ion-color-step-600, #666666);
+  --color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   font-size: 0.875rem;
 }

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

@@ -154,16 +154,54 @@
   top: 0;
   height: 83px;
 }
-:host .picker-before {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host .picker-before {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host .picker-before {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .picker-before {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(:dir(rtl)) .picker-before {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host .picker-after {
   top: 116px;
   height: 84px;
 }
-:host .picker-after {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host .picker-after {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host .picker-after {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .picker-after {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(:dir(rtl)) .picker-after {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host .picker-highlight {
@@ -226,5 +264,5 @@
 }
 
 :host .picker-highlight {
-  background: var(--highlight-background, var(--ion-color-step-150, #eeeeef));
+  background: var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)));
 }

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

@@ -154,16 +154,54 @@
   top: 0;
   height: 83px;
 }
-:host .picker-before {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host .picker-before {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host .picker-before {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .picker-before {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(:dir(rtl)) .picker-before {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host .picker-after {
   top: 116px;
   height: 84px;
 }
-:host .picker-after {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host .picker-after {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host .picker-after {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .picker-after {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(:dir(rtl)) .picker-after {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host .picker-highlight {

package/dist/collection/components/picker-legacy/picker.ios.css

@@ -93,8 +93,27 @@
   user-select: none;
   z-index: 1001;
 }
-:host {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host {
+    left: 0;
+  }
+  :host-context([dir=rtl]) {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(:dir(rtl)) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.overlay-hidden) {
@@ -220,7 +239,7 @@
 :host {
   --background: var(--ion-background-color, #fff);
   --border-width: 1px 0 0;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
   --height: 260px;
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.26);
   color: var(--ion-item-color, var(--ion-text-color, #000));
@@ -280,8 +299,32 @@
   background: linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);
   z-index: 10;
 }
-.picker-above-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .picker-above-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .picker-above-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .picker-above-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .picker-above-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .picker-above-highlight:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 .picker-below-highlight {
@@ -295,6 +338,30 @@
   background: linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);
   z-index: 11;
 }
-.picker-below-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .picker-below-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .picker-below-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .picker-below-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .picker-below-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .picker-below-highlight:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }

package/dist/collection/components/picker-legacy/picker.md.css

@@ -93,8 +93,27 @@
   user-select: none;
   z-index: 1001;
 }
-:host {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host {
+    left: 0;
+  }
+  :host-context([dir=rtl]) {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(:dir(rtl)) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.overlay-hidden) {
@@ -220,7 +239,7 @@
 :host {
   --background: var(--ion-background-color, #fff);
   --border-width: 0.55px 0 0;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
   --height: 260px;
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.26);
   color: var(--ion-item-color, var(--ion-text-color, #000));
@@ -264,12 +283,36 @@
   position: absolute;
   width: 100%;
   height: 81px;
-  border-bottom: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
+  border-bottom: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
   background: linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);
   z-index: 10;
 }
-.picker-above-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .picker-above-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .picker-above-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .picker-above-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .picker-above-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .picker-above-highlight:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 .picker-below-highlight {
@@ -278,10 +321,34 @@
   position: absolute;
   width: 100%;
   height: 119px;
-  border-top: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
+  border-top: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
   background: linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);
   z-index: 11;
 }
-.picker-below-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .picker-below-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .picker-below-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .picker-below-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .picker-below-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .picker-below-highlight:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }

package/dist/collection/components/picker-legacy-column/picker-column.ios.css

@@ -82,8 +82,32 @@
   overflow: hidden;
   will-change: transform;
 }
-.picker-opt {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .picker-opt {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .picker-opt {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .picker-opt {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .picker-opt {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .picker-opt:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 .picker-opt.picker-opt-disabled {

package/dist/collection/components/picker-legacy-column/picker-column.md.css

@@ -82,8 +82,32 @@
   overflow: hidden;
   will-change: transform;
 }
-.picker-opt {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .picker-opt {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .picker-opt {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .picker-opt {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .picker-opt {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .picker-opt:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 .picker-opt.picker-opt-disabled {

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

@@ -249,7 +249,7 @@
 }
 
 :host(.popover-desktop) .popover-content {
-  border: 0.5px solid var(--ion-color-step-100, #e6e6e6);
+  border: 0.5px solid var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
 }
 
 .popover-arrow {
@@ -271,8 +271,32 @@
   content: "";
   z-index: 10;
 }
-.popover-arrow::after {
-  inset-inline-start: 3px;
+@supports (inset-inline-start: 0) {
+  .popover-arrow::after {
+    inset-inline-start: 3px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .popover-arrow::after {
+    left: 3px;
+  }
+  :host-context([dir=rtl]) .popover-arrow::after {
+    left: unset;
+    right: unset;
+    right: 3px;
+  }
+  [dir=rtl] .popover-arrow::after {
+    left: unset;
+    right: unset;
+    right: 3px;
+  }
+  @supports selector(:dir(rtl)) {
+    .popover-arrow::after:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 3px;
+    }
+  }
 }
 
 :host(.popover-bottom) .popover-arrow {