@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

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

@@ -228,7 +228,7 @@
 
 .alert-button.ion-focused,
 .alert-tappable.ion-focused {
-  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  background: var(--ion-color-step-100, #e6e6e6);
 }
 
 .alert-button-inner {
@@ -408,7 +408,7 @@ textarea.alert-input {
  * differences across browsers.
  */
 :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: clamp(270px, 16.875rem, 324px);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
   font-size: max(14px, 0.875rem);
@@ -448,7 +448,7 @@ textarea.alert-input {
 }
 
 .alert-sub-title {
-  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  color: var(--ion-color-step-600, #666666);
   font-size: max(14px, 0.875rem);
 }
 
@@ -477,21 +477,20 @@ textarea.alert-input {
 }
 
 .alert-input {
-  border-radius: 7px;
+  border-radius: 4px;
   margin-top: 10px;
-  -webkit-padding-start: 7px;
-  padding-inline-start: 7px;
-  -webkit-padding-end: 7px;
-  padding-inline-end: 7px;
-  padding-top: 7px;
-  padding-bottom: 7px;
-  border: 0.55px solid var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf));
+  -webkit-padding-start: 6px;
+  padding-inline-start: 6px;
+  -webkit-padding-end: 6px;
+  padding-inline-end: 6px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  border: 0.55px solid var(--ion-color-step-250, #bfbfbf);
   background-color: var(--ion-background-color, #fff);
   appearance: none;
-  font-size: 1rem;
 }
 .alert-input::placeholder {
-  color: var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));
+  color: var(--ion-placeholder-color, var(--ion-color-step-400, #999999));
   font-family: inherit;
   font-weight: inherit;
 }
@@ -500,10 +499,10 @@ textarea.alert-input {
 }
 .alert-input::-webkit-date-and-time-value {
   /**
-   * The -webkit-date-and-time-value pseudo element is used
+   * The -webkit-date-and-time-value pseudo element is used 
    * to style the date/time input on iOS/Mobile Safari.
    * To avoid layout shift between an empty state and a selected state,
-   * we set the height `18px` to match the native input height for
+   * we set the height `18px` to match the native input height for 
    * date/time inputs on iOS/Mobile Safari.
    */
   height: 18px;
@@ -535,7 +534,7 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-radio-label {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
 }
 
 .alert-radio-icon {
@@ -554,10 +553,34 @@ textarea.alert-input {
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
-  border-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, #3880ff);
 }
-[aria-checked=true] .alert-radio-inner {
-  inset-inline-start: 7px;
+@supports (inset-inline-start: 0) {
+  [aria-checked=true] .alert-radio-inner {
+    inset-inline-start: 7px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  [aria-checked=true] .alert-radio-inner {
+    left: 7px;
+  }
+  :host-context([dir=rtl]) [aria-checked=true] .alert-radio-inner {
+    left: unset;
+    right: unset;
+    right: 7px;
+  }
+  [dir=rtl] [aria-checked=true] .alert-radio-inner {
+    left: unset;
+    right: unset;
+    right: 7px;
+  }
+  @supports selector(:dir(rtl)) {
+    [aria-checked=true] .alert-radio-inner:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 7px;
+    }
+  }
 }
 
 .alert-checkbox-label {
@@ -580,34 +603,58 @@ textarea.alert-input {
   margin-top: 10px;
   margin-bottom: 10px;
   position: relative;
-  width: min(1.375rem, 55.836px);
-  height: min(1.375rem, 55.836px);
-  border-width: 0.125rem;
+  width: min(1.5rem, 66px);
+  height: min(1.5rem, 66px);
+  border-width: 0.0625rem;
   border-style: solid;
-  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)));
   background-color: var(--ion-item-background, var(--ion-background-color, #fff));
   contain: strict;
 }
 
 [aria-checked=true] .alert-checkbox-icon {
-  border-color: var(--ion-color-primary, #0054e9);
-  background-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, #3880ff);
+  background-color: var(--ion-color-primary, #3880ff);
 }
 
 [aria-checked=true] .alert-checkbox-inner {
-  top: calc(min(1.375rem, 55.836px) / 8);
+  top: calc(min(1.5rem, 66px) / 6);
   position: absolute;
-  width: calc(min(1.375rem, 55.836px) / 6 + 1px);
-  height: calc(min(1.375rem, 55.836px) * 0.5);
+  width: calc(min(1.5rem, 66px) / 6 + 1px);
+  height: calc(min(1.5rem, 66px) * 0.5);
   transform: rotate(45deg);
-  border-width: 0.125rem;
+  border-width: 0.0625rem;
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
   border-color: var(--ion-background-color, #fff);
 }
-[aria-checked=true] .alert-checkbox-inner {
-  inset-inline-start: calc(min(1.375rem, 55.836px) / 3);
+@supports (inset-inline-start: 0) {
+  [aria-checked=true] .alert-checkbox-inner {
+    inset-inline-start: calc(min(1.5rem, 66px) / 3 + 1px);
+  }
+}
+@supports not (inset-inline-start: 0) {
+  [aria-checked=true] .alert-checkbox-inner {
+    left: calc(min(1.5rem, 66px) / 3 + 1px);
+  }
+  :host-context([dir=rtl]) [aria-checked=true] .alert-checkbox-inner {
+    left: unset;
+    right: unset;
+    right: calc(min(1.5rem, 66px) / 3 + 1px);
+  }
+  [dir=rtl] [aria-checked=true] .alert-checkbox-inner {
+    left: unset;
+    right: unset;
+    right: calc(min(1.5rem, 66px) / 3 + 1px);
+  }
+  @supports selector(:dir(rtl)) {
+    [aria-checked=true] .alert-checkbox-inner:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: calc(min(1.5rem, 66px) / 3 + 1px);
+    }
+  }
 }
 
 .alert-button-group {
@@ -660,7 +707,7 @@ textarea.alert-input {
   border-top: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   border-right: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   background-color: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
   font-size: max(17px, 1.0625rem);
   overflow: hidden;
 }
@@ -704,5 +751,5 @@ textarea.alert-input {
 .alert-button-role-destructive,
 .alert-button-role-destructive.ion-activated,
 .alert-button-role-destructive.ion-focused {
-  color: var(--ion-color-danger, #c5000f);
+  color: var(--ion-color-danger, #eb445a);
 }

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, var(--ion-background-color-step-100, #e6e6e6));
+  background: var(--ion-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, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-550, #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, var(--ion-background-color-step-150, #d9d9d9));
+  border-bottom: 1px solid var(--ion-color-step-150, #d9d9d9);
   color: var(--ion-text-color, #000);
 }
 .alert-input::placeholder {
-  color: var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));
+  color: var(--ion-placeholder-color, var(--ion-color-step-400, #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, #0054e9);
+  border-bottom: 2px solid var(--ion-color-primary, #3880ff);
 }
 
 .alert-radio-group,
 .alert-checkbox-group {
   position: relative;
-  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));
+  border-top: 1px solid var(--ion-color-step-150, #d9d9d9);
+  border-bottom: 1px solid var(--ion-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, var(--ion-text-color-step-150, #262626));
+  color: var(--ion-color-step-850, #262626);
   font-size: 1rem;
 }
 
@@ -542,10 +542,34 @@ textarea.alert-input {
   height: 20px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
+  border-color: var(--ion-color-step-550, #737373);
 }
-.alert-radio-icon {
-  inset-inline-start: 26px;
+@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-inner {
@@ -556,18 +580,42 @@ 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, #0054e9);
+  background-color: var(--ion-color-primary, #3880ff);
 }
-.alert-radio-inner {
-  inset-inline-start: 3px;
+@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;
+    }
+  }
 }
 
 [aria-checked=true] .alert-radio-label {
-  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  color: var(--ion-color-step-850, #262626);
 }
 
 [aria-checked=true] .alert-radio-icon {
-  border-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, #3880ff);
 }
 
 [aria-checked=true] .alert-radio-inner {
@@ -583,7 +631,7 @@ textarea.alert-input {
   padding-bottom: 13px;
   flex: 1;
   width: calc(100% - 53px);
-  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  color: var(--ion-color-step-850, #262626);
   font-size: 1rem;
 }
 
@@ -595,16 +643,40 @@ textarea.alert-input {
   height: 16px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
+  border-color: var(--ion-color-step-550, #737373);
   contain: strict;
 }
-.alert-checkbox-icon {
-  inset-inline-start: 26px;
+@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;
+    }
+  }
 }
 
 [aria-checked=true] .alert-checkbox-icon {
-  border-color: var(--ion-color-primary, #0054e9);
-  background-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, #3880ff);
+  background-color: var(--ion-color-primary, #3880ff);
 }
 
 [aria-checked=true] .alert-checkbox-inner {
@@ -619,8 +691,32 @@ textarea.alert-input {
   border-style: solid;
   border-color: var(--ion-color-primary-contrast, #fff);
 }
-[aria-checked=true] .alert-checkbox-inner {
-  inset-inline-start: 3px;
+@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;
+    }
+  }
 }
 
 .alert-button-group {
@@ -651,7 +747,7 @@ textarea.alert-input {
   padding-bottom: 10px;
   position: relative;
   background-color: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
   font-weight: 500;
   text-align: end;
   text-transform: uppercase;

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

@@ -19,28 +19,6 @@ 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) => {
@@ -94,6 +72,15 @@ 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/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, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
   --icon-margin-end: 1px;
   --icon-margin-start: -4px;
   /**

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

@@ -1,29 +1,8 @@
 /*!
  * (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,13 +2,25 @@
  * (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);
     }
@@ -23,7 +35,7 @@ export class Backdrop {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'e512499f1aa0cdb70cdabf300cf69f1062dc7c48', tabindex: "-1", "aria-hidden": "true", class: {
+        return (h(Host, { key: 'b2adb9dabef01fa49388d67d9e8a4a370931f633', 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, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
   --padding-top: 3px;
   --padding-end: 8px;

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, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
   --padding-top: 3px;
   --padding-end: 8px;

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

@@ -1,7 +1,6 @@
 /*!
  * (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 }) => {
@@ -21,20 +20,3 @@ 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, var(--ion-text-color-step-150, #2d4665));
+  --color: var(--ion-color-step-850, #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, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7)));
+  --background-focused: var(--ion-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, var(--ion-text-color-step-250, #445b78));
+  color: var(--ion-color-step-750, #445b78);
 }
 
 .breadcrumb-separator {
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
+  color: var(--ion-color-step-550, #73849a);
 }
 
 ::slotted(ion-icon) {
-  color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3));
+  color: var(--ion-color-step-400, #92a0b3);
   font-size: min(1.125rem, 21.6px);
 }
 
@@ -304,13 +304,13 @@
 }
 
 :host(.breadcrumb-active) ::slotted(ion-icon) {
-  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39));
+  color: var(--ion-color-step-850, #242d39);
 }
 
 .breadcrumbs-collapsed-indicator {
   border-radius: 4px;
-  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));
+  background: var(--ion-color-step-100, #e9edf3);
+  color: var(--ion-color-step-550, #73849a);
 }
 
 .breadcrumbs-collapsed-indicator:hover {
@@ -318,7 +318,7 @@
 }
 
 .breadcrumbs-collapsed-indicator:focus {
-  background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea));
+  background: var(--ion-color-step-150, #d9e0ea);
 }
 
 .breadcrumbs-collapsed-indicator ion-icon {