@ionic/core 8.8.20-dev.11790077030.16543b26 → 8.8.20-dev.11790159710.1cc6cd83

package/dist/collection/components/select-popover/select-popover.ionic.css

@@ -74,19 +74,18 @@
 }
 
 .select-option-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-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, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
   -webkit-padding-start: var(--token-space-0, var(--token-scale-0, 0px));
   padding-inline-start: var(--token-space-0, var(--token-scale-0, 0px));
   -webkit-padding-end: var(--token-space-0, var(--token-scale-0, 0px));
   padding-inline-end: var(--token-space-0, var(--token-scale-0, 0px));
   padding-top: var(--token-space-0, var(--token-scale-0, 0px));
   padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
-  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));
+  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #383e45));
   font-size: var(--token-font-size-350, 0.875rem);
 }
 
@@ -214,15 +213,15 @@ ion-item {
   --border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
   --background-focused: transparent;
   --background-focused-opacity: 1;
-  --background-hover: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
+  --background-hover: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));
   --background-hover-opacity: 1;
-  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));
   --background-activated-opacity: 1;
 }
 
 ion-item.ion-focused.item-checkbox-checked,
 ion-item.ion-focused.item-radio-checked {
-  --background-focused: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc)));
+  --background-focused: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff)));
   --background-focused-opacity: 1;
 }
 
@@ -241,15 +240,14 @@ ion-list ion-radio::part(label) {
 
 ion-list ion-radio::part(label),
 ion-list ion-checkbox::part(label) {
+  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, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
 }
 
 .item-radio-checked,
 .item-checkbox-checked {
-  --background: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc)));
+  --background: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff)));
 }

package/dist/collection/components/select-popover/select-popover.js

