@ionic/core 8.4.2-dev.11734347773.16e58dbd → 8.4.2-dev.11736265112.120bf7af

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

@@ -1,19 +1,15 @@
 /*!
  * (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 { debounceEvent, raf, componentOnReady, inheritAttributes } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Searchbar {
     constructor() {
@@ -124,7 +120,7 @@ export class Searchbar {
         this.autocapitalize = 'off';
         this.autocomplete = 'off';
         this.autocorrect = 'off';
-        this.cancelButtonIcon = undefined;
+        this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
         this.cancelButtonText = 'Cancel';
         this.clearIcon = undefined;
         this.debounce = undefined;
@@ -255,10 +251,10 @@ export class Searchbar {
     positionElements() {
         const value = this.getValue();
         const prevAlignLeft = this.shouldAlignLeft;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const shouldAlignLeft = !this.animated || value.trim() !== '' || !!this.focused;
         this.shouldAlignLeft = shouldAlignLeft;
-        if (theme !== 'ios') {
+        if (mode !== 'ios') {
             return;
         }
         if (prevAlignLeft !== shouldAlignLeft) {
@@ -375,83 +371,16 @@ export class Searchbar {
         }
         return true;
     }
-    /**
-     * 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 (this.searchIcon != null) {
-            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, searchbarCancelIcon, searchbarClearIcon, searchbarSearchIcon } = this;
+        const { cancelButtonText, autocapitalize } = this;
         const animated = this.animated && config.getBoolean('animated', true);
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
+        const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
+        const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '3301b510959fa5a426230175f5b61b4ead9bcfbb', "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: 'cb3a77783c75bbc78acdc7df9c75abcc415188d9', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '33fdf75d5f7ce578cfbb7c4befa816c2b30469ac', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [theme]: true,
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '0ef595eb1628928d4c7fdb166b8e41768700fa6e', "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: 'ea2c9b36d991acf5af7662059cb6b045f683ca94', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '17d57ece5852d03047e4d53ddad6c9d88a432a00', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+                [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
                 'searchbar-no-animate': animated && this.noAnimate,
@@ -460,29 +389,27 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '8a5accb217a1efccc1cd417cef8b95996e277c07', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'dccb39de2157490b1e937c9a2737edb55b7001e6', "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, h("ion-icon", { key: 'e85d30887e0b8eb264f86f682362882f4d14bf61', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '73aeda33d35e499a7f9edbb550707f2d5a234110', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: 'f67c2124e70c24eef0a271516e9c4bdaf7e98ceb', class: "searchbar-input-container" }, h("input", Object.assign({ key: '8c7f7ccc6809cca30ccc8c4e98e349d3f916321d', "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)), mode === 'md' && cancelButton, h("ion-icon", { key: 'f06524d3163b3883bbde937862aa1e0e8f49f6e1', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '9f7ba2bec93412ecb674b197be13db1de308bb57', "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: '9c9c376352470fc45877f1b89dfecf2c5ca2cc71', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" }))), theme === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '19fc3dbc722acc47ff7eb3c94ad4de8aed38dff4', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === '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"],
-            "ionic": ["searchbar.ionic.scss"]
+            "md": ["searchbar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["searchbar.ios.css"],
-            "md": ["searchbar.md.css"],
-            "ionic": ["searchbar.ionic.css"]
+            "md": ["searchbar.md.css"]
         };
     }
     static get properties() {
@@ -507,6 +434,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": true
             },
@@ -524,6 +453,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "If `true`, enable searchbar animation."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "false"
@@ -542,6 +473,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocapitalize",
                 "reflect": false,
                 "defaultValue": "'off'"
@@ -551,7 +484,7 @@ export class Searchbar {
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
-                    "resolved": "\"name\" | \"url\" | \"off\" | \"on\" | \"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"cc-csc\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-number\" | \"cc-type\" | \"country\" | \"country-name\" | \"current-password\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"new-password\" | \"one-time-code\" | \"organization\" | \"postal-code\" | \"street-address\" | \"transaction-amount\" | \"transaction-currency\" | \"username\" | \"email\" | \"tel\" | \"tel-area-code\" | \"tel-country-code\" | \"tel-extension\" | \"tel-local\" | \"tel-national\" | \"nickname\" | \"organization-title\" | \"cc-additional-name\" | \"language\" | \"bday\" | \"sex\" | \"impp\" | \"photo\"",
+                    "resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
                     "references": {
                         "AutocompleteTypes": {
                             "location": "import",
@@ -566,6 +499,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "Set the input's autocomplete property."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocomplete",
                 "reflect": false,
                 "defaultValue": "'off'"
@@ -584,6 +519,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "Set the input's autocorrect property."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocorrect",
                 "reflect": false,
                 "defaultValue": "'off'"
@@ -593,17 +530,20 @@ export class Searchbar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the cancel button icon. Only available when the theme is `\"md\"`.\nDefaults to `\"arrow-back-sharp\"`."
+                    "text": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `arrow-back-sharp`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "cancel-button-icon",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "config.get('backButtonIcon', arrowBackSharp) as string"
             },
             "cancelButtonText": {
                 "type": "string",
@@ -617,8 +557,10 @@ export class Searchbar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the the cancel button text. Only available when the theme is `\"ios\"`."
+                    "text": "Set the the cancel button text. Only applies to `ios` mode."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "cancel-button-text",
                 "reflect": false,
                 "defaultValue": "'Cancel'"
@@ -635,8 +577,10 @@ export class Searchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set the clear icon. Defaults to `\"close-circle\"` for `\"ios\"` theme and `\"close-sharp\"` for `\"md\"` and `\"ionic\"` theme."
+                    "text": "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "clear-icon",
                 "reflect": false
             },
@@ -654,6 +598,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "debounce",
                 "reflect": false
             },
@@ -671,6 +617,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -689,6 +637,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inputmode",
                 "reflect": false
             },
@@ -706,6 +656,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "enterkeyhint",
                 "reflect": false
             },
@@ -723,6 +675,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "This attribute specifies the maximum number of characters that the user can enter."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "maxlength",
                 "reflect": false
             },
@@ -740,6 +694,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "This attribute specifies the minimum number of characters that the user can enter."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "minlength",
                 "reflect": false
             },
@@ -757,6 +713,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "If used in a form, set the name of the control, which is submitted with the form data."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
@@ -775,6 +733,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "'Search'"
@@ -791,8 +751,10 @@ export class Searchbar {
                 "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\n`ios` mode and `search-sharp` in `md` mode."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "search-icon",
                 "reflect": false
             },
@@ -810,6 +772,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "Sets the behavior for the cancel button. Defaults to `\"never\"`.\nSetting to `\"focus\"` shows the cancel button on focus.\nSetting to `\"never\"` hides the cancel button.\nSetting to `\"always\"` shows the cancel button regardless\nof focus state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-cancel-button",
                 "reflect": false,
                 "defaultValue": "'never'"
@@ -828,6 +792,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "Sets the behavior for the clear button. Defaults to `\"focus\"`.\nSetting to `\"focus\"` shows the clear button on focus if the\ninput is not empty.\nSetting to `\"never\"` hides the clear button.\nSetting to `\"always\"` shows the clear button regardless\nof focus state, but only if the input is not empty."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-clear-button",
                 "reflect": false,
                 "defaultValue": "'always'"
@@ -846,6 +812,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "If `true`, enable spellcheck on the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "spellcheck",
                 "reflect": false,
                 "defaultValue": "false"
@@ -864,6 +832,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "Set the type of the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'search'"
@@ -882,6 +852,8 @@ export class Searchbar {
                     "tags": [],
                     "text": "the value of the searchbar."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"

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

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -59,28 +53,6 @@
  *   }
  * }
  */
-/**
- * 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
@@ -98,7 +70,7 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: var(--ion-placeholder-opacity, 1);
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: flex;
@@ -106,9 +78,24 @@
   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;
@@ -122,18 +109,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%;
@@ -210,37 +197,12 @@
   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/segment/segment.ios.css

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -59,32 +53,11 @@
  *   }
  * }
  */
-/**
- * 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 segment button
    */
+  --ripple-color: currentColor;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: grid;
@@ -94,6 +67,7 @@
   justify-content: center;
   width: 100%;
   background: var(--background);
+  font-family: var(--ion-font-family, inherit);
   text-align: center;
   contain: paint;
   user-select: none;
@@ -110,17 +84,6 @@
   display: none;
 }
 
-:host {
-  --ripple-color: currentColor;
-  font-family: var(--ion-font-family, inherit);
-}
-
-/**
- * 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
@@ -176,12 +139,6 @@
  *   }
  * }
  */
-/**
- * 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