@ionic/core 8.8.20-dev.11790063553.1c664fbb → 8.8.20-dev.11790070024.16543b26

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 ion-header {
   display: block;
   position: relative;
@@ -227,7 +228,7 @@ ion-header {
   z-index: 10;
 }
 ion-header.header-divider {
-  border-bottom: var(--token-border-size-025, var(--token-scale-025, 1px)) solid var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));
+  border-bottom: var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5));
 }
 
 ion-toolbar + ion-toolbar {
@@ -242,9 +243,54 @@ ion-toolbar + ion-toolbar {
     top: 0;
     bottom: 0;
     position: absolute;
-    backdrop-filter: saturate(180%) blur(var(--token-scale-100, 4px));
+    pointer-events: none;
+  }
+  /**
+   * Figma / iOS Settings progressive blur:
+   * vertical (X 50% → 50%), 64px at Y 32.5% easing to 0px at Y 91%.
+   * Light blurs reach farther down; heavy blurs stay at the top.
+   */
+  .header-translucent-ionic .header-background-blur,
+  .header-translucent-ionic .header-background-blur-layer {
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+  }
+  .header-translucent-ionic .header-background-blur-layer:nth-child(1) {
+    backdrop-filter: blur(var(--token-scale-025, 1px));
+    mask-image: linear-gradient(to bottom, #000 82.64%, transparent 91%);
+  }
+  .header-translucent-ionic .header-background-blur-layer:nth-child(2) {
+    backdrop-filter: blur(var(--token-scale-050, 2px));
+    mask-image: linear-gradient(to bottom, #000 74.29%, transparent 82.64%);
+  }
+  .header-translucent-ionic .header-background-blur-layer:nth-child(3) {
+    backdrop-filter: blur(var(--token-scale-100, 4px));
+    mask-image: linear-gradient(to bottom, #000 65.93%, transparent 74.29%);
+  }
+  .header-translucent-ionic .header-background-blur-layer:nth-child(4) {
+    backdrop-filter: blur(var(--token-scale-200, 8px));
+    mask-image: linear-gradient(to bottom, #000 57.57%, transparent 65.93%);
+  }
+  .header-translucent-ionic .header-background-blur-layer:nth-child(5) {
+    backdrop-filter: blur(var(--token-scale-400, 16px));
+    mask-image: linear-gradient(to bottom, #000 49.21%, transparent 57.57%);
+  }
+  .header-translucent-ionic .header-background-blur-layer:nth-child(6) {
+    backdrop-filter: blur(var(--token-scale-800, 32px));
+    mask-image: linear-gradient(to bottom, #000 40.86%, transparent 49.21%);
+  }
+  .header-translucent-ionic .header-background-blur-layer:nth-child(7) {
+    backdrop-filter: blur(var(--token-scale-1600, 64px));
+    mask-image: linear-gradient(to bottom, #000 32.5%, transparent 40.86%);
   }
   .header-translucent-ionic ion-toolbar {
-    --opacity: 0.7;
+    --background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0)
+    );
   }
 }

package/dist/collection/components/header/header.js

@@ -246,7 +246,7 @@ export class Header {
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
                 'header-scroll-effect-hide': hasHide,
-            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'fd5ff245ae0166e5e1d50936cacc98c90625db48', class: "header-background" }), h("slot", { key: '1baa31af87b9eb6406a21073ec65afa191dfbb3d' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && (h("div", { key: '5179b806abb6f04ed294dc50166c4f014028a4e3', class: "header-background" }, theme === 'ionic' && (h("div", { key: '4c9d23456672b5bd4ce55280ec6f3e6c39f162cc', class: "header-background-blur", "aria-hidden": "true" }, h("div", { key: '9b9da46049e24390491b2b97ab20863f6fefc079', class: "header-background-blur-layer" }), h("div", { key: 'fc2899267eea7fdd415cc4f394fb469188bfae50', class: "header-background-blur-layer" }), h("div", { key: '8a9747c21d2bd92670deeec8022a37409fd349c4', class: "header-background-blur-layer" }), h("div", { key: '03abc8d5e1e8554963a7f652349ab65430d14db9', class: "header-background-blur-layer" }), h("div", { key: '6a481b7894c44b37d8e3569784a3b6a1191fba09', class: "header-background-blur-layer" }), h("div", { key: '8e4cf985b7c58a836316baa47c35dbaac765f658', class: "header-background-blur-layer" }), h("div", { key: '4ce7402a8ea8aa8253fc2e69e614c50c22ae2c9d', class: "header-background-blur-layer" }))))), h("slot", { key: '1e5ae6dddd080197c7801ed58fb22b9f237b6099' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/img/img.js

@@ -80,9 +80,9 @@ export class Img {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'ba84621055567b2a35387709d9d89b97ad853274', class: {
+        return (h(Host, { key: '790a50b25c8b38214d586d204d2589f878a4362e', class: {
                 [theme]: true,
-            } }, h("img", { key: '9d6118bbf69e2cccbb0603802c03b9a0d101e2c3', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+            } }, h("img", { key: 'a526a84d0da174a7f37f2e1be4946eeb7f7c50ea', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     static get is() { return "ion-img"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/infinite-scroll/infinite-scroll.js

@@ -264,7 +264,7 @@ export class InfiniteScroll {
     render() {
         const theme = getIonTheme(this);
         const disabled = this.disabled;
-        return (h(Host, { key: 'e3a3cde079dfd6f07e565eb462765df757cbb128', class: {
+        return (h(Host, { key: '472373c70ceeb916912025d122865ec0bdd8dea2', class: {
                 [theme]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js

@@ -29,11 +29,11 @@ export class InfiniteScrollContent {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '263a27297159ced042f7552a1e14b8c6aba62fa8', class: {
+        return (h(Host, { key: '8862ba3855da134e72a07948337bd98f1650e6b3', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${theme}`]: true,
-            } }, h("div", { key: 'ee38d3c52df9dc5de186406b3087f20917a17252', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: 'e2348727f79a26f52f42641d4334a0ba9d4aa03e', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '41be6f2747f3af5f46c8738e2ef56083ecd95e99', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, h("div", { key: '30ff29c1b79af534c027ca60a4f108e06be95d3b', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: 'b986cd6396dc2cfca6c6bdf035b133d0c8bf0150', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '1ab2391ab7fecf4c5fbbe4d4227615be2bcab02c', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get is() { return "ion-infinite-scroll-content"; }
     static get originalStyleUrls() {

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

@@ -523,12 +523,12 @@
 
 :host(.input-fill-outline) {
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-  --border-color: var(--token-primitives-neutral-500, #9fa5ad);
+  --border-color: var(--token-primitives-neutral-500, #a2a2a2);
 }
 
 :host(.input-fill-solid) {
-  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
-  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
+  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
+  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
 }
 
 /**
@@ -546,17 +546,17 @@
  */
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
+    --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
   }
 }
 :host(.input-fill-solid.input-disabled) {
-  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
-  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
+  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
+  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
 }
 
 :host(.input-fill-solid.input-readonly) {
-  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
-  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
+  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
+  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
 }
 
 /**
@@ -564,21 +564,22 @@
  * much darker on focus.
  */
 :host(.input-fill-solid.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
+  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
 }
 
 :host {
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --highlight-color-valid: var(--token-semantics-success-900, var(--token-primitives-green-900, #037046));
-  --highlight-color-invalid: var(--token-border-danger-default, var(--token-semantics-danger-600, var(--token-primitives-red-600, #ef5264)));
-  --placeholder-color: var(--token-primitives-neutral-800, #6c727a);
+  --highlight-color-valid: var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23));
+  --highlight-color-invalid: var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));
+  --placeholder-color: var(--token-primitives-neutral-800, #626262);
   --placeholder-opacity: 1;
-  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
 }
 
 .input-outline {
@@ -706,15 +707,15 @@
 }
 
 :host(.input-shape-soft) {
-  --border-radius: var(--token-shape-soft-xl, 12px);
+  --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
 }
 
 :host(.input-shape-round) {
-  --border-radius: var(--token-shape-round-xl, 16px);
+  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
 }
 
 :host(.input-shape-rectangular) {
-  --border-radius: var(--token-shape-rectangular-xl, 0px);
+  --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
 }
 
 :host(.input-size-medium) ion-input-password-toggle {
@@ -764,12 +765,12 @@
 .input-clear-icon {
   width: var(--token-scale-400, 16px);
   height: var(--token-scale-400, 16px);
-  color: var(--token-primitives-neutral-1000, #383e45);
+  color: var(--token-primitives-neutral-1000, #3b3b3b);
 }
 
 .input-clear-icon:focus-visible {
   border-radius: var(--token-border-radius-100, var(--token-scale-100, 4px));
-  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) solid var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
+  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
   opacity: 1;
 }
 
@@ -796,12 +797,13 @@
 }
 
 .label-text-wrapper {
-  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-500, 1.25rem);
-  color: var(--token-primitives-neutral-1000, #383e45);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
+  text-decoration: none;
+  text-transform: none;
+  color: var(--token-primitives-neutral-1000, #3b3b3b);
 }
 
 :host(.label-floating) .label-text-wrapper {
@@ -813,20 +815,21 @@
   padding-right: 0;
   padding-top: var(--token-space-100, var(--token-scale-100, 4px));
   padding-bottom: 0;
-  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
+  text-decoration: none;
+  text-transform: none;
 }
 
 .input-bottom .error-text {
-  color: var(--token-text-danger, var(--token-semantics-danger-800, var(--token-primitives-red-800, #d2002b)));
+  color: var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)));
 }
 
 .input-bottom .helper-text,
 .input-bottom .counter {
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
 }
 
 :host(.has-focus.ion-valid) .helper-text {
@@ -840,29 +843,29 @@
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: var(--token-primitives-neutral-600, #7e858e);
+    --border-color: var(--token-primitives-neutral-600, #8c8c8c);
   }
 }
 :host(.input-disabled) {
-  --color: var(--token-primitives-neutral-500, #9fa5ad);
-  --background: var(--token-primitives-neutral-100, #f6f7fa);
-  --border-color: var(--token-primitives-neutral-300, #e6eaee);
-  --placeholder-color: var(--token-primitives-neutral-500, #9fa5ad);
+  --color: var(--token-primitives-neutral-500, #a2a2a2);
+  --background: var(--token-primitives-neutral-100, #f3f3f3);
+  --border-color: var(--token-primitives-neutral-300, #e0e0e0);
+  --placeholder-color: var(--token-primitives-neutral-500, #a2a2a2);
   pointer-events: none;
 }
 
 :host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text,
 :host(.input-disabled) .input-bottom .counter,
 :host(.input-disabled) .label-text-wrapper {
-  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
+  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
 }
 
 :host(.input-disabled.has-focus.ion-valid) {
-  --border-color: rgba(var(--token-semantics-success-base-rgb, 74, 174, 131), 0.6);
+  --border-color: rgba(var(--token-semantics-success-base-rgb, 27, 164, 51), 0.6);
 }
 
 :host(.input-disabled.ion-touched.ion-invalid) {
-  --border-color: rgba(var(--token-semantics-danger-base-rgb, 224, 36, 58), 0.6);
+  --border-color: rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6);
 }
 
 :host(.input-disabled.ion-color) {
@@ -875,11 +878,11 @@
 }
 
 :host(.input-readonly) {
-  --background: var(--token-primitives-neutral-100, #f6f7fa);
+  --background: var(--token-primitives-neutral-100, #f3f3f3);
 }
 
 :host(.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
+  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
   --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
 }
 

package/dist/collection/components/input/input.js

@@ -622,7 +622,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'f4009568b582fa080103dfb3f490595d5d7e9706', class: createColorClasses(this.color, {
+        return (h(Host, { key: '3f626529b81af07aad58e0bf6402b3521821ad5a', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -635,7 +635,7 @@ export class Input {
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, h("label", { key: 'a05502716afcf5d286f197131619b2bc57ba61e0', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'de4621c5eff21e26197f28a3e66217fcae449c75', class: "native-wrapper", onClick: this.onLabelClick }, 
+            }) }, h("label", { key: '43e8e13265ce166f0c6a3e317398bf6088876042', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '18e8078a53211ea0a3b4f6851a3aa7bcdc457bc4', class: "native-wrapper", onClick: this.onLabelClick }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -645,10 +645,10 @@ export class Input {
          * <label> element, ensuring that clicking the label text
          * focuses the input.
          */
-        theme === 'ionic' && h("div", { key: '79e084dd8d7b0f530ea6518ee6f2ceb2ac099a8e', class: "input-outline" }), h("slot", { key: 'a4d0f148035c0f8afca5171139a05665d778bd07', name: "start" }), h("input", Object.assign({ key: 'f399d498b4c289571a114347c08c2ae16266ba6f', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: 'f6672256dfebae3bae35afd61d26bb705e8f268c', "aria-label": "reset", type: "button", class: {
+        theme === 'ionic' && h("div", { key: '2715403a901a35f5902bd52db5c3278d66973153', class: "input-outline" }), h("slot", { key: '1497a9896c2238763c16a49eb05858c0bc74c4d2', name: "start" }), h("input", Object.assign({ key: '3bd50146be5d1dd3f24ed235a73e4236a7e39fe1', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: '945eda10bf4f11159db77e3e2ea75667f14fbfce', "aria-label": "reset", type: "button", class: {
                 'input-clear-icon': true,
                 'input-clear-button-pressed': this.isClearButtonPressed,
-            }, onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: this.clearTextInput }, h("ion-icon", { key: '999e8ec2b4c1614ce8f396b6a3e2ff26cb41dfbd', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: '2d0df6c7dd9dc17d8bd5e33b9eac1e11a25dd874', name: "end" })), shouldRenderHighlight && h("div", { key: 'f80b2c9fe4dfbb038e6c7b5a98e775cdd5ef6a21', class: "input-highlight" })), this.renderBottomContent()));
+            }, onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: this.clearTextInput }, h("ion-icon", { key: 'c185e10011fd3074114c7a46a0da7e7725e4a4cf', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: '2b35874e7fafe28fcaee7b41bf37a44d9e21a6bd', name: "end" })), shouldRenderHighlight && h("div", { key: 'bfbc03ad07b12ca368071c3dc82ae8f686bd550e', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input-otp/input-otp.ionic.css

@@ -242,22 +242,23 @@
   --padding-end: var(--token-space-0, var(--token-scale-0, 0px));
   --padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
   --padding-start: var(--token-space-0, var(--token-scale-0, 0px));
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
   --min-width: var(--token-scale-1000, 40px);
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-style: solid;
-  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
+  --border-style: var(--token-border-style-solid, solid);
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
   --separator-width: var(--token-scale-200, 8px);
   --separator-border-radius: var(--token-border-radius-full, 999px);
-  --separator-color: var(--token-bg-neutral-subtle-press, var(--token-primitives-neutral-300, #e6eaee));
-  --highlight-color-focused: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
-  --highlight-color-valid: var(--token-border-success, var(--token-semantics-success-500, var(--token-primitives-green-500, #94d9bb)));
-  --highlight-color-invalid: var(--token-border-danger-default, var(--token-semantics-danger-600, var(--token-primitives-red-600, #ef5264)));
-  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
+  --separator-color: var(--token-bg-neutral-subtle-press, var(--token-primitives-neutral-400, #d5d5d5));
+  --highlight-color-focused: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --highlight-color-valid: var(--token-border-success, var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23)));
+  --highlight-color-invalid: var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
 }
 
 :host(.has-focus) .native-input:focus {
@@ -265,12 +266,13 @@
 }
 
 .input-otp-description {
-  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-500, 1.25rem);
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
+  text-decoration: none;
+  text-transform: none;
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
 }
 
 :host(.input-otp-size-small) {
@@ -298,15 +300,15 @@
 }
 
 :host(.input-otp-shape-round) {
-  --border-radius: var(--token-shape-round-xl, 16px);
+  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
 }
 
 :host(.input-otp-shape-soft) {
-  --border-radius: var(--token-shape-soft-xl, 12px);
+  --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
 }
 
 :host(.input-otp-shape-rectangular) {
-  --border-radius: var(--token-shape-rectangular-xl, 0px);
+  --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
 }
 
 :host(.input-otp-fill-outline) {
@@ -314,31 +316,31 @@
 }
 
 :host(.input-otp-fill-solid) {
-  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
-  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
+  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
+  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
 }
 
 :host(.input-otp-disabled) {
-  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
+  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
 }
 
 :host(.input-otp-fill-outline.input-otp-disabled) {
-  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f6f7fa));
-  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e6eaee));
+  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f3f3f3));
+  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e0e0e0));
 }
 
 :host(.input-otp-fill-outline.input-otp-readonly) {
-  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f6f7fa));
+  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f3f3f3));
 }
 
 :host(.input-otp-fill-solid.input-otp-disabled) {
-  --border-color: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
-  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
+  --border-color: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
+  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
 }
 
 :host(.input-otp-fill-solid.input-otp-readonly) {
-  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
-  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
+  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
+  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
 }
 
 :host(.ion-color) {
@@ -354,14 +356,14 @@
 :host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,
 :host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,
 :host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input {
-  border-color: var(--ion-color-danger, var(--token-bg-danger-base-default, var(--token-semantics-danger-700, var(--token-primitives-red-700, #e0243a))));
+  border-color: var(--ion-color-danger, var(--token-bg-danger-base-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222))));
 }
 
 :host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,
 :host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,
 :host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,
 :host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input {
-  border-color: var(--ion-color-success, var(--token-bg-success-base-default, var(--token-semantics-success-800, var(--token-primitives-green-800, #038855))));
+  border-color: var(--ion-color-success, var(--token-bg-success-base-default, var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23))));
 }
 
 :host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input {

package/dist/collection/components/input-otp/input-otp.js

@@ -680,7 +680,7 @@ export class InputOTP {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
-        return (h(Host, { key: '2bdd205b13281373a43d1a86a25df950a6f36ae1', class: createColorClasses(color, {
+        return (h(Host, { key: '9c843d78384ce66c409803c65c763a3d535ecbde', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -688,10 +688,10 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", Object.assign({ key: 'b82d198138929327cd5429bbeb482248935ae88d', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper", part: "container" }, h("input", { class: "native-input", part: "native", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator", part: "separator" }))))), h("div", { key: '0bb5444d4e653bb7310abec502f5b1d76e681c37', class: {
+            }) }, h("div", Object.assign({ key: 'ffdebcaf449c99bbf93f366a479c26aabe1ef9fb', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper", part: "container" }, h("input", { class: "native-input", part: "native", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator", part: "separator" }))))), h("div", { key: '89e1799134b619f5193d3f7e3dac95563dad701e', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            }, part: "description" }, h("slot", { key: 'f717bda988a6e9b97d67025c1d3163d838f27bb5' }))));
+            }, part: "description" }, h("slot", { key: '37269630d0efac337816d53250aa29d53e21a6bc' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css

@@ -60,7 +60,7 @@
  * convert to a unit other than $baselineUnit.
  */
 :host ion-button {
-  --color: var(--token-primitives-neutral-800, #6c727a);
+  --color: var(--token-primitives-neutral-800, #626262);
   --margin-end: calc(-1 * var(--padding-end));
   --padding-end: inherit;
   --icon-size: var(--token-font-size-400, 1rem);

package/dist/collection/components/input-password-toggle/input-password-toggle.js

@@ -94,16 +94,16 @@ export class InputPasswordToggle {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode(this);
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: 'f11e3bf4d3255e003aec504e6dd3ee1e0caaf767', class: createColorClasses(color, {
+        return (h(Host, { key: 'eab97f9b8dc592cd312f54c2521c66053b0b17e4', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: '5bba43f7755857fd9347612bb906c389b60386b4', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: 'b3a2538e0a711255dfe6dae0fe3fc835cfb6e711', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'c0eb0e4e2f3e9553bfd519ff655064c9f62af406', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '46ec7ac0708091e5a9ffb7a990ef38e5451d40c2', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     static get is() { return "ion-input-password-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -409,12 +409,12 @@ ion-ripple-effect {
 
 :host {
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
   --background-activated-opacity: 1;
-  --border-color: var(--token-primitives-neutral-300, #e6eaee);
-  --border-style: solid;
+  --border-color: var(--token-primitives-neutral-300, #e0e0e0);
+  --border-style: var(--token-border-style-solid, solid);
   --border-width: 0 0 var(--token-border-size-025, var(--token-scale-025, 1px)) 0;
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
   --detail-icon-font-size: var(--token-scale-600, 24px);
   --detail-icon-opacity: 1;
   --min-height: var(--token-scale-1800, 72px);
@@ -422,11 +422,12 @@ ion-ripple-effect {
   --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
   --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
   --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
-  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-400, 1rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
 }
 
 .item-inner {
@@ -448,7 +449,7 @@ slot[name=end]::slotted(*) {
 }
 
 ::slotted(ion-icon:not(.item-detail-icon)) {
-  color: var(--token-primitives-neutral-1000, #383e45);
+  color: var(--token-primitives-neutral-1000, #3b3b3b);
   font-size: var(--token-scale-1000, 40px);
 }
 
@@ -470,7 +471,7 @@ slot[name=end]::slotted(*) {
   top: 0;
   bottom: 0;
   outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
-  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) solid var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
+  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
   position: absolute;
   outline-offset: calc(var(--token-border-size-050, var(--token-scale-050, 2px)) * -1);
   content: "";

package/dist/collection/components/item-divider/item-divider.js

@@ -28,11 +28,11 @@ export class ItemDivider {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'dc73f348b5376faa40ba4bc6bba3d5c9e5ec5ab2', class: createColorClasses(this.color, {
+        return (h(Host, { key: '5990804572ae0cc00b7b290936cfb6c0e171cff3', class: createColorClasses(this.color, {
                 [theme]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: '0f535b2cf91f2ec042aa59a89498cfa0e4d541a0', name: "start" }), h("div", { key: '867c8c1a1bd273a5f5018f77785f11d58152e8b9', class: "item-divider-inner", part: "inner" }, h("div", { key: 'c32b2a5658d27cf5d8cd8ffbfa476c02755e1afd', class: "item-divider-wrapper", part: "container" }, h("slot", { key: 'f8b0fea29a910cd2e36301586532be3a8348c31e' })), h("slot", { key: '418750f630c851cf04b6a278c1666c6cf33c113c', name: "end" }))));
+            }) }, h("slot", { key: '2745ca34238e09bfc82248d72f8f01f53b94eb67', name: "start" }), h("div", { key: '99ca991cff1f7719bd4084df4fc9c3f382bf20c4', class: "item-divider-inner", part: "inner" }, h("div", { key: '4f8e616d95de43b8482911742f7a1dab507e60ce', class: "item-divider-wrapper", part: "container" }, h("slot", { key: '17aa7cd995163a6f33cd99a09158bdfd39a1fdd9' })), h("slot", { key: 'a57cdbff48ebd734a6d4d4b5087b9f495f1f4b8e', name: "end" }))));
     }
     static get is() { return "ion-item-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item-group/item-group.js

@@ -10,7 +10,7 @@ import { getIonTheme } from "../../global/ionic-global";
 export class ItemGroup {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '017c8f7cd0258e1864423337ddd1b1cb522f64ed', role: "group", class: {
+        return (h(Host, { key: 'a0ecd0b7e55cc9680ca196f84c4d9520463910eb', role: "group", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-group-${theme}`]: true,