@@ -168,9 +168,9 @@ export class SelectPopover {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '1a51583c1c3162d4273ecdee74363a2d87c2e6a2', class: {
+        return (h(Host, { key: '67fce6871134ff1258513a12651eb8cc7360909d', class: {
                 [theme]: true,
-            } }, h("ion-list", { key: 'fbab6b52bca92448690c3551aa479384250d6134' }, header !== undefined && h("ion-list-header", { key: '084cbec55a6ed62e81102b56b0ddcc16ae516bda' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '1e9f91956ccf845e892cb2d8ee52c07186ac6e16' }, h("ion-label", { key: 'a1fa7b5722fc7cc751615af4c7a5bec1a312097c', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'beda52e83abf2470f5ca44f6d7999b952343e51b' }, subHeader), message !== undefined && h("p", { key: '70ef5890727b704e4e5af668c49ebd843522ab73' }, message)))), this.renderOptions(options))));
+            } }, h("ion-list", { key: 'febb96b8416fd9ba31901588b45ffdd7280f66d4' }, header !== undefined && h("ion-list-header", { key: '169cb07093e8c3d79ee8e6e112e380c75e464112' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'c2e1ee0f1efa048c9c0d321102357753ffd3baec' }, h("ion-label", { key: 'e92c50cf699d2d1bd867b9d46bff8d0d8233f56e', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'b4775e6d6db5fef143ed9f91fa7717d214feedd6' }, subHeader), message !== undefined && h("p", { key: '6ee92e9bff861e62c453ca0dfedce0093b8a25fe' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -32,11 +32,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const theme = getIonTheme(this);
-        return (h(Host, { key: '2fd3b86201ab41e66707281970e58af57da0530a', class: {
+        return (h(Host, { key: '370451ee8963b776079f5df365f7bbd70a53b270', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '6793df291a379a32a1649fa1daf3a20d93ae48ea' }, "\u00A0")));
+            } }, h("span", { key: '2b861b4ec86cbd61927ab7b81b13517c99dc94c7' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -250,13 +250,13 @@ svg {
   }
 }
 :host {
-  --color: var(--token-primitives-neutral-800, #626262);
+  --color: var(--token-primitives-neutral-800, #6c727a);
   width: var(--token-scale-700, 28px);
   height: var(--token-scale-700, 28px);
 }
 
 :host(.ion-color-medium) {
-  color: var(--ion-color-medium-subtle-contrast, var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262)));
+  color: var(--ion-color-medium-subtle-contrast, var(--token-primitives-neutral-900, #575c63));
 }
 
 :host(.spinner-lines) line,

package/dist/collection/components/spinner/spinner.js

@@ -56,7 +56,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '52edb7e791b4ef6da62583a477b9a765708fdeae', class: createColorClasses(self.color, {
+        return (h(Host, { key: 'b6559d1626b56a1c63580862263a15798f7d3f71', class: createColorClasses(self.color, {
                 [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/collection/components/split-pane/split-pane.js

@@ -131,12 +131,12 @@ export class SplitPane {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '7305d7fc6f56382299af21c91d11115fc490a4e6', class: {
+        return (h(Host, { key: 'b933156f8f9d8ce418ff0d39526967f9653d6639', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '31ec961127f92d69f80db2b6daa628e32b67bfe4' })));
+            } }, h("slot", { key: '3ec0a11e5506386747dc972ccb094359ca975bae' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab.js

@@ -58,10 +58,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '5fa8404a8d3a55eecf25c630f6a68fe4b3bd6479', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'bd374a124dfd27652db076111c310f67fdbc3743', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '5930c82a0063f3119c99381ba7b1a9434156e4db' })));
+            } }, h("slot", { key: '982276b329d241727b8a6c5c1dc12601c3d75285' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -129,11 +129,11 @@
 }
 :host {
   --background: var(--ion-tab-bar-background, var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff)));
-  --background-activated: var(--ion-tab-bar-background-activated, var(--token-bg-select-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));
+  --background-activated: var(--ion-tab-bar-background-activated, var(--token-bg-select-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff))));
   --background-focused: var(--ion-tab-bar-background-focused, transparent);
-  --border: var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);
-  --color: var(--ion-tab-bar-color, var(--token-primitives-neutral-800, #626262));
-  --color-selected: var(--ion-tab-bar-color-selected, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
+  --border: var(--token-border-size-0, var(--token-scale-0, 0px)) solid var(--ion-tab-bar-border-color, transparent);
+  --color: var(--ion-tab-bar-color, var(--token-primitives-neutral-800, #6c727a));
+  --color-selected: var(--ion-tab-bar-color-selected, var(--token-text-primary, var(--token-semantics-primary-800, var(--token-primitives-blue-800, #0f54da))));
   /*
    * In case there's scrolling, justify the content to the start.
    */
@@ -154,7 +154,7 @@
    */
   min-height: calc(var(--token-scale-1400, 56px) - var(--token-space-100, var(--token-scale-100, 4px)) * 2);
   gap: var(--token-space-300, var(--token-scale-300, 12px));
-  box-shadow: var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));
+  box-shadow: var(--token-elevation-2, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-8, 8px) var(--token-shadow-blur-25, 25px) var(--token-shadow-spread-0, 0px) var(--token-shadow-4, rgba(0, 0, 0, 0.0784313725)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-1, 1px) var(--token-shadow-blur-5, 5px) var(--token-shadow-spread-0, 0px) var(--token-shadow-2, rgba(0, 0, 0, 0.0509803922)));
   /*
    * In case there are more tab buttons than can fit in the tab bar, enable
    * horizontal scrolling.
@@ -210,7 +210,7 @@
 
 :host(.tab-bar-compact.tab-bar-scroll-hidden) {
   transform: translateY(calc(100% + var(--ion-safe-area-bottom, 0) + var(--token-space-1000, var(--token-scale-1000, 40px)))) translateX(-50%);
-  transition: transform var(--token-transition-time-350, 350ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));
+  transition: transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));
 }
 
 :host([slot=top].tab-bar-compact.tab-bar-scroll-hidden) {

package/dist/collection/components/tab-bar/tab-bar.js

@@ -178,14 +178,14 @@ export class TabBar {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '2b3d91345d7242bb69b9df729726de46f4828cd8', role: "tablist", class: createColorClasses(color, {
+        return (h(Host, { key: '749dbd95dd87e73ceea2dab9767a285fa3ccf5e1', role: "tablist", class: createColorClasses(color, {
                 [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
                 'tab-bar-scroll-effect-hide': scrollEffect === 'hide',
                 [`tab-bar-${expand}`]: true,
                 [`tab-bar-${shape}`]: shape !== undefined,
-            }) }, h("slot", { key: '336286b0ee797f63012fc7ddd18671ee58e71e6f' })));
+            }) }, h("slot", { key: '05a13a25a37c76245dad1710ef58ba5e69cf9f6c' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -194,14 +194,13 @@ ion-ripple-effect {
 }
 
 :host {
-  --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --focus-ring-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   --focus-ring-width: var(--token-border-radius-025, var(--token-scale-050, 2px));
+  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-1, 1%);
-  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
+  line-height: var(--token-font-line-height-500, 1.25rem);
   position: relative;
   align-content: center;
   min-width: var(--token-scale-1200, 48px);

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

@@ -93,7 +93,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '0288ce33bbf94c86795966cec12c4c9d76ab2670', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: 'e4d3aaefcdc42677f7818c51ec1ec0a9cbcf8bcf', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -106,7 +106,7 @@ export class TabButton {
                 'ion-selectable': true,
                 [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: '838dd34095ab1a83dc5007ca31b359cec11d179e' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: '31d7246c756321688073c5a008d96da972d46f86', class: "button-inner" }, h("slot", { key: '55addcfbe550b9d30ed10f665ff779cd90dd7d63' })), theme === 'md' && h("ion-ripple-effect", { key: '8cc77748a1ff7c3051aa7827ef181727950f4372', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '1412d080294dd2602696c5657c71553ef35036d3' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: '5daebf815b9b4f8016ce5b4b9d05148c1957a46c', class: "button-inner" }, h("slot", { key: 'e1cbabb911936d21d5b1a4f87d236b962beacbab' })), theme === 'md' && h("ion-ripple-effect", { key: 'd4544a7fb87b8559aaf9d2f0aa4d440201ebdb71', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -165,7 +165,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '85abde8354a794d6c2fbad2416beadcdd34a97ac', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '01f8a0955d0dc3f1c87d51b747fcc5cd6807b79f', name: "top" }), h("div", { key: 'b7d45cf94c459a07509beee32f95c51b1a8b376b', class: "tabs-inner" }, h("slot", { key: 'ff80bc743bc394fc0d7aaac3758841af6542a935' })), h("slot", { key: 'e129c0485ccc27c994e0a7c479d3b65cb7232106', name: "bottom" })));
+        return (h(Host, { key: 'b8c5c75469cb1f1829a217a02555a7da8556454a', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '50b74e3df8ea0e991e096c7438a65fee0ca0f6b5', name: "top" }), h("div", { key: 'ca8d4329381c4b40882bbd31b4f15264cfa2c220', class: "tabs-inner" }, h("slot", { key: '816ffd6d997530e3b100480c9a8e4a51fa51e59c' })), h("slot", { key: '280bdf5ec61789823c7772287d60a26229fe78fa', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.js

@@ -11,9 +11,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Text {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '527c671995f6703ba4a963a310eeac327731359a', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8fc5565ce579f8e2a9eddbaa7c93264291080bce', class: createColorClasses(this.color, {
                 [theme]: true,
-            }) }, h("slot", { key: '5920d06a9ec7f36a815b420a8b62bba7ac9a33b3' })));
+            }) }, h("slot", { key: '5be1d661ee3a6f1f9d9428b59e830672faf475b1' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -541,7 +541,7 @@
 
 :host(.textarea-fill-outline) {
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
 }
 
 :host(.textarea-fill-outline) .textarea-wrapper {
@@ -584,14 +584,14 @@
 }
 
 :host(.textarea-fill-outline.textarea-readonly) {
-  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
 }
 
 :host(.textarea-fill-solid) {
-  --border-color: 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, #ebeef2));
   --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
-  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
+  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
 }
 
 :host(.textarea-fill-solid) .textarea-wrapper {
@@ -611,7 +611,7 @@
 }
 
 :host(.textarea-fill-solid.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
 }
 
 :host(.textarea-fill-solid.has-focus.ion-valid),
@@ -621,35 +621,34 @@
 }
 
 :host(.textarea-fill-solid.textarea-readonly) {
-  --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));
+  --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));
 }
 
 :host(.textarea-fill-solid.textarea-readonly.ion-invalid) {
-  --border-color: rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6);
+  --border-color: rgba(var(--token-semantics-danger-base-rgb, 224, 36, 58), 0.6);
 }
 
 :host(.textarea-fill-solid.textarea-disabled) {
-  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
-  --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, #e6eaee));
+  --border-color: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 :host {
-  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
-  --highlight-color-valid: var(--token-text-success, var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23)));
-  --highlight-color-invalid: var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222));
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
+  --highlight-color-valid: var(--token-text-success, var(--token-semantics-success-900, var(--token-primitives-green-900, #037046)));
+  --highlight-color-invalid: var(--token-semantics-danger-800, var(--token-primitives-red-800, #d2002b));
   --highlight-color-focused: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
-  --placeholder-color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  --placeholder-color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
   --placeholder-opacity: 1;
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
   --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
+  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, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
 }
 
 :host(.ion-color) {
@@ -685,15 +684,15 @@
 }
 
 :host(.textarea-shape-soft) {
-  --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
+  --border-radius: var(--token-shape-soft-lg, 8px);
 }
 
 :host(.textarea-shape-round) {
-  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
+  --border-radius: var(--token-shape-round-xl, 16px);
 }
 
 :host(.textarea-shape-rectangular) {
-  --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
+  --border-radius: var(--token-shape-rectangular-xl, 0px);
 }
 
 :host([auto-grow]) .textarea-wrapper-inner {
@@ -763,21 +762,20 @@
   -webkit-padding-end: var(--padding-end);
   padding-inline-end: var(--padding-end);
   padding-top: var(--token-space-100, var(--token-scale-100, 4px));
+  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, var(--token-scale-500, 20px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-500, 1.25rem);
 }
 
 .textarea-bottom .error-text {
-  color: var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)));
+  color: var(--token-text-danger, var(--token-semantics-danger-800, var(--token-primitives-red-800, #d2002b)));
 }
 
 .textarea-bottom .helper-text,
 .textarea-bottom .counter {
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 :host(.has-focus.ion-valid) .helper-text {
@@ -785,15 +783,14 @@
 }
 
 .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, var(--token-scale-500, 20px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-500, 1.25rem);
   max-width: var(--token-scale-5000, 200px);
   transition: color var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
-  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));
+  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #383e45));
 }
 
 :host(.label-floating) .label-text-wrapper {
@@ -850,7 +847,7 @@ ion-icon {
 }
 
 :host(.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
 }
 
@@ -860,28 +857,28 @@ ion-icon {
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+    --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   }
 }
 :host(.textarea-disabled) {
-  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
-  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f3f3f3));
-  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e0e0e0));
-  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
+  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f6f7fa));
+  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e6eaee));
+  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text,
 :host(.textarea-disabled) .textarea-bottom .counter,
 :host(.textarea-disabled) .label-text-wrapper {
-  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :host(.textarea-disabled.has-focus.ion-valid) {
-  --border-color: rgba(var(--token-semantics-success-base-rgb, 27, 164, 51), 0.6);
+  --border-color: rgba(var(--token-semantics-success-base-rgb, 74, 174, 131), 0.6);
 }
 
 :host(.textarea-disabled.ion-touched.ion-invalid) {
-  --border-color: rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6);
+  --border-color: rgba(var(--token-semantics-danger-base-rgb, 224, 36, 58), 0.6);
 }
 
 :host(.textarea-disabled.ion-color) {
@@ -894,5 +891,5 @@ ion-icon {
 }
 
 :host(.textarea-readonly) {
-  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f3f3f3));
+  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f6f7fa));
 }

package/dist/collection/components/textarea/textarea.js

@@ -565,7 +565,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '401c2b409b8d0a79700fdd3433fffe9b78032142', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a67ef5f3107776dcd8490bdd2af4a373ae422899', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -577,7 +577,7 @@ export class Textarea {
                 'in-item': inItem,
                 'textarea-disabled': disabled,
                 'textarea-readonly': readonly,
-            }) }, h("label", { key: '41a96f91506e7bbd6bf8b7edd336de7452af5977', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'b487ba8f575ade22162b65ce5295a58fcba4cd4a', class: "textarea-wrapper-inner" }, 
+            }) }, h("label", { key: '7a8605454eb66d87a4b49ffd28e609a633eae09c', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '8b24d96089d11f659dbd5adfcbf317ec34742333', class: "textarea-wrapper-inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -587,7 +587,7 @@ export class Textarea {
          * <label> element, ensuring that clicking the label text
          * focuses the textarea.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: '853f851d34b9357a5c5f98cad7bf857ae292e8a8', class: "textarea-outline" }), h("div", { key: '6830c067c5a12a4b847e650bf1507a3be5086761', class: "start-slot-wrapper" }, h("slot", { key: 'b7d4fa13c14ef65d95dab7af8764a0c32a62bdea', name: "start" })), h("div", { key: '9e4d06aea5899b7ca43dbd091d58e14a01f85913', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: 'dc4d449f5bf9e8ce38d68cccb0b992ec610c17fa', class: "native-textarea", part: "native", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'ac802652cd0f18f2114be2b89f0cedf9b6be2703', class: "end-slot-wrapper" }, h("slot", { key: '07cf7a81e6beafc4f44b00fd71ef9abddf61a31d', name: "end" }))), shouldRenderHighlight && h("div", { key: '104bc7640740eee4ca026cd0c6a55954ffad71d0', class: "textarea-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: '91a7ea7b6f6fccc473b9e058281e5437c00a9b5d', class: "textarea-outline" }), h("div", { key: 'ba641e63d5aaf2ddb291c875f57181d1c93a2b26', class: "start-slot-wrapper" }, h("slot", { key: '351684d41a2b080541a29e0d9e90dd50747b52dc', name: "start" })), h("div", { key: '5c0793742ff6cc327582c3d78d85c28fa8238a40', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: '9cf5c908e3fcd54af07c351dcf0bb91c853f1349', class: "native-textarea", part: "native", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'e47ffe0bf8e460a7cb205ed35a1107b44687116d', class: "end-slot-wrapper" }, h("slot", { key: '57d035b5f1db373b8488b129c8d3552eb8e630ac', name: "end" }))), shouldRenderHighlight && h("div", { key: '1259ad761b68aea69a1ae8b61a6bbdee6c071b7b', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/thumbnail/thumbnail.js

@@ -10,9 +10,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '2b0905b5da4441e83a763cdde3b44cae378185a0', class: {
+        return (h(Host, { key: 'fdf9d92949a1e8cf6faded77ffed084f74fc040b', class: {
                 [theme]: true,
-            } }, h("slot", { key: '0f53fb6c47548f8837f2c8b4276716211f4234c9' })));
+            } }, h("slot", { key: 'e1b1439c035d9a9503efd1c1a04aed9f4e8e0af7' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -107,21 +107,19 @@
 }
 
 :host {
+  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-450, 1.125rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-700, 1.75rem);
   box-sizing: border-box;
   pointer-events: none;
 }
 
 :host(.title-large) {
+  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-700, 1.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-900, var(--token-scale-900, 36px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-900, 2.25rem);
 }

package/dist/collection/components/title/title.js

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '1878a733596f19a7de5f90f771541340af63d2a5', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd64e86bed418cba707d4a26c9274f18ed06c0e9e', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '1f4b9fd0e888ec921c28a6d2e1f20fe7071f7582', class: "toolbar-title" }, h("slot", { key: '70fb5eebf1723136582cc72c2959efc4596c3b6c' }))));
+            }) }, h("div", { key: '386a71e974cde0bfbf5b655d69ed5f718de8ce48', class: "toolbar-title" }, h("slot", { key: '8aa804c9e1b11574a42268805d3117a085e699b4' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }