@ionic/core 8.2.2-dev.11717796763.1aa87d5c → 8.2.2-nightly.20240607

package/dist/collection/components/route/route.js

@@ -1,8 +1,4 @@
 // TODO(FW-2832): types
-/**
- * @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 Route {
     constructor() {
         this.url = '';

package/dist/collection/components/router/router.js

@@ -5,10 +5,6 @@ import { readNavState, waitUntilNavNode, writeNavState } from "./utils/dom";
 import { findChainForIDs, findChainForSegments, findRouteRedirect } from "./utils/matching";
 import { readRedirects, readRoutes } from "./utils/parser";
 import { chainToSegments, generatePath, parsePath, readSegments, writeSegments } from "./utils/path";
-/**
- * @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 Router {
     constructor() {
         this.previousPath = null;
@@ -387,7 +383,7 @@ export class Router {
                             "docs": "The path to navigate to."
                         }, {
                             "name": "direction",
-                            "type": "\"root\" | \"forward\" | \"back\"",
+                            "type": "\"root\" | \"back\" | \"forward\"",
                             "docs": "The direction of the animation. Defaults to `\"forward\"`."
                         }, {
                             "name": "animation",
@@ -465,7 +461,7 @@ export class Router {
                     "signature": "(direction: RouterDirection) => Promise<boolean>",
                     "parameters": [{
                             "name": "direction",
-                            "type": "\"root\" | \"forward\" | \"back\"",
+                            "type": "\"root\" | \"back\" | \"forward\"",
                             "docs": ""
                         }],
                     "references": {

package/dist/collection/components/router-link/router-link.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
@@ -75,16 +69,16 @@
 }
 
 a {
-  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;
 }

package/dist/collection/components/router-link/router-link.js

@@ -3,11 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses, openURL } from "../../utils/theme";
-import { getIonTheme } 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.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class RouterLink {
     constructor() {
         this.onClick = (ev) => {
@@ -21,16 +17,16 @@ export class RouterLink {
         this.target = undefined;
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const attrs = {
             href: this.href,
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: 'faf50a5dd2b054f763fcf2e5bf6ad221d667f84a', onClick: this.onClick, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: 'f876442cab5b14b7e83c6d6ad2c2d878a9c57439', onClick: this.onClick, class: createColorClasses(this.color, {
+                [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: '584d22b9804b6e46792de22a5f3af82f4dceac7b' }, attrs), h("slot", { key: 'bc5c5f59c198fc1ebf8d92dc5b799528e6a8e993' }))));
+            }) }, h("a", Object.assign({ key: 'c44b78ec1fd10a40c23bfe548860ac2b346646a8' }, attrs), h("slot", { key: 'd32180a567613f79f89885135bd0d776ffc1eb8e' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/router-outlet/router-outlet.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
@@ -60,8 +54,8 @@
  * }
  */
 :host {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;

package/dist/collection/components/router-outlet/router-outlet.js

@@ -9,9 +9,6 @@ import { createLockController } from "../../utils/lock-controller";
 import { transition } from "../../utils/transition/index";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class RouterOutlet {
     constructor() {
         this.lockController = createLockController();
@@ -180,7 +177,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: '3ead75e18b3e5703d765dd5b69e4831ea750c141' });
+        return h("slot", { key: '8279a453c66a766e6e383ff59842b4ae070c13a9' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }
@@ -213,7 +210,7 @@ export class RouterOutlet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The mode determines the platform behaviors of the component."
+                    "text": "The mode determines which platform styles to use."
                 },
                 "attribute": "mode",
                 "reflect": false,
@@ -421,7 +418,7 @@ export class RouterOutlet {
                             "docs": ""
                         }, {
                             "name": "direction",
-                            "type": "\"root\" | \"forward\" | \"back\"",
+                            "type": "\"root\" | \"back\" | \"forward\"",
                             "docs": ""
                         }, {
                             "name": "animation",

package/dist/collection/components/row/row.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,12 +53,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

package/dist/collection/components/row/row.js

@@ -2,17 +2,10 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonTheme } 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.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class Row {
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '783c5e2efe4937e84e94520311dd1464abf3a607', class: {
-                [theme]: true,
-            } }, h("slot", { key: '6d963834537aa38534e87d7723450e856f1c477b' })));
+        return (h(Host, { key: '813c9a7f6782d2cf8eb27f30d3ab28e6f3122868', class: getIonMode(this) }, h("slot", { key: '356bec4d4d408ea63d6b431b06465d5b7bcbff71' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchbar/searchbar.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
@@ -115,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%;
@@ -209,12 +203,6 @@
   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,18 +1,15 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import ghostDuotone from "@phosphor-icons/core/assets/duotone/ghost-duotone.svg";
-import backspace from "@phosphor-icons/core/assets/regular/backspace.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() {
@@ -123,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;
@@ -254,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) {
@@ -374,72 +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.
-     *
-     * @returns {string} The icon to use for the clear icon.
-     */
-    get searchbarClearIcon() {
-        // Return the icon if it is explicitly set
-        if (this.clearIcon) {
-            return this.clearIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: closeCircle,
-            ionic: backspace,
-            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.
-     *
-     * @returns {string} The icon to use for the search icon.
-     */
-    get searchbarSearchIcon() {
-        // Return the icon if it is explicitly set
-        if (this.searchIcon) {
-            return this.searchIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: searchOutline,
-            ionic: ghostDuotone,
-            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);
-    }
     render() {
-        var _a;
-        const { cancelButtonText, autocapitalize, 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();
-        /**
-         * The `backButtonIcon` config will be used as a fallback if the
-         * `searchbarCancelIcon` config is not set. This ensures apps
-         * have a way to keep the back button icon and searchbar cancel
-         * icon in sync.
-         */
-        const searchbarCancelIcon = (_a = this.cancelButtonIcon) !== null && _a !== void 0 ? _a : config.get('searchbarCancelIcon', config.get('backButtonIcon', arrowBackSharp));
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '1325b5d3cd50fde86f2d5631d9d7dcd53c656cc3', "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: '05b21511f6f0a8f13b6bdb52e4197b550e3a224c', "aria-hidden": "true" }, theme === 'md' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '8c83e95c9331195f271ee3878b56331cc55b246d', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [theme]: true,
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '20b2d0f2e3425eede725dbe3323c7c29cdb66f4e', "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: '3a516c3fdd35256eb79639fd340afcdd92cfd7aa', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '34878db21f63a9bdffca0446d8ad5619ff04cac3', 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,
@@ -448,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: 'af3619276aff948d14b4db312b558b191efdab75', class: "searchbar-input-container" }, h("input", Object.assign({ key: '8e00bddb2c1e7a51548d7887161c375ed3a064d9', "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' && cancelButton, h("ion-icon", { key: '7823dc3661a5ddc45c84f801e74b12d5b85dee1b', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '02a1492e69abe727e795590648590d2af2249907', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: 'faa7b011206a8359b1963368c65988e506b260cb', class: "searchbar-input-container" }, h("input", Object.assign({ key: '732d3e5a2b258da6f136a14472ac872816a9853b', "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: '767dca971849f221dde220deae728b41bf764b98', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '9941b5de1ed9ebcf3e81de8e0731c09dea5a89d9', "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: '6eccaa09b92b263d825cc0cd1918168a8bcfc151', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" }))), theme === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'cb2b543d286373a84e2c6c2a959f92b045bbd7dd', "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.md.scss"]
+            "md": ["searchbar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["searchbar.ios.css"],
-            "md": ["searchbar.md.css"],
-            "ionic": ["searchbar.md.css"]
+            "md": ["searchbar.md.css"]
         };
     }
     static get properties() {
@@ -539,7 +478,7 @@ export class Searchbar {
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
-                    "resolved": "\"name\" | \"email\" | \"country\" | \"on\" | \"off\" | \"tel\" | \"url\" | \"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-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\"",
+                    "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",
@@ -581,17 +520,18 @@ 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`."
                 },
                 "attribute": "cancel-button-icon",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "config.get('backButtonIcon', arrowBackSharp) as string"
             },
             "cancelButtonText": {
                 "type": "string",
@@ -605,7 +545,7 @@ 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."
                 },
                 "attribute": "cancel-button-text",
                 "reflect": false,
@@ -623,7 +563,7 @@ 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`."
                 },
                 "attribute": "clear-icon",
                 "reflect": false
@@ -779,7 +719,7 @@ 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."
                 },
                 "attribute": "search-icon",
                 "reflect": false

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
@@ -115,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%;
@@ -209,12 +203,6 @@
   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
@@ -90,12 +84,6 @@
   display: 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
@@ -151,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

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

@@ -5,10 +5,9 @@ import { Host, h, writeTask } from "@stencil/core";
 import { raf } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
-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 Segment {
     constructor() {
@@ -421,30 +420,28 @@ export class Segment {
         current.setFocus();
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '8ebad474914841f288bad5076063c04eb8697c1f', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'ad0946134c8d465b760ad792655f1cb9922db520', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+                [mode]: 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: '7c80d6ab541998f3edf0ae12254c6412103000a0', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: 'dcdb425bcda0d60acb7c317e5e671ed462715b4a', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["segment.ios.scss"],
-            "md": ["segment.md.scss"],
-            "ionic": ["segment.md.scss"]
+            "md": ["segment.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["segment.ios.css"],
-            "md": ["segment.md.css"],
-            "ionic": ["segment.md.css"]
+            "md": ["segment.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/segment/segment.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
@@ -90,12 +84,6 @@
   display: 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
@@ -151,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