voyager-ionic-core 7.7.3 → 8.0.0-beta.2

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

@@ -228,7 +228,7 @@
 
 .alert-button.ion-focused,
 .alert-tappable.ion-focused {
-  background: var(--ion-color-step-100, #e6e6e6);
+  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
 }
 
 .alert-button-inner {
@@ -447,7 +447,7 @@ textarea.alert-input {
   padding-inline-end: 24px;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 .alert-message {
@@ -480,11 +480,11 @@ textarea.alert-input {
   margin-right: 0;
   margin-top: 5px;
   margin-bottom: 5px;
-  border-bottom: 1px solid var(--ion-color-step-150, #d9d9d9);
+  border-bottom: 1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
   color: var(--ion-text-color, #000);
 }
 .alert-input::placeholder {
-  color: var(--ion-placeholder-color, var(--ion-color-step-400, #999999));
+  color: var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));
   font-family: inherit;
   font-weight: inherit;
 }
@@ -494,14 +494,14 @@ textarea.alert-input {
 
 .alert-input:focus {
   margin-bottom: 4px;
-  border-bottom: 2px solid var(--ion-color-primary, #3880ff);
+  border-bottom: 2px solid var(--ion-color-primary, #0054e9);
 }
 
 .alert-radio-group,
 .alert-checkbox-group {
   position: relative;
-  border-top: 1px solid var(--ion-color-step-150, #d9d9d9);
-  border-bottom: 1px solid var(--ion-color-step-150, #d9d9d9);
+  border-top: 1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  border-bottom: 1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
   overflow: auto;
 }
 
@@ -529,7 +529,7 @@ textarea.alert-input {
   padding-top: 13px;
   padding-bottom: 13px;
   flex: 1;
-  color: var(--ion-color-step-850, #262626);
+  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
@@ -542,34 +542,10 @@ textarea.alert-input {
   height: 20px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-color-step-550, #737373);
+  border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
 }
-@supports (inset-inline-start: 0) {
-  .alert-radio-icon {
-    inset-inline-start: 26px;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .alert-radio-icon {
-    left: 26px;
-  }
-  :host-context([dir=rtl]) .alert-radio-icon {
-    left: unset;
-    right: unset;
-    right: 26px;
-  }
-  [dir=rtl] .alert-radio-icon {
-    left: unset;
-    right: unset;
-    right: 26px;
-  }
-  @supports selector(:dir(rtl)) {
-    .alert-radio-icon:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 26px;
-    }
-  }
+.alert-radio-icon {
+  inset-inline-start: 26px;
 }
 
 .alert-radio-inner {
@@ -580,42 +556,18 @@ textarea.alert-input {
   height: 10px;
   transform: scale3d(0, 0, 0);
   transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: var(--ion-color-primary, #3880ff);
+  background-color: var(--ion-color-primary, #0054e9);
 }
-@supports (inset-inline-start: 0) {
-  .alert-radio-inner {
-    inset-inline-start: 3px;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .alert-radio-inner {
-    left: 3px;
-  }
-  :host-context([dir=rtl]) .alert-radio-inner {
-    left: unset;
-    right: unset;
-    right: 3px;
-  }
-  [dir=rtl] .alert-radio-inner {
-    left: unset;
-    right: unset;
-    right: 3px;
-  }
-  @supports selector(:dir(rtl)) {
-    .alert-radio-inner:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 3px;
-    }
-  }
+.alert-radio-inner {
+  inset-inline-start: 3px;
 }
 
 [aria-checked=true] .alert-radio-label {
-  color: var(--ion-color-step-850, #262626);
+  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
 }
 
 [aria-checked=true] .alert-radio-icon {
-  border-color: var(--ion-color-primary, #3880ff);
+  border-color: var(--ion-color-primary, #0054e9);
 }
 
 [aria-checked=true] .alert-radio-inner {
@@ -631,7 +583,7 @@ textarea.alert-input {
   padding-bottom: 13px;
   flex: 1;
   width: calc(100% - 53px);
-  color: var(--ion-color-step-850, #262626);
+  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
@@ -643,40 +595,16 @@ textarea.alert-input {
   height: 16px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-color-step-550, #737373);
+  border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   contain: strict;
 }
-@supports (inset-inline-start: 0) {
-  .alert-checkbox-icon {
-    inset-inline-start: 26px;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .alert-checkbox-icon {
-    left: 26px;
-  }
-  :host-context([dir=rtl]) .alert-checkbox-icon {
-    left: unset;
-    right: unset;
-    right: 26px;
-  }
-  [dir=rtl] .alert-checkbox-icon {
-    left: unset;
-    right: unset;
-    right: 26px;
-  }
-  @supports selector(:dir(rtl)) {
-    .alert-checkbox-icon:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 26px;
-    }
-  }
+.alert-checkbox-icon {
+  inset-inline-start: 26px;
 }
 
 [aria-checked=true] .alert-checkbox-icon {
-  border-color: var(--ion-color-primary, #3880ff);
-  background-color: var(--ion-color-primary, #3880ff);
+  border-color: var(--ion-color-primary, #0054e9);
+  background-color: var(--ion-color-primary, #0054e9);
 }
 
 [aria-checked=true] .alert-checkbox-inner {
@@ -691,32 +619,8 @@ textarea.alert-input {
   border-style: solid;
   border-color: var(--ion-color-primary-contrast, #fff);
 }
-@supports (inset-inline-start: 0) {
-  [aria-checked=true] .alert-checkbox-inner {
-    inset-inline-start: 3px;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  [aria-checked=true] .alert-checkbox-inner {
-    left: 3px;
-  }
-  :host-context([dir=rtl]) [aria-checked=true] .alert-checkbox-inner {
-    left: unset;
-    right: unset;
-    right: 3px;
-  }
-  [dir=rtl] [aria-checked=true] .alert-checkbox-inner {
-    left: unset;
-    right: unset;
-    right: 3px;
-  }
-  @supports selector(:dir(rtl)) {
-    [aria-checked=true] .alert-checkbox-inner:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 3px;
-    }
-  }
+[aria-checked=true] .alert-checkbox-inner {
+  inset-inline-start: 3px;
 }
 
 .alert-button-group {
@@ -747,7 +651,7 @@ textarea.alert-input {
   padding-bottom: 10px;
   position: relative;
   background-color: transparent;
-  color: var(--ion-color-primary, #3880ff);
+  color: var(--ion-color-primary, #0054e9);
   font-weight: 500;
   text-align: end;
   text-transform: uppercase;

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

@@ -19,6 +19,28 @@ const testAria = async (page, buttonID, expectedAriaLabelledBy, expectedAriaDesc
     expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
     expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);
 };
+configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ title, config }) => {
+    test.describe(title('alert: Axe testing'), () => {
+        test('should not have accessibility violations when header and message are defined', async ({ page }) => {
+            await page.setContent(`
+          <ion-alert></ion-alert>
+
+          <script>
+            const alert = document.querySelector('ion-alert');
+            alert.header = 'Header';
+            alert.subHeader = 'Subtitle';
+            alert.buttons = ['OK'];
+          </script>
+        `, config);
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const alert = page.locator('ion-alert');
+            await alert.evaluate((el) => el.present());
+            await ionAlertDidPresent.next();
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('alert: text wrapping'), () => {
         test('should break on words and white spaces for radios', async ({ page }, testInfo) => {
@@ -72,15 +94,6 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
         test.beforeEach(async ({ page }) => {
             await page.goto(`/src/components/alert/test/a11y`, config);
         });
-        test('should not have accessibility violations when header and message are defined', async ({ page }) => {
-            const didPresent = await page.spyOnEvent('ionAlertDidPresent');
-            const button = page.locator('#bothHeaders');
-            await button.click();
-            await didPresent.next();
-            // TODO FW-4375
-            const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
-            expect(results.violations).toEqual([]);
-        });
         test('should have aria-labelledby when header is set', async ({ page }) => {
             await testAria(page, 'noMessage', 'alert-1-hdr', null);
         });

package/dist/collection/components/app/app.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, h } from "@stencil/core";
-import { shoudUseCloseWatcher } from "../../utils/hardware-back-button";
+import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
 import { printIonWarning } from "../../utils/logging/index";
 import { isPlatform } from "../../utils/platform";
 import { config } from "../../global/config";
@@ -27,7 +27,7 @@ export class App {
                     import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
                 }
                 const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
-                const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
+                const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
                 if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
                     hardwareBackButtonModule.startHardwareBackButton();
                 }
@@ -36,7 +36,7 @@ export class App {
                      * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
                      * then the close watcher will not be used.
                      */
-                    if (shoudUseCloseWatcher()) {
+                    if (shouldUseCloseWatcher()) {
                         printIonWarning('experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
                     }
                     hardwareBackButtonModule.blockHardwareBackButton();
@@ -65,7 +65,7 @@ export class App {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '3535eb5c0dab78a78011e552524a98599b2b650f', class: {
+        return (h(Host, { key: '02e6722398cfde7275ab9abdcce0f53a98f6b10f', class: {
                 [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),

package/dist/collection/components/avatar/avatar.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Avatar {
     render() {
-        return (h(Host, { key: '95d7ca334f9b66e0983cbc1b782ded0b9a54eaa9', class: getIonMode(this) }, h("slot", { key: '011d20189acdb03bee328aa4fa0511826a0b3a36' })));
+        return (h(Host, { key: 'b40a506a0beeaea226fd92e420655a3d840fafa6', class: getIonMode(this) }, h("slot", { key: '185c90b5d7f790ca8e39907c4da6fa7aa532a837' })));
     }
     static get is() { return "ion-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/back-button/back-button.ios.css

@@ -331,7 +331,7 @@ ion-icon {
   --background-focused: currentColor;
   --background-focused-opacity: .1;
   --border-radius: 4px;
-  --color: var(--ion-color-primary, #3880ff);
+  --color: var(--ion-color-primary, #0054e9);
   --icon-margin-end: 1px;
   --icon-margin-start: -4px;
   /**

package/dist/collection/components/back-button/back-button.js

@@ -72,7 +72,7 @@ export class BackButton {
         const showBackButton = defaultHref !== undefined;
         const mode = getIonMode(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: '175fff2d7a41d2deaaf7b781c5ba2aac9311ebf4', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'e233c0ccdeefd85b4e7170ca28beb2d528706db5', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
@@ -82,7 +82,7 @@ export class BackButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: '59fe30c167ea82e2431e45d46060a01bcb2aea77', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '3d704fb7ef001446361e7a09d43763a771b242b9', class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h("button", { key: 'a48e4ca9c1afefacc60766f910ea8349cdd3cce6', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '60bcc5fa226861b03b83a2b6fbad51284c295d4b', class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     static get is() { return "ion-back-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/back-button/test/a11y/back-button.e2e.js

@@ -1,8 +1,29 @@
 /*!
  * (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";
+/**
+ * Only ios mode uses ion-color() for the back button
+ */
+configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+    test.describe(title('back-button: a11y for ion-color()'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          ion-back-button {
+            display: inline-block !important;
+            vertical-align: middle;
+          }
+        </style>
+        <ion-back-button text="Back" aria-label="back button"></ion-back-button>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('back-button: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {

package/dist/collection/components/backdrop/backdrop.js

@@ -2,25 +2,13 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
 import { getIonMode } from "../../global/ionic-global";
 export class Backdrop {
     constructor() {
-        this.blocker = GESTURE_CONTROLLER.createBlocker({
-            disableScroll: true,
-        });
         this.visible = true;
         this.tappable = true;
         this.stopPropagation = true;
     }
-    connectedCallback() {
-        if (this.stopPropagation) {
-            this.blocker.block();
-        }
-    }
-    disconnectedCallback() {
-        this.blocker.unblock();
-    }
     onMouseDown(ev) {
         this.emitTap(ev);
     }
@@ -35,7 +23,7 @@ export class Backdrop {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'b2adb9dabef01fa49388d67d9e8a4a370931f633', tabindex: "-1", "aria-hidden": "true", class: {
+        return (h(Host, { key: 'edc9b82940adbb5fa740107bd2d12d02955606fa', tabindex: "-1", "aria-hidden": "true", class: {
                 [mode]: true,
                 'backdrop-hide': !this.visible,
                 'backdrop-no-tappable': !this.tappable,

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

@@ -63,7 +63,7 @@
    * @prop --padding-bottom: Bottom padding of the badge
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
    */
-  --background: var(--ion-color-primary, #3880ff);
+  --background: var(--ion-color-primary, #0054e9);
   --color: var(--ion-color-primary-contrast, #fff);
   --padding-top: 3px;
   --padding-end: 8px;

package/dist/collection/components/badge/badge.js

@@ -13,9 +13,9 @@ export class Badge {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '043eea016721e53f0af1cbf1371bc08694281204', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'cd1425d016a570b34dd42044fe79b42e6c984e86', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'bd510450d6b60f2794491244e68a83049a5ef6dd' })));
+            }) }, h("slot", { key: '29d2258c9e242f5fc1d85e2df5288edcfb038c8b' })));
     }
     static get is() { return "ion-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,7 +63,7 @@
    * @prop --padding-bottom: Bottom padding of the badge
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
    */
-  --background: var(--ion-color-primary, #3880ff);
+  --background: var(--ion-color-primary, #0054e9);
   --color: var(--ion-color-primary-contrast, #fff);
   --padding-top: 3px;
   --padding-end: 8px;

package/dist/collection/components/badge/test/a11y/badge.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 }) => {
@@ -20,3 +21,20 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+    test.describe(title('badge: a11y'), () => {
+        test('should not have accessibility violations', 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>
+          <ion-badge>123</ion-badge>
+        </main>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});

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

@@ -239,11 +239,11 @@
  * }
  */
 :host {
-  --color: var(--ion-color-step-850, #2d4665);
+  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665));
   --color-active: var(--ion-text-color, #03060b);
   --color-hover: var(--ion-text-color, #03060b);
   --color-focused: var(--color-active);
-  --background-focused: var(--ion-color-step-50, rgba(233, 237, 243, 0.7));
+  --background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7)));
   /**
    * Main content should be prioritized
    * on iOS, so we set max font size for breadcrumbs.
@@ -281,15 +281,15 @@
 :host(.ion-focused) ::slotted(ion-icon),
 :host(.in-breadcrumbs-color.ion-focused) ::slotted(ion-icon),
 :host(.ion-color.ion-focused) ::slotted(ion-icon) {
-  color: var(--ion-color-step-750, #445b78);
+  color: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78));
 }
 
 .breadcrumb-separator {
-  color: var(--ion-color-step-550, #73849a);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
 }
 
 ::slotted(ion-icon) {
-  color: var(--ion-color-step-400, #92a0b3);
+  color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3));
   font-size: min(1.125rem, 21.6px);
 }
 
@@ -304,13 +304,13 @@
 }
 
 :host(.breadcrumb-active) ::slotted(ion-icon) {
-  color: var(--ion-color-step-850, #242d39);
+  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39));
 }
 
 .breadcrumbs-collapsed-indicator {
   border-radius: 4px;
-  background: var(--ion-color-step-100, #e9edf3);
-  color: var(--ion-color-step-550, #73849a);
+  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3));
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
 }
 
 .breadcrumbs-collapsed-indicator:hover {
@@ -318,7 +318,7 @@
 }
 
 .breadcrumbs-collapsed-indicator:focus {
-  background: var(--ion-color-step-150, #d9e0ea);
+  background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea));
 }
 
 .breadcrumbs-collapsed-indicator ion-icon {

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -64,7 +64,7 @@ export class Breadcrumb {
         // to show the separator as long as it isn't also the last breadcrumb
         // otherwise if not collapsed use the value in separator
         const showSeparator = last ? false : collapsed ? (showCollapsedIndicator && !last ? true : false) : separator;
-        return (h(Host, { key: '632efa1bc6dc446e81efe8cd7763cb9b16466563', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '7f6db640a81d6c44e22f5d7980b7e3c111c695f0', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
@@ -74,7 +74,7 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, Object.assign({ key: '6f232cfc590b2e2a23a2e1ee40d6658e7d8b4953' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: 'fec56c6f92c147fbd6273d3efb82b1a6c944699c', name: "start" }), h("slot", { key: '80aa33cdcaab810f544803c6105b489172542846' }), h("slot", { key: '6e1d3f332ae35f5061204bece9756a9bac4aaf4a', name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, Object.assign({ key: '897cbb8e7632ce86de24e71916392a6fecf40d6b' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '8b420722f1cacc771903abb4bf86d7375cb60698', name: "start" }), h("slot", { key: '6945b283fbac7ca799de48938379c6f7b1926735' }), h("slot", { key: 'f27519c372bf6ab37d766ae945e3600baa3d2831', name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
             } }, h("ion-icon", { "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**

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

@@ -239,11 +239,11 @@
  * }
  */
 :host {
-  --color: var(--ion-color-step-600, #677483);
+  --color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483));
   --color-active: var(--ion-text-color, #03060b);
   --color-hover: var(--ion-text-color, #03060b);
-  --color-focused: var(--ion-color-step-800, #35404e);
-  --background-focused: var(--ion-color-step-50, #fff);
+  --color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e));
+  --background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff));
 }
 
 :host(.breadcrumb-active) {
@@ -273,11 +273,11 @@
 }
 
 .breadcrumb-separator {
-  color: var(--ion-color-step-550, #73849a);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
 }
 
 ::slotted(ion-icon) {
-  color: var(--ion-color-step-550, #7d8894);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894));
   font-size: 1.125rem;
 }
 
@@ -292,13 +292,13 @@
 }
 
 :host(.breadcrumb-active) ::slotted(ion-icon) {
-  color: var(--ion-color-step-850, #222d3a);
+  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a));
 }
 
 .breadcrumbs-collapsed-indicator {
   border-radius: 2px;
-  background: var(--ion-color-step-100, #eef1f3);
-  color: var(--ion-color-step-550, #73849a);
+  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3));
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
 }
 
 .breadcrumbs-collapsed-indicator:hover {
@@ -306,5 +306,5 @@
 }
 
 .breadcrumbs-collapsed-indicator:focus {
-  background: var(--ion-color-step-150, #dfe5e8);
+  background: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8));
 }

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -105,12 +105,12 @@ export class Breadcrumbs {
     render() {
         const { color, collapsed } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '35f8a2bffdd85ba6dc31834ebef69602a5a7cca1', class: createColorClasses(color, {
+        return (h(Host, { key: '9cef93113d7c0d0bcab67d7790d8df915236dd59', class: createColorClasses(color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'breadcrumbs-collapsed': collapsed,
-            }) }, h("slot", { key: 'ada062b5d17380d311861d1cf1a22dd62bac5497', onSlotchange: this.slotChanged })));
+            }) }, h("slot", { key: '6e6b0e0a3297de16bf08ec107bbce4bb5f00b28c', onSlotchange: this.slotChanged })));
     }
     static get is() { return "ion-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }