@ionic/core 9.0.2 → 9.0.3-dev.11788456135.1ab1d6cd

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

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -53,6 +59,28 @@
  *   }
  * }
  */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 :host {
   /**
    * @prop --background: Background of the searchbar input
@@ -70,7 +98,7 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  --placeholder-opacity: var(--ion-placeholder-opacity, 1);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: flex;
@@ -78,24 +106,9 @@
   align-items: center;
   width: 100%;
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   box-sizing: border-box;
 }
 
-:host(.ion-color) {
-  color: var(--ion-color-contrast);
-}
-
-:host(.ion-color) .searchbar-input {
-  background: var(--ion-color-base);
-}
-
-:host(.ion-color) .searchbar-clear-button,
-:host(.ion-color) .searchbar-cancel-button,
-:host(.ion-color) .searchbar-search-icon {
-  color: inherit;
-}
-
 .searchbar-search-icon {
   color: var(--icon-color);
   pointer-events: none;
@@ -109,18 +122,18 @@
 }
 
 .searchbar-input {
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   border-radius: var(--border-radius);
   display: block;
   width: 100%;
@@ -197,12 +210,37 @@
   display: block;
 }
 
+:host {
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  font-family: var(--ion-font-family, inherit);
+}
+
+:host(.ion-color) {
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color) .searchbar-input {
+  background: var(--ion-color-base);
+}
+
+:host(.ion-color) .searchbar-clear-button,
+:host(.ion-color) .searchbar-cancel-button,
+:host(.ion-color) .searchbar-search-icon {
+  color: inherit;
+}
+
 :host(.searchbar-disabled) {
   cursor: default;
   opacity: 0.4;
   pointer-events: none;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -1,15 +1,20 @@
 /*!
  * (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";
 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 { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class Searchbar {
     constructor() {
@@ -19,6 +24,9 @@ export class Searchbar {
         this.inheritedAttributes = {};
         this.focused = false;
         this.noAnimate = true;
+        /** Keeps the clear button mounted for the duration of a press. */
+        this.isClearButtonPressed = false;
+        this.clearButtonPressController = createClearButtonPressController((isPressed) => (this.isClearButtonPressed = isPressed));
         /**
          * If `true`, enable searchbar animation.
          */
@@ -37,12 +45,7 @@ export class Searchbar {
          */
         this.autocorrect = false;
         /**
-         * Set the cancel button icon. Only applies to `md` mode.
-         * Defaults to `arrow-back-sharp`.
-         */
-        this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
-        /**
-         * Set the cancel button text. Only applies to `ios` mode.
+         * Set the cancel button text. Only available when the theme is `"ios"`.
          */
         this.cancelButtonText = 'Cancel';
         /**
@@ -96,6 +99,7 @@ export class Searchbar {
          * Clears the input field and triggers the control change.
          */
         this.onClearInput = async (shouldFocus) => {
+            this.clearButtonPressController.release();
             if (this.clearTimeout) {
                 clearTimeout(this.clearTimeout);
             }
@@ -251,6 +255,7 @@ export class Searchbar {
         }, 300);
     }
     disconnectedCallback() {
+        this.clearButtonPressController.destroy();
         if (this.loadTimeout) {
             clearTimeout(this.loadTimeout);
         }
@@ -320,10 +325,10 @@ export class Searchbar {
     positionElements() {
         const value = this.getValue();
         const prevAlignLeft = this.shouldAlignLeft;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const shouldAlignLeft = !this.animated || value.trim() !== '' || !!this.focused;
         this.shouldAlignLeft = shouldAlignLeft;
-        if (mode !== 'ios') {
+        if (theme !== 'ios') {
             return;
         }
         if (prevAlignLeft !== shouldAlignLeft) {
@@ -433,6 +438,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:
@@ -449,53 +460,153 @@ export class Searchbar {
      * Determines whether or not the clear button should be visible onscreen.
      * 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.
+     * 2. `showClearButton` is set to `focus`, and the searchbar has been
+     *    focused or a clear button press is still in flight.
+     * Unless the `theme` is `ionic` and the searchbar is disabled.
      */
     shouldShowClearButton() {
-        if (this.showClearButton === 'never' || (this.showClearButton === 'focus' && !this.focused)) {
+        const theme = getIonTheme(this);
+        if (this.showClearButton === 'never' ||
+            (this.showClearButton === 'focus' && !this.focused && !this.isClearButtonPressed)) {
+            return false;
+        }
+        if (theme === 'ionic' && this.disabled) {
             return false;
         }
         return true;
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11677): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
+    getSize() {
+        const theme = getIonTheme(this);
+        const { size } = this;
+        // TODO(ROU-11678): Remove theme check when sizes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (size === undefined) {
+            return 'medium';
+        }
+        return size;
+    }
+    /**
+     * Get the icon to use for the clear icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get searchbarClearIcon() {
+        // Return the icon if it is explicitly set
+        if (this.clearIcon != null) {
+            return this.clearIcon;
+        }
+        // Determine the theme and map to default icons
+        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
+        return config.get('searchbarClearIcon', defaultIcon);
+    }
+    /**
+     * Get the icon to use for the search icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get searchbarSearchIcon() {
+        // 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
+        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
+        return config.get('searchbarSearchIcon', defaultIcon);
+    }
+    /**
+     * Get the icon to use for the cancel icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get searchbarCancelIcon() {
+        // Return the icon if it is explicitly set
+        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));
+    }
     render() {
-        const { cancelButtonText, autocapitalize } = this;
+        const { cancelButtonText, autocapitalize, searchbarCancelIcon, searchbarClearIcon, searchbarSearchIcon } = this;
         const animated = this.animated && config.getBoolean('animated', true);
-        const mode = getIonMode(this);
-        const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
-        const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
+        const theme = getIonTheme(this);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '47ee586db12684db8b2d16a790976bd247cbbc62', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '55e6b556a46e7bba14c2cfe1b58542499d2334ab', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '468d524b52a0d29d840e2c3cdafba46152716b15', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [mode]: true,
+        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, {
+                [theme]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
                 'searchbar-no-animate': animated && this.noAnimate,
                 'searchbar-has-value': this.hasValue(),
                 'searchbar-left-aligned': this.shouldAlignLeft,
                 'searchbar-has-focus': this.focused,
+                'searchbar-should-show-search-icon': this.shouldShowSearchIcon(),
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '94378bdfdf883c28941ef770d64347705d6f8345', class: "searchbar-input-container" }, h("input", { key: 'deea2190823bf8652703148d308aa21473605930', "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 }), mode === 'md' && cancelButton, h("ion-icon", { key: '0ecc28496ab545f2064b71b994b4cbf0968c2108', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '1bcc77d70eaa08f2ae7fc6173642f114fe387fb7', "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: 'bbf8d05eb1070a0d34a22236dfaaf11d8dcc06af', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+                [`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));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["searchbar.ios.scss"],
-            "md": ["searchbar.md.scss"]
+            "md": ["searchbar.md.scss"],
+            "ionic": ["searchbar.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["searchbar.ios.css"],
-            "md": ["searchbar.md.css"]
+            "md": ["searchbar.md.css"],
+            "ionic": ["searchbar.ionic.css"]
         };
     }
     static get properties() {
@@ -618,20 +729,19 @@ export class Searchbar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `arrow-back-sharp`."
+                    "text": "Set the cancel button icon. Only available when the theme is `\"md\"`.\nDefaults to `\"arrow-back-sharp\"`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "cancel-button-icon",
-                "defaultValue": "config.get('backButtonIcon', arrowBackSharp) as string"
+                "attribute": "cancel-button-icon"
             },
             "cancelButtonText": {
                 "type": "string",
@@ -645,7 +755,7 @@ export class Searchbar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the cancel button text. Only applies to `ios` mode."
+                    "text": "Set the cancel button text. Only available when the theme is `\"ios\"`."
                 },
                 "getter": false,
                 "setter": false,
@@ -665,7 +775,7 @@ export class Searchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`."
+                    "text": "Set the clear icon. Defaults to `\"close-circle\"` for `\"ios\"` theme and `\"close-sharp\"` for `\"md\"` and `\"ionic\"` theme."
                 },
                 "getter": false,
                 "setter": false,
@@ -828,18 +938,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\n`ios` mode and `search-sharp` in `md` mode."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -945,13 +1055,52 @@ export class Searchbar {
                 "reflect": false,
                 "attribute": "value",
                 "defaultValue": "''"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"soft\"` for a searchbar with slightly rounded corners,\n`\"round\"` for a searchbar with fully rounded corners,\nor `\"rectangular\"` for a searchbar without rounded corners.\n\nDefaults to `\"round\"` for the ionic theme, and `undefined` for all other themes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"large\"` for a searchbar with an increase in height,\nwhile \"small\" and \"medium\" provide progressively smaller heights.\n\nDefaults to `\"medium\"` for the ionic theme, and `undefined` for all other themes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
             }
         };
     }
     static get states() {
         return {
             "focused": {},
-            "noAnimate": {}
+            "noAnimate": {},
+            "isClearButtonPressed": {}
         };
     }
     static get events() {

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

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -53,6 +59,28 @@
  *   }
  * }
  */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 :host {
   /**
    * @prop --background: Background of the searchbar input
@@ -70,7 +98,7 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  --placeholder-opacity: var(--ion-placeholder-opacity, 1);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: flex;
@@ -78,24 +106,9 @@
   align-items: center;
   width: 100%;
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   box-sizing: border-box;
 }
 
-:host(.ion-color) {
-  color: var(--ion-color-contrast);
-}
-
-:host(.ion-color) .searchbar-input {
-  background: var(--ion-color-base);
-}
-
-:host(.ion-color) .searchbar-clear-button,
-:host(.ion-color) .searchbar-cancel-button,
-:host(.ion-color) .searchbar-search-icon {
-  color: inherit;
-}
-
 .searchbar-search-icon {
   color: var(--icon-color);
   pointer-events: none;
@@ -109,18 +122,18 @@
 }
 
 .searchbar-input {
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   border-radius: var(--border-radius);
   display: block;
   width: 100%;
@@ -197,12 +210,37 @@
   display: block;
 }
 
+:host {
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  font-family: var(--ion-font-family, inherit);
+}
+
+:host(.ion-color) {
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color) .searchbar-input {
+  background: var(--ion-color-base);
+}
+
+:host(.ion-color) .searchbar-clear-button,
+:host(.ion-color) .searchbar-cancel-button,
+:host(.ion-color) .searchbar-search-icon {
+  color: inherit;
+}
+
 :host(.searchbar-disabled) {
   cursor: default;
   opacity: 0.4;
   pointer-events: none;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use