@ionic/core 8.4.2-dev.11741869226.11c3cc35 → 8.4.2-dev.11742389361.1723868d

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

@@ -217,18 +217,16 @@ Do not edit directly, this file was auto-generated.
    * @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(--ion-bg-neutral-subtle-default, #e7e7e7);
+  --background: var(--ion-bg-neutral-subtle-default, #efefef);
   --border-radius: var(--ion-border-radius-400, 16px);
   --box-shadow: none;
   --cancel-button-color: var(--ion-primitives-neutral-800, #626262);
   --clear-button-color: var(--ion-primitives-neutral-1000, #3b3b3b);
   --color: var(--ion-primitives-neutral-1200, #242424);
-  --icon-color: var(--ion-icon-default, #242424);
+  --icon-color: var(--ion-icon-subtlest, #626262);
   --placeholder-color: var(--ion-text-subtlest, #626262);
   --focus-ring-color: var(--ion-border-focus-default, #b5c0f7);
   --focus-ring-width: var(--ion-border-size-050, 2px);
-  --leading-icon-padding: calc(var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
-  --clear-button-padding: calc(var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
   font-size: var(--ion-font-size-350, 0.875rem);
   font-weight: var(--ion-font-weight-regular, 400);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
@@ -261,10 +259,6 @@ Do not edit directly, this file was auto-generated.
   contain: strict;
 }
 
-:host(:not(.searchbar-should-show-clear)) {
-  --clear-button-padding: var(--ion-scale-0, 0px);
-}
-
 .searchbar-cancel-button {
   width: var(--ion-scale-400, 16px);
   height: var(--ion-scale-400, 16px);
@@ -287,15 +281,11 @@ Do not edit directly, this file was auto-generated.
   opacity: 1;
 }
 
-:host(:not(.searchbar-has-leading-icons)) {
-  --leading-icon-padding: var(--ion-scale-0, 0px);
-}
-
-:host(:not(.searchbar-has-value)) {
-  --icon-color: var(--ion-icon-subtlest, #626262);
+:host(.searchbar-has-value) {
+  --icon-color: var(--ion-icon-default, #242424);
 }
 
-:host-context(ion-toolbar).searchbar-should-show-cancel .searchbar-cancel-button {
+:host(.in-toolbar.searchbar-should-show-cancel) .searchbar-cancel-button {
   /**
    * The left edge of the cancel button
    * should align with the left edge
@@ -304,23 +294,13 @@ Do not edit directly, this file was auto-generated.
    * the searchbar size.
    */
 }
-:host-context(ion-toolbar).searchbar-should-show-cancel .searchbar-cancel-button {
+:host(.in-toolbar.searchbar-should-show-cancel) .searchbar-cancel-button {
   inset-inline-start: 9px;
 }
 
-:host-context(ion-toolbar).searchbar-should-show-cancel .searchbar-input {
-  /**
-   * Padding start is based on
-   * the alignment of the back button,
-   * the size of the leading icon (search or cancel),
-   * and the gap between the icon and the input.
-   */
-  padding-inline-start: calc(9px + var(--leading-icon-padding));
-}
-
 /* Hover */
 :host(:hover) {
-  --background: var(--ion-primitives-neutral-200, #e7e7e7);
+  --background: var(--ion-primitives-neutral-200, #efefef);
 }
 
 /* Focus */
@@ -362,6 +342,44 @@ Do not edit directly, this file was auto-generated.
 
 /* Small */
 :host(.searchbar-size-small) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * no leading icons.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * no trailing icons.
+   */
+  -webkit-padding-start: var(--ion-space-300, 12px);
+  padding-inline-start: var(--ion-space-300, 12px);
+  -webkit-padding-end: var(--ion-space-300, 12px);
+  padding-inline-end: var(--ion-space-300, 12px);
+  height: var(--ion-scale-1000, 40px);
+}
+
+/* Small with Leading Icons */
+:host(.searchbar-size-small.searchbar-should-show-search-icon) .searchbar-input,
+:host(.searchbar-size-small.searchbar-should-show-cancel) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * no trailing icons.
+   */
+  -webkit-padding-start: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-start: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  -webkit-padding-end: var(--ion-space-300, 12px);
+  padding-inline-end: var(--ion-space-300, 12px);
+}
+
+/* Small with Leading Icons and Trailing Icons */
+:host(.searchbar-size-small.searchbar-should-show-search-icon.searchbar-should-show-clear) .searchbar-input,
+:host(.searchbar-size-small.searchbar-should-show-cancel.searchbar-should-show-clear) .searchbar-input {
   /**
    * Padding start is based on
    * desired padding from design,
@@ -373,11 +391,28 @@ Do not edit directly, this file was auto-generated.
    * the size of the trailing icon (clear),
    * and the gap between the icon and the input.
    */
-  -webkit-padding-start: calc(var(--ion-space-300, 12px) + var(--leading-icon-padding));
-  padding-inline-start: calc(var(--ion-space-300, 12px) + var(--leading-icon-padding));
-  -webkit-padding-end: calc(var(--ion-space-300, 12px) + var(--clear-button-padding));
-  padding-inline-end: calc(var(--ion-space-300, 12px) + var(--clear-button-padding));
-  height: var(--ion-scale-1000, 40px);
+  -webkit-padding-start: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-start: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  -webkit-padding-end: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-end: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+}
+
+/* Small with Trailing Icons */
+:host(.searchbar-size-small.searchbar-should-show-clear) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * no leading icons.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * the size of the trailing icon (clear),
+   * and the gap between the icon and the input.
+   */
+  -webkit-padding-start: var(--ion-space-300, 12px);
+  padding-inline-start: var(--ion-space-300, 12px);
+  -webkit-padding-end: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-end: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
 }
 
 :host(.searchbar-size-small) .searchbar-search-icon,
@@ -391,6 +426,44 @@ Do not edit directly, this file was auto-generated.
 
 /* Medium */
 :host(.searchbar-size-medium) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * no leading icons.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * no trailing icons.
+   */
+  -webkit-padding-start: var(--ion-space-400, 16px);
+  padding-inline-start: var(--ion-space-400, 16px);
+  -webkit-padding-end: var(--ion-space-400, 16px);
+  padding-inline-end: var(--ion-space-400, 16px);
+  height: var(--ion-scale-1200, 48px);
+}
+
+/* Medium with Leading Icons */
+:host(.searchbar-size-medium.searchbar-should-show-search-icon) .searchbar-input,
+:host(.searchbar-size-medium.searchbar-should-show-cancel) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * no trailing icons.
+   */
+  -webkit-padding-start: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-start: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  -webkit-padding-end: var(--ion-space-400, 16px);
+  padding-inline-end: var(--ion-space-400, 16px);
+}
+
+/* Medium with Leading Icons and Trailing Icons */
+:host(.searchbar-size-medium.searchbar-should-show-search-icon.searchbar-should-show-clear) .searchbar-input,
+:host(.searchbar-size-medium.searchbar-should-show-cancel.searchbar-should-show-clear) .searchbar-input {
   /**
    * Padding start is based on
    * desired padding from design,
@@ -402,11 +475,28 @@ Do not edit directly, this file was auto-generated.
    * the size of the trailing icon (clear),
    * and the gap between the icon and the input.
    */
-  -webkit-padding-start: calc(var(--ion-space-400, 16px) + var(--leading-icon-padding));
-  padding-inline-start: calc(var(--ion-space-400, 16px) + var(--leading-icon-padding));
-  -webkit-padding-end: calc(var(--ion-space-400, 16px) + var(--clear-button-padding));
-  padding-inline-end: calc(var(--ion-space-400, 16px) + var(--clear-button-padding));
-  height: var(--ion-scale-1200, 48px);
+  -webkit-padding-start: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-start: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  -webkit-padding-end: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-end: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+}
+
+/* Medium with Trailing Icons */
+:host(.searchbar-size-medium.searchbar-should-show-clear) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * no leading icons.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * the size of the trailing icon (clear),
+   * and the gap between the icon and the input.
+   */
+  -webkit-padding-start: var(--ion-space-400, 16px);
+  padding-inline-start: var(--ion-space-400, 16px);
+  -webkit-padding-end: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-end: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
 }
 
 :host(.searchbar-size-medium) .searchbar-search-icon,
@@ -418,10 +508,20 @@ Do not edit directly, this file was auto-generated.
   inset-inline-end: var(--ion-space-400, 16px);
 }
 
+:host(.in-toolbar.searchbar-size-small.searchbar-should-show-cancel) .searchbar-input,
+:host(.in-toolbar.searchbar-size-medium.searchbar-should-show-cancel) .searchbar-input {
+  /**
+   * Padding start is based on
+   * the alignment of the back button,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   */
+  padding-inline-start: calc(9px + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+}
+
 /* Large */
 :host(.searchbar-size-large) .searchbar-search-icon,
 :host(.searchbar-size-large) .searchbar-cancel-button {
-  --leading-icon-padding: calc(var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
   width: var(--ion-scale-500, 20px);
   height: var(--ion-scale-500, 20px);
 }
@@ -430,19 +530,49 @@ Do not edit directly, this file was auto-generated.
   font-size: var(--ion-font-size-500, 1.25rem);
 }
 
-:host-context(ion-toolbar).searchbar-size-large.searchbar-should-show-cancel .searchbar-input {
+:host(.searchbar-size-large) .searchbar-input {
+  padding-top: var(--ion-space-400, 16px);
+  padding-bottom: var(--ion-space-400, 16px);
   /**
    * Padding start is based on
-   * the alignment of the back button,
+   * desired padding from design,
    * the size of the leading icon (search or cancel),
    * and the gap between the icon and the input.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * the size of the trailing icon (clear),
+   * and the gap between the icon and the input.
    */
-  padding-inline-start: calc(9px + var(--leading-icon-padding));
+  -webkit-padding-start: var(--ion-space-500, 20px);
+  padding-inline-start: var(--ion-space-500, 20px);
+  -webkit-padding-end: var(--ion-space-500, 20px);
+  padding-inline-end: var(--ion-space-500, 20px);
+  height: var(--ion-scale-1400, 56px);
 }
 
-:host(.searchbar-size-large) .searchbar-input {
-  padding-top: var(--ion-space-400, 16px);
-  padding-bottom: var(--ion-space-400, 16px);
+/* Large with Leading Icons */
+:host(.searchbar-size-large.searchbar-should-show-search-icon) .searchbar-input,
+:host(.searchbar-size-large.searchbar-should-show-cancel) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * no trailing icons.
+   */
+  -webkit-padding-start: calc(var(--ion-space-500, 20px) + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
+  padding-inline-start: calc(var(--ion-space-500, 20px) + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
+  -webkit-padding-end: var(--ion-space-500, 20px);
+  padding-inline-end: var(--ion-space-500, 20px);
+}
+
+/* Large with Leading Icons and Trailing Icons */
+:host(.searchbar-size-large.searchbar-should-show-search-icon.searchbar-should-show-clear) .searchbar-input,
+:host(.searchbar-size-large.searchbar-should-show-cancel.searchbar-should-show-clear) .searchbar-input {
   /**
    * Padding start is based on
    * desired padding from design,
@@ -454,11 +584,38 @@ Do not edit directly, this file was auto-generated.
    * the size of the trailing icon (clear),
    * and the gap between the icon and the input.
    */
-  -webkit-padding-start: calc(var(--ion-space-500, 20px) + var(--leading-icon-padding));
-  padding-inline-start: calc(var(--ion-space-500, 20px) + var(--leading-icon-padding));
-  -webkit-padding-end: calc(var(--ion-space-500, 20px) + var(--clear-button-padding));
-  padding-inline-end: calc(var(--ion-space-500, 20px) + var(--clear-button-padding));
-  height: var(--ion-scale-1400, 56px);
+  -webkit-padding-start: calc(var(--ion-space-500, 20px) + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
+  padding-inline-start: calc(var(--ion-space-500, 20px) + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
+  -webkit-padding-end: calc(var(--ion-space-500, 20px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-end: calc(var(--ion-space-500, 20px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+}
+
+/* Large with Trailing Icons */
+:host(.searchbar-size-large.searchbar-should-show-clear) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * no leading icons.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * the size of the trailing icon (clear),
+   * and the gap between the icon and the input.
+   */
+  -webkit-padding-start: var(--ion-space-500, 20px);
+  padding-inline-start: var(--ion-space-500, 20px);
+  -webkit-padding-end: calc(var(--ion-space-500, 20px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-end: calc(var(--ion-space-500, 20px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+}
+
+:host(.in-toolbar.searchbar-size-large.searchbar-should-show-cancel) .searchbar-input {
+  /**
+   * Padding start is based on
+   * the alignment of the back button,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   */
+  padding-inline-start: calc(9px + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
 }
 
 :host(.searchbar-size-large) .searchbar-search-icon,

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

@@ -7,7 +7,7 @@ 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 { isRTL } from "../../utils/rtl/index";
-import { createColorClasses } from "../../utils/theme";
+import { createColorClasses, hostContext } from "../../utils/theme";
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from "ionicons/icons";
 import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
@@ -353,6 +353,12 @@ export class Searchbar {
     hasValue() {
         return this.getValue() !== '';
     }
+    shouldShowSearchIcon() {
+        if (this.searchIcon === false || this.searchIcon === 'false') {
+            return false;
+        }
+        return true;
+    }
     /**
      * Determines whether or not the cancel button should be visible onscreen.
      * Cancel button should be shown if one of two conditions applies:
@@ -370,12 +376,14 @@ export class Searchbar {
      * Clear button should be shown if one of two conditions applies:
      * 1. `showClearButton` is set to `always`.
      * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
+     * Unless the `theme` is `ionic` and the searchbar is disabled.
      */
     shouldShowClearButton() {
+        const theme = getIonTheme(this);
         if (this.showClearButton === 'never' || (this.showClearButton === 'focus' && !this.focused)) {
             return false;
         }
-        if (getIonTheme(this) === 'ionic' && this.disabled) {
+        if (theme === 'ionic' && this.disabled) {
             return false;
         }
         return true;
@@ -434,8 +442,9 @@ export class Searchbar {
      * If no icon is set in the config, use the default icon.
      */
     get searchbarSearchIcon() {
-        // Return the icon if it is explicitly set
-        if (this.searchIcon != null) {
+        // Return the icon if it is explicitly set.
+        // If the icon is set to a boolean or string 'true', use the default icon.
+        if (this.searchIcon != null && this.searchIcon !== 'true' && typeof this.searchIcon !== 'boolean') {
             return this.searchIcon;
         }
         // Determine the theme and map to default icons
@@ -480,8 +489,8 @@ export class Searchbar {
         const shouldShowCancelButton = this.shouldShowCancelButton();
         const shape = this.getShape();
         const size = this.getSize();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '82fc94deb05c94db2626c12916a4442ccc664687', "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: '7386af76b9e043336fcbd00b3318bf3029f9bf5f', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '7853ca66cfa6d9aed43a1025a5d58a0bd034db38', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: 'f978eb2bb693dd716a1571cfe0d348e59bbc3a7d', "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: 'e09e8b025aa8022a1eadd96f43390411958f8ed3', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: 'f2955600fbd3be1a6c6af170d73ba75560ef5838', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [theme]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -489,19 +498,20 @@ export class Searchbar {
                 'searchbar-has-value': this.hasValue(),
                 'searchbar-left-aligned': this.shouldAlignLeft,
                 'searchbar-has-focus': this.focused,
-                'searchbar-has-leading-icons': theme === 'ionic' && (this.searchIcon !== undefined || this.showCancelButton !== 'never'),
+                'searchbar-should-show-search-icon': this.shouldShowSearchIcon(),
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
                 [`searchbar-shape-${shape}`]: shape !== undefined,
                 [`searchbar-size-${size}`]: size !== undefined,
-            }) }, h("div", { key: 'f5eb20fecf5823e66dfd65d2478b2ea867480c41', class: "searchbar-input-container" }, h("input", Object.assign({ key: '52430fa665dbe4f01af6038fe87b266da10da354', "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, theme !== 'ionic' || this.searchIcon !== undefined ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })) : null, theme !== 'ionic' || this.shouldShowClearButton() !== undefined ? (h("button", { "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+                'in-toolbar': hostContext('ion-toolbar', this.el),
+            }) }, h("div", { key: '407c64f52b099e069ba443d5feec8a86d8d9e084', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'dd459a8872fab4c0ae3dc7d60ec900ddbc511917', "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: 'c7b2e9aaefe535c8817dc82ac38ee28635cd468a', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (h("button", { key: '5502ee6bed753f38f1e150aa45fb9826364404c4', "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", { "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" }))) : null), theme === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '8e22c45df1c254efc5482d4d56bcec10e67a257d', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, className: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
@@ -814,18 +824,18 @@ export class Searchbar {
                 "defaultValue": "'Search'"
             },
             "searchIcon": {
-                "type": "string",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
+                    "original": "string | boolean",
+                    "resolved": "boolean | string | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The icon to use as the search icon. Defaults to `\"search-outline\"` in\nthe `\"ios\"` theme and `\"search-sharp\"` in the `\"md\"` and `\"ionic\"` themes."
+                    "text": "The icon to use as the search icon. Defaults to `\"search-outline\"` in\nthe `\"ios\"` theme and `\"search-sharp\"` in the `\"md\"` and `\"ionic\"` themes.\nIf `false`, no search icon will be displayed."
                 },
                 "attribute": "search-icon",
                 "reflect": false

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

@@ -531,14 +531,14 @@ export class Segment {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'fe9dfbc573cdb06ba7735c1d07457232e501ec35', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'ecc6677de570a3e484ce10f7ec9fdcea002208cf', 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: '07bd2abd7acb637d01282cdbb22db81b39d86656', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: '4145cedfc55f8e5c01b818b80a517f04d1f7d087', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -272,7 +272,7 @@ Do not edit directly, this file was auto-generated.
   --color-checked: var(--ion-semantics-primary-base, #105cef);
   --color-disabled: var(--ion-primitives-neutral-500, #a2a2a2);
   --border-width: var(--ion-border-size-025, 1px);
-  --border-color: var(--ion-primitives-neutral-300, #cfcfcf);
+  --border-color: var(--ion-primitives-neutral-300, #e0e0e0);
   --border-style: var(--ion-border-style-solid, solid);
   --indicator-box-shadow: none;
   --indicator-color: var(--color-checked);

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

@@ -141,7 +141,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: '2ccbe1ae3d4fe107717db5ab8d2d53feeaab0353', class: {
+        return (h(Host, { key: 'de3759e2b7b27d1c9dcae5d7dcea98efde485343', class: {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -157,7 +157,7 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: '15977a4ddd2a9afb6a5cfddd81c331f25d9a4dba', "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: '23374078f6bc6c1d26f4f5877e2782528ff3fa68', class: "button-inner" }, h("slot", { key: 'b95c50c5c3057a1e7b37ad884ffa333b684664d1' })), theme === 'md' && h("ion-ripple-effect", { key: '0788556e2760abc1742d631bf71f8c01fdb6d117' })), h("div", { key: '762f48386ce86abacbee179cf3fbe5322a35dae3', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '806db4026e86d5a29982701322100101a1a7e1e3', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", Object.assign({ key: '937636b8c2429a9fbe87180f7c56127e89d0a681', "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: '137eac7e38aa5a7d15af4e1f1d4114a4f8509463', class: "button-inner" }, h("slot", { key: 'a824aa5ebf7203bc4a3d5ba51877de6a4461af6c' })), theme === 'md' && h("ion-ripple-effect", { key: 'e60d58db031a441e430368330c7d2797f9ff9afd' })), h("div", { key: '1d5fe5d4c98f62bb4ffc0331855db85a7bd956b8', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '233f6aaca87b1b741def3bffc8205192e468bca2', 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-content/segment-content.js

@@ -4,7 +4,7 @@
 import { Host, h } from "@stencil/core";
 export class SegmentContent {
     render() {
-        return (h(Host, { key: 'f1301e9dfeef766db609c37224e4d5d5ed23751a' }, h("slot", { key: 'd967dac8bea24441db8949ce10d846e499c89774' })));
+        return (h(Host, { key: '1f7f256fdeb7ec661c84f268b239ab21ef170629' }, h("slot", { key: 'c704cf3b4c13deeb612d8a8ffdccef65d62f0866' })));
     }
     static get is() { return "ion-segment-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,10 +94,10 @@ export class SegmentView {
     }
     render() {
         const { disabled, isManualScroll } = this;
-        return (h(Host, { key: '4894e80c6fbd576bef3d0180c47f387aa6227794', class: {
+        return (h(Host, { key: 'a0b77ea1b2805b87da550d576aa9b0a36ada5d9f', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
-            } }, h("slot", { key: 'f7ab1bd3c0e7e42a4d88fa60afa1a58c42e0bffa' })));
+            } }, h("slot", { key: '0170106f9448d8d05d929ca0dc05add670db96b4' })));
     }
     static get is() { return "ion-segment-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -672,7 +672,7 @@ button {
 
 :host(.select-disabled) {
   --background: var(--ion-primitives-neutral-100, #f5f5f5);
-  --border-color: var(--ion-primitives-neutral-300, #cfcfcf);
+  --border-color: var(--ion-primitives-neutral-300, #e0e0e0);
 }
 
 :host(.select-disabled) .label-text-wrapper,

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

@@ -732,7 +732,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'ce9fa42327f61e6a9b43c192c87466f76f78fb47', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '764b2a2f30615cb78b5fd0e20a829910898e8676', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -749,7 +749,7 @@ export class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, h("label", { key: '9e2775b72761d44702849f7f81894f56af7c8129', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '6617bba60ce7317ff1fa9837e8de9f67cd0d6f69', class: "select-wrapper-inner" }, 
+            }) }, h("label", { key: '35f43c1ad2d01bcf996dd27a0fff3d6f323cd517', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '6d30179d19583b068e67552834d72b3d31f2c0f4', class: "select-wrapper-inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -759,7 +759,7 @@ export class Select {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: 'b42c45269896b4a73650158d5a5a38550734e250', class: "select-outline" }), h("slot", { key: 'de5d2b96bf3c4e9aa81f95f4e96b4c15e35d9464', name: "start" }), h("div", { key: 'f26491af6d46e714449786c2fb0528f3a5769fd8', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'c86051a7bbc32e1169d34f959a52aff022fb1c5d', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '044ab9a29dbab5e227a70cc832a05850025cb7c1', class: "select-highlight" }))));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: '01a8af86d9b25d5ea4cab0f85c4bf1db1465b5d8', class: "select-outline" }), h("slot", { key: 'd5478a1b67a3de05019167f26381d8c453cec8ff', name: "start" }), h("div", { key: '77547d4cca137afe346222988f16a74ea874a547', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '5ded9c58c3eb9508622c62820d85dd5ff033e6f2', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'bebf742e3d961e4ed2c933e3925e920322f1d393', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,7 +77,7 @@ export class SelectModal {
             } }, option.text))));
     }
     render() {
-        return (h(Host, { key: '03593070a50743c07116e218529a4031808b372f', class: getIonMode(this) }, h("ion-header", { key: 'ec8d42f5cf4a67429677f52da1d277430a599586' }, h("ion-toolbar", { key: '0efbd4980f087f56228838dd716736dacd41810a' }, this.header !== undefined && h("ion-title", { key: '5aeab0b91640a7f351d88e588ac2cc265436ce6a' }, this.header), h("ion-buttons", { key: '58d793c29a63794eeebe5971d41f52f91c967eb7', slot: "end" }, h("ion-button", { key: '749225d685f23081a8924b64f093b60c980252d8', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: 'fdc979a06119a797430b134099c13a7fdc251fc6' }, h("ion-list", { key: '1b75d6525301e14dc9871f71c6e6bff0e59e13dc' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: 'fd5b1e78d540c7ae6d0fca737a6fc1d983a8c19b', class: getIonMode(this) }, h("ion-header", { key: '7eec49fcb0a0f0b1e20f3a1f92d28cd15924d265' }, h("ion-toolbar", { key: 'aea8148d3207089db6475579479cb64c16594985' }, this.header !== undefined && h("ion-title", { key: 'f2e6d4ae608dfa5fdba9ed466e078545b55fc7df' }, this.header), h("ion-buttons", { key: 'bea2a3f2448e1907eee3a4e46a2d5e3b99b62763', slot: "end" }, h("ion-button", { key: 'd7db36683d5cff25c3084dccecb736cc55d94965', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '18749c394b34c8f568a1e280e1a19f3a46545a61' }, h("ion-list", { key: '8f84ca4450d196bcd000eecb532d0766a840755d' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     static get is() { return "ion-select-modal"; }
     static get encapsulation() { return "scoped"; }

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

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

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

@@ -106,9 +106,9 @@ export class SelectPopover {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '5211e9deb7231bfcb6f3144f201b3783f77b30ba', class: {
+        return (h(Host, { key: '165cfd34fb0bc0cada6ef2cf5de6ba9dfd4f4416', class: {
                 [theme]: true,
-            } }, h("ion-list", { key: 'ae1d8a90dfd7d141c7f2a5c3b0de52d26e0a53c1' }, header !== undefined && h("ion-list-header", { key: 'c5accdb7c8e73bb63841f8776a67a8974ea7e0d4' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '6fda56e16eebd2513f69765e250451c03e108d4d' }, h("ion-label", { key: 'beef0a262a6d5b31f1a0bceb8c5143ef238481a2', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'f235d203a8971977ac945c4e6c7f1b9c3e7119a0' }, subHeader), message !== undefined && h("p", { key: 'c65933c4ea11cad946d92a37b0d6404e5f3699a7' }, message)))), this.renderOptions(options))));
+            } }, h("ion-list", { key: '50c27cf2f57036deca42c50cad9968e7ab98ba38' }, header !== undefined && h("ion-list-header", { key: '4e2993d4eb9d72440e0838111d08536e9117289a' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'cec715effe534af3fb8e590bed3955a07fac2683' }, h("ion-label", { key: 'cce3fdc3c2ace609f221c546671fb698eeb17e79', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '5a5615928a5b27bb7eb6998e3e207e8e13bcc058' }, subHeader), message !== undefined && h("p", { key: '16a6625a710a2e65578f55306615dfefce1cba69' }, 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

@@ -29,11 +29,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: 'e768d60b983352c336139bffcc80cab2b49b733e', class: {
+        return (h(Host, { key: '4aaca37db97d932fcd589c69c6ebc2c9b164c0f4', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '666b64e9abf7213325f300d2fa6de443fc4bb4d1' }, "\u00A0")));
+            } }, h("span", { key: '900fc5602bc6668e0c48bb83e16d5db27eefa5e7' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }