@ionic/core 8.2.8-dev.11725548204.17968d54 → 8.2.8-dev.11725551009.1bc973e7

package/dist/collection/components/loading/loading.js

@@ -9,15 +9,14 @@ import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegate
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Loading {
     constructor() {
@@ -68,8 +67,8 @@ export class Loading {
     componentWillLoad() {
         var _a;
         if (this.spinner === undefined) {
-            const theme = getIonTheme(this);
-            this.spinner = config.get('loadingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'crescent'));
+            const mode = getIonMode(this);
+            this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
         }
         if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
             setOverlayId(this.el);
@@ -155,31 +154,29 @@ export class Loading {
     }
     render() {
         const { message, spinner, htmlAttributes, overlayIndex } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const msgId = `loading-${overlayIndex}-msg`;
         /**
          * If the message is defined, use that as the label.
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: '0dbb6567f1c7752c9939996e3eff59d32327450d', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'fb3d2cd7cd0539ed6540d8be50e243c7916b3ca2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '362630dee3f8c22391885d8b8b64a156b0da7c85', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'cfd15c9387e5c3007743677b855bbd873e70b71c', tabindex: "0" }), h("div", { key: 'faefc162b92a4b7e77b9d5cb1af1b256591666d1', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'dce3030d84005ea329b2117bf50c996fce4d551b', class: "loading-spinner" }, h("ion-spinner", { key: 'f9edfadf3ebeec30d2cdfc7c491627f48871838f', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '845dd53e4694f500ec6cdaeec2d64d7cf30bfddc', tabindex: "0" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'c8bd30782f3040b1b80e88aa924861e439d40754', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4ebfbb67c92e8eb56c27dd7c199b35bf6be1cf63', tabindex: "0" }), h("div", { key: '9492723cd87f1ef75534e449d4bc2b2deb0cb3cc', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'd9eb42454e48c82704d974a68b80ceb4de990417', class: "loading-spinner" }, h("ion-spinner", { key: 'cdb046bad89872f4208ae466979315652766bf3a', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '412d1bb537dafa6e6863d07ddc15f5969fe0617d', tabindex: "0" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["loading.ios.scss"],
-            "md": ["loading.md.scss"],
-            "ionic": ["loading.md.scss"]
+            "md": ["loading.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["loading.ios.css"],
-            "md": ["loading.md.css"],
-            "ionic": ["loading.md.css"]
+            "md": ["loading.md.css"]
         };
     }
     static get properties() {
@@ -438,7 +435,7 @@ export class Loading {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the loading indicator will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the loading indicator will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/loading/loading.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
@@ -81,8 +75,8 @@
   --height: auto;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -120,12 +114,6 @@ ion-spinner {
   color: var(--spinner-color);
 }
 
-/**
- * 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/menu/menu.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
@@ -78,8 +72,8 @@
   --min-height: auto;
   --max-height: auto;
   --background: var(--ion-background-color, #fff);
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: none;
@@ -282,8 +276,8 @@ ion-backdrop {
 }
 
 :host(.menu-pane-visible.split-pane-side) {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -305,8 +299,8 @@ ion-backdrop {
 }
 
 :host(.menu-pane-visible) .menu-inner {
-  right: 0;
   left: 0;
+  right: 0;
   width: auto;
   transform: none;
   box-shadow: none;
@@ -339,12 +333,6 @@ ion-backdrop {
   max-width: var(--side-max-width);
 }
 
-/**
- * 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/menu/menu.js

@@ -11,15 +11,12 @@ import { menuController } from "../../utils/menu-controller/index";
 import { getPresentedOverlay } from "../../utils/overlays";
 import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
 const mdEasing = 'cubic-bezier(0.0,0.0,0.2,1)';
 const iosEasingReverse = 'cubic-bezier(1, 0, 0.68, 0.28)';
 const mdEasingReverse = 'cubic-bezier(0.4, 0, 0.6, 1)';
 /**
- * @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 container - The container for the menu content.
  * @part backdrop - The backdrop that appears over the main content when the menu is open.
  */
@@ -583,35 +580,33 @@ export class Menu {
     }
     render() {
         const { type, disabled, el, isPaneVisible, inheritedAttributes, side } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         /**
          * If the Close Watcher is enabled then
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: '0a1caf2059df21bca634fbd1bbbd277aae79148f', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
-                [theme]: true,
+        return (h(Host, { key: '30c0c9bfb8973e4a6feb658f8c4ee8e362f464ed', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+                [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: '19d9087bbce335def3f71c1c6892adcbc3c4cb82', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'b857fac506707d7332cb7e5a97ac2bba668d5076' })), h("ion-backdrop", { key: 'ad5dcc7cf8bf9c995753412f606ff43f7bfa2e7d', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '34b0e5840906862cf1bc27207e089004b0402c56', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '2cd7e61a8c0987ca4b3f1f8b33cba7152f1275fe' })), h("ion-backdrop", { key: 'd190b1f9b66c76e276f27bfe074d3aab796180fb', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["menu.ios.scss"],
-            "md": ["menu.md.scss"],
-            "ionic": ["menu.md.scss"]
+            "md": ["menu.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["menu.ios.css"],
-            "md": ["menu.md.css"],
-            "ionic": ["menu.md.css"]
+            "md": ["menu.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/menu/menu.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
@@ -78,8 +72,8 @@
   --min-height: auto;
   --max-height: auto;
   --background: var(--ion-background-color, #fff);
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: none;
@@ -282,8 +276,8 @@ ion-backdrop {
 }
 
 :host(.menu-pane-visible.split-pane-side) {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -305,8 +299,8 @@ ion-backdrop {
 }
 
 :host(.menu-pane-visible) .menu-inner {
-  right: 0;
   left: 0;
+  right: 0;
   width: auto;
   transform: none;
   box-shadow: none;
@@ -339,12 +333,6 @@ ion-backdrop {
   max-width: var(--side-max-width);
 }
 
-/**
- * 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/menu-button/menu-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
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -120,28 +108,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 --border-radius: Border radius of the menu button
@@ -177,18 +143,18 @@
 
 .button-native {
   border-radius: var(--border-radius);
-  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;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -250,6 +216,12 @@ ion-icon {
   display: none;
 }
 
+:host(.menu-button-disabled) {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 :host(.ion-focused) .button-native {
   color: var(--color-focused);
 }
@@ -259,8 +231,8 @@ ion-icon {
 }
 
 .button-native::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -277,23 +249,17 @@ ion-icon {
     opacity: var(--background-hover-opacity, 0);
   }
 }
-:host(.in-toolbar:not(.in-toolbar-color)) {
-  color: var(--ion-toolbar-color, var(--color));
-}
-
-:host(.menu-button-disabled) {
-  cursor: default;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 :host(.ion-color) .button-native {
   color: var(--ion-color-base);
 }
 
+:host(.in-toolbar:not(.in-toolbar-color)) {
+  color: var(--ion-toolbar-color, var(--color));
+}
+
 :host {
   --background-focused: currentColor;
-  --background-focused-opacity: 0.1;
+  --background-focused-opacity: .1;
   --border-radius: 4px;
   --color: var(--ion-color-primary, #0054e9);
   --padding-start: 5px;

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

@@ -1,18 +1,16 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import listRegular from "@phosphor-icons/core/assets/regular/list.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { menuOutline, menuSharp } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { updateVisibility } from "../menu-toggle/menu-toggle-util";
 /**
- * @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 icon - The menu button icon (uses ion-icon).
@@ -39,29 +37,17 @@ export class MenuButton {
     async visibilityChanged() {
         this.visible = await updateVisibility(this.menu);
     }
-    get menuIcon() {
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: menuOutline,
-            ionic: listRegular,
-            md: menuSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured menu icon or the default icon
-        return config.get('menuIcon', defaultIcon);
-    }
     render() {
-        const { color, disabled, inheritedAttributes, menuIcon } = this;
-        const theme = getIonTheme(this);
+        const { color, disabled, inheritedAttributes } = this;
+        const mode = getIonMode(this);
+        const menuIcon = config.get('menuIcon', mode === 'ios' ? menuOutline : menuSharp);
         const hidden = this.autoHide && !this.visible;
         const attrs = {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '8debcdf5b236259af6e23623c07c545b29ec716d', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: '95a8b9f09c7fae9713a8dc003ed277f6f31403da', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+                [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
                 'menu-button-disabled': disabled,
@@ -69,22 +55,20 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: '477feadcbc8dfbea019ef2f6bdef6f5943be76ca' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '5064d465103cdd781b251d40802e8bb20e3d965d', class: "button-inner" }, h("slot", { key: 'd20bfb97c1546ce69c382af5ab48207e52ca1a5d' }, h("ion-icon", { key: '502d5519b75e288ecf77f992f2cb870f90f0c64e', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: '9fc6ec08f647b65db6baa6d03297153c0ad264b0', type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: '39f3ce20c400d2fac4890a042e8e44426709fca5' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '310978dc1cdef668de6720cde2a2304253679176', class: "button-inner" }, h("slot", { key: '2a2b9de524c1fc3c526fe9559cb077b976852725' }, h("ion-icon", { key: '9c22d7ea9fc3d76c32ec1c1b4b13d982c60b8c2d', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: 'c58c9e29c763070383472f65a9d322a684bcb564', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["menu-button.ios.scss"],
-            "md": ["menu-button.md.scss"],
-            "ionic": ["menu-button.ionic.scss"]
+            "md": ["menu-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["menu-button.ios.css"],
-            "md": ["menu-button.md.css"],
-            "ionic": ["menu-button.ionic.css"]
+            "md": ["menu-button.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/menu-button/menu-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
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -120,28 +108,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 --border-radius: Border radius of the menu button
@@ -177,18 +143,18 @@
 
 .button-native {
   border-radius: var(--border-radius);
-  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;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -250,6 +216,12 @@ ion-icon {
   display: none;
 }
 
+:host(.menu-button-disabled) {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 :host(.ion-focused) .button-native {
   color: var(--color-focused);
 }
@@ -259,8 +231,8 @@ ion-icon {
 }
 
 .button-native::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -277,25 +249,19 @@ ion-icon {
     opacity: var(--background-hover-opacity, 0);
   }
 }
-:host(.in-toolbar:not(.in-toolbar-color)) {
-  color: var(--ion-toolbar-color, var(--color));
-}
-
-:host(.menu-button-disabled) {
-  cursor: default;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 :host(.ion-color) .button-native {
   color: var(--ion-color-base);
 }
 
+:host(.in-toolbar:not(.in-toolbar-color)) {
+  color: var(--ion-toolbar-color, var(--color));
+}
+
 :host {
   --background-focused: currentColor;
-  --background-focused-opacity: 0.12;
+  --background-focused-opacity: .12;
   --background-hover: currentColor;
-  --background-hover-opacity: 0.04;
+  --background-hover-opacity: .04;
   --border-radius: 50%;
   --color: initial;
   --padding-start: 8px;

package/dist/collection/components/menu-toggle/menu-toggle.js

@@ -3,12 +3,9 @@
  */
 import { Host, h } from "@stencil/core";
 import { menuController } from "../../utils/menu-controller/index";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { updateVisibility } from "./menu-toggle-util";
 /**
- * @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.
- *
  * @slot - Content is placed inside the toggle to act as the click target.
  */
 export class MenuToggle {
@@ -27,12 +24,12 @@ export class MenuToggle {
         this.visible = await updateVisibility(this.menu);
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '67420de69745897b0a7092d24983dcd42c29b6e6', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
-                [theme]: true,
+        return (h(Host, { key: '90e621f09792383f1badcc1b402b1ac7d08c5f98', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+                [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '2c4782f5bfbade9daa50a0dedb511bb7fda3bad5' })));
+            } }, h("slot", { key: 'c0abdd1d91e9d80ee3704e3e374ebe1f29078460' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.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
@@ -92,8 +86,8 @@
   --background: var(--ion-background-color, #fff);
   --box-shadow: none;
   --backdrop-opacity: 0;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -154,8 +148,8 @@ ion-backdrop {
   }
 }
 .modal-handle {
-  right: 0px;
   left: 0px;
+  right: 0px;
   top: 5px;
   border-radius: 8px;
   -webkit-margin-start: auto;
@@ -207,12 +201,6 @@ ion-backdrop {
   bottom: 0;
 }
 
-/**
- * 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