@ionic/core 7.5.6-dev.11700086473.1eebae2a → 7.5.6-dev.11700149859.12fc59a6

package/dist/cjs/ion-toast.cjs.entry.js

@@ -190,9 +190,9 @@ function warnIfAnchorIsHidden(positionAnchor, toast) {
   }
 }
 
-const toastIosCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{-ms-flex-wrap:wrap;flex-wrap:wrap}.toast-layout-baseline .toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-layout-stacked .toast-button-group{-ms-flex-pack:end;justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-background-color-step-50, #f2f2f2);--border-radius:14px;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-text-color-step-150, #262626);--max-width:700px;--max-height:478px;--start:10px;--end:10px;font-size:clamp(14px, 0.875rem, 43.4px)}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}:host(.ion-color.toast-translucent) .toast-wrapper{background:rgba(var(--ion-color-base-rgb), 0.8)}}.toast-wrapper.toast-top{-webkit-transform:translate3d(0,  -100%,  0);transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-middle{opacity:0.01}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);bottom:0}.toast-content{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;min-height:44px;-webkit-transition:background-color, opacity 100ms linear;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:clamp(17px, 1.0625rem, 21.998px);font-weight:500;overflow:hidden}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
+const toastIosCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{-ms-flex-wrap:wrap;flex-wrap:wrap}.toast-layout-baseline .toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-layout-stacked .toast-button-group{-ms-flex-pack:end;justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-50, #f2f2f2);--border-radius:14px;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-850, #262626);--max-width:700px;--max-height:478px;--start:10px;--end:10px;font-size:clamp(14px, 0.875rem, 43.4px)}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}:host(.ion-color.toast-translucent) .toast-wrapper{background:rgba(var(--ion-color-base-rgb), 0.8)}}.toast-wrapper.toast-top{-webkit-transform:translate3d(0,  -100%,  0);transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-middle{opacity:0.01}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);bottom:0}.toast-content{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;min-height:44px;-webkit-transition:background-color, opacity 100ms linear;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:clamp(17px, 1.0625rem, 21.998px);font-weight:500;overflow:hidden}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
 
-const toastMdCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{-ms-flex-wrap:wrap;flex-wrap:wrap}.toast-layout-baseline .toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-layout-stacked .toast-button-group{-ms-flex-pack:end;justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-text-color-step-200, #333333);--border-radius:4px;--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-background-color-step-50, #f2f2f2);--max-width:700px;--start:8px;--end:8px;font-size:0.875rem}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}.toast-content{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:14px;padding-bottom:14px}.toast-header{margin-bottom:2px;font-weight:500;line-height:1.25rem}.toast-message{line-height:1.25rem}.toast-layout-baseline .toast-button-group-start{-webkit-margin-start:8px;margin-inline-start:8px}.toast-layout-stacked .toast-button-group-start{-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px}.toast-layout-baseline .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px}.toast-layout-stacked .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px;margin-bottom:8px}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:0.875rem;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}.toast-button-cancel{color:var(--ion-background-color-step-100, #e6e6e6)}.toast-button-icon-only{border-radius:50%;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@media (any-hover: hover){.toast-button:hover{background-color:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}";
+const toastMdCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{-ms-flex-wrap:wrap;flex-wrap:wrap}.toast-layout-baseline .toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-layout-stacked .toast-button-group{-ms-flex-pack:end;justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-800, #333333);--border-radius:4px;--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-50, #f2f2f2);--max-width:700px;--start:8px;--end:8px;font-size:0.875rem}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}.toast-content{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:14px;padding-bottom:14px}.toast-header{margin-bottom:2px;font-weight:500;line-height:1.25rem}.toast-message{line-height:1.25rem}.toast-layout-baseline .toast-button-group-start{-webkit-margin-start:8px;margin-inline-start:8px}.toast-layout-stacked .toast-button-group-start{-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px}.toast-layout-baseline .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px}.toast-layout-stacked .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px;margin-bottom:8px}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:0.875rem;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}.toast-button-cancel{color:var(--ion-color-step-100, #e6e6e6)}.toast-button-icon-only{border-radius:50%;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@media (any-hover: hover){.toast-button:hover{background-color:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}";
 
 const Toast = class {
   constructor(hostRef) {

package/dist/collection/components/action-sheet/action-sheet.ios.css

@@ -264,7 +264,7 @@
   --button-background-selected: var(--ion-color-step-150, var(--ion-background-color, #fff));
   --button-background-selected-opacity: 1;
   --button-color: var(--ion-color-primary, #3880ff);
-  --color: var(--ion-text-color-step-600, #999999);
+  --color: var(--ion-color-step-400, #999999);
   text-align: center;
 }
 
@@ -333,7 +333,7 @@
   padding-inline-end: 10px;
   padding-top: 14px;
   padding-bottom: 13px;
-  color: var(--color, var(--ion-text-color-step-600, #999999));
+  color: var(--color, var(--ion-color-step-400, #999999));
   font-size: max(13px, 0.8125rem);
   font-weight: 400;
   text-align: center;

package/dist/collection/components/action-sheet/action-sheet.md.css

@@ -263,7 +263,7 @@
   --button-background-hover-opacity: .04;
   --button-background-focused: currentColor;
   --button-background-focused-opacity: .12;
-  --button-color: var(--ion-text-color-step-150, #262626);
+  --button-color: var(--ion-color-step-850, #262626);
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
 }
 

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

@@ -198,7 +198,7 @@
 
 .alert-button.ion-focused,
 .alert-tappable.ion-focused {
-  background: var(--ion-background-color-step-100, #e6e6e6);
+  background: var(--ion-color-step-100, #e6e6e6);
 }
 
 .alert-button-inner {
@@ -374,7 +374,7 @@ textarea.alert-input {
 }
 
 .alert-sub-title {
-  color: var(--ion-text-color-step-400, #666666);
+  color: var(--ion-color-step-600, #666666);
   font-size: max(14px, 0.875rem);
 }
 
@@ -411,12 +411,12 @@ textarea.alert-input {
   padding-inline-end: 6px;
   padding-top: 6px;
   padding-bottom: 6px;
-  border: 0.55px solid var(--ion-background-color-step-250, #bfbfbf);
+  border: 0.55px solid var(--ion-color-step-250, #bfbfbf);
   background-color: var(--ion-background-color, #fff);
   appearance: none;
 }
 .alert-input::placeholder {
-  color: var(--ion-placeholder-color, var(--ion-text-color-step-600, #999999));
+  color: var(--ion-placeholder-color, var(--ion-color-step-400, #999999));
   font-family: inherit;
   font-weight: inherit;
 }

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

@@ -198,7 +198,7 @@
 
 .alert-button.ion-focused,
 .alert-tappable.ion-focused {
-  background: var(--ion-background-color-step-100, #e6e6e6);
+  background: var(--ion-color-step-100, #e6e6e6);
 }
 
 .alert-button-inner {
@@ -365,7 +365,7 @@ textarea.alert-input {
   padding-inline-end: 24px;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: var(--ion-text-color-step-450, #737373);
+  color: var(--ion-color-step-550, #737373);
 }
 
 .alert-message {
@@ -389,11 +389,11 @@ textarea.alert-input {
   margin-right: 0;
   margin-top: 5px;
   margin-bottom: 5px;
-  border-bottom: 1px solid 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-text-color-step-600, #999999));
+  color: var(--ion-placeholder-color, var(--ion-color-step-400, #999999));
   font-family: inherit;
   font-weight: inherit;
 }
@@ -410,8 +410,8 @@ textarea.alert-input {
 .alert-checkbox-group {
   position: relative;
   max-height: 266px;
-  border-top: 1px solid var(--ion-background-color-step-150, #d9d9d9);
-  border-bottom: 1px solid 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;
 }
 
@@ -428,7 +428,7 @@ textarea.alert-input {
   padding-top: 13px;
   padding-bottom: 13px;
   flex: 1;
-  color: var(--ion-text-color-step-150, #262626);
+  color: var(--ion-color-step-850, #262626);
   font-size: 1rem;
 }
 
@@ -441,7 +441,7 @@ textarea.alert-input {
   height: 20px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-text-color-step-450, #737373);
+  border-color: var(--ion-color-step-550, #737373);
 }
 @supports (inset-inline-start: 0) {
   .alert-radio-icon {
@@ -510,7 +510,7 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-radio-label {
-  color: var(--ion-text-color-step-150, #262626);
+  color: var(--ion-color-step-850, #262626);
 }
 
 [aria-checked=true] .alert-radio-icon {
@@ -530,7 +530,7 @@ textarea.alert-input {
   padding-bottom: 13px;
   flex: 1;
   width: calc(100% - 53px);
-  color: var(--ion-text-color-step-150, #262626);
+  color: var(--ion-color-step-850, #262626);
   font-size: 1rem;
 }
 
@@ -542,7 +542,7 @@ textarea.alert-input {
   height: 16px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-text-color-step-450, #737373);
+  border-color: var(--ion-color-step-550, #737373);
   contain: strict;
 }
 @supports (inset-inline-start: 0) {

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

@@ -141,7 +141,7 @@ ion-ripple-effect {
  */
 :host {
   --background: var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));
-  --color: var(--ion-card-color, var(--ion-item-color, var(--ion-text-color-step-400, #666666)));
+  --color: var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, #666666)));
   -webkit-margin-start: 16px;
   margin-inline-start: 16px;
   -webkit-margin-end: 16px;

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

@@ -141,7 +141,7 @@ ion-ripple-effect {
  */
 :host {
   --background: var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));
-  --color: var(--ion-card-color, var(--ion-item-color, var(--ion-text-color-step-450, #737373)));
+  --color: var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, #737373)));
   -webkit-margin-start: 10px;
   margin-inline-start: 10px;
   -webkit-margin-end: 10px;

package/dist/collection/components/card-subtitle/card-subtitle.ios.css

@@ -78,7 +78,7 @@
  * convert to a unit other than $baselineUnit.
  */
 :host {
-  --color: var(--ion-text-color-step-400, #666666);
+  --color: var(--ion-color-step-600, #666666);
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;

package/dist/collection/components/card-subtitle/card-subtitle.md.css

@@ -78,7 +78,7 @@
  * convert to a unit other than $baselineUnit.
  */
 :host {
-  --color: var(--ion-text-color-step-450, #737373);
+  --color: var(--ion-color-step-550, #737373);
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;

package/dist/collection/components/card-title/card-title.md.css

@@ -78,7 +78,7 @@
  * convert to a unit other than $baselineUnit.
  */
 :host {
-  --color: var(--ion-text-color-step-150, #262626);
+  --color: var(--ion-color-step-850, #262626);
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;

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

@@ -533,7 +533,7 @@ ion-picker-column-internal {
 :host {
   --background: var(--ion-color-light, #ffffff);
   --background-rgb: var(--ion-color-light-rgb);
-  --title-color: var(--ion-text-color-step-400, #666666);
+  --title-color: var(--ion-color-step-600, #666666);
 }
 
 :host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),
@@ -549,7 +549,7 @@ ion-picker-column-internal {
   padding-inline-end: 16px;
   padding-top: 16px;
   padding-bottom: 16px;
-  border-bottom: 0.55px solid var(--ion-background-color-step-200, #cccccc);
+  border-bottom: 0.55px solid var(--ion-color-step-200, #cccccc);
   font-size: min(0.875rem, 22.4px);
 }
 
@@ -595,7 +595,7 @@ ion-picker-column-internal {
   padding-inline-end: 8px;
   padding-top: 0;
   padding-bottom: 0;
-  color: var(--ion-text-color-step-700, #b3b3b3);
+  color: var(--ion-color-step-300, #b3b3b3);
   font-size: min(0.75rem, 19.2px);
   font-weight: 600;
   line-height: 24px;
@@ -788,7 +788,7 @@ ion-picker-column-internal {
   padding-inline-end: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
-  border-top: 0.55px solid var(--ion-background-color-step-200, #cccccc);
+  border-top: 0.55px solid var(--ion-color-step-200, #cccccc);
 }
 
 :host .datetime-buttons ::slotted(ion-buttons),

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

@@ -562,7 +562,7 @@ ion-picker-column-internal {
 
 :host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
-  --color: var(--ion-text-color-step-350, #595959);
+  --color: var(--ion-color-step-650, #595959);
 }
 
 :host .calendar-days-of-week {
@@ -572,7 +572,7 @@ ion-picker-column-internal {
   padding-inline-end: 10px;
   padding-top: 0px;
   padding-bottom: 0px;
-  color: var(--ion-text-color-step-500, gray);
+  color: var(--ion-color-step-500, gray);
   font-size: 0.875rem;
   line-height: 36px;
 }
@@ -634,7 +634,7 @@ ion-picker-column-internal {
 }
 
 :host .time-header {
-  color: var(--ion-text-color-step-350, #595959);
+  color: var(--ion-color-step-650, #595959);
 }
 
 /**

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

@@ -96,17 +96,17 @@ ion-infinite-scroll-content {
  * convert to a unit other than $baselineUnit.
  */
 .infinite-scroll-content-ios .infinite-loading-text {
-  color: 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-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-text-color-step-400, #666666);
+  fill: var(--ion-color-step-600, #666666);
 }

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

@@ -96,17 +96,17 @@ ion-infinite-scroll-content {
  * convert to a unit other than $baselineUnit.
  */
 .infinite-scroll-content-md .infinite-loading-text {
-  color: 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-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-text-color-step-400, #666666);
+  fill: var(--ion-color-step-600, #666666);
 }

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

@@ -262,7 +262,7 @@
   outline: none;
   background-color: transparent;
   background-repeat: no-repeat;
-  color: var(--ion-text-color-step-400, #666666);
+  color: var(--ion-color-step-600, #666666);
   visibility: hidden;
   appearance: none;
 }
@@ -394,7 +394,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-background-color-step-550, #737373);
+  color: var(--ion-color-step-550, #737373);
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -413,7 +413,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-background-color-step-550, #737373);
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
   padding-inline-start: 16px;
 }

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

@@ -262,7 +262,7 @@
   outline: none;
   background-color: transparent;
   background-repeat: no-repeat;
-  color: var(--ion-text-color-step-400, #666666);
+  color: var(--ion-color-step-600, #666666);
   visibility: hidden;
   appearance: none;
 }
@@ -394,7 +394,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-background-color-step-550, #737373);
+  color: var(--ion-color-step-550, #737373);
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -413,7 +413,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-background-color-step-550, #737373);
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -743,8 +743,8 @@
  * convert to a unit other than $baselineUnit.
  */
 :host(.input-fill-solid) {
-  --background: var(--ion-background-color-step-50, #f2f2f2);
-  --border-color: 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;
@@ -780,8 +780,8 @@
  */
 @media (any-hover: hover) {
   :host(.input-fill-solid:hover) {
-    --background: var(--ion-background-color-step-100, #e6e6e6);
-    --border-color: var(--ion-background-color-step-750, #404040);
+    --background: var(--ion-color-step-100, #e6e6e6);
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 /**
@@ -789,8 +789,8 @@
  * much darker on focus.
  */
 :host(.input-fill-solid.has-focus) {
-  --background: var(--ion-background-color-step-150, #d9d9d9);
-  --border-color: 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 {
@@ -863,7 +863,7 @@
  * convert to a unit other than $baselineUnit.
  */
 :host(.input-fill-outline) {
-  --border-color: var(--ion-background-color-step-300, #b3b3b3);
+  --border-color: var(--ion-color-step-300, #b3b3b3);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -891,7 +891,7 @@
  */
 @media (any-hover: hover) {
   :host(.input-fill-outline:hover) {
-    --border-color: var(--ion-background-color-step-750, #404040);
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 /**

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

@@ -542,7 +542,7 @@ ion-ripple-effect {
 .item-counter {
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-background-color-step-550, #737373);
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
   padding-inline-start: 16px;
 }

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

@@ -542,7 +542,7 @@ ion-ripple-effect {
 .item-counter {
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-background-color-step-550, #737373);
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -985,9 +985,9 @@ ion-ripple-effect {
 }
 
 :host(.item-fill-solid) {
-  --background: var(--ion-background-color-step-50, #f2f2f2);
-  --background-hover: var(--ion-background-color-step-100, #e6e6e6);
-  --background-focused: 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;
@@ -1012,7 +1012,7 @@ ion-ripple-effect {
 }
 
 :host(.item-fill-solid) .item-native {
-  --border-color: var(--ion-background-color-step-500, gray);
+  --border-color: var(--ion-color-step-500, gray);
 }
 
 :host(.item-fill-solid.ion-focused) .item-native,
@@ -1045,14 +1045,14 @@ ion-ripple-effect {
 @media (any-hover: hover) {
   :host(.item-fill-solid:hover) .item-native {
     --background: var(--background-hover);
-    --border-color: 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-background-color-step-500, gray);
+  --border-color: var(--ion-color-step-500, gray);
   --border-width: 1px;
   border: none;
   overflow: visible;
@@ -1084,7 +1084,7 @@ ion-ripple-effect {
 
 @media (any-hover: hover) {
   :host(.item-fill-outline:hover) .item-native {
-    --border-color: 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

@@ -214,8 +214,8 @@
  * convert to a unit other than $baselineUnit.
  */
 :host {
-  --background: var(--ion-background-color-step-100, #e6e6e6);
-  --color: 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;

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

@@ -215,7 +215,7 @@
  */
 :host {
   --background: var(--ion-background-color, #fff);
-  --color: var(--ion-text-color-step-600, #999999);
+  --color: var(--ion-color-step-400, #999999);
   --padding-start: 16px;
   --inner-padding-end: 16px;
   min-height: 30px;
@@ -343,7 +343,7 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
-  color: 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/label/label.md.css

@@ -340,7 +340,7 @@
 }
 
 ::slotted(p) {
-  color: 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-header/list-header.ios.css

@@ -170,7 +170,7 @@
  */
 :host {
   --background: transparent;
-  --color: var(--ion-text-color-step-150, #262626);
+  --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);

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

@@ -129,7 +129,7 @@ ion-spinner {
   --background: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9));
   --max-width: 270px;
   --max-height: 90%;
-  --spinner-color: 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;

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

@@ -126,12 +126,12 @@ ion-spinner {
  * convert to a unit other than $baselineUnit.
  */
 :host {
-  --background: var(--ion-background-color-step-50, #f2f2f2);
+  --background: var(--ion-color-step-50, #f2f2f2);
   --max-width: 280px;
   --max-height: 90%;
   --spinner-color: var(--ion-color-primary, #3880ff);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
-  color: var(--ion-text-color-step-150, #262626);
+  color: var(--ion-color-step-850, #262626);
   font-size: 0.875rem;
 }
 

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

@@ -78,6 +78,6 @@
 }
 
 :host {
-  --color: var(--ion-text-color-step-650, #a6a6a6);
+  --color: var(--ion-color-step-350, #a6a6a6);
   font-size: max(14px, 1rem);
 }

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

@@ -78,6 +78,6 @@
 }
 
 :host {
-  --color: var(--ion-text-color-step-400, #666666);
+  --color: var(--ion-color-step-600, #666666);
   font-size: 0.875rem;
 }

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

@@ -205,7 +205,7 @@
 }
 
 :host(.popover-desktop) .popover-content {
-  border: 0.5px solid var(--ion-background-color-step-100, #e6e6e6);
+  border: 0.5px solid var(--ion-color-step-100, #e6e6e6);
 }
 
 .popover-arrow {

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

@@ -765,13 +765,13 @@
 :host(.range-disabled) .range-bar-active,
 :host(.range-disabled) .range-bar,
 :host(.range-disabled) .range-tick {
-  background-color: var(--ion-background-color-step-250, #bfbfbf);
+  background-color: var(--ion-color-step-250, #bfbfbf);
 }
 
 :host(.range-disabled) .range-knob {
   transform: scale(0.55);
   outline: 5px solid #fff;
-  background-color: var(--ion-background-color-step-250, #bfbfbf);
+  background-color: var(--ion-color-step-250, #bfbfbf);
 }
 
 :host(.range-disabled) .label-text-wrapper,