@ionic/core 8.8.7-dev.11779467048.1641d05e → 8.8.7-dev.11779921691.1777274a

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

@@ -5,7 +5,7 @@ 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 { debounceEvent, raf, componentOnReady, inheritAttributes } from "../../utils/helpers";
+import { debounceEvent, raf, waitForComponentReady, inheritAttributes } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from "ionicons/icons";
@@ -278,7 +278,7 @@ export class Searchbar {
          * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
          */
         if (!this.nativeInput) {
-            await new Promise((resolve) => componentOnReady(this.el, resolve));
+            await waitForComponentReady(this.el);
         }
         return Promise.resolve(this.nativeInput);
     }
@@ -542,8 +542,8 @@ export class Searchbar {
         const shouldShowCancelButton = this.shouldShowCancelButton();
         const shape = this.getShape();
         const size = this.getSize();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '9b71660f86c93ab8e1c4bca45a778584b1473a48', "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: '27c4121c6b49906b2a9c225bd7ba9ab2a41e4292', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: 'd5fc37533478d088fd40697b21cffc8f9c673add', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '51666315352c65a1993d43ec2f0bd635f539a14e', "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: '5a920b211db94eb437186216874a1c66bda500cf', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: 'eec91f1e476c492684fbaa89b1698ded36fa64be', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [theme]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -557,14 +557,14 @@ export class Searchbar {
                 [`searchbar-shape-${shape}`]: shape !== undefined,
                 [`searchbar-size-${size}`]: size !== undefined,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            }) }, h("div", { key: 'b7e0dbfa02f9ea4db7eb01cb293d81d4a54e23d2', class: "searchbar-input-container" }, h("input", Object.assign({ key: '3b790197d1f8bad980086ebd898cb2487d56ea24', "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, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (h("ion-icon", { key: 'fce3e3510516d768d8b51a6334cf9d9ac934345e', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (h("button", { key: 'b47cb7c79fd07e44f2273e55782a784f6d567155', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: 'd3e5cff9b6195181cf9ff599995096267231e285', class: "searchbar-input-container" }, h("input", Object.assign({ key: '7ae44b26fdc33390bbc30f564234e098e5c81eb2', "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, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (h("ion-icon", { key: '22331dcd3ab13c335834094f5bd1341beb2cb451', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (h("button", { key: '762a68feb79c549f2b2b676fda84111ac728d336', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '6d4f026bd1fde68d43c4e49531ca7b1689590e80', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'fd15876052208bac9c6d26f1a9fdeb198706ffe2', "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/searchbar/searchbar.md.css

@@ -300,10 +300,10 @@
   --background: var(--ion-background-color, #fff);
   --border-radius: 2px;
   --box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  --cancel-button-color: var(--ion-color-step-900, var(--ion-text-color-step-100, #1a1a1a));
+  --cancel-button-color: var(--ion-text-color-step-100, #1a1a1a);
   --clear-button-color: initial;
-  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
-  --icon-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  --color: var(--ion-text-color-step-150, #262626);
+  --icon-color: var(--ion-text-color-step-400, #666666);
   -webkit-padding-start: 8px;
   padding-inline-start: 8px;
   -webkit-padding-end: 8px;

package/dist/collection/components/segment/segment.js

@@ -548,14 +548,14 @@ export class Segment {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '2c0631392507f2e903670070232029928470bf11', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'aa903445e6c04076cb4b29cf7195e7b843b158aa', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: 'ed99c28b8976c4d51ad12089680cb8fb51d835a7', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: '761df7f38ea889287f466ba35076a50b5e8d7b72', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -410,7 +410,7 @@ ion-ripple-effect {
   --border-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);
   --border-style: solid;
   --indicator-box-shadow: 0 0 5px rgba(0, 0, 0, 0.16);
-  --indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff)));
+  --indicator-color: var(--ion-background-color-step-350, var(--ion-background-color, #fff));
   --indicator-height: 100%;
   --indicator-transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
   --indicator-transform: none;
@@ -517,7 +517,7 @@ ion-ripple-effect {
 }
 
 :host(.in-segment-color) .segment-button-indicator-background {
-  background: var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff)));
+  background: var(--ion-background-color-step-350, var(--ion-background-color, #fff));
 }
 
 @media (any-hover: hover) {
@@ -530,7 +530,7 @@ ion-ripple-effect {
   --background-checked: var(--ion-toolbar-segment-background-checked, none);
   --color: var(--ion-toolbar-segment-color, var(--ion-toolbar-color), initial);
   --color-checked: var(--ion-toolbar-segment-color-checked, var(--ion-toolbar-color), initial);
-  --indicator-color: var(--ion-toolbar-segment-indicator-color, var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff))));
+  --indicator-color: var(--ion-toolbar-segment-indicator-color, var(--ion-background-color-step-350, var(--ion-background-color, #fff)));
 }
 
 /**

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

@@ -112,7 +112,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const theme = getIonTheme(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: 'bbb2ae95aa27852c31dcc0ba3ee5acce24349752', class: {
+        return (h(Host, { key: '75eeffd15e3581c15f48a0b12cbf5a4229b087d6', class: {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -128,7 +128,7 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: '0335787c4606314d2715062b536b544cf0fb1f27', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '47d06436538ed9fc97789af76b6681674a2bd0a7', class: "button-inner" }, h("slot", { key: 'de1164da25cb74e6fa3066e43744483fc5b821fa' })), theme === 'md' && h("ion-ripple-effect", { key: '82d3f9d812f851a6bbbf3603e5845e6e6e925442' })), h("div", { key: '77bbfb251707d274635f21e4cd7153791d9fdb49', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '2d7b64dbdb084bd3a851e215b9d049a9aff6f03f', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", Object.assign({ key: '701fd86647377f744d91eb92427c73583d229253', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '63634d3e500312c847194551996a2897610e0cc7', class: "button-inner" }, h("slot", { key: '89963e233c9a7ea84b7262ab84db6edbe76ee95e' })), theme === 'md' && h("ion-ripple-effect", { key: '9d766c3d48c0b2ba50ab03f2279ccf710973bbba' })), h("div", { key: 'a70f2d1a57cca4e04b00b36a6b47eb93ef4cb26e', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'aff9931755a1f643147bf0e7d2be29b35d8f9d41', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -407,7 +407,7 @@ ion-ripple-effect {
   --background-focused-opacity: 0.12;
   --background-hover-opacity: 0.04;
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6);
-  --color-checked: var(--ion-color-primary, #0054e9);
+  --color-checked: var(--ion-color-primary, var(--ion-color-primary-bold));
   --indicator-box-shadow: none;
   --indicator-color: var(--color-checked);
   --indicator-height: 2px;
@@ -470,7 +470,7 @@ ion-ripple-effect {
   --background: var(--ion-toolbar-segment-background, none);
   --background-checked: var(--ion-toolbar-segment-background-checked, none);
   --color: var(--ion-toolbar-segment-color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6));
-  --color-checked: var(--ion-toolbar-segment-color-checked, var(--ion-color-primary, #0054e9));
+  --color-checked: var(--ion-toolbar-segment-color-checked, var(--ion-color-primary, var(--ion-color-primary-bold)));
   --indicator-color: var(--ion-toolbar-segment-color-checked, var(--color-checked));
 }
 

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

@@ -4,7 +4,7 @@
 import { Host, h } from "@stencil/core";
 export class SegmentContent {
     render() {
-        return (h(Host, { key: '66e6783365c0842eb785d50191206d82321b35e7' }, h("slot", { key: '21528369e7efdb93599179720b26c3f3c3e574ed' })));
+        return (h(Host, { key: '81cc29460a17c32592fbf9fca6242f4bb1738aa6' }, h("slot", { key: '4f718420caf11c6672642fcf1a1bdb7f48d6cdfc' })));
     }
     static get is() { return "ion-segment-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segment-view/segment-view.js

@@ -110,11 +110,11 @@ export class SegmentView {
     }
     render() {
         const { disabled, isManualScroll, swipeGesture } = this;
-        return (h(Host, { key: '48ce45ca6c45d4bbc804390c31a43729a60abb8a', class: {
+        return (h(Host, { key: 'f03a6e740fde773dc02e0aad79fd73475c3227fa', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
                 'segment-view-swipe-disabled': swipeGesture === false,
-            } }, h("slot", { key: 'e248ce5b24b355bd6b51cbfd25741addf4ffd4fb' })));
+            } }, h("slot", { key: '3c850dd0e7ca795af8497162c8824eaede3bbc29' })));
     }
     static get is() { return "ion-segment-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.ios.css

@@ -119,9 +119,9 @@
   --placeholder-color: currentColor;
   --background: transparent;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --highlight-color-valid: var(--ion-color-success, var(--ion-color-success-bold));
+  --highlight-color-invalid: var(--ion-color-danger, var(--ion-color-danger-bold));
   --select-text-media-height: 1.5em;
   --select-text-media-width: 1.5em;
   /**
@@ -645,7 +645,7 @@ button {
 }
 
 .select-bottom .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
 }
 
 .select-text {
@@ -918,14 +918,14 @@ button {
  */
 :host {
   --border-width: 0.55px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-250, #c8c7cc)));
   --highlight-height: 0px;
 }
 
 .select-icon {
   width: 1.125rem;
   height: 1.125rem;
-  color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
+  color: var(--ion-text-color-step-350, #595959);
 }
 
 :host(.select-label-placement-stacked) .select-wrapper-inner,

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

@@ -1002,7 +1002,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '03fa41ce215865ceeaeddec12d9ac66b5ab18e3f', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b75ee27abca24a0ee5ec2bcecec98aeab85d11b2', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -1021,7 +1021,7 @@ export class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, h("label", { key: '66808fb8c26f7a5db356b22d43751463cbb4bcaa', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '3e80160009e0e5b47952d666ca621166067adbea', class: "select-wrapper-inner", part: "inner" }, 
+            }) }, h("label", { key: '09f84e92cec1f79d4563d5f27edd7f71266446b8', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '448be6befb0d4a2c0be0b31d9fb970c4bf86e004', class: "select-wrapper-inner", part: "inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -1031,7 +1031,7 @@ export class Select {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: '8ea2530c4dc535661bf97d16724bdca3b9e23560', class: "select-outline" }), h("slot", { key: '2526c811e6f0f250421f6de9834d96d21df528b7', name: "start" }), h("div", { key: '95d0b2432c9e656166bf35ddd457a74052c91a27', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0864febe104e3ac77aa10ce397e7c7569855636e', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'c83f3992d7a0ee55ca635b391421626a9131c8eb', class: "select-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: '5304fa8c9eb2f8a048cd242696aad6bcd66ffa71', class: "select-outline" }), h("slot", { key: '6103312fc0549a71b395e550472c489cd63e50cf', name: "start" }), h("div", { key: 'c37d9c7f6087b522b424b28aaa711f7682468429', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '4e7228f7911e5b85b60bdba483506845b2df9f58', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '9c4a369969d2653a553e667e544928e9341dbb51', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.md.css

@@ -119,9 +119,9 @@
   --placeholder-color: currentColor;
   --background: transparent;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --highlight-color-valid: var(--ion-color-success, var(--ion-color-success-bold));
+  --highlight-color-invalid: var(--ion-color-danger, var(--ion-color-danger-bold));
   --select-text-media-height: 1.5em;
   --select-text-media-width: 1.5em;
   /**
@@ -645,7 +645,7 @@ button {
 }
 
 .select-bottom .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
 }
 
 .select-text {
@@ -978,8 +978,8 @@ button {
  * }
  */
 :host(.select-fill-solid) {
-  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
-  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
+  --background: var(--ion-background-color-step-50, #f2f2f2);
+  --border-color: var(--ion-background-color-step-500, gray);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -1020,8 +1020,8 @@ button {
  */
 @media (any-hover: hover) {
   :host(.select-fill-solid:hover) {
-    --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --background: var(--ion-background-color-step-100, #e6e6e6);
+    --border-color: var(--ion-background-color-step-750, #404040);
   }
 }
 /**
@@ -1030,7 +1030,7 @@ button {
  */
 :host(.select-fill-solid.select-expanded),
 :host(.select-fill-solid.has-focus) {
-  --background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  --background: var(--ion-background-color-step-150, #d9d9d9);
   --border-color: var(--highlight-color);
 }
 
@@ -1127,7 +1127,7 @@ button {
  * }
  */
 :host(.select-fill-outline) {
-  --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
+  --border-color: var(--ion-background-color-step-300, #b3b3b3);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -1155,7 +1155,7 @@ button {
  */
 @media (any-hover: hover) {
   :host(.select-fill-outline:hover) {
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --border-color: var(--ion-background-color-step-750, #404040);
   }
 }
 /**
@@ -1382,7 +1382,7 @@ button {
 
 :host {
   --border-width: 1px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13))));
   --highlight-height: 2px;
 }
 
@@ -1438,7 +1438,7 @@ button {
 .select-icon {
   width: 0.8125rem;
   transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
+  color: var(--ion-text-color-step-500, gray);
 }
 
 /**
@@ -1459,7 +1459,7 @@ button {
 :host(.in-item.has-focus) .select-wrapper .select-icon,
 :host(.in-item.has-focus.ion-valid) .select-wrapper .select-icon,
 :host(.in-item.ion-touched.ion-invalid) .select-wrapper .select-icon {
-  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
+  color: var(--ion-text-color-step-500, gray);
 }
 
 /**

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

@@ -128,11 +128,11 @@ ion-content {
    * padding of the modal sheet in the core.
    */
   /* stylelint-disable-next-line declaration-no-important */
-  --padding-start: var(--token-space-400, var(--token-scale-400, 16px)) !important;
+  --ion-content-padding-start: var(--token-space-400, var(--token-scale-400, 16px)) !important;
   /* stylelint-disable-next-line declaration-no-important */
-  --padding-end: var(--token-space-400, var(--token-scale-400, 16px)) !important;
+  --ion-content-padding-end: var(--token-space-400, var(--token-scale-400, 16px)) !important;
   /* stylelint-disable-next-line declaration-no-important */
-  --padding-bottom: var(--token-space-1200, var(--token-scale-1200, 48px)) !important;
+  --ion-content-padding-bottom: var(--token-space-1200, var(--token-scale-1200, 48px)) !important;
 }
 ion-content:has(.radio-checked) .ion-focused:not(.item-radio-checked) {
   --background-focused-opacity: 1;

package/dist/collection/components/select-modal/select-modal.ios.css

@@ -75,7 +75,7 @@
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   font-size: 0.75rem;
 }
 
@@ -276,7 +276,7 @@ ion-radio::after {
   width: calc(100% - 0.9375rem - 16px); /* Adjust width based on the shift */
   border-width: 0px 0px 0.55px 0px;
   border-style: solid;
-  border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-250, #c8c7cc)));
   content: "";
 }
 ion-radio::after {

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

@@ -147,7 +147,7 @@ export class SelectModal {
         });
     }
     render() {
-        return (h(Host, { key: '43db0bab8915e4e422acbd73d27a880935c13a38', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: '58f462db240eb759d7be9f090ab9fba48abdea0c' }, h("ion-toolbar", { key: 'dbd4722ad8c2fc21a066b89451fdc5c0a3776808' }, this.header !== undefined && h("ion-title", { key: 'cefe16f3dff1a90d10875506a94fe1d737c67b44' }, this.header), h("ion-buttons", { key: '750ba8ac17447906cbe020d654b943a88adf8185', slot: "end" }, h("ion-button", { key: '8c075ec9d7becf25dd1307bf083bec229a0889ae', "aria-label": this.cancelIcon ? this.cancelText : undefined, onClick: () => this.closeModal() }, this.cancelIcon ? (h("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: this.cancelButtonIcon })) : (this.cancelText))))), h("ion-content", { key: '65dff8eab0158cdff103ade997246cea2b3c4b9e' }, h("ion-list", { key: 'e3556e81c97146ffda80260265294a4f8d6ebdf2' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: '3d19cbc5c4b35089ce424924174f6b87fb1bdcab', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: '3cb79b05db6fec2f72ebdb87edcc24bad9c375ac' }, h("ion-toolbar", { key: '99cf6652daad67727efc354d2064f96658e110be' }, this.header !== undefined && h("ion-title", { key: '372fc52cfb477875cb6f0af8aee0e33f3059ecb1' }, this.header), h("ion-buttons", { key: '748ff6504898f1516ce1904e77a5bcea8ad8cdd3', slot: "end" }, h("ion-button", { key: '129b09e56081dd7f4407d00dce0df0d89836d32b', "aria-label": this.cancelIcon ? this.cancelText : undefined, onClick: () => this.closeModal() }, this.cancelIcon ? (h("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: this.cancelButtonIcon })) : (this.cancelText))))), h("ion-content", { key: 'd3e095c2d3b01481877ffadffcef17792422c242' }, h("ion-list", { key: '7514600d43482f866e508ee88ea65ee2eae63887' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     static get is() { return "ion-select-modal"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/select-modal/select-modal.md.css

@@ -75,7 +75,7 @@
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   font-size: 0.75rem;
 }
 
@@ -178,10 +178,10 @@ ion-item {
 }
 
 .item-radio-checked {
-  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
-  --background-focused: var(--ion-color-primary, #0054e9);
+  --background: rgba(var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb)), 0.08);
+  --background-focused: var(--ion-color-primary, var(--ion-color-primary-bold));
   --background-focused-opacity: 0.2;
-  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-hover: var(--ion-color-primary, var(--ion-color-primary-bold));
   --background-hover-opacity: 0.12;
 }
 
@@ -189,5 +189,5 @@ ion-item {
   --background-activated: var(--ion-item-color, var(--ion-text-color, #000));
   --background-focused: var(--ion-item-color, var(--ion-text-color, #000));
   --background-hover: var(--ion-item-color, var(--ion-text-color, #000));
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }

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

@@ -21,7 +21,7 @@ export class SelectOption {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f4d425097bd16997f0ea48c8896dc92408e55bb9', class: {
+        return (h(Host, { key: 'fd2c00d514768451e7d51631e4ce4cdb2a7a92ad', class: {
                 [theme]: true,
             }, role: "option", id: this.inputId }));
     }

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

@@ -323,7 +323,7 @@ ion-label {
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   font-size: 0.75rem;
 }
 
@@ -465,10 +465,10 @@ ion-item {
 }
 
 .item-radio-checked {
-  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
-  --background-focused: var(--ion-color-primary, #0054e9);
+  --background: rgba(var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb)), 0.08);
+  --background-focused: var(--ion-color-primary, var(--ion-color-primary-bold));
   --background-focused-opacity: 0.2;
-  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-hover: var(--ion-color-primary, var(--ion-color-primary-bold));
   --background-hover-opacity: 0.12;
 }
 
@@ -476,7 +476,7 @@ ion-item {
   --background-activated: var(--ion-item-color, var(--ion-text-color, #000));
   --background-focused: var(--ion-item-color, var(--ion-text-color, #000));
   --background-hover: var(--ion-item-color, var(--ion-text-color, #000));
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 
 .select-option-label {

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

@@ -162,7 +162,7 @@ ion-label {
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   font-size: 0.75rem;
 }
 

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

@@ -149,9 +149,9 @@ export class SelectPopover {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'de63245b6690ffb6201a8faac850b7e73eed8022', class: {
+        return (h(Host, { key: '75388b15e655f05df0849bbcd79064e4f9f72294', class: {
                 [theme]: true,
-            } }, h("ion-list", { key: 'a96857c064aaf9a645b9e1ee22932116b1c25d62' }, header !== undefined && h("ion-list-header", { key: '86b8c398f12cdd3e7d2a7d4c4af69029e4decdbc' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '3bcd9c0a544e1e98243163600413d82a304081db' }, h("ion-label", { key: 'd20b933ba82913b623486c982ab094819f850565', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'c869868d89d024b5b02e6a3b626ca91e6f312036' }, subHeader), message !== undefined && h("p", { key: 'd8a26d162ba8d3b092abef38ef3c1795787e7f75' }, message)))), this.renderOptions(options))));
+            } }, h("ion-list", { key: '14a2f8e328145d7563e9f1924637e08ba3f64f07' }, header !== undefined && h("ion-list-header", { key: '22f0b835c1ea3c13e54dc3be563dcb2dc8d7f53e' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'd0464a9be0c4c3f5df33597929b89d20bc57ca7b' }, h("ion-label", { key: '362f77d17c4613a27ced112cc056369ac6915fc7', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '7166ad9c5a5f39ee3006e59ab069bbee6fbf8c2f' }, subHeader), message !== undefined && h("p", { key: 'a195ed5683525cf6d63b6b8c36c49965dcab7315' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

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

@@ -162,7 +162,7 @@ ion-label {
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   font-size: 0.75rem;
 }
 
@@ -304,10 +304,10 @@ ion-item {
 }
 
 .item-radio-checked {
-  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
-  --background-focused: var(--ion-color-primary, #0054e9);
+  --background: rgba(var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb)), 0.08);
+  --background-focused: var(--ion-color-primary, var(--ion-color-primary-bold));
   --background-focused-opacity: 0.2;
-  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-hover: var(--ion-color-primary, var(--ion-color-primary-bold));
   --background-hover-opacity: 0.12;
 }
 
@@ -315,5 +315,5 @@ ion-item {
   --background-activated: var(--ion-item-color, var(--ion-text-color, #000));
   --background-focused: var(--ion-item-color, var(--ion-text-color, #000));
   --background-hover: var(--ion-item-color, var(--ion-text-color, #000));
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }

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: 'aa94213767105077047a369d4e4861027af96060', class: {
+        return (h(Host, { key: '5014563646b6c5213750d503babce3013b66ec96', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: 'c5dab0fb89d524827936aef5345cc0c7eda9e274' }, "\u00A0")));
+            } }, h("span", { key: '4b816883b1c71bb1db66d8b2b084559f7cb489bd' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }