@ionic/core 7.6.7-dev.11707156611.1b43b9ec → 7.6.7-dev.11707162903.1706e75f

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.ios.css

@@ -140,17 +140,17 @@ ion-infinite-scroll-content {
  * }
  */
 .infinite-scroll-content-ios .infinite-loading-text {
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 .infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,
 .infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,
 .infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle {
-  stroke: var(--ion-color-step-600, #666666);
+  stroke: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 .infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,
 .infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,
 .infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle {
-  fill: var(--ion-color-step-600, #666666);
+  fill: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.md.css

@@ -140,17 +140,17 @@ ion-infinite-scroll-content {
  * }
  */
 .infinite-scroll-content-md .infinite-loading-text {
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle {
-  stroke: var(--ion-color-step-600, #666666);
+  stroke: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle {
-  fill: var(--ion-color-step-600, #666666);
+  fill: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }

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

@@ -81,7 +81,7 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: 0.6;
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --padding-top: 0px;
   --padding-end: 0px;
   --padding-bottom: 0px;
@@ -219,8 +219,32 @@
   position: absolute;
   pointer-events: none;
 }
-.cloned-input {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .cloned-input {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .cloned-input {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .cloned-input:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 /**
@@ -260,7 +284,7 @@
   outline: none;
   background-color: transparent;
   background-repeat: no-repeat;
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   visibility: hidden;
   appearance: none;
 }
@@ -393,7 +417,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -412,7 +436,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -762,7 +786,7 @@
  */
 :host {
   --border-width: 0.55px;
-  --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))));
   font-size: inherit;
 }
 

package/dist/collection/components/input/input.js

@@ -81,6 +81,7 @@ export class Input {
         };
         this.hasFocus = false;
         this.color = undefined;
+        this.accept = undefined;
         this.autocapitalize = 'off';
         this.autocomplete = 'off';
         this.autocorrect = 'off';
@@ -112,6 +113,7 @@ export class Input {
         this.shape = undefined;
         this.spellcheck = false;
         this.step = undefined;
+        this.size = undefined;
         this.type = 'text';
         this.value = '';
     }
@@ -420,7 +422,7 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { class: "native-wrapper" }, h("slot", { name: "start" }), h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { class: "native-wrapper" }, h("slot", { name: "start" }), h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
@@ -460,7 +462,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 'has-focus': this.hasFocus,
                 'legacy-input': true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
-            }) }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), "aria-labelledby": label ? label.id : null, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.clearInput && !this.readonly && !this.disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), "aria-labelledby": label ? label.id : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.clearInput && !this.readonly && !this.disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
@@ -512,6 +514,26 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 "attribute": "color",
                 "reflect": true
             },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": undefined
+                        }],
+                    "text": "This attribute is ignored."
+                },
+                "attribute": "accept",
+                "reflect": false
+            },
             "autocapitalize": {
                 "type": "string",
                 "mutable": false,
@@ -1055,6 +1077,23 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 "attribute": "step",
                 "reflect": false
             },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            },
             "type": {
                 "type": "string",
                 "mutable": false,

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

@@ -81,7 +81,7 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: 0.6;
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --padding-top: 0px;
   --padding-end: 0px;
   --padding-bottom: 0px;
@@ -219,8 +219,32 @@
   position: absolute;
   pointer-events: none;
 }
-.cloned-input {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .cloned-input {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .cloned-input {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .cloned-input:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 /**
@@ -260,7 +284,7 @@
   outline: none;
   background-color: transparent;
   background-repeat: no-repeat;
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   visibility: hidden;
   appearance: none;
 }
@@ -393,7 +417,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -412,7 +436,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -816,8 +840,8 @@
  * }
  */
 :host(.input-fill-solid) {
-  --background: var(--ion-color-step-50, #f2f2f2);
-  --border-color: var(--ion-color-step-500, gray);
+  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
+  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -853,8 +877,8 @@
  */
 @media (any-hover: hover) {
   :host(.input-fill-solid:hover) {
-    --background: var(--ion-color-step-100, #e6e6e6);
-    --border-color: var(--ion-color-step-750, #404040);
+    --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 /**
@@ -862,8 +886,8 @@
  * much darker on focus.
  */
 :host(.input-fill-solid.has-focus) {
-  --background: var(--ion-color-step-150, #d9d9d9);
-  --border-color: var(--ion-color-step-750, #404040);
+  --background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
 }
 
 :host(.input-fill-solid) .input-wrapper {
@@ -956,7 +980,7 @@
  * }
  */
 :host(.input-fill-outline) {
-  --border-color: var(--ion-color-step-300, #b3b3b3);
+  --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -984,7 +1008,7 @@
  */
 @media (any-hover: hover) {
   :host(.input-fill-outline:hover) {
-    --border-color: var(--ion-color-step-750, #404040);
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 /**
@@ -1268,7 +1292,7 @@
  */
 :host {
   --border-width: 1px;
-  --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)))));
   font-size: inherit;
 }
 
@@ -1335,8 +1359,32 @@
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-.input-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .input-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .input-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .input-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .input-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .input-highlight:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.has-focus) .input-highlight {
@@ -1351,8 +1399,27 @@
 :host(.in-item) .input-highlight {
   bottom: 0;
 }
-:host(.in-item) .input-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.in-item) .input-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.in-item) .input-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.in-item) .input-highlight, :host-context([dir=rtl]).in-item .input-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.in-item:dir(rtl)) .input-highlight {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.input-shape-round) {

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

@@ -608,7 +608,7 @@ ion-ripple-effect {
 .item-counter {
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -697,7 +697,7 @@ ion-ripple-effect {
   --background-activated-opacity: .12;
   --background-focused-opacity: .15;
   --background-hover-opacity: .04;
-  --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))));
   --color: var(--ion-item-color, var(--ion-text-color, #000));
   --highlight-height: 0px;
   --highlight-color-focused: var(--ion-color-primary, #0054e9);

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

@@ -608,7 +608,7 @@ ion-ripple-effect {
 .item-counter {
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -793,7 +793,7 @@ ion-ripple-effect {
   --background-activated-opacity: 0;
   --background-focused-opacity: .12;
   --background-hover-opacity: .04;
-  --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)))));
   --color: var(--ion-item-color, var(--ion-text-color, #000));
   --transition: opacity 15ms linear, background-color 15ms linear;
   --padding-start: 16px;
@@ -908,8 +908,27 @@ ion-ripple-effect {
   height: calc(100% + 2 * var(--border-width));
   transition: none;
 }
-:host(.item-fill-outline) .item-highlight {
-  inset-inline-start: var(--position-offset);
+@supports (inset-inline-start: 0) {
+  :host(.item-fill-outline) .item-highlight {
+    inset-inline-start: var(--position-offset);
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.item-fill-outline) .item-highlight {
+    left: var(--position-offset);
+  }
+  :host-context([dir=rtl]):host(.item-fill-outline) .item-highlight, :host-context([dir=rtl]).item-fill-outline .item-highlight {
+    left: unset;
+    right: unset;
+    right: var(--position-offset);
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.item-fill-outline:dir(rtl)) .item-highlight {
+      left: unset;
+      right: unset;
+      right: var(--position-offset);
+    }
+  }
 }
 
 :host(.item-fill-outline.ion-focused) .item-native,
@@ -1098,9 +1117,9 @@ ion-ripple-effect {
 }
 
 :host(.item-fill-solid) {
-  --background: var(--ion-color-step-50, #f2f2f2);
-  --background-hover: var(--ion-color-step-100, #e6e6e6);
-  --background-focused: var(--ion-color-step-150, #d9d9d9);
+  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
+  --background-hover: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  --background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
   --border-width: 0 0 1px 0;
   --inner-border-width: 0;
   border-top-left-radius: 4px;
@@ -1125,7 +1144,7 @@ ion-ripple-effect {
 }
 
 :host(.item-fill-solid) .item-native {
-  --border-color: var(--ion-color-step-500, gray);
+  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
 }
 
 :host(.item-fill-solid.ion-focused) .item-native,
@@ -1158,14 +1177,14 @@ ion-ripple-effect {
 @media (any-hover: hover) {
   :host(.item-fill-solid:hover) .item-native {
     --background: var(--background-hover);
-    --border-color: var(--ion-color-step-750, #404040);
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 :host(.item-fill-outline) {
   --ripple-color: transparent;
   --background-focused: transparent;
   --background-hover: transparent;
-  --border-color: var(--ion-color-step-500, gray);
+  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
   --border-width: 1px;
   border: none;
   overflow: visible;
@@ -1197,7 +1216,7 @@ ion-ripple-effect {
 
 @media (any-hover: hover) {
   :host(.item-fill-outline:hover) .item-native {
-    --border-color: var(--ion-color-step-750, #404040);
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 .item-counter {

package/dist/collection/components/item-divider/item-divider.ios.css

@@ -280,8 +280,8 @@
  * }
  */
 :host {
-  --background: var(--ion-color-step-100, #e6e6e6);
-  --color: var(--ion-color-step-850, #262626);
+  --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   --padding-start: 16px;
   --inner-padding-end: 8px;
   border-radius: 0;
@@ -335,7 +335,7 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
-  color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4);
+  color: var(--ion-text-color-step-550, #a3a3a3);
   font-size: 0.875rem;
   line-height: normal;
   text-overflow: inherit;

package/dist/collection/components/item-divider/item-divider.md.css

@@ -281,11 +281,11 @@
  */
 :host {
   --background: var(--ion-background-color, #fff);
-  --color: var(--ion-color-step-400, #999999);
+  --color: var(--ion-color-step-400, var(--ion-text-color-step-600, #999999));
   --padding-start: 16px;
   --inner-padding-end: 16px;
   min-height: 30px;
-  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)))));
   font-size: 0.875rem;
 }
 
@@ -409,7 +409,7 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   font-size: 0.875rem;
   line-height: normal;
   text-overflow: inherit;

package/dist/collection/components/item-options/item-options.ios.css

@@ -271,7 +271,7 @@ ion-item-options {
 .item-options-ios {
   border-bottom-width: 0;
   border-bottom-style: solid;
-  border-bottom-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
+  border-bottom-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
 }
 .item-options-ios.item-options-end {
   border-bottom-width: 0.55px;

package/dist/collection/components/item-options/item-options.md.css

@@ -271,7 +271,7 @@ ion-item-options {
 .item-options-md {
   border-bottom-width: 0;
   border-bottom-style: solid;
-  border-bottom-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
+  border-bottom-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)))));
 }
 
 .list-md-lines-none .item-options-md {

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

@@ -321,7 +321,7 @@
 }
 
 ::slotted(p) {
-  color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4);
+  color: var(--ion-text-color-step-550, #a3a3a3);
 }
 
 :host(.in-item-color)::slotted(p) {

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

@@ -417,7 +417,7 @@
 }
 
 ::slotted(p) {
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 :host(.in-item-color)::slotted(p) {

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

@@ -194,8 +194,32 @@ ion-list.list-inset {
   background: var(--ion-item-background, var(--ion-background-color, #fff));
 }
 
-.list-md > .input:last-child::after {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .list-md > .input:last-child::after {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .list-md > .input:last-child::after {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .list-md > .input:last-child::after {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .list-md > .input:last-child::after {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .list-md > .input:last-child::after:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 .list-md.list-inset {

package/dist/collection/components/list-header/list-header.ios.css

@@ -236,8 +236,8 @@
  */
 :host {
   --background: transparent;
-  --color: var(--ion-color-step-850, #262626);
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
+  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
   /* stylelint-disable */
   padding-right: var(--ion-safe-area-right);
   padding-left: calc(var(--ion-safe-area-left, 0px) + 16px);

package/dist/collection/components/list-header/list-header.md.css

@@ -237,7 +237,7 @@
 :host {
   --background: transparent;
   --color: var(--ion-text-color, #000);
-  --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)))));
   /* stylelint-disable */
   padding-right: var(--ion-safe-area-right);
   padding-left: calc(var(--ion-safe-area-left, 0px) + 16px);

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

@@ -170,10 +170,10 @@ ion-spinner {
  * }
  */
 :host {
-  --background: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9));
+  --background: var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)));
   --max-width: 270px;
   --max-height: 90%;
-  --spinner-color: var(--ion-color-step-600, #666666);
+  --spinner-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
   color: var(--ion-text-color, #000);
   font-size: 0.875rem;