@ionic/core 8.0.0-dev.11713809015.1aabd368 → 8.0.0-dev.11713988726.1e82b9a0

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

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

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
@@ -109,18 +115,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%;
@@ -203,6 +209,12 @@
   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,9 +7,10 @@ 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 { 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() {
@@ -120,7 +121,7 @@ export class Searchbar {
         this.autocapitalize = 'off';
         this.autocomplete = 'off';
         this.autocorrect = 'off';
-        this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
+        this.cancelButtonIcon = undefined;
         this.cancelButtonText = 'Cancel';
         this.clearIcon = undefined;
         this.debounce = undefined;
@@ -251,10 +252,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) {
@@ -371,16 +372,69 @@ export class Searchbar {
         }
         return true;
     }
+    /**
+     * 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.
+     *
+     * @internal
+     * @returns {string} The icon to use for the cancel icon.
+     */
+    get searchbarCancelIcon() {
+        const icon = this.cancelButtonIcon;
+        if (icon !== undefined) {
+            // Icon is set on the component.
+            return icon;
+        }
+        return config.get('searchbarCancelIcon', arrowBackSharp);
+    }
+    /**
+     * 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.
+     *
+     * @internal
+     * @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.
+     *
+     * @internal
+     * @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() {
-        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: '988915b91dd135bb3a4ba5ff31b2765f78cc05a0', "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: '239b7d21a29a527f515dcdf7ec1fc87f1aa1cc54', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '78cb90f96e83e11b158baf600af907ee7512abba', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [mode]: true,
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '7250d658616f1c1dfe2580039f9517a0aedb8275', "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: 'c5926bcb61fd9e6ddf222f6482b3278c8d605832', "aria-hidden": "true" }, theme === 'md' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '3bdbb7068aca0f92addf299181284319cf8a31fc', 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,
@@ -389,27 +443,29 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '50660dbb27cc15bc69d22fa61e7be643fc6a75c2', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'b84654d68aa77e4f30b9009d7e2e04dfee96717e', "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: '7b1ddb05941fd0ada3b256bdeaf4e29153917546', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '3219fff5d78ee3fe0ae092e5218b1ab0b1ba2766', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '2a51b88e5fd23ffe57f9bb8862dff83c39438d13', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'b24b3494141d0dfcfdd2a8d40f7a804331a87505', "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: '3de1b10ad70e2e8112199c3a484e444ce963d5ee', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'f7ff4a93083a1f19fc8b159fb728ee151f2dc56d', "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: '859e781c418d1a03992c12f4466f77ac042266e8', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '48d874cb539973d53aec519a6e426f589cdf3d5a', "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.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["searchbar.ios.css"],
-            "md": ["searchbar.md.css"]
+            "md": ["searchbar.md.css"],
+            "ionic": ["searchbar.md.css"]
         };
     }
     static get properties() {
@@ -520,18 +576,17 @@ 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\"`."
                 },
                 "attribute": "cancel-button-icon",
-                "reflect": false,
-                "defaultValue": "config.get('backButtonIcon', arrowBackSharp) as string"
+                "reflect": false
             },
             "cancelButtonText": {
                 "type": "string",
@@ -545,7 +600,7 @@ export class Searchbar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the the cancel button text. Only applies to `ios` mode."
+                    "text": "Set the the cancel button text. Only available when the theme is `\"ios\"`."
                 },
                 "attribute": "cancel-button-text",
                 "reflect": false,
@@ -563,7 +618,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."
                 },
                 "attribute": "clear-icon",
                 "reflect": false
@@ -719,7 +774,7 @@ export class Searchbar {
                 "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."
                 },
                 "attribute": "search-icon",
                 "reflect": false

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
@@ -109,18 +115,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%;
@@ -203,6 +209,12 @@
   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,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
@@ -84,6 +90,12 @@
   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
@@ -139,6 +151,12 @@
  *   }
  * }
  */
+/**
+ * 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,9 +5,10 @@ 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 { 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 Segment {
     constructor() {
@@ -419,28 +420,30 @@ export class Segment {
         current.setFocus();
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'c11b46ad7311cf015402f3a6d4d58316d8d48faa', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '22b4652516fd38ed3e9b218b3fa5c65521e75fc3', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: '47ef8ff809cc11ea27fda5116cae25540b0a6f92' })));
+            }) }, h("slot", { key: '078efd509b5b858ef381df187b706c80e20d449e' })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["segment.ios.scss"],
-            "md": ["segment.md.scss"]
+            "md": ["segment.md.scss"],
+            "ionic": ["segment.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["segment.ios.css"],
-            "md": ["segment.md.css"]
+            "md": ["segment.md.css"],
+            "ionic": ["segment.md.css"]
         };
     }
     static get properties() {

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

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

@@ -4,10 +4,11 @@
 import { Host, forceUpdate, h } from "@stencil/core";
 import { addEventListener, removeEventListener, inheritAttributes } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 let ids = 0;
 /**
- * @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.
  *
  * @part native - The native HTML button element that wraps all child elements.
  * @part indicator - The indicator displayed on the checked segment button.
@@ -76,10 +77,10 @@ export class SegmentButton {
     }
     render() {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: '67fab48aa470e71df51854a12d9fc3d744435c8f', class: {
-                [mode]: true,
+        return (h(Host, { key: '6f21642babe5d21f7512e69b789a6f6bc1720028', class: {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'in-segment': hostContext('ion-segment', this.el),
@@ -94,23 +95,25 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: 'dcc61cd35f1ff3535241c21630ae5f36166f6a7e', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '8ea97d13b245a0ac3a37d2452180e8638565f0c7', class: "button-inner" }, h("slot", { key: 'b6abce60c1fa41db06b7af8a4de026f7d940f8d4' })), mode === 'md' && h("ion-ripple-effect", null)), h("div", { key: '2ce136fd46ca6a8b8f2c3a681672a08c6d6c3657', part: "indicator", class: {
+            } }, h("button", Object.assign({ key: '07457d885533045d079c24aa8688f9163476cf69', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: 'ae31fac9aec159e36b2d618b89cfd09ad7c7413c', class: "button-inner" }, h("slot", { key: '2f2d652009538cb7a1c0e49143a3a0f7e0af762b' })), theme === 'md' && h("ion-ripple-effect", null)), h("div", { key: 'd9f6bbc250db74f35fadfde8f8e3a45cbda51344', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: 'eac73d7b71edeecb92b6cdfc5a489ce6413bfb60', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: 'e5e744606dc57ae55e673ea040704286a182450a', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["segment-button.ios.scss"],
-            "md": ["segment-button.md.scss"]
+            "md": ["segment-button.md.scss"],
+            "ionic": ["segment-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["segment-button.ios.css"],
-            "md": ["segment-button.md.css"]
+            "md": ["segment-button.md.css"],
+            "ionic": ["segment-button.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/segment-button/segment-button.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
@@ -117,18 +123,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);
@@ -165,8 +171,8 @@
 }
 
 .button-native::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -298,6 +304,12 @@ 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
@@ -359,8 +371,8 @@ ion-ripple-effect {
   --background-hover: var(--color-checked);
   --background-focused: var(--color-checked);
   --background-activated-opacity: 0;
-  --background-focused-opacity: .12;
-  --background-hover-opacity: .04;
+  --background-focused-opacity: 0.12;
+  --background-hover-opacity: 0.04;
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6);
   --color-checked: var(--ion-color-primary, #0054e9);
   --indicator-box-shadow: none;
@@ -488,8 +500,8 @@ ion-ripple-effect {
 }
 
 .segment-button-indicator {
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
 }