@ionic/core 7.6.7-dev.11706571117.1bcbc36b → 7.6.7-dev.11706824245.18d35376

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;
@@ -89,9 +89,9 @@
   --background: transparent;
   --color: initial;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -284,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;
 }
@@ -417,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 {
@@ -436,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;
 }
@@ -840,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;
@@ -877,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));
   }
 }
 /**
@@ -886,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 {
@@ -980,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;
@@ -1008,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));
   }
 }
 /**
@@ -1292,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;
 }
 

package/dist/collection/components/input/test/a11y/input.e2e.js

@@ -4,14 +4,52 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('input: a11y'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/input/test/a11y`, config);
+        test('default layout should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <main>
+          <ion-input label="Label" placeholder="Placeholder"></ion-input>
+          <ion-input placeholder="Placeholder">
+            <div slot="label">Label"></div>
+          </ion-input>
+          <ion-input label="Label" value="My Text"></ion-input>
+          <ion-input aria-label="Label"></ion-input>
+          <ion-input label="Email" fill="solid" value="hi@ionic.io">
+            <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
+            <ion-button slot="end" aria-label="button">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
+          </ion-input>
+        </main>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+        test('focused state should not have accessibility violations', async ({ page }) => {
+            /**
+             * The primary color against the focus background
+             * when using fill="solid" does not meet AA
+             * contrast guidelines so it excluded from the test.
+             * The contrast here is a significant improvement
+             * over what Ionic has had in the past, so the team
+             * has decided that this tradeoff is acceptable since
+             * the scope of the problem is limited to the focus
+             * state with the primary color when fill="solid".
+             */
+            await page.setContent(`
+        <main>
+          <ion-input class="has-focus" label="Label" value="My Text"></ion-input>
+          <ion-input class="has-focus" label-placement="floating" label="Label" value="My Text"></ion-input>
+          <ion-input class="has-focus" fill="outline" label-placement="floating" label="Label" value="My Text"></ion-input>
+        </main>
+      `, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
     });
+});
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('input: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {
             await page.setContent(`

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

@@ -100,6 +100,14 @@
    * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    */
+  /**
+   * We change the minimum width as the
+   * font size changes. Using a fixed minimum
+   * width means that fewer and fewer characters
+   * can be displayed in the same space as the
+   * text grows.
+   */
+  --inner-min-width: 4rem;
   --border-radius: 0px;
   --border-width: 0px;
   --border-style: solid;
@@ -230,6 +238,7 @@
   /* stylelint-enable */
   display: flex;
   position: relative;
+  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -261,6 +270,10 @@
   }
 }
 
+:host(.item-legacy) .item-native {
+  flex-wrap: unset;
+}
+
 .item-native::-moz-focus-inner {
   border: 0;
 }
@@ -296,10 +309,20 @@ button, a {
   /* stylelint-enable */
   display: flex;
   position: relative;
-  flex: 1;
+  flex: 1 0 0;
   flex-direction: inherit;
+  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
+  /**
+   * The min-width defines when the
+   * content in the default slot should
+   * stop wrapping/truncating within its own
+   * container. At this point the entire
+   * container will wrap to the next line.
+   */
+  min-width: var(--inner-min-width);
+  max-width: 100%;
   min-height: inherit;
   border-width: var(--inner-border-width);
   border-style: var(--border-style);
@@ -325,6 +348,12 @@ button, a {
   }
 }
 
+:host(.item-legacy) .item-inner {
+  flex: 1;
+  flex-wrap: unset;
+  max-width: unset;
+}
+
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
@@ -403,15 +432,23 @@ button, a {
 
 .input-wrapper {
   display: flex;
-  flex: 1;
+  flex: 1 0 auto;
   flex-direction: inherit;
+  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
+  max-width: 100%;
   text-overflow: ellipsis;
   overflow: inherit;
   box-sizing: border-box;
 }
 
+:host(.item-legacy) .input-wrapper {
+  flex: 1;
+  flex-wrap: unset;
+  max-width: unset;
+}
+
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;
@@ -571,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;
 }
@@ -660,12 +697,12 @@ 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, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   --bottom-padding-start: 0px;
   font-size: 1rem;
 }

package/dist/collection/components/item/item.js

@@ -45,10 +45,6 @@ export class Item {
         this.counterFormatter = undefined;
         this.counterString = undefined;
     }
-    buttonChanged() {
-        // Update the focusable option when the button option is changed
-        this.focusable = this.isFocusable();
-    }
     counterFormatterChanged() {
         this.updateCounterOutput(this.getFirstInput());
     }
@@ -633,9 +629,6 @@ export class Item {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "button",
-                "methodName": "buttonChanged"
-            }, {
                 "propName": "counterFormatter",
                 "methodName": "counterFormatterChanged"
             }];

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

@@ -100,6 +100,14 @@
    * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    */
+  /**
+   * We change the minimum width as the
+   * font size changes. Using a fixed minimum
+   * width means that fewer and fewer characters
+   * can be displayed in the same space as the
+   * text grows.
+   */
+  --inner-min-width: 4rem;
   --border-radius: 0px;
   --border-width: 0px;
   --border-style: solid;
@@ -230,6 +238,7 @@
   /* stylelint-enable */
   display: flex;
   position: relative;
+  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -261,6 +270,10 @@
   }
 }
 
+:host(.item-legacy) .item-native {
+  flex-wrap: unset;
+}
+
 .item-native::-moz-focus-inner {
   border: 0;
 }
@@ -296,10 +309,20 @@ button, a {
   /* stylelint-enable */
   display: flex;
   position: relative;
-  flex: 1;
+  flex: 1 0 0;
   flex-direction: inherit;
+  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
+  /**
+   * The min-width defines when the
+   * content in the default slot should
+   * stop wrapping/truncating within its own
+   * container. At this point the entire
+   * container will wrap to the next line.
+   */
+  min-width: var(--inner-min-width);
+  max-width: 100%;
   min-height: inherit;
   border-width: var(--inner-border-width);
   border-style: var(--border-style);
@@ -325,6 +348,12 @@ button, a {
   }
 }
 
+:host(.item-legacy) .item-inner {
+  flex: 1;
+  flex-wrap: unset;
+  max-width: unset;
+}
+
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
@@ -403,15 +432,23 @@ button, a {
 
 .input-wrapper {
   display: flex;
-  flex: 1;
+  flex: 1 0 auto;
   flex-direction: inherit;
+  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
+  max-width: 100%;
   text-overflow: ellipsis;
   overflow: inherit;
   box-sizing: border-box;
 }
 
+:host(.item-legacy) .input-wrapper {
+  flex: 1;
+  flex-wrap: unset;
+  max-width: unset;
+}
+
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;
@@ -571,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;
 }
@@ -756,16 +793,16 @@ 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;
   --inner-padding-end: 16px;
   --inner-border-width: 0 0 1px 0;
   --highlight-height: 1px;
-  --highlight-color-focused: var(--ion-color-primary, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   font-size: 1rem;
   font-weight: normal;
   text-transform: none;
@@ -1063,7 +1100,7 @@ ion-ripple-effect {
 :host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) {
-  color: var(--ion-color-primary, #3880ff);
+  color: var(--ion-color-primary, #0054e9);
 }
 
 :host(.ion-color) {
@@ -1080,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;
@@ -1107,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,
@@ -1140,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;
@@ -1179,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;

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-option/item-option.ios.css

@@ -58,7 +58,7 @@
    * @prop --background: Background of the item option
    * @prop --color: Color of the item option
    */
-  --background: var(--ion-color-primary, #3880ff);
+  --background: var(--ion-color-primary, #0054e9);
   --color: var(--ion-color-primary-contrast, #fff);
   background: var(--background);
   color: var(--color);
@@ -234,7 +234,7 @@
 }
 
 :host(.ion-activated) {
-  background: var(--ion-color-primary-shade, #3171e0);
+  background: var(--ion-color-primary-shade, #004acd);
 }
 
 :host(.ion-color.ion-activated) {

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

@@ -58,7 +58,7 @@
    * @prop --background: Background of the item option
    * @prop --color: Color of the item option
    */
-  --background: var(--ion-color-primary, #3880ff);
+  --background: var(--ion-color-primary, #0054e9);
   --color: var(--ion-color-primary-contrast, #fff);
   background: var(--background);
   color: var(--color);

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/item-sliding/test/a11y/item-sliding.e2e.js

@@ -1,8 +1,36 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import AxeBuilder from "@axe-core/playwright";
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 import { testSlidingItem } from "../test.utils";
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+    test.describe(title('item-sliding: a11y for ion-color()'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <main>
+          <ion-item-sliding id="axe">
+            <ion-item>
+              <ion-label>Sliding Item with End Options</ion-label>
+            </ion-item>
+
+            <ion-item-options>
+              <ion-item-option>Favorite</ion-item-option>
+              <ion-item-option class="ion-activated">Activated</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </main>
+      `, config);
+            await page.locator(`#axe`).evaluate(async (el) => {
+                await el.open('end');
+            });
+            await page.waitForChanges();
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
 /**
  * This behavior does not vary across directions
  */

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

@@ -348,7 +348,7 @@
 :host-context(.ion-focused).label-floating:not(.ion-color),
 :host-context(.item-has-focus).label-stacked:not(.ion-color),
 :host-context(.item-has-focus).label-floating:not(.ion-color) {
-  color: var(--ion-color-primary, #3880ff);
+  color: var(--ion-color-primary, #0054e9);
 }
 
 :host-context(.ion-focused.ion-color).label-stacked:not(.ion-color),
@@ -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/label/test/a11y/label.e2e.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
@@ -64,6 +65,25 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
+configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+    test.describe(title('label: a11y for ion-color()'), () => {
+        test('should not have accessibility violations when focused', async ({ page }) => {
+            /**
+             * All page content should be contained by landmarks (main, nav, etc.)
+             * By containing the badge in a main element, we can avoid this violation.
+             */
+            await page.setContent(`
+          <main>
+            <div class="ion-focused">
+              <ion-label position="stacked">Default Label</ion-label>
+            </div>
+          </main>
+        `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('label: text wrapping in item'), () => {
         test('long text should not cause label to expand infinitely', async ({ page }) => {

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);