@ionic/core 9.0.3-dev.11788456135.1ab1d6cd → 9.0.3-dev.11790116791.11c9cd1e

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

@@ -351,16 +351,15 @@
   --knob-size: var(--token-scale-600, 24px);
   --knob-handle-size: var(--token-scale-1100, 44px);
   --bar-height: var(--token-scale-200, 8px);
-  --bar-background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));
+  --bar-background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-100, #f6f7fa));
   --bar-background-active: 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)))));
   --bar-border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
   --height: var(--token-scale-1100, 44px);
+  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);
   z-index: var(--token-z-index-100, 100);
 }
 
@@ -468,24 +467,24 @@
   min-width: var(--token-scale-700, 28px);
   transform: translate3d(0, -100%, 0);
   background: transparent;
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
   font-size: var(--token-font-size-300, 0.75rem);
   text-align: center;
 }
 
 .range-knob {
   border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  border-style: var(--token-border-style-solid, solid);
+  border-style: solid;
   border-color: var(--token-border-primary, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));
   box-sizing: border-box;
 }
 
 :host(.range-disabled) {
-  --bar-background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));
+  --bar-background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-100, #f6f7fa));
 }
 :host(.range-disabled) .range-knob {
-  border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
-  background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f3f3f3));
+  border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
+  background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f6f7fa));
 }
 
 :host(.range-label-placement-start) .label-text-wrapper {
@@ -558,10 +557,10 @@
 
 .range-knob-handle.ion-focused .range-knob {
   outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
-  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));
+  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)));
 }
 
 .range-knob-handle.ion-activated .range-knob,
 .range-knob-handle.range-knob-pressed .range-knob {
-  background: var(--token-bg-input-press, var(--token-primitives-neutral-200, #eae9e9));
+  background: var(--token-bg-input-press, var(--token-primitives-neutral-200, #ebeef2));
 }

package/dist/collection/components/refresher-content/refresher-content.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretLeftFill from "@phosphor-icons/core/assets/fill/caret-left-fill.svg";
 import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
@@ -34,6 +33,14 @@ export class RefresherContent {
             this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'circular'));
         }
     }
+    /**
+     * Get the icon to use for the arrow icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get refresherArrowIcon() {
+        return config.get('refresherArrowIcon', caretBackSharp);
+    }
     renderPullingText() {
         const { customHTMLEnabled, pullingText } = this;
         if (customHTMLEnabled) {
@@ -52,10 +59,9 @@ export class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const theme = getIonTheme(this);
-        const arrowIcon = theme === 'ionic' ? caretLeftFill : caretBackSharp;
-        return (h(Host, { key: '264b9869eb2357cc2acb3d2abde9538f2486bc60', class: {
+        return (h(Host, { key: '79641f5cfcbae77afd812b4758984ecb191dda29', class: {
                 [theme]: true,
-            } }, h("div", { key: '4b315df6bfeddc0e8d02435e4049970930858478', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'fc5debec928ae7d96ba64c814a35d6d372e60b02', class: "refresher-pulling-icon" }, h("div", { key: '1aa993350b3e9532f3e74a62865093d2e86f3884', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'd8c39493a3b45f994a4f4da8b09662e148790c97', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: 'fbefee823b63e4904ee28b9d978c6822c392bdad', class: "arrow-container" }, h("ion-icon", { key: '2e9742a0d73ec59330d4204217f72cc6e3bae571', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '9ad2c55fafd0b284aae8e3be27b462cb520feae0', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'e36ccd2de7d8109495bceead82979cb678285752', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '2990d364f999f4d018c26ed3dee237bc81a29129', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'eb6f9b8ee370f0c809ea3519968c1562ef72da5e', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '07d526cea46499a22b49d43371c3b3c4d3937689', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+            } }, h("div", { key: '3d6dedbcd0ad04d0a1cc2563a130ac8c53a34891', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '4dad78f16e6ee175bd55bd88e40ac33bbd492fc0', class: "refresher-pulling-icon" }, h("div", { key: '9d9b9a6c8f371e92aee43eca9d25768fe80aff8f', class: "spinner-arrow-container" }, h("ion-spinner", { key: '56c31feada2e1558f30b472a624e66cada7dd971', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: 'ddb580acffb25ed3cf1c3e793594e4a7c93323bf', class: "arrow-container" }, h("ion-icon", { key: '2ef17431b18d0475e645062b3b98435a1adc2d01', icon: this.refresherArrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'd400ef684a1a3783709b1842f096b657950d7700', class: "refresher-pulling-icon" }, h("ion-icon", { key: '82e1c30d5c7e94c4420518722a1ddca406739e69', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '27a6e09db376a00d704d3880d4075580d8ea4fba', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '712b68c41b714fb3cf3f6403db4250a16df570cd', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '051829b30e40c8eed2a121f2b11cae2fa240a147', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/reorder/reorder.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import listRegular from "@phosphor-icons/core/assets/regular/list.svg";
 import { Host, h } from "@stencil/core";
 import { reorderThreeOutline, reorderTwoSharp } from "ionicons/icons";
 import { config } from "../../global/config";
@@ -24,28 +23,21 @@ export class Reorder {
     }
     /**
      * Get the icon to use for the handle icon.
-     * Otherwise, use the icon set in the config.
+     * Use the icon set in the config.
      * If no icon is set in the config, use the default icon.
      */
     get reorderHandleIcon() {
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: reorderThreeOutline,
-            ionic: listRegular,
-            md: reorderTwoSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured reorder handle icon or the default icon
+        const defaultIcon = theme === 'ios' ? reorderThreeOutline : reorderTwoSharp;
         return config.get('reorderHandleIcon', defaultIcon);
     }
     render() {
         const { reorderHandleIcon } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'b33c72a16a2ef9aef7b15d4907ba9b3ea9617954', class: {
+        return (h(Host, { key: 'ba25a7b0b5ece6693f2431f562d63738efe1f831', class: {
                 [theme]: true,
-            } }, h("slot", { key: '4a34e01ec73e0237b224cf9d8705cf4c13870d70' }, h("ion-icon", { key: '36e4d3c1926f1abb97422b44fcb28b0cc3507e1c', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+            } }, h("slot", { key: 'b5afb5131bfb9bfce01a01d6b36e0a7408e14ec5' }, h("ion-icon", { key: '7e0d35640277a07b139d122939b0253a81dc785d', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }

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

@@ -215,22 +215,21 @@
    * @prop --focus-ring-color: The color of the ring around the focused element.
    * @prop --focus-ring-width: The width of the ring around the focused element.
    */
-  --background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));
+  --background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-100, #f6f7fa));
   --border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
   --box-shadow: none;
-  --cancel-button-color: var(--token-primitives-neutral-800, #626262);
-  --clear-button-color: var(--token-primitives-neutral-1000, #3b3b3b);
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
-  --icon-color: var(--token-icon-subtlest, var(--token-primitives-neutral-800, #626262));
-  --placeholder-color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
-  --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --cancel-button-color: var(--token-primitives-neutral-800, #6c727a);
+  --clear-button-color: var(--token-primitives-neutral-1000, #383e45);
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
+  --icon-color: var(--token-icon-subtlest, var(--token-primitives-neutral-800, #6c727a));
+  --placeholder-color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
+  --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-size-050, 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-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);
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -274,12 +273,12 @@
 .searchbar-clear-button:focus-visible,
 .searchbar-cancel-button:focus-visible ion-icon {
   border-radius: var(--token-border-radius-100, var(--token-scale-100, 4px));
-  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));
+  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)));
   opacity: 1;
 }
 
 :host(.searchbar-has-value) {
-  --icon-color: var(--token-icon-default, var(--token-primitives-neutral-1200, #242424));
+  --icon-color: var(--token-icon-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 :host(.in-toolbar.searchbar-should-show-cancel) .searchbar-cancel-button {
@@ -297,12 +296,12 @@
 
 /* Hover */
 :host(:hover) {
-  --background: var(--token-primitives-neutral-200, #eae9e9);
+  --background: var(--token-primitives-neutral-200, #ebeef2);
 }
 
 /* Focus */
 :host(.searchbar-has-focus) .searchbar-input {
-  outline: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
 }
 
 :host(.searchbar-has-focus) .searchbar-search-icon,
@@ -318,9 +317,9 @@
 
 /* Disabled */
 :host(.searchbar-disabled) {
-  --color: var(--token-primitives-neutral-500, #a2a2a2);
-  --icon-color: var(--token-icon-disabled, var(--token-primitives-neutral-500, #a2a2a2));
-  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  --color: var(--token-primitives-neutral-500, #9fa5ad);
+  --icon-color: var(--token-icon-disabled, var(--token-primitives-neutral-500, #9fa5ad));
+  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
   cursor: default;
   pointer-events: none;
 }

package/dist/collection/components/searchbar/searchbar.js

@@ -1,9 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import arrowLeftRegular from "@phosphor-icons/core/assets/regular/arrow-left.svg";
-import magnifyingGlassRegular from "@phosphor-icons/core/assets/regular/magnifying-glass.svg";
-import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Host, forceUpdate, h } from "@stencil/core";
 import { createClearButtonPressController } from "../../utils/forms/index";
 import { debounceEvent, raf, componentOnReady, inheritAttributes } from "../../utils/helpers";
@@ -510,16 +507,9 @@ export class Searchbar {
         if (this.clearIcon != null) {
             return this.clearIcon;
         }
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: closeCircle,
-            ionic: xRegular,
-            md: closeSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured searchbar clear icon or the default icon
+        const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
         return config.get('searchbarClearIcon', defaultIcon);
     }
     /**
@@ -534,16 +524,9 @@ export class Searchbar {
         if (this.searchIcon != null && this.searchIcon !== 'true' && typeof this.searchIcon !== 'boolean') {
             return this.searchIcon;
         }
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: searchOutline,
-            ionic: magnifyingGlassRegular,
-            md: searchSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured searchbar search icon or the default icon
+        const defaultIcon = theme === 'ios' ? searchOutline : searchSharp;
         return config.get('searchbarSearchIcon', defaultIcon);
     }
     /**
@@ -557,17 +540,7 @@ export class Searchbar {
         if (this.cancelButtonIcon != null) {
             return this.cancelButtonIcon;
         }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: arrowBackSharp,
-            ionic: arrowLeftRegular,
-            md: arrowBackSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured searchbar cancel icon, the back button icon or the default icon
-        return config.get('searchbarCancelIcon', config.get('backButtonIcon', defaultIcon));
+        return config.get('searchbarCancelIcon', config.get('backButtonIcon', arrowBackSharp));
     }
     render() {
         const { cancelButtonText, autocapitalize, searchbarCancelIcon, searchbarClearIcon, searchbarSearchIcon } = this;
@@ -576,8 +549,8 @@ export class Searchbar {
         const shouldShowCancelButton = this.shouldShowCancelButton();
         const shape = this.getShape();
         const size = this.getSize();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: 'b573b41a2e7e53c7001d4449bb8479a139b2ae59', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'f87afde3e0e96e9af4abf08396df2e9cc13c69bc', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: 'cee57a4aec582e6e42a4bda5ba0f4011255a5a90', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '21118a391a384643863018f787ffc36b1b81ba90', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'b59db009ec11b82479c18f29f6df30121ad2a795', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '5732dd17714bd1f11ac2d8c39853347944aa61cf', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [theme]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -591,7 +564,7 @@ export class Searchbar {
                 [`searchbar-shape-${shape}`]: shape !== undefined,
                 [`searchbar-size-${size}`]: size !== undefined,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            }) }, h("div", { key: '277b419e792c484ae0aadb3703118bd7f4d281f6', class: "searchbar-input-container" }, h("input", { key: 'abf94e0496dde1953a928fd50c1ab6f1290e84c5', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', spellcheck: this.spellcheck, ...this.inheritedAttributes }), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (h("ion-icon", { key: '12fb162dd40f3222bf8b0bd6fa7cf8f839be30f8', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (h("button", { key: 'ecc08e7514cf92e7f8cda780cb50c5f27c5d7966', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'de6c375fe60d4d3f9ed10dd5fa08ed11685cb4fa', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
+            }) }, h("div", { key: '024e67b33903cf73f057edeb4cb8f58b6d787e11', class: "searchbar-input-container" }, h("input", { key: 'f10260bbff84cc549ec312e9cb763e85641d83c6', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', spellcheck: this.spellcheck, ...this.inheritedAttributes }), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (h("ion-icon", { key: '513780a9904403d85fb9074f13d6c3f2187ddb56', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (h("button", { key: 'dd25c5e940a6cea07e6be028e83808e91eb2f4eb', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '8a1163ccb8aa63a6596ae160f10d619ff162caef', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }

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

@@ -266,12 +266,12 @@
    */
   --background: none;
   --background-checked: var(--background);
-  --color: var(--token-primitives-neutral-1200, #242424);
+  --color: var(--token-primitives-neutral-1200, #242528);
   --color-checked: var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)));
-  --color-disabled: var(--token-primitives-neutral-500, #a2a2a2);
+  --color-disabled: var(--token-primitives-neutral-500, #9fa5ad);
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-color: var(--token-primitives-neutral-300, #e0e0e0);
-  --border-style: var(--token-border-style-solid, solid);
+  --border-color: var(--token-primitives-neutral-300, #e6eaee);
+  --border-style: solid;
   --indicator-box-shadow: none;
   --indicator-color: var(--color-checked);
   --indicator-height: var(--token-border-size-025, var(--token-scale-025, 1px));
@@ -302,12 +302,11 @@
 }
 
 ::slotted(ion-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-350, 0.875rem);
   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);
 }
 
 ::slotted(ion-icon) {
@@ -324,7 +323,7 @@
 
 :host(.ion-focused) .button-inner {
   outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
-  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));
+  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)));
 }
 
 .segment-button-indicator {