@ionic/core 8.5.5-dev.11744728652.115947e1 → 8.5.5-dev.11744821352.11e7a84f

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

@@ -0,0 +1,236 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/*
+Do not edit directly, this file was auto-generated.
+*/ /**
+ * 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.
+ */
+/**
+ * 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
+ * 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 list header
+   * @prop --color: Color of the list header text
+   *
+   * @prop --border-color: Color of the list header border
+   * @prop --border-width: Width of the list header border
+   * @prop --border-style: Style of the list header border
+   *
+   * @prop --inner-border-width: Width of the inner list header border
+   */
+  --border-style: solid;
+  --border-width: 0;
+  --inner-border-width: 0;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 40px;
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  background: var(--background);
+  color: var(--color);
+  overflow: hidden;
+}
+
+:host(.ion-color) {
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
+}
+
+.list-header-inner {
+  display: flex;
+  position: relative;
+  flex: 1;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+  min-height: inherit;
+  border-width: var(--inner-border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  overflow: inherit;
+  box-sizing: border-box;
+}
+
+::slotted(ion-label) {
+  flex: 1 1 auto;
+}
+
+:host(.list-header-lines-inset),
+:host(.list-header-lines-none) {
+  --border-width: 0;
+}
+
+:host(.list-header-lines-full),
+:host(.list-header-lines-none) {
+  --inner-border-width: 0;
+}
+
+:host {
+  --background: transparent;
+  --color: var(--ion-primitives-neutral-1200, #242424);
+  font-size: var(--ion-font-size-350, 0.875rem);
+  font-weight: var(--ion-font-weight-medium, 500);
+  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
+  line-height: var(--ion-font-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
+   * is completely visible.
+   */
+  overflow: visible;
+  /* stylelint-disable */
+  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, 16px));
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, 16px));
+  /* stylelint-enable */
+}
+:host-context([dir=rtl]) {
+  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, 16px));
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, 16px));
+}
+
+@supports selector(:dir(rtl)) {
+  :host(:dir(rtl)) {
+    padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, 16px));
+    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, 16px));
+  }
+}
+
+::slotted(ion-label) ::slotted(p) {
+  font-weight: var(--ion-font-weight-regular, 400);
+}
+
+::slotted(a.ionic-link) {
+  /* stylelint-disable declaration-no-important */
+  color: var(--ion-semantics-primary-base, #105cef) !important;
+}

package/dist/collection/components/list-header/list-header.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
@@ -124,6 +130,12 @@
   --inner-border-width: 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
@@ -179,6 +191,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/list-header/list-header.js

@@ -3,9 +3,10 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } 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 ListHeader {
     constructor() {
@@ -14,24 +15,26 @@ export class ListHeader {
     }
     render() {
         const { lines } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '95ce2135e2b1ad4d7d6020b0fb9bc6e02b3c0851', class: createColorClasses(this.color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'bf020d10f04a39707b7b5842e7380330a006476c', class: createColorClasses(this.color, {
+                [theme]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '3065b0a094bc31a90518898a5126a813c8a33816', class: "list-header-inner" }, h("slot", { key: 'fe15c87d7867f3e5d8185645c49c0228496697b8' }))));
+            }) }, h("div", { key: '7833f41a1271fbf29d264299e0517652dbdc026b', class: "list-header-inner" }, h("slot", { key: '293d9dfba0020d0eaeeb58bc109c01d4dd459f6b' }))));
     }
     static get is() { return "ion-list-header"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["list-header.ios.scss"],
-            "md": ["list-header.md.scss"]
+            "md": ["list-header.md.scss"],
+            "ionic": ["list-header.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["list-header.ios.css"],
-            "md": ["list-header.md.css"]
+            "md": ["list-header.md.css"],
+            "ionic": ["list-header.ionic.css"]
         };
     }
     static get properties() {

package/dist/collection/components/list-header/list-header.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
@@ -124,6 +130,12 @@
   --inner-border-width: 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
@@ -179,6 +191,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/loading/loading.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
@@ -75,8 +81,8 @@
   --height: auto;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -114,6 +120,12 @@ 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/loading/loading.js

@@ -9,14 +9,15 @@ import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegate
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } 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 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 Loading {
     constructor() {
@@ -67,8 +68,8 @@ export class Loading {
     componentWillLoad() {
         var _a;
         if (this.spinner === undefined) {
-            const mode = getIonMode(this);
-            this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
+            const theme = getIonTheme(this);
+            this.spinner = config.get('loadingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'crescent'));
         }
         if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
             setOverlayId(this.el);
@@ -154,29 +155,31 @@ export class Loading {
     }
     render() {
         const { message, spinner, htmlAttributes, overlayIndex } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(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: 'd6066c8b56b1fe4b597a243a7dab191ef0d21286', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'b27b420362950e02fc10b947aa5fbc500841b725', 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)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '2431eda00a2a3f510f5dfc39b7c7d47c056dfa3d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'cf210aaf5e754e4eccdb49cf7ead4647b3f9b2d1', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'fa9375143d391656d70e181d25b952c77c2fc6ec', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '8e4a4ed994f7f62df86b03696ac95162df41f52d', class: "loading-spinner" }, h("ion-spinner", { key: 'e5b323c272d365853ba92bd211e390b4fd4751d2', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'cae35ec8c34800477bff3ebcec8010e632158233', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '812e842097bc6b6176f93ea2a1c633d675e9526e', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '1eb07d8d165b365850424492e21d4ad03fea878f', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '4a2604b488379d3e409746926387a055a50cc5e0', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '6dd56eb0cc8806bc3301358f04731237fbaed31d', class: "loading-spinner" }, h("ion-spinner", { key: '58c4759134724acfd181f85babf85715aec93c2c', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'eedbbe2baf70511b357874434c536bc35e10c215', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["loading.ios.scss"],
-            "md": ["loading.md.scss"]
+            "md": ["loading.md.scss"],
+            "ionic": ["loading.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["loading.ios.css"],
-            "md": ["loading.md.css"]
+            "md": ["loading.md.css"],
+            "ionic": ["loading.md.css"]
         };
     }
     static get properties() {
@@ -435,7 +438,7 @@ export class Loading {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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)."
+                    "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)."
                 },
                 "attribute": "translucent",
                 "reflect": false,

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

@@ -7,18 +7,20 @@ import { focusFirstDescendant, focusLastDescendant } from "../../utils/focus-tra
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
 import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
-import { printIonError } from "../../utils/logging/index";
 import { menuController } from "../../utils/menu-controller/index";
 import { BACKDROP, GESTURE, getPresentedOverlay } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
 import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } 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.
  */
@@ -109,11 +111,11 @@ export class Menu {
         }
         const content = this.contentId !== undefined ? document.getElementById(this.contentId) : null;
         if (content === null) {
-            printIonError('[ion-menu] - Must have a "content" element to listen for drag events on.');
+            console.error('Menu: must have a "content" element to listen for drag events on.');
             return;
         }
         if (this.el.contains(content)) {
-            printIonError(`[ion-menu] - The "contentId" should refer to the main view's ion-content, not the ion-content inside of the ion-menu.`);
+            console.error(`Menu: "contentId" should refer to the main view's ion-content, not the ion-content inside of the ion-menu.`);
         }
         this.contentEl = content;
         // add menu's content classes
@@ -609,33 +611,35 @@ export class Menu {
     }
     render() {
         const { type, disabled, el, isPaneVisible, inheritedAttributes, side } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(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: '0a2ba4ff5600b80b54d1b5b45124779c6aa0d2f2', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
-                [mode]: true,
+        return (h(Host, { key: '5a368496eec74d3b27c3a40121ceafc7cdc470de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+                [theme]: 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: '40a222bcde4b959abc9939c44e89ea0cf8967aba', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '6a7ec5583294bb314990ff4ce6f25045652c07cb' })), h("ion-backdrop", { key: '95f1e87237f3cc24845d91b744f935bad6bb460d', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '873010981d4c338597b041cd9a65df24e030b261', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '14562442df4bd440212d0c62a527465603a44ef2' })), h("ion-backdrop", { key: '235058ee20ccc75f57dcebe0ffde359334ce3053', 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"]
+            "md": ["menu.md.scss"],
+            "ionic": ["menu.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["menu.ios.css"],
-            "md": ["menu.md.css"]
+            "md": ["menu.md.css"],
+            "ionic": ["menu.md.css"]
         };
     }
     static get properties() {

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