@ionic/core 8.2.3-dev.11719301373.17616928 → 8.2.3-dev.11719439159.152ff050

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
@@ -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: 0.5;
+  --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/searchbar/searchbar.js

@@ -7,10 +7,9 @@ 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() {
@@ -121,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;
@@ -252,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) {
@@ -372,58 +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() {
-        const theme = getIonTheme(this);
-        const icon = this.clearIcon;
-        const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
-        if (icon !== undefined) {
-            // Icon is set on the component.
-            return 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() {
-        const theme = getIonTheme(this);
-        const icon = this.searchIcon;
-        const defaultIcon = theme === 'ios' ? searchOutline : searchSharp;
-        if (icon !== undefined) {
-            // Icon is set on the component.
-            return 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: '48861dba9f544739202e134ad984a06df37411fa', "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: '04433af176306e9cae044a90433382c980bacd89', "aria-hidden": "true" }, theme === 'md' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: 'a84f110e531e04fcad2a7643fdb50d79e94b7c51', 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,
@@ -432,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: 'a5f04dfb5f89cfa81521234439c85c3b15a051c1', class: "searchbar-input-container" }, h("input", Object.assign({ key: '0dcb88c659f846e3188b1964839d8a433c9885e2', "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: '46e3fdeadadbe6733671aba130907b76a147d74a', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'b020615f7cf03cfea759a884abb6a96cc85df231', "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: '02c603fb06def9f5cd7badb3036f8cb1781c33ba', "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.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() {
@@ -565,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",
@@ -589,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,
@@ -607,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
@@ -763,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
@@ -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: 0.5;
+  --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
@@ -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

package/dist/collection/components/segment-button/segment-button.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
@@ -123,18 +117,18 @@
 
 .button-native {
   border-radius: 0;
-  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;
   -webkit-margin-start: var(--margin-start);
   margin-inline-start: var(--margin-start);
   -webkit-margin-end: var(--margin-end);
@@ -171,8 +165,8 @@
 }
 
 .button-native::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -304,12 +298,6 @@ ion-ripple-effect {
     transition: 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
@@ -442,8 +430,8 @@ ion-ripple-effect {
   padding-inline-start: 2px;
   -webkit-padding-end: 2px;
   padding-inline-end: 2px;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
 }