@ionic/core 8.5.5-dev.11746635887.17fec492 → 8.5.5-dev.11747232541.1f7a2d34

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

@@ -349,16 +349,13 @@ ion-ripple-effect {
 }
 
 :host {
+  --padding-top: var(--ion-space-0, var(--ion-scale-0, 0px));
+  --padding-end: var(--ion-space-0, var(--ion-scale-0, 0px));
   --padding-bottom: var(--padding-top);
-  --padding-end: var(--ion-space-500, 20px);
   --padding-start: var(--padding-end);
-  --padding-top: var(--ion-space-0, 0px);
-  --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));
   position: relative;
-  min-height: var(--ion-scale-1000, 40px);
-  font-family: var(--ion-font-family, "Inter", sans-serif);
-  font-size: var(--ion-font-size-350, 0.875rem);
 }
 :host::after {
   right: 0;
@@ -374,39 +371,39 @@ ion-ripple-effect {
 }
 
 :host(.button-clear) {
-  --color: var(--ion-color-primary-foreground, var(--ion-text-primary, #0d4bc3));
+  --color: var(--ion-color-primary-foreground, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
 }
 
 :host(.button-solid) {
-  --background-activated: var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, #0d4bc3));
-  --background-hover: var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, #0d4bc3));
+  --background-activated: var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
+  --background-hover: var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
   --background-focused: transparent;
   --background-hover-opacity: 1;
-  --background: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
-  --color: var(--ion-color-primary-contrast, var(--ion-text-inverse, #ffffff));
+  --background: 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)))));
+  --color: var(--ion-color-primary-contrast, var(--ion-text-inverse, var(--ion-primitives-base-white, #ffffff)));
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
 
 :host(.button-outline) {
-  --border-width: var(--ion-border-size-025, 1px);
+  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
   --border-style: var(--ion-border-style-solid, solid);
-  --background-activated: var(--ion-bg-neutral-subtlest-press, #efefef);
+  --background-activated: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
   --background-focused: transparent;
-  --background-hover: var(--ion-bg-neutral-subtlest-press, #efefef);
+  --background-hover: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
   --background-hover-opacity: 1;
-  --border-color: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
-  --color: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
+  --border-color: 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)))));
+  --color: 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)))));
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
 
 :host(.button-clear) {
-  --background-activated: var(--ion-bg-neutral-subtlest-press, #efefef);
+  --background-activated: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
   --background-focused: transparent;
-  --background-hover: var(--ion-bg-neutral-subtlest-press, #efefef);
+  --background-hover: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
   --background-hover-opacity: 1;
-  --color: var(--ion-color-primary-foreground, var(--ion-text-primary, #0d4bc3));
+  --color: var(--ion-color-primary-foreground, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
@@ -420,36 +417,40 @@ ion-ripple-effect {
   color: var(--ion-primitives-neutral-200, #efefef);
 }
 
-/* Extra Small Button */
-:host(.button-xsmall) {
-  --padding-top: var(--ion-space-100, 4px);
-  --padding-end: var(--ion-space-300, 12px);
-  min-height: var(--ion-space-600, 24px);
-  font-size: var(--ion-font-size-300, 0.75rem);
-}
-
 /* Small Button */
 :host(.button-small) {
-  --padding-top: var(--ion-space-200, 8px);
-  --padding-end: var(--ion-space-400, 16px);
-  min-height: var(--ion-scale-800, 32px);
-  font-size: var(--ion-font-size-300, 0.75rem);
+  --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  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, var(--ion-scale-500, 20px));
+  text-decoration: none;
+  text-transform: none;
+  min-height: var(--ion-scale-1000, 40px);
 }
 
-/* Large Button */
-:host(.button-large) {
-  --padding-top: var(--ion-space-400, 16px);
-  --padding-end: var(--ion-space-600, 24px);
-  min-height: var(--ion-scale-1200, 48px);
+/* Medium Button */
+:host(.button-medium) {
+  --padding-end: var(--ion-space-500, var(--ion-scale-500, 20px));
   font-size: var(--ion-font-size-400, 1rem);
+  font-weight: var(--ion-font-weight-medium, 500);
+  letter-spacing: var(--ion-font-letter-spacing-1, 1%);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
+  min-height: var(--ion-scale-1200, 48px);
 }
 
-/* Extra Large Button */
-:host(.button-xlarge) {
-  --padding-top: var(--ion-space-400, 16px);
-  --padding-end: var(--ion-space-800, 32px);
-  min-height: var(--ion-scale-1400, 56px);
+/* Large Button */
+:host(.button-large) {
+  --padding-end: var(--ion-space-700, var(--ion-scale-700, 28px));
   font-size: var(--ion-font-size-500, 1.25rem);
+  font-weight: var(--ion-font-weight-medium, 500);
+  letter-spacing: var(--ion-font-letter-spacing-1, 1%);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
+  min-height: var(--ion-scale-1400, 56px);
 }
 
 /* Button containing only an icon */
@@ -459,18 +460,12 @@ ion-ripple-effect {
   font-size: var(--ion-font-size-400, 1rem);
 }
 
-:host(.button-xsmall) ::slotted(ion-icon[slot=start]),
-:host(.button-xsmall) ::slotted(ion-icon[slot=end]),
-:host(.button-xsmall) ::slotted(ion-icon[slot=icon-only]),
 :host(.button-small) ::slotted(ion-icon[slot=start]),
 :host(.button-small) ::slotted(ion-icon[slot=end]),
 :host(.button-small) ::slotted(ion-icon[slot=icon-only]),
 :host(.button-large) ::slotted(ion-icon[slot=start]),
 :host(.button-large) ::slotted(ion-icon[slot=end]),
-:host(.button-large) ::slotted(ion-icon[slot=icon-only]),
-:host(.button-xlarge) ::slotted(ion-icon[slot=start]),
-:host(.button-xlarge) ::slotted(ion-icon[slot=end]),
-:host(.button-xlarge) ::slotted(ion-icon[slot=icon-only]) {
+:host(.button-large) ::slotted(ion-icon[slot=icon-only]) {
   font-size: inherit;
 }
 
@@ -487,22 +482,12 @@ ion-ripple-effect {
 ::slotted(ion-spinner[slot=start]),
 ::slotted(ion-spinner[slot=end]),
 ::slotted(ion-spinner[slot=icon-only]) {
-  width: var(--ion-space-500, 20px);
-  height: var(--ion-space-500, 20px);
-}
-
-:host(.button-xlarge) ::slotted(ion-spinner) {
-  width: var(--ion-space-600, 24px);
-  height: var(--ion-space-600, 24px);
+  width: var(--ion-space-500, var(--ion-scale-500, 20px));
+  height: var(--ion-space-500, var(--ion-scale-500, 20px));
 }
 
 :host(.button-soft) {
-  --border-radius: var(--ion-border-radius-200, 8px);
-}
-
-:host(.button-soft.button-xsmall),
-:host(.button-soft.button-small) {
-  --border-radius: var(--ion-border-radius-100, 4px);
+  --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
 }
 
 :host(.button-round) {
@@ -510,12 +495,12 @@ ion-ripple-effect {
 }
 
 :host(.button-rectangular) {
-  --border-radius: var(--ion-border-radius-0, 0px);
+  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }
 
 :host(.ion-focused) .button-native {
   outline: var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);
-  outline-offset: var(--ion-border-size-050, 2px);
+  outline-offset: var(--ion-border-size-050, var(--ion-scale-050, 2px));
 }
 
 :host(.button-solid.ion-color.ion-activated) .button-native::after {
@@ -549,55 +534,47 @@ ion-ripple-effect {
   font-size: var(--ion-font-size-500, 1.25rem);
 }
 
-:host(.button-xsmall) ::slotted(ion-icon[slot=start]),
-:host(.button-xsmall) ::slotted(ion-spinner[slot=start]),
 :host(.button-small) ::slotted(ion-icon[slot=start]),
 :host(.button-small) ::slotted(ion-spinner[slot=start]) {
-  -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));
 }
 
 ::slotted(ion-icon[slot=start]),
 ::slotted(ion-spinner[slot=start]) {
-  -webkit-margin-end: var(--ion-space-250, 10px);
-  margin-inline-end: var(--ion-space-250, 10px);
+  -webkit-margin-end: var(--ion-space-250, var(--ion-scale-250, 10px));
+  margin-inline-end: var(--ion-space-250, var(--ion-scale-250, 10px));
 }
 
 :host(.button-large) ::slotted(ion-icon[slot=start]),
-:host(.button-large) ::slotted(ion-spinner[slot=start]),
-:host(.button-xlarge) ::slotted(ion-icon[slot=start]),
-:host(.button-xlarge) ::slotted(ion-spinner[slot=start]) {
-  -webkit-margin-end: var(--ion-space-300, 12px);
-  margin-inline-end: var(--ion-space-300, 12px);
+:host(.button-large) ::slotted(ion-spinner[slot=start]) {
+  -webkit-margin-end: var(--ion-space-300, var(--ion-scale-300, 12px));
+  margin-inline-end: var(--ion-space-300, var(--ion-scale-300, 12px));
 }
 
-:host(.button-xsmall) ::slotted(ion-icon[slot=end]),
-:host(.button-xsmall) ::slotted(ion-spinner[slot=end]),
 :host(.button-small) ::slotted(ion-icon[slot=end]),
 :host(.button-small) ::slotted(ion-spinner[slot=end]) {
-  -webkit-margin-start: var(--ion-space-200, 8px);
-  margin-inline-start: var(--ion-space-200, 8px);
+  -webkit-margin-start: var(--ion-space-200, var(--ion-scale-200, 8px));
+  margin-inline-start: var(--ion-space-200, var(--ion-scale-200, 8px));
 }
 
 ::slotted(ion-icon[slot=end]),
 ::slotted(ion-spinner[slot=end]) {
-  -webkit-margin-start: var(--ion-space-250, 10px);
-  margin-inline-start: var(--ion-space-250, 10px);
+  -webkit-margin-start: var(--ion-space-250, var(--ion-scale-250, 10px));
+  margin-inline-start: var(--ion-space-250, var(--ion-scale-250, 10px));
 }
 
 :host(.button-large) ::slotted(ion-icon[slot=end]),
-:host(.button-large) ::slotted(ion-spinner[slot=end]),
-:host(.button-xlarge) ::slotted(ion-icon[slot=end]),
-:host(.button-xlarge) ::slotted(ion-spinner[slot=end]) {
-  -webkit-margin-start: var(--ion-space-300, 12px);
-  margin-inline-start: var(--ion-space-300, 12px);
+:host(.button-large) ::slotted(ion-spinner[slot=end]) {
+  -webkit-margin-start: var(--ion-space-300, var(--ion-scale-300, 12px));
+  margin-inline-start: var(--ion-space-300, var(--ion-scale-300, 12px));
 }
 
 :host ::slotted(ion-badge[vertical]:not(:empty)) {
-  -webkit-padding-start: var(--ion-space-050, 2px);
-  padding-inline-start: var(--ion-space-050, 2px);
-  -webkit-padding-end: var(--ion-space-050, 2px);
-  padding-inline-end: var(--ion-space-050, 2px);
-  padding-top: var(--ion-space-050, 2px);
-  padding-bottom: var(--ion-space-050, 2px);
+  -webkit-padding-start: var(--ion-space-050, var(--ion-scale-050, 2px));
+  padding-inline-start: var(--ion-space-050, var(--ion-scale-050, 2px));
+  -webkit-padding-end: var(--ion-space-050, var(--ion-scale-050, 2px));
+  padding-inline-end: var(--ion-space-050, var(--ion-scale-050, 2px));
+  padding-top: var(--ion-space-050, var(--ion-scale-050, 2px));
+  padding-bottom: var(--ion-space-050, var(--ion-scale-050, 2px));
 }

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

@@ -134,16 +134,13 @@ export class Button {
         return shape;
     }
     /**
-     * Disable the "xsmall" and "xlarge" sizes if the theme is "ios" or "md"
+     * Get the default size. If size is unset and the button is inside an item,
+     * the default size is "small". Otherwise, it uses the value of size.
      */
     getSize() {
-        const theme = getIonTheme(this);
         const { size } = this;
-        if (size === undefined && this.inItem) {
-            return 'small';
-        }
-        if ((theme === 'ios' || theme === 'md') && (size === 'xsmall' || size === 'xlarge')) {
-            return undefined;
+        if (size === undefined) {
+            return this.inItem ? 'small' : 'medium';
         }
         return size;
     }
@@ -239,7 +236,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: 'aa13cfc27904c24cd16192738b0859c5ea3ea2e0', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '06c18166b656bb4c3aef4c98631e700aacb10517', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -254,7 +251,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: 'bf9a567fc1d5d750497e1dbf0e05c87001a62bc4' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '6cc018bf4ec14040bdfa889aac5d59e1a98c0bb3', class: "button-inner" }, h("slot", { key: '4fb8a7a16b72dde27f073112a37106a2bbb54b4e', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '41124f00a8b8b4a0be25baf8262b6ad745b3480e', name: "start" }), h("slot", { key: '19cc8118cc46a97af30f0cfde90babfd461a69c5' }), h("slot", { key: 'abae6b6ded9af682c81b1f2142623a0a5f3a519d', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: '8a6b9ada215999bc2f43fc7ec381e6ddf875ae95', type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: 'e7db04c5b41edd81854cbdae48dc9413ee3bdac7' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '1b5d5782ff38715b945de0eaea895c2dc487fbcb', class: "button-inner" }, h("slot", { key: 'f6803a054a4e6408ef6801e4e455926d60dd0dbe', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: 'd7f3b15b84a5e8d6b3667214473d335b3bd1a735', name: "start" }), h("slot", { key: '7740a31e403a28da808ddfe88a6de268b6d69974' }), h("slot", { key: '6d85465f8b51fe3845ef1a0966dc26b102e3fccd', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: '0cb8ed9c0c9c7c4624a30cf39dc224d6039549de', type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }
@@ -484,15 +481,15 @@ export class Button {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'xsmall' | 'small' | 'default' | 'large' | 'xlarge'",
-                    "resolved": "\"default\" | \"large\" | \"small\" | \"xlarge\" | \"xsmall\" | undefined",
+                    "original": "'small' | 'default' | 'medium' | 'large'",
+                    "resolved": "\"default\" | \"large\" | \"medium\" | \"small\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "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."
+                    "text": "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."
                 },
                 "attribute": "size",
                 "reflect": true

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

@@ -120,7 +120,7 @@ ion-ripple-effect {
 
 :host {
   --background: var(--ion-primitives-base-white, #ffffff);
-  --border-radius: var(--ion-border-radius-400, 16px);
+  --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
   --color: var(--ion-primitives-neutral-1200, #242424);
 }
 
@@ -129,9 +129,9 @@ ion-ripple-effect {
 }
 
 :host(.card-soft) {
-  --border-radius: var(--ion-border-radius-200, 8px);
+  --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
 }
 
 :host(.card-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/card-content/card-content.ionic.css

@@ -66,23 +66,23 @@ Do not edit directly, this file was auto-generated.
  * convert to a unit other than $baselineUnit.
  */
 .card-content-ionic {
-  -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-400, 16px);
-  padding-bottom: 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));
+  padding-top: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
   display: flex;
   flex-direction: column;
   font-size: var(--ion-font-size-350, 0.875rem);
-  line-height: var(--ion-font-line-height-600, 24px);
-  gap: var(--ion-space-200, 8px);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  gap: var(--ion-space-200, var(--ion-scale-200, 8px));
 }
 .card-content-ionic img {
   margin-left: 0;
   margin-right: 0;
-  margin-top: var(--ion-space-200, 8px);
-  margin-bottom: var(--ion-space-200, 8px);
+  margin-top: var(--ion-space-200, var(--ion-scale-200, 8px));
+  margin-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
 }
 
 ion-card-header + .card-content-ionic {

package/dist/collection/components/card-header/card-header.ionic.css

@@ -77,11 +77,11 @@ Do not edit directly, this file was auto-generated.
  * convert to a unit other than $baselineUnit.
  */
 :host {
-  -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-400, 16px);
-  padding-bottom: var(--ion-space-400, 16px);
-  gap: var(--ion-space-050, 2px);
+  -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-400, var(--ion-scale-400, 16px));
+  padding-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
+  gap: var(--ion-space-050, var(--ion-scale-050, 2px));
 }

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

@@ -140,7 +140,7 @@ Do not edit directly, this file was auto-generated.
   font-size: var(--ion-font-size-400, 1rem);
   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;
 }

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

@@ -287,17 +287,17 @@ input {
    * @prop --focus-ring-width: Width of the focus ring
    * @prop --focus-ring-offset: Offset of the focus ring
    */
-  --border-width: var(--ion-border-size-025, 1px);
+  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
   --border-style: var(--ion-border-style-solid, solid);
   --border-color: var(--ion-primitives-neutral-800, #626262);
   --checkmark-width: var(--ion-scale-400, 16px);
   --checkmark-height: var(--checkmark-width);
-  --focus-ring-color: var(--ion-border-focus-default, #b5c0f7);
-  --focus-ring-width: var(--ion-border-size-050, 2px);
-  --focus-ring-offset: var(--ion-space-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));
+  --focus-ring-offset: var(--ion-space-050, var(--ion-scale-050, 2px));
   --size: var(--ion-scale-600, 24px);
-  --checkbox-background-checked: var(--ion-semantics-primary-base, #105cef);
-  --border-color-checked: var(--ion-semantics-primary-base, #105cef);
+  --checkbox-background-checked: var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)));
+  --border-color-checked: var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)));
   --checkmark-color: var(--ion-primitives-base-white, #ffffff);
   --transition: none;
   z-index: 2;
@@ -323,17 +323,17 @@ input {
 }
 
 :host(.in-item) .label-text-wrapper {
-  margin-top: var(--ion-space-250, 10px);
-  margin-bottom: var(--ion-space-250, 10px);
+  margin-top: var(--ion-space-250, var(--ion-scale-250, 10px));
+  margin-bottom: var(--ion-space-250, var(--ion-scale-250, 10px));
 }
 
 :host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
-  margin-top: var(--ion-space-250, 10px);
-  margin-bottom: var(--ion-space-400, 16px);
+  margin-top: var(--ion-space-250, var(--ion-scale-250, 10px));
+  margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 :host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
-  margin-bottom: var(--ion-space-250, 10px);
+  margin-bottom: var(--ion-space-250, var(--ion-scale-250, 10px));
 }
 
 input {
@@ -382,13 +382,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;
 }
 
 .checkbox-bottom .error-text {
-  color: var(--ion-semantics-danger-800, #bf2222);
+  color: var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222));
 }
 
 .checkbox-bottom .helper-text {
@@ -403,8 +403,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));
 }
 
 /**
@@ -413,8 +413,8 @@ input {
  * when the label sits at the end.
  */
 :host(.checkbox-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;
 }
@@ -427,8 +427,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));
 }
 
 :host(.checkbox-label-placement-stacked) .label-text-wrapper {
@@ -440,7 +440,7 @@ input {
    */
   margin-left: 0;
   margin-right: 0;
-  margin-bottom: var(--ion-space-400, 16px);
+  margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
   /**
    * Label text should not extend
    * beyond the bounds of the checkbox.
@@ -459,10 +459,10 @@ input {
 }
 
 :host(.ion-invalid) {
-  --focus-ring-color: var(--ion-border-focus-error, #faa1a1);
+  --focus-ring-color: var(--ion-border-focus-error, var(--ion-primitives-red-400, #faa1a1));
 }
 :host(.ion-invalid) .native-wrapper {
-  border-color: var(--ion-semantics-danger-800, #bf2222);
+  border-color: var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222));
 }
 
 :host(.checkbox-disabled) .native-wrapper:after {
@@ -483,8 +483,8 @@ input {
 }
 
 :host(.checkbox-disabled.checkbox-checked) .native-wrapper {
-  border-width: var(--ion-border-size-0, 0px);
-  background-color: var(--ion-semantics-primary-base, #105cef);
+  border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
+  background-color: var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)));
 }
 
 @media (any-hover: hover) {
@@ -493,7 +493,7 @@ input {
   }
   :host(:hover.checkbox-checked) .native-wrapper,
   :host(:hover.checkbox-indeterminate) .native-wrapper {
-    background-color: var(--ion-semantics-primary-800, #0f54da);
+    background-color: var(--ion-semantics-primary-800, var(--ion-primitives-blue-800, #0f54da));
   }
 }
 :host(.ion-focused:not(.checkbox-disabled)) .native-wrapper {
@@ -507,19 +507,19 @@ input {
 
 :host(.ion-activated.checkbox-checked) .native-wrapper,
 :host(.ion-activated.checkbox-indeterminate) .native-wrapper {
-  background-color: var(--ion-semantics-primary-900, #0d4bc3);
+  background-color: var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3));
 }
 
 :host(.checkbox-shape-soft) {
-  --border-radius: var(--ion-border-radius-100, 4px);
+  --border-radius: var(--ion-border-radius-100, var(--ion-scale-100, 4px));
 }
 
 :host(.checkbox-size-small.checkbox-shape-soft) {
-  --border-radius: var(--ion-border-radius-025, 2px);
+  --border-radius: var(--ion-border-radius-025, var(--ion-scale-050, 2px));
 }
 
 :host(.checkbox-shape-rectangular) {
-  --border-radius: var(--ion-border-radius-0, 0px);
+  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }
 
 .checkbox-wrapper {

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

@@ -113,33 +113,33 @@ Do not edit directly, this file was auto-generated.
    * @prop --focus-ring-color: Color of the focus ring
    * @prop --focus-ring-width: Width of the focus ring
    */
-  --focus-ring-color: var(--ion-border-focus-default, #b5c0f7);
-  --focus-ring-width: var(--ion-border-size-050, 2px);
-  -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);
-  padding-top: var(--ion-space-150, 6px);
-  padding-bottom: var(--ion-space-150, 6px);
+  --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));
+  -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));
+  padding-top: var(--ion-space-150, var(--ion-scale-150, 6px));
+  padding-bottom: var(--ion-space-150, var(--ion-scale-150, 6px));
   border-radius: var(--border-radius);
   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;
-  gap: var(--ion-space-100, 4px);
+  gap: var(--ion-space-100, var(--ion-scale-100, 4px));
   line-height: var(--ion-font-line-height-full, 100%);
 }
 
 :host(.chip-outline) {
-  border-width: var(--ion-border-size-025, 1px);
+  border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
   border-style: var(--ion-border-style-solid, solid);
 }
 
 :host(.ion-focused) {
-  outline-offset: var(--ion-border-size-050, 2px);
-  outline: var(--ion-border-size-050, 2px) var(--ion-border-style-solid, solid) var(--focus-ring-color);
+  outline-offset: var(--ion-border-size-050, var(--ion-scale-050, 2px));
+  outline: var(--ion-border-size-050, var(--ion-scale-050, 2px)) var(--ion-border-style-solid, solid) var(--focus-ring-color);
 }
 
 @media (any-hover: hover) {
@@ -168,15 +168,15 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.chip-soft) {
-  --border-radius: var(--ion-border-radius-100, 4px);
+  --border-radius: var(--ion-border-radius-100, var(--ion-scale-100, 4px));
 }
 
 :host(.chip-round) {
-  --border-radius: var(--ion-border-radius-400, 16px);
+  --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
 }
 
 :host(.chip-rectangular) {
-  --border-radius: var(--ion-border-radius-0, 0px);
+  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }
 
 ::slotted(ion-icon) {
@@ -203,7 +203,7 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.chip-bold) {
-  --background: var(--ion-bg-neutral-bold-default, #3b3b3b);
+  --background: var(--ion-bg-neutral-bold-default, var(--ion-primitives-neutral-1000, #3b3b3b));
   --color: var(--ion-primitives-base-white, #ffffff);
 }