@ionic/core 8.3.2-dev.11727429833.12af2167 → 8.3.2-dev.11728314937.130218e6

package/dist/collection/components/content/content.js

@@ -6,6 +6,7 @@ import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from "../../uti
 import { isPlatform } from "../../utils/platform";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
+import { config } from "../../global/config";
 import { getIonMode, getIonTheme } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -343,7 +344,7 @@ export class Content {
         const forceOverscroll = this.shouldForceOverscroll(mode);
         const transitionShadow = theme === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: 'fd9c5f0f602b050cf46a36630c97009f552459d2', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, Object.assign({ key: '0eca3101fd42bed7d5a946f0ce498980648300c6', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [theme]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -351,12 +352,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '78a358870fed20509780e25d036437f5ebc8a8a6', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: 'd659d1a2cebe4e9bb35a07c6777e3ec9c9cf2b3f', class: {
+            } }, inheritedAttributes), h("div", { key: 'c5ce6bdad3e93161808155e942cd755f9ecbbe74', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '25ff5de101b4ace7dcde37f5dbb82f70daf0f759', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: 'f644fc44ba78643b5ececde769c35998b8206273' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '98459fde64164bf6eeb32a550a56e5a6c9cef74c' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }
@@ -776,7 +777,8 @@ const getPageElement = (el) => {
      * between the popover and the edges of the screen. But if the popover contains
      * its own page element, we should use that instead.
      */
-    const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
+    const appRootSelector = config.get('appRootSelector', 'ion-app');
+    const page = el.closest(`${appRootSelector}, ion-page, .ion-page, page-inner, .popover-content`);
     if (page) {
         return page;
     }

package/dist/collection/components/footer/footer.js

@@ -4,6 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
+import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
 import { handleFooterFade } from "./footer.utils";
 /**
@@ -22,7 +23,8 @@ export class Footer {
             const hasFade = collapse === 'fade';
             this.destroyCollapsibleFooter();
             if (hasFade) {
-                const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+                const appRootSelector = config.get('appRootSelector', 'ion-app');
+                const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
                 const contentEl = pageEl ? findIonContent(pageEl) : null;
                 if (!contentEl) {
                     printIonContentErrorMsg(this.el);
@@ -81,7 +83,7 @@ export class Footer {
         const theme = getIonTheme(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: 'd7358eba783967c0a5deaff543f9ea172baf7ec3', role: "contentinfo", class: {
+        return (h(Host, { key: '4d217c3986708145ae20c4702c0a6343c2300530', role: "contentinfo", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`footer-${theme}`]: true,
@@ -89,7 +91,7 @@ export class Footer {
                 [`footer-translucent-${theme}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, theme === 'ios' && translucent && h("div", { key: '1af37a980ee38cbe8b774af553caed43420ffe20', class: "footer-background" }), h("slot", { key: '2cd84214b1611b814b616eda67df8792f7b00447' })));
+            } }, theme === 'ios' && translucent && h("div", { key: 'c17c1cc7f073186594604dbf366d7a1c31f7cb0f', class: "footer-background" }), h("slot", { key: '043d2fea09805fed312774970ef353eca579710a' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/header/header.js

@@ -5,6 +5,7 @@ import { Host, h, writeTask } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
+import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
 import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, } from "./header.utils";
 /**
@@ -51,7 +52,8 @@ export class Header {
         const hasFade = collapse === 'fade';
         this.destroyCollapsibleHeader();
         if (hasCondense) {
-            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+            const appRootSelector = config.get('appRootSelector', 'ion-app');
+            const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             // Cloned elements are always needed in iOS transition
             writeTask(() => {
@@ -62,7 +64,7 @@ export class Header {
             await this.setupCondenseHeader(contentEl, pageEl);
         }
         else if (hasFade) {
-            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+            const pageEl = this.el.closest('ion-app,.ion-app,ion-page,.ion-page,page-inner');
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             if (!contentEl) {
                 printIonContentErrorMsg(this.el);
@@ -142,7 +144,7 @@ export class Header {
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (h(Host, Object.assign({ key: 'adbbe07d77bad24706b0bd759f8170494a81a289', role: roleType, class: {
+        return (h(Host, Object.assign({ key: '97f8672c11986b50e3abb741fdb2a931aeacfbdf', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -150,7 +152,7 @@ export class Header {
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme === 'ios' && translucent && h("div", { key: '658e2bd6083b7025fe25f3a7ef7e068b5de85d26', class: "header-background" }), h("slot", { key: 'd15ec6f1c6dcf4a316461dc917aceb50e54bd2c3' })));
+            } }, inheritedAttributes), theme === 'ios' && translucent && h("div", { key: '47279f7dcc4c138ab431aba4c240d53f8574eb31', class: "header-background" }), h("slot", { key: '44001b96332d3d95d443d8782fa582f931221cde' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/input/input.ionic.css

@@ -1014,8 +1014,8 @@
 .input-bottom {
   padding-left: 0;
   padding-right: 0;
-  padding-top: 7px;
-  padding-bottom: 7px;
+  padding-top: var(--ionic-space-100, 4px);
+  padding-bottom: 0;
   font-weight: var(--ionic-font-weight-medium, 500);
 }
 

package/dist/collection/components/input/input.js

@@ -585,7 +585,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
-                    "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\"",
+                    "resolved": "\"name\" | \"url\" | \"off\" | \"on\" | \"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"cc-csc\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-number\" | \"cc-type\" | \"country\" | \"country-name\" | \"current-password\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"new-password\" | \"one-time-code\" | \"organization\" | \"postal-code\" | \"street-address\" | \"transaction-amount\" | \"transaction-currency\" | \"username\" | \"email\" | \"tel\" | \"tel-area-code\" | \"tel-country-code\" | \"tel-extension\" | \"tel-local\" | \"tel-national\" | \"nickname\" | \"organization-title\" | \"cc-additional-name\" | \"language\" | \"bday\" | \"sex\" | \"impp\" | \"photo\"",
                     "references": {
                         "AutocompleteTypes": {
                             "location": "import",

package/dist/collection/components/item/item.ionic.css

@@ -416,6 +416,7 @@ ion-ripple-effect {
   --border-color: var(--ionic-color-neutral-300, #cfcfcf);
   --border-style: var(--ionic-border-style-solid, solid);
   --border-width: 0 0 var(--ionic-border-size-025, 1px) 0;
+  --color: var(--ionic-color-neutral-1200, #242424);
   --detail-icon-color: var(--ionic-color-neutral-800, #626262);
   --detail-icon-font-size: var(--ionic-scale-600, 24px);
   --detail-icon-opacity: 1;
@@ -424,7 +425,14 @@ ion-ripple-effect {
   --padding-end: var(--ionic-space-400, 16px);
   --padding-bottom: var(--ionic-space-200, 8px);
   --padding-start: var(--ionic-space-400, 16px);
+  font-size: var(--ionic-font-size-400, 1rem);
+  font-weight: var(--ionic-font-weight-medium, 500);
+  letter-spacing: var(--ionic-letter-spacing-0, 0);
+  line-height: var(--ionic-line-height-600, 24px);
+  text-decoration: none;
+  text-transform: none;
   font-family: var(--ionic-font-family, "Inter", sans-serif);
+  font-size: var(--ionic-font-size-400, 1rem);
 }
 
 .item-inner {

package/dist/collection/components/list-header/list-header.ionic.css

@@ -197,9 +197,14 @@
 
 :host {
   --background: transparent;
-  min-height: 58px;
+  --color: var(--ionic-color-neutral-1200, #242424);
   font-size: var(--ionic-font-size-350, 0.875rem);
+  font-weight: var(--ionic-font-weight-medium, 500);
+  letter-spacing: var(--ionic-letter-spacing-0, 0);
   line-height: var(--ionic-line-height-600, 24px);
+  text-decoration: none;
+  text-transform: none;
+  min-height: 58px;
   /** 
    * The focus rings from components like buttons and links
    * are being cut off. This style ensures that the focus ring
@@ -223,11 +228,6 @@
   }
 }
 
-::slotted(ion-label) {
-  --color: var(--ionic-color-neutral-1200, #242424);
-  font-weight: var(--ionic-font-weight-medium, 500);
-}
-
 ::slotted(ion-label) ::slotted(p) {
   font-weight: var(--ionic-font-weight-regular, 400);
 }

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

@@ -551,7 +551,7 @@ export class Searchbar {
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
-                    "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\"",
+                    "resolved": "\"name\" | \"url\" | \"off\" | \"on\" | \"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"cc-csc\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-number\" | \"cc-type\" | \"country\" | \"country-name\" | \"current-password\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"new-password\" | \"one-time-code\" | \"organization\" | \"postal-code\" | \"street-address\" | \"transaction-amount\" | \"transaction-currency\" | \"username\" | \"email\" | \"tel\" | \"tel-area-code\" | \"tel-country-code\" | \"tel-extension\" | \"tel-local\" | \"tel-national\" | \"nickname\" | \"organization-title\" | \"cc-additional-name\" | \"language\" | \"bday\" | \"sex\" | \"impp\" | \"photo\"",
                     "references": {
                         "AutocompleteTypes": {
                             "location": "import",

package/dist/collection/components/segment/segment.ionic.css

@@ -0,0 +1,119 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+/**
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --background: Background of the segment button
+   */
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: grid;
+  grid-auto-columns: 1fr;
+  position: relative;
+  align-items: stretch;
+  justify-content: center;
+  width: 100%;
+  background: var(--background);
+  text-align: center;
+  contain: paint;
+  user-select: none;
+}
+
+:host(.segment-scrollable) {
+  justify-content: start;
+  width: auto;
+  overflow-x: auto;
+  grid-auto-columns: minmax(min-content, 1fr);
+}
+
+:host(.segment-scrollable::-webkit-scrollbar) {
+  display: none;
+}
+
+:host {
+  --background: var(--ionic-color-base-white, #ffffff);
+}

package/dist/collection/components/segment/segment.ios.css

@@ -59,11 +59,32 @@
  *   }
  * }
  */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 :host {
   /**
    * @prop --background: Background of the segment button
    */
-  --ripple-color: currentColor;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: grid;
@@ -73,7 +94,6 @@
   justify-content: center;
   width: 100%;
   background: var(--background);
-  font-family: var(--ion-font-family, inherit);
   text-align: center;
   contain: paint;
   user-select: none;
@@ -90,6 +110,11 @@
   display: none;
 }
 
+:host {
+  --ripple-color: currentColor;
+  font-family: var(--ion-font-family, inherit);
+}
+
 /**
  * Convert a pixels given value into rem
  * 

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

@@ -422,14 +422,14 @@ export class Segment {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '8ebad474914841f288bad5076063c04eb8697c1f', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a82caab0d6fe34847f5a85282d0916a647b5976a', 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: '7c80d6ab541998f3edf0ae12254c6412103000a0', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: '1b04fd3a2c340014376ab52824435c5f27b963b7', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }
@@ -437,14 +437,14 @@ export class Segment {
         return {
             "ios": ["segment.ios.scss"],
             "md": ["segment.md.scss"],
-            "ionic": ["segment.md.scss"]
+            "ionic": ["segment.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["segment.ios.css"],
             "md": ["segment.md.css"],
-            "ionic": ["segment.md.css"]
+            "ionic": ["segment.ionic.css"]
         };
     }
     static get properties() {

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

@@ -59,11 +59,32 @@
  *   }
  * }
  */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 :host {
   /**
    * @prop --background: Background of the segment button
    */
-  --ripple-color: currentColor;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: grid;
@@ -73,7 +94,6 @@
   justify-content: center;
   width: 100%;
   background: var(--background);
-  font-family: var(--ion-font-family, inherit);
   text-align: center;
   contain: paint;
   user-select: none;
@@ -90,6 +110,11 @@
   display: none;
 }
 
+:host {
+  --ripple-color: currentColor;
+  font-family: var(--ion-font-family, inherit);
+}
+
 /**
  * Convert a pixels given value into rem
  *