@ionic/core 8.5.5-dev.11747137265.184b7749 → 8.5.5-dev.11747843377.1fcc3e84

package/dist/collection/components/tab-bar/tab-bar.ionic.css

@@ -118,9 +118,9 @@ Do not edit directly, this file was auto-generated.
   --background: var(--ion-tab-bar-background, var(--ion-primitives-base-white, #ffffff));
   --background-activated: var(--ion-tab-bar-background-activated, var(--ion-primitives-neutral-100, #f5f5f5));
   --background-focused: var(--ion-tab-bar-background-focused, transparent);
-  --border: var(--ion-border-size-0, 0px) var(--ion-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);
+  --border: var(--ion-border-size-0, var(--ion-scale-0, 0px)) var(--ion-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);
   --color: var(--ion-tab-bar-color, var(--ion-primitives-neutral-800, #626262));
-  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-text-primary, #0d4bc3));
+  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
   /**
    * Tab bar has a box sizing of content-box to ensure the padding
    * is not included in the height. This is important for the
@@ -129,8 +129,8 @@ Do not edit directly, this file was auto-generated.
    * In order for the height to be calculated correctly, the padding
    * top and bottom must be excluded from the height calculation.
    */
-  min-height: calc(var(--ion-scale-1400, 56px) - var(--ion-space-100, 4px) * 2);
-  gap: var(--ion-space-300, 12px);
+  min-height: calc(var(--ion-scale-1400, 56px) - var(--ion-space-100, var(--ion-scale-100, 4px)) * 2);
+  gap: var(--ion-space-300, var(--ion-scale-300, 12px));
   box-shadow: var(--ion-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));
   z-index: 10;
 }
@@ -138,26 +138,26 @@ Do not edit directly, this file was auto-generated.
 /* Full */
 :host(.tab-bar-full) {
   /* stylelint-disable */
-  padding-top: var(--ion-space-100, 4px);
-  padding-bottom: calc(var(--ion-space-100, 4px) + var(--ion-safe-area-bottom, 0));
-  padding-right: calc(var(--ion-space-400, 16px) + var(--ion-safe-area-right, 0));
-  padding-left: calc(var(--ion-space-400, 16px) + var(--ion-safe-area-left, 0));
+  padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
+  padding-bottom: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));
+  padding-right: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-right, 0));
+  padding-left: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-left, 0));
   /* stylelint-enable */
 }
 
 :host([slot=top].tab-bar-full) {
-  padding-top: calc(var(--ion-space-100, 4px) + var(--ion-safe-area-top, 0));
-  padding-bottom: var(--ion-space-100, 4px);
+  padding-top: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-top, 0));
+  padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
 }
 
 /* Compact */
 :host(.tab-bar-compact) {
-  -webkit-padding-start: var(--ion-space-400, 16px);
-  padding-inline-start: var(--ion-space-400, 16px);
-  -webkit-padding-end: var(--ion-space-400, 16px);
-  padding-inline-end: var(--ion-space-400, 16px);
-  padding-top: var(--ion-space-100, 4px);
-  padding-bottom: var(--ion-space-100, 4px);
+  -webkit-padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  -webkit-padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
+  padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
   position: absolute;
   align-self: center;
   width: fit-content;
@@ -165,16 +165,16 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host([slot=top].tab-bar-compact) {
-  top: calc(var(--ion-space-100, 4px) + var(--ion-safe-area-top, 0));
+  top: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-top, 0));
 }
 
 :host([slot=bottom].tab-bar-compact) {
-  bottom: calc(var(--ion-space-100, 4px) + var(--ion-safe-area-bottom, 0));
+  bottom: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));
 }
 
 /* Soft */
 :host(.tab-bar-soft) {
-  border-radius: var(--ion-border-radius-400, 16px);
+  border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
 }
 
 /* Round */
@@ -184,5 +184,5 @@ Do not edit directly, this file was auto-generated.
 
 /* Rectangular */
 :host(.tab-bar-rectangular) {
-  border-radius: var(--ion-border-radius-0, 0px);
+  border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }

package/dist/collection/components/tab-button/tab-button.ionic.css

@@ -196,12 +196,12 @@ ion-ripple-effect {
 }
 
 :host {
-  --focus-ring-color: var(--ion-border-focus-default, #b5c0f7);
-  --focus-ring-width: var(--ion-border-radius-025, 2px);
+  --focus-ring-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
+  --focus-ring-width: var(--ion-border-radius-025, var(--ion-scale-050, 2px));
   font-size: var(--ion-font-size-350, 0.875rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-1, 1%);
-  line-height: var(--ion-font-line-height-500, 20px);
+  line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
   text-decoration: none;
   text-transform: none;
   position: relative;
@@ -282,15 +282,15 @@ ion-ripple-effect {
 }
 
 :host(.tab-button-shape-soft) {
-  border-radius: var(--ion-border-radius-200, 8px);
+  border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
 }
 
 :host(.tab-button-shape-round) {
-  border-radius: var(--ion-border-radius-400, 16px);
+  border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
 }
 
 :host(.tab-button-shape-rectangular) {
-  border-radius: var(--ion-border-radius-0, 0px);
+  border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }
 
 :host ::slotted(ion-badge) {

package/dist/collection/components/textarea/textarea.ionic.css

@@ -554,7 +554,7 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.textarea-fill-outline) {
-  --border-width: var(--ion-border-size-025, 1px);
+  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
   --border-color: var(--ion-primitives-neutral-500, #a2a2a2);
 }
 
@@ -593,27 +593,27 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.textarea-fill-outline) textarea {
-  margin-top: var(--ion-space-100, 4px);
+  margin-top: var(--ion-space-100, var(--ion-scale-100, 4px));
 }
 
 :host(.textarea-fill-outline.has-focus) {
-  --border-width: var(--ion-border-size-050, 2px);
+  --border-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
 }
 
 :host {
   --border-color: var(--ion-primitives-neutral-500, #a2a2a2);
   --color: var(--ion-primitives-neutral-1200, #242424);
-  --highlight-color-valid: var(--ion-semantics-success-900, #126f23);
-  --highlight-color-invalid: var(--ion-semantics-danger-800, #bf2222);
-  --highlight-color-focused: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
+  --highlight-color-valid: var(--ion-semantics-success-900, var(--ion-primitives-green-900, #126f23));
+  --highlight-color-invalid: var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222));
+  --highlight-color-focused: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
   --placeholder-color: var(--ion-primitives-neutral-800, #626262);
   --placeholder-opacity: 1;
   --background: var(--ion-primitives-base-white, #ffffff);
-  --padding-bottom: var(--ion-space-200, 8px);
+  --padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
   font-size: var(--ion-font-size-350, 0.875rem);
   font-weight: var(--ion-font-weight-regular, 400);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, 24px);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
 }
@@ -627,43 +627,43 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.textarea-size-small) .textarea-wrapper-inner {
-  --padding-top: var(--ion-space-200, 8px);
-  --padding-end: var(--ion-space-300, 12px);
-  --padding-bottom: var(--ion-space-200, 8px);
-  --padding-start: var(--ion-space-300, 12px);
+  --padding-top: var(--ion-space-200, var(--ion-scale-200, 8px));
+  --padding-end: var(--ion-space-300, var(--ion-scale-300, 12px));
+  --padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
+  --padding-start: var(--ion-space-300, var(--ion-scale-300, 12px));
   min-height: var(--ion-scale-2800, 112px);
 }
 
 :host(.textarea-size-medium) .textarea-wrapper-inner {
-  --padding-top: var(--ion-space-300, 12px);
-  --padding-end: var(--ion-space-400, 16px);
-  --padding-bottom: var(--ion-space-300, 12px);
-  --padding-start: var(--ion-space-400, 16px);
+  --padding-top: var(--ion-space-300, var(--ion-scale-300, 12px));
+  --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  --padding-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
+  --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
   min-height: var(--ion-scale-3400, 136px);
 }
 
 :host(.textarea-size-large) .textarea-wrapper-inner {
-  --padding-top: var(--ion-space-400, 16px);
-  --padding-end: var(--ion-space-500, 20px);
-  --padding-bottom: var(--ion-space-400, 16px);
-  --padding-start: var(--ion-space-500, 20px);
+  --padding-top: var(--ion-space-400, var(--ion-scale-400, 16px));
+  --padding-end: var(--ion-space-500, var(--ion-scale-500, 20px));
+  --padding-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
+  --padding-start: var(--ion-space-500, var(--ion-scale-500, 20px));
   min-height: var(--ion-scale-3600, 144px);
 }
 
 :host(.textarea-shape-soft) {
-  --border-radius: var(--ion-border-radius-200, 8px);
+  --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
 }
 
 :host(.textarea-shape-round) {
-  --border-radius: var(--ion-border-radius-400, 16px);
+  --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
 }
 
 :host(.textarea-shape-rectangular) {
-  --border-radius: var(--ion-border-radius-0, 0px);
+  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }
 
 .textarea-wrapper {
-  gap: var(--ion-space-100, 4px);
+  gap: var(--ion-space-100, var(--ion-scale-100, 4px));
 }
 
 .textarea-wrapper-inner {
@@ -688,7 +688,7 @@ Do not edit directly, this file was auto-generated.
   font-size: var(--ion-font-size-300, 0.75rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-500, 20px);
+  line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
   text-decoration: none;
   text-transform: none;
   max-width: var(--ion-scale-5000, 200px);
@@ -707,7 +707,7 @@ ion-icon {
 
 .start-slot-wrapper,
 .end-slot-wrapper {
-  margin-top: var(--ion-space-050, 2px);
+  margin-top: var(--ion-space-050, var(--ion-scale-050, 2px));
 }
 
 .textarea-bottom {
@@ -715,11 +715,11 @@ ion-icon {
   padding-inline-start: var(--padding-start);
   -webkit-padding-end: var(--padding-end);
   padding-inline-end: var(--padding-end);
-  padding-top: var(--ion-space-100, 4px);
+  padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
   font-size: var(--ion-font-size-300, 0.75rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-500, 20px);
+  line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
   text-decoration: none;
   text-transform: none;
 }
@@ -735,14 +735,14 @@ ion-icon {
 
 :host(.has-focus.ion-valid),
 :host(.ion-touched.ion-invalid) {
-  --border-width: var(--ion-border-size-025, 1px);
+  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
 }
 
 .textarea-highlight {
   bottom: -1px;
   position: absolute;
   width: 100%;
-  height: var(--ion-border-size-050, 2px);
+  height: var(--ion-border-size-050, var(--ion-scale-050, 2px));
   transform: scale(0);
   transition: transform var(--ion-transition-time-200, 200ms);
   background: var(--border-color);
@@ -752,7 +752,7 @@ ion-icon {
 }
 
 :host(.has-focus) {
-  --border-color: var(--ion-border-focus-default, #b5c0f7);
+  --border-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
 }
 
 :host(.has-focus) .textarea-highlight {
@@ -774,7 +774,7 @@ ion-icon {
 :host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text,
 :host(.textarea-disabled) .textarea-bottom .counter,
 :host(.textarea-disabled) .label-text-wrapper {
-  color: var(--ion-text-disabled, #a2a2a2);
+  color: var(--ion-text-disabled, var(--ion-primitives-neutral-500, #a2a2a2));
 }
 
 :host(.textarea-disabled.has-focus.ion-valid) {
@@ -823,8 +823,8 @@ ion-icon {
  * on the right in RTL. Label also has a fixed width.
  */
 :host(.textarea-label-placement-fixed) .label-text {
-  flex: 0 0 calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, 4px));
-  width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, 4px));
-  min-width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, 4px));
+  flex: 0 0 calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, var(--ion-scale-100, 4px)));
+  width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, var(--ion-scale-100, 4px)));
+  min-width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, var(--ion-scale-100, 4px)));
   max-width: var(--ion-scale-5000, 200px);
 }

package/dist/collection/components/title/title.ionic.css

@@ -112,7 +112,7 @@ Do not edit directly, this file was auto-generated.
   font-size: var(--ion-font-size-450, 1.125rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-700, 28px);
+  line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
   text-decoration: none;
   text-transform: none;
   box-sizing: border-box;
@@ -123,7 +123,7 @@ Do not edit directly, this file was auto-generated.
   font-size: var(--ion-font-size-700, 1.75rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-900, 36px);
+  line-height: var(--ion-font-line-height-900, var(--ion-scale-900, 36px));
   text-decoration: none;
   text-transform: none;
 }

package/dist/collection/components/toast/toast.ionic.css

@@ -239,12 +239,12 @@ Do not edit directly, this file was auto-generated.
 :host {
   --box-shadow: var(--ion-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18));
   --max-width: 343px;
-  --start: var(--ion-space-200, 8px);
-  --end: var(--ion-space-200, 8px);
+  --start: var(--ion-space-200, var(--ion-scale-200, 8px));
+  --end: var(--ion-space-200, var(--ion-scale-200, 8px));
   font-size: var(--ion-font-size-350, 0.875rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, 24px);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
   z-index: 1001;
@@ -283,62 +283,62 @@ Do not edit directly, this file was auto-generated.
 }
 
 .toast-container {
-  -webkit-padding-start: var(--ion-space-400, 16px);
-  padding-inline-start: var(--ion-space-400, 16px);
-  -webkit-padding-end: var(--ion-space-400, 16px);
-  padding-inline-end: var(--ion-space-400, 16px);
-  padding-top: var(--ion-space-300, 12px);
-  padding-bottom: var(--ion-space-300, 12px);
+  -webkit-padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  -webkit-padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-top: var(--ion-space-300, var(--ion-scale-300, 12px));
+  padding-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
 }
 
 :host(.toast-shape-soft) {
-  --border-radius: var(--ion-border-radius-200, 8px);
+  --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
 }
 
 :host(.toast-shape-round) {
-  --border-radius: var(--ion-border-radius-400, 16px);
+  --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
 }
 
 :host(.toast-shape-rectangular) {
-  --border-radius: var(--ion-border-radius-0, 0px);
+  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }
 
 .toast-header {
   font-size: var(--ion-font-size-450, 1.125rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-700, 28px);
+  line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
   text-decoration: none;
   text-transform: none;
 }
 
 .toast-layout-baseline .toast-button-group-start {
-  -webkit-margin-end: var(--ion-space-400, 16px);
-  margin-inline-end: var(--ion-space-400, 16px);
+  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 .toast-layout-stacked .toast-button-group-start {
-  margin-bottom: var(--ion-space-400, 16px);
+  margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 .toast-layout-baseline .toast-button-group-end {
-  -webkit-margin-start: var(--ion-space-400, 16px);
-  margin-inline-start: var(--ion-space-400, 16px);
+  -webkit-margin-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 .toast-layout-stacked .toast-button-group-end {
-  margin-top: var(--ion-space-400, 16px);
+  margin-top: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 .toast-button-group {
-  gap: var(--ion-space-400, 16px);
+  gap: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 .toast-button {
   font-size: var(--ion-font-size-350, 0.875rem);
   font-weight: var(--ion-font-weight-regular, 400);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, 24px);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
   padding-left: 0;
@@ -354,8 +354,8 @@ Do not edit directly, this file was auto-generated.
 .toast-icon {
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--ion-space-200, 8px);
-  margin-inline-end: var(--ion-space-200, 8px);
+  -webkit-margin-end: var(--ion-space-200, var(--ion-scale-200, 8px));
+  margin-inline-end: var(--ion-space-200, var(--ion-scale-200, 8px));
 }
 
 .toast-icon,
@@ -364,10 +364,10 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.toast-hue-bold) {
-  --background: var(--ion-bg-neutral-boldest-default, #242424);
-  --background-activated: var(--ion-bg-neutral-boldest-press, #111111);
-  --color: var(--ion-text-inverse, #ffffff);
-  --button-color: var(--ion-text-inverse, #ffffff);
+  --background: var(--ion-bg-neutral-boldest-default, var(--ion-primitives-neutral-1200, #242424));
+  --background-activated: var(--ion-bg-neutral-boldest-press, var(--ion-primitives-base-black, #111111));
+  --color: var(--ion-text-inverse, var(--ion-primitives-base-white, #ffffff));
+  --button-color: var(--ion-text-inverse, var(--ion-primitives-base-white, #ffffff));
 }
 
 :host(.toast-hue-bold.ion-color) .toast-wrapper {
@@ -380,14 +380,14 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.toast-hue-subtle) {
-  --background: var(--ion-bg-neutral-subtlest-default, #ffffff);
-  --background-activated: var(--ion-bg-neutral-subtlest-press, #efefef);
-  --color: var(--ion-text-default, #242424);
-  --button-color: var(--ion-text-link-default, #105cef);
+  --background: var(--ion-bg-neutral-subtlest-default, var(--ion-primitives-base-white, #ffffff));
+  --background-activated: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
+  --color: var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));
+  --button-color: var(--ion-text-link-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef))));
 }
 
 :host(.toast-hue-subtle) .toast-button-cancel {
-  color: var(--ion-icon-subtlest, #626262);
+  color: var(--ion-icon-subtlest, var(--ion-primitives-neutral-800, #626262));
 }
 
 :host(.toast-hue-subtle.ion-color) .toast-wrapper {

package/dist/collection/components/toggle/toggle.ionic.css

@@ -369,23 +369,23 @@ input {
 
 :host {
   --track-background: var(--ion-primitives-neutral-800, #626262);
-  --track-background-checked: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
+  --track-background-checked: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
   --border-radius: var(--ion-border-radius-full, 999px);
-  --focus-ring-color: var(--ion-border-focus-default, #b5c0f7);
-  --focus-ring-width: var(--ion-border-size-050, 2px);
+  --focus-ring-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
+  --focus-ring-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
   --handle-background: var(--ion-primitives-base-white, #ffffff);
   --handle-background-checked: var(--ion-primitives-base-white, #ffffff);
   --handle-border-radius: var(--ion-border-radius-full, 999px);
   --handle-height: var(--ion-scale-500, 20px);
   --handle-max-height: var(--ion-scale-500, 20px);
   --handle-width: var(--ion-scale-500, 20px);
-  --handle-spacing: var(--ion-space-050, 2px);
+  --handle-spacing: var(--ion-space-050, var(--ion-scale-050, 2px));
   --handle-transition: transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms,
     right 110ms ease-in-out 80ms;
   font-size: var(--ion-font-size-350, 0.875rem);
   font-weight: var(--ion-font-weight-regular, 400);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, 24px);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
   width: 100%;
@@ -415,13 +415,13 @@ input {
   font-size: var(--ion-font-size-350, 0.875rem);
   font-weight: var(--ion-font-weight-regular, 400);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, 24px);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
 }
 
 .toggle-bottom .error-text {
-  color: var(--ion-semantics-danger-800, #bf2222);
+  color: var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222));
 }
 
 .toggle-bottom .helper-text {
@@ -483,8 +483,8 @@ input {
   */
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--ion-space-400, 16px);
-  margin-inline-end: var(--ion-space-400, 16px);
+  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
   color: var(--ion-primitives-neutral-1200, #242424);
 }
 
@@ -502,8 +502,8 @@ input {
 * when the label sits at the end.
 */
 :host(.toggle-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: var(--ion-space-400, 16px);
-  margin-inline-start: var(--ion-space-400, 16px);
+  -webkit-margin-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }

package/dist/collection/components/toolbar/toolbar.ionic.css

@@ -164,15 +164,15 @@ Do not edit directly, this file was auto-generated.
   --background: var(--ion-primitives-base-white, #ffffff);
   --color: var(--ion-primitives-neutral-1200, #242424);
   --border-color: currentColor;
-  --padding-top: var(--ion-space-200, 8px);
-  --padding-bottom: var(--ion-space-200, 8px);
-  --padding-start: var(--ion-space-200, 8px);
-  --padding-end: var(--ion-space-200, 8px);
+  --padding-top: var(--ion-space-200, var(--ion-scale-200, 8px));
+  --padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
+  --padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
+  --padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
   --min-height: var(--ion-scale-1400, 56px);
 }
 
 .toolbar-container {
-  gap: var(--ion-space-400, 16px);
+  gap: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 .toolbar-content {
@@ -188,14 +188,14 @@ Do not edit directly, this file was auto-generated.
 }
 
 ::slotted(ion-buttons) {
-  gap: var(--ion-space-200, 8px);
+  gap: var(--ion-space-200, var(--ion-scale-200, 8px));
 }
 
 ::slotted(ion-title) {
-  -webkit-padding-start: var(--ion-space-200, 8px);
-  padding-inline-start: var(--ion-space-200, 8px);
-  -webkit-padding-end: var(--ion-space-200, 8px);
-  padding-inline-end: var(--ion-space-200, 8px);
+  -webkit-padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
+  padding-inline-start: var(--ion-space-200, var(--ion-scale-200, 8px));
+  -webkit-padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
+  padding-inline-end: var(--ion-space-200, var(--ion-scale-200, 8px));
 }
 
 :host(.toolbar-title-default) ::slotted(ion-title) {
@@ -203,10 +203,10 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.toolbar-title-large) ::slotted(ion-title) {
-  -webkit-padding-start: var(--ion-space-400, 16px);
-  padding-inline-start: var(--ion-space-400, 16px);
-  -webkit-padding-end: var(--ion-space-400, 16px);
-  padding-inline-end: var(--ion-space-400, 16px);
+  -webkit-padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  -webkit-padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 :host(.has-end-content) slot[name=end],

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-05-13T11:56:47",
+  "timestamp": "2025-05-21T16:05:20",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.20.0",
@@ -5519,16 +5519,16 @@
         },
         {
           "name": "size",
-          "type": "\"default\" | \"large\" | \"small\" | undefined",
+          "type": "\"default\" | \"large\" | \"medium\" | \"small\" | undefined",
           "complexType": {
-            "original": "'small' | 'default' | 'large'",
-            "resolved": "\"default\" | \"large\" | \"small\" | undefined",
+            "original": "'small' | 'default' | 'medium' | 'large'",
+            "resolved": "\"default\" | \"large\" | \"medium\" | \"small\" | undefined",
             "references": {}
           },
           "mutable": false,
           "attr": "size",
           "reflectToAttr": true,
-          "docs": "Set to `\"small\"` for a button with less height and padding, to `\"default\"`\nfor a button with the default height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.",
+          "docs": "Set to `\"small\"` for a button with less height and padding, to `\"medium\"`\nfor a button with the medium height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.",
           "docsTags": [],
           "values": [
             {
@@ -5539,6 +5539,10 @@
               "value": "large",
               "type": "string"
             },
+            {
+              "value": "medium",
+              "type": "string"
+            },
             {
               "value": "small",
               "type": "string"