@ionic/core 7.6.7-dev.11707148710.1cd59fde → 7.6.7-dev.11707156611.1b43b9ec

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

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

@@ -81,7 +81,6 @@ export class Input {
         };
         this.hasFocus = false;
         this.color = undefined;
-        this.accept = undefined;
         this.autocapitalize = 'off';
         this.autocomplete = 'off';
         this.autocorrect = 'off';
@@ -113,7 +112,6 @@ export class Input {
         this.shape = undefined;
         this.spellcheck = false;
         this.step = undefined;
-        this.size = undefined;
         this.type = 'text';
         this.value = '';
     }
@@ -422,7 +420,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, 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) => {
+            }) }, 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) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
@@ -462,7 +460,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, 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) => {
+            }) }, 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) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
@@ -514,26 +512,6 @@ 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,
@@ -1077,23 +1055,6 @@ 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: var(--ion-placeholder-opacity, 0.6);
+  --placeholder-opacity: 0.6;
   --padding-top: 0px;
   --padding-end: 0px;
   --padding-bottom: 0px;
@@ -219,32 +219,8 @@
   position: absolute;
   pointer-events: none;
 }
-@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;
-    }
-  }
+.cloned-input {
+  inset-inline-start: 0;
 }
 
 /**
@@ -284,7 +260,7 @@
   outline: none;
   background-color: transparent;
   background-repeat: no-repeat;
-  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  color: var(--ion-color-step-600, #666666);
   visibility: hidden;
   appearance: none;
 }
@@ -417,7 +393,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-550, #737373);
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -436,7 +412,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -840,8 +816,8 @@
  * }
  */
 :host(.input-fill-solid) {
-  --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));
+  --background: var(--ion-color-step-50, #f2f2f2);
+  --border-color: var(--ion-color-step-500, gray);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -877,8 +853,8 @@
  */
 @media (any-hover: hover) {
   :host(.input-fill-solid:hover) {
-    --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));
+    --background: var(--ion-color-step-100, #e6e6e6);
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 /**
@@ -886,8 +862,8 @@
  * much darker on focus.
  */
 :host(.input-fill-solid.has-focus) {
-  --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));
+  --background: var(--ion-color-step-150, #d9d9d9);
+  --border-color: var(--ion-color-step-750, #404040);
 }
 
 :host(.input-fill-solid) .input-wrapper {
@@ -980,7 +956,7 @@
  * }
  */
 :host(.input-fill-outline) {
-  --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
+  --border-color: var(--ion-color-step-300, #b3b3b3);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -1008,7 +984,7 @@
  */
 @media (any-hover: hover) {
   :host(.input-fill-outline:hover) {
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 /**
@@ -1292,7 +1268,7 @@
  */
 :host {
   --border-width: 1px;
-  --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)))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
   font-size: inherit;
 }
 
@@ -1359,32 +1335,8 @@
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-@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;
-    }
-  }
+.input-highlight {
+  inset-inline-start: 0;
 }
 
 :host(.has-focus) .input-highlight {
@@ -1399,27 +1351,8 @@
 :host(.in-item) .input-highlight {
   bottom: 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(.in-item) .input-highlight {
+  inset-inline-start: 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, var(--ion-background-color-step-550, #737373));
+  color: var(--ion-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, var(--ion-background-color-step-250, #c8c7cc))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-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, var(--ion-background-color-step-550, #737373));
+  color: var(--ion-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, var(--ion-background-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, 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,27 +908,8 @@ ion-ripple-effect {
   height: calc(100% + 2 * var(--border-width));
   transition: none;
 }
-@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) .item-highlight {
+  inset-inline-start: var(--position-offset);
 }
 
 :host(.item-fill-outline.ion-focused) .item-native,
@@ -1117,9 +1098,9 @@ ion-ripple-effect {
 }
 
 :host(.item-fill-solid) {
-  --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));
+  --background: var(--ion-color-step-50, #f2f2f2);
+  --background-hover: var(--ion-color-step-100, #e6e6e6);
+  --background-focused: var(--ion-color-step-150, #d9d9d9);
   --border-width: 0 0 1px 0;
   --inner-border-width: 0;
   border-top-left-radius: 4px;
@@ -1144,7 +1125,7 @@ ion-ripple-effect {
 }
 
 :host(.item-fill-solid) .item-native {
-  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
+  --border-color: var(--ion-color-step-500, gray);
 }
 
 :host(.item-fill-solid.ion-focused) .item-native,
@@ -1177,14 +1158,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, var(--ion-background-color-step-750, #404040));
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 :host(.item-fill-outline) {
   --ripple-color: transparent;
   --background-focused: transparent;
   --background-hover: transparent;
-  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
+  --border-color: var(--ion-color-step-500, gray);
   --border-width: 1px;
   border: none;
   overflow: visible;
@@ -1216,7 +1197,7 @@ ion-ripple-effect {
 
 @media (any-hover: hover) {
   :host(.item-fill-outline:hover) .item-native {
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --border-color: var(--ion-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, var(--ion-background-color-step-100, #e6e6e6));
-  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  --background: var(--ion-color-step-100, #e6e6e6);
+  --color: var(--ion-color-step-850, #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: var(--ion-text-color-step-550, #a3a3a3);
+  color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4);
   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, var(--ion-text-color-step-600, #999999));
+  --color: var(--ion-color-step-400, #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, var(--ion-background-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, 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, var(--ion-text-color-step-400, #666666));
+  color: var(--ion-color-step-600, #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, var(--ion-background-color-step-250, #c8c7cc))));
+  border-bottom-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-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, var(--ion-background-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, 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: var(--ion-text-color-step-550, #a3a3a3);
+  color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4);
 }
 
 :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, var(--ion-text-color-step-400, #666666));
+  color: var(--ion-color-step-600, #666666);
 }
 
 :host(.in-item-color)::slotted(p) {

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

@@ -194,32 +194,8 @@ ion-list.list-inset {
   background: var(--ion-item-background, var(--ion-background-color, #fff));
 }
 
-@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 > .input:last-child::after {
+  inset-inline-start: 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, 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))));
+  --color: var(--ion-color-step-850, #262626);
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-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, var(--ion-background-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, 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, var(--ion-background-color-step-100, #f9f9f9)));
+  --background: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9));
   --max-width: 270px;
   --max-height: 90%;
-  --spinner-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  --spinner-color: var(--ion-color-step-600, #666666);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
   color: var(--ion-text-color, #000);
   font-size: 0.875rem;