@ionic/core 8.3.1-dev.11725636643.11841b59 → 8.3.1-dev.11726086040.1beb2c26

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: '8864a41b139b41cff1ed28df8e9b182abd586205', "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: '0b65f3dff4b2a2904bcd34e1eb2de0ea845739a1', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: 'bfdaa58f80a6a7e3baaf34c7180d6c8a8f26db3b', 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,
@@ -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: '026738237b8ce44dbf9aa0c3e28495722fd4fe43', class: "searchbar-input-container" }, h("input", Object.assign({ key: '2c95c7a1c26e114a0200a64aeb4d65ee744dcc16', "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: 'b377e3f6b8e8d81811dec662d88de49516467210', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '72e66dd70a9759f853cf10ca0904d1f94b5c46c0', "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: '43c0c542e4a2e86c17ac0fe945b507ff8bf2f306', "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() {
@@ -593,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",
@@ -617,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,
@@ -635,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
@@ -791,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: 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
@@ -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;
 }

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

@@ -4,11 +4,10 @@
 import { Host, forceUpdate, h } from "@stencil/core";
 import { addEventListener, removeEventListener, inheritAttributes } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 let ids = 0;
 /**
- * @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.
  *
  * @part native - The native HTML button element that wraps all child elements.
  * @part indicator - The indicator displayed on the checked segment button.
@@ -77,10 +76,10 @@ export class SegmentButton {
     }
     render() {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: '18e7844f7918fe0f7f4b78b19c9e62401a934c68', class: {
-                [theme]: true,
+        return (h(Host, { key: '70cf5c7a3ae2620222c5250c644faf3cfc3b3e4e', class: {
+                [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'in-segment': hostContext('ion-segment', this.el),
@@ -95,25 +94,23 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: '5e30ee078356df848a19b8f3b40457445108d9d1', "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: 'c6d1d9e5f520de659dc56b23d34efdfde6c7a3e0', class: "button-inner" }, h("slot", { key: 'd2f4792b4142444a7f578b08f6a7b51232484211' })), theme === 'md' && h("ion-ripple-effect", { key: '65fb7e28765f573898160e55c4b938124c8f4d03' })), h("div", { key: 'f1705639789b8b85bb70f4fb3e5301f81ef95999', part: "indicator", class: {
+            } }, h("button", Object.assign({ key: 'a53c9f1e360934e8d2e90476642ba4507fc38ebd', "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: '7d8feda840d389941cc693f500b5eba0b39b41da', class: "button-inner" }, h("slot", { key: 'd9ae1eec45db253cbf573d29cd545658dd595d87' })), mode === 'md' && h("ion-ripple-effect", { key: '49e6a16968709dc9b3fc77bc9fb99acb42fda88c' })), h("div", { key: '4e3ea0989ed5205dbb03586e4facb439b05a92de', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: '900acbaf069554be7abbe4716217b1c94b19ddc5', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: '65c72a151080998c1e548c87d4d4ebd5c7dda72f', 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"],
-            "ionic": ["segment-button.md.scss"]
+            "md": ["segment-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["segment-button.ios.css"],
-            "md": ["segment-button.md.css"],
-            "ionic": ["segment-button.md.css"]
+            "md": ["segment-button.md.css"]
         };
     }
     static get properties() {

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