@ionic/core 8.4.2-dev.11734347773.16e58dbd → 8.4.2-dev.11736265112.120bf7af

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: 'df53681cdbbb226c8db070e450a3093d65ea0d2c', 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() {
@@ -86,6 +65,8 @@ export class List {
                     "tags": [],
                     "text": "How the bottom border should be displayed on all items."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "lines",
                 "reflect": false
             },
@@ -103,26 +84,11 @@ export class List {
                     "tags": [],
                     "text": "If `true`, the list will have margin around it and rounded corners."
                 },
+                "getter": false,
+                "setter": false,
                 "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: 'c656576a3e9aaca4d048a7370972e9e78219c459', class: createColorClasses(this.color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'fb78bd8601cbd7b90ec84a96e0c8325be1132b1e', class: createColorClasses(this.color, {
+                [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: 'd0e40e5746857661568a80deb522f56b2518312b', class: "list-header-inner" }, h("slot", { key: '673e42ef8bbea9866751dbc4ceb87ce6143a45f7' }))));
+            }) }, h("div", { key: '2580ad49f3a54973e15f14d645a1e55a6fa066ac', class: "list-header-inner" }, h("slot", { key: '677b2e2ec8eeb3ae6ad329e86c76451cf3ae6c2f' }))));
     }
     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() {
@@ -59,6 +56,8 @@ export class ListHeader {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": true
             },
@@ -76,6 +75,8 @@ export class ListHeader {
                     "tags": [],
                     "text": "How the bottom border should be displayed on the list header."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "lines",
                 "reflect": false
             }

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: '8ac040fdd2856dad3105905554586ebe654379d2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'd97f536b7f443ea19a2bbf2dcbc7f546b8e0a092', 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: '7c062f2ac0b017e5e1ccb47cfefa6d01dd721b68', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '23275eaa81163a92ef5ff86f3f79e35e445c2888', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '64f46afe7e197ccf26f9ec3fb9e141f6937a3de2', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '58967d7525bf6ce35889ba86b2a58e7ef59df6f6', class: "loading-spinner" }, h("ion-spinner", { key: '3e4be00f0468050bc9931749f546fd67f20f227f', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'fa8a6aaab5c148fed75215593130fdcbb5370ef2', 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: '6cd39bd7912fd080ab59d041644054c96d238ea9', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'c14ca5a9308844f11bcb010257e15208a75b39bc', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '118bceefa8e1cf8b225a858f224e6d919cf03c26', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '490d6e8ae4433835fe273162d7b90deab944fb39', class: "loading-spinner" }, h("ion-spinner", { key: 'c5cf6549c43df4cb23814b3e62ec4d9e7ea2b64f', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '2b888362122d3b66b0492d53b0c21bd6a2a97501', 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() {
@@ -201,6 +198,8 @@ export class Loading {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "overlay-index",
                 "reflect": false
             },
@@ -226,7 +225,9 @@ export class Loading {
                             "text": undefined
                         }],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "hasController": {
                 "type": "boolean",
@@ -245,6 +246,8 @@ export class Loading {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "has-controller",
                 "reflect": false,
                 "defaultValue": "false"
@@ -263,6 +266,8 @@ export class Loading {
                     "tags": [],
                     "text": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "keyboard-close",
                 "reflect": false,
                 "defaultValue": "true"
@@ -286,7 +291,9 @@ export class Loading {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the loading indicator is presented."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "leaveAnimation": {
                 "type": "unknown",
@@ -307,7 +314,9 @@ export class Loading {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the loading indicator is dismissed."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "message": {
                 "type": "string",
@@ -329,6 +338,8 @@ export class Loading {
                     "tags": [],
                     "text": "Optional text content to display in the loading indicator.\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "message",
                 "reflect": false
             },
@@ -346,6 +357,8 @@ export class Loading {
                     "tags": [],
                     "text": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "css-class",
                 "reflect": false
             },
@@ -363,6 +376,8 @@ export class Loading {
                     "tags": [],
                     "text": "Number of milliseconds to wait before dismissing the loading indicator."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "duration",
                 "reflect": false,
                 "defaultValue": "0"
@@ -381,6 +396,8 @@ export class Loading {
                     "tags": [],
                     "text": "If `true`, the loading indicator will be dismissed when the backdrop is clicked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "backdrop-dismiss",
                 "reflect": false,
                 "defaultValue": "false"
@@ -399,6 +416,8 @@ export class Loading {
                     "tags": [],
                     "text": "If `true`, a backdrop will be displayed behind the loading indicator."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-backdrop",
                 "reflect": false,
                 "defaultValue": "true"
@@ -423,6 +442,8 @@ export class Loading {
                     "tags": [],
                     "text": "The name of the spinner to display."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "spinner",
                 "reflect": false
             },
@@ -438,8 +459,10 @@ 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)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "translucent",
                 "reflect": false,
                 "defaultValue": "false"
@@ -458,6 +481,8 @@ export class Loading {
                     "tags": [],
                     "text": "If `true`, the loading indicator will animate."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "true"
@@ -475,7 +500,9 @@ export class Loading {
                 "docs": {
                     "tags": [],
                     "text": "Additional attributes to pass to the loader."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "isOpen": {
                 "type": "boolean",
@@ -491,6 +518,8 @@ export class Loading {
                     "tags": [],
                     "text": "If `true`, the loading indicator will open. If `false`, the loading indicator will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the loadingController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe loading indicator dismisses. You will need to do that in your code."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-open",
                 "reflect": false,
                 "defaultValue": "false"
@@ -509,6 +538,8 @@ export class Loading {
                     "tags": [],
                     "text": "An ID corresponding to the trigger element that\ncauses the loading indicator to open when clicked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "trigger",
                 "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