@ionic/core 8.5.2-dev.11742835181.16dd88fe → 8.5.2-dev.11742937752.14b430a3

package/dist/collection/components/label/label.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
@@ -129,12 +123,6 @@
   overflow: inherit;
 }
 
-/**
- * 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
@@ -190,12 +178,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/list/list.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,12 +72,6 @@ ion-list.list-inset {
   overflow: hidden;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -139,12 +127,6 @@ ion-list.list-inset {
  *   }
  * }
  */
-/**
- * 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/list.js

@@ -2,16 +2,14 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-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 List {
     constructor() {
         this.lines = undefined;
         this.inset = false;
-        this.shape = undefined;
     }
     /**
      * If `ion-item-sliding` are used inside the list, this method closes
@@ -26,48 +24,29 @@ export class List {
         }
         return false;
     }
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape, inset } = this;
-        // TODO(ROU-10831): Remove theme check when shapes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (shape === undefined && inset) {
-            return 'round';
-        }
-        if (shape === undefined) {
-            return 'rectangular';
-        }
-        return shape;
-    }
     render() {
-        const theme = getIonTheme(this);
-        const shape = this.getShape();
+        const mode = getIonMode(this);
         const { lines, inset } = this;
-        return (h(Host, { key: 'e0d56c6aa597601c8d430ff40044981422aac8f3', role: "list", class: {
-                [theme]: true,
+        return (h(Host, { key: '5ff2b0b3989cc99ce17abb8bcd7ec1847940d1ec', role: "list", class: {
+                [mode]: true,
                 // Used internally for styling
-                [`list-${theme}`]: true,
+                [`list-${mode}`]: true,
                 'list-inset': inset,
                 [`list-lines-${lines}`]: lines !== undefined,
-                [`list-${theme}-lines-${lines}`]: lines !== undefined,
-                [`list-${shape}`]: shape !== undefined,
+                [`list-${mode}-lines-${lines}`]: lines !== undefined,
             } }));
     }
     static get is() { return "ion-list"; }
     static get originalStyleUrls() {
         return {
             "ios": ["list.ios.scss"],
-            "md": ["list.md.scss"],
-            "ionic": ["list.ionic.scss"]
+            "md": ["list.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["list.ios.css"],
-            "md": ["list.md.css"],
-            "ionic": ["list.ionic.css"]
+            "md": ["list.md.css"]
         };
     }
     static get properties() {
@@ -106,23 +85,6 @@ export class List {
                 "attribute": "inset",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "shape": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'soft' | 'round' | 'rectangular'",
-                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"soft\"` for slightly rounded corners,\n`\"round\"` for fully rounded corners,\nor `\"rectangular\"` for no rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme\nwhen inset is `true`\ndefaults to `\"rectangular\"` for the `ionic`\ntheme when inset is `false`,\nundefined for all other themes."
-                },
-                "attribute": "shape",
-                "reflect": false
             }
         };
     }

package/dist/collection/components/list/list.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,12 +72,6 @@ ion-list.list-inset {
   overflow: hidden;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -139,12 +127,6 @@ ion-list.list-inset {
  *   }
  * }
  */
-/**
- * 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
@@ -230,8 +212,8 @@ ion-list.list-inset {
  * These selectors ensure the last item in the list
  * has the correct border.
  * We need to consider the following scenarios:
- * 1. The last item in a list as long as it is not the only item.
- * 2. The item in the last item-sliding in a list.
+ 1. The last item in a list as long as it is not the only item.
+ 2. The item in the last item-sliding in a list.
  * Note that we do not select "ion-item-sliding ion-item:last-of-type"
  * because that will cause the borders to disappear on
  * items in an item-sliding when the item is the last

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

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

package/dist/collection/components/list-header/list-header.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
@@ -130,12 +124,6 @@
   --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
@@ -191,12 +179,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/loading/loading.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
@@ -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/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: 'b27b420362950e02fc10b947aa5fbc500841b725', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'd6066c8b56b1fe4b597a243a7dab191ef0d21286', 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: '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" })));
+            }, 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" })));
     }
     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

@@ -12,15 +12,12 @@ import { BACKDROP, GESTURE, getPresentedOverlay } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
 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.
  */
@@ -611,35 +608,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: '5a368496eec74d3b27c3a40121ceafc7cdc470de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
-                [theme]: true,
+        return (h(Host, { key: '342db8551d26604128b29b21d2d8c37593972ed9', 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: '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" })));
+            } }, h("div", { key: '3c9bec2862b7fb9d88de66b1600be01f6735e3dd', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '76283b4b2a65c78646f92c3b273eea021eda499c' })), h("ion-backdrop", { key: '121c395bc4873542a1b6ae2c9e23f2e881e75d93', 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