@ionic/core 8.4.1-dev.11732561669.1ff93af7 → 8.4.1-dev.11732646949.1aaebad5

package/dist/collection/components/modal/modal.js

@@ -12,7 +12,7 @@ import { GESTURE, BACKDROP, dismiss, eventMethod, prepareOverlay, present, creat
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
 import { config } from "../../global/config";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { KEYBOARD_DID_OPEN } from "../../utils/keyboard/keyboard";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
@@ -23,8 +23,7 @@ import { createSwipeToCloseGesture } from "./gestures/swipe-to-close";
 import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
 // 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.
  *
  * @slot - Content is placed inside of the `.modal-content` element.
  *
@@ -104,7 +103,6 @@ export class Modal {
         this.keepContentsMounted = false;
         this.focusTrap = true;
         this.canDismiss = true;
-        this.shape = undefined;
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
@@ -303,7 +301,6 @@ export class Modal {
             presentingEl: presentingElement,
             currentBreakpoint: this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
-            staticBackdropOpacity: getIonTheme(this) === 'ionic',
         });
         /* tslint:disable-next-line */
         if (typeof window !== 'undefined') {
@@ -399,7 +396,6 @@ export class Modal {
             presentingEl: this.presentingElement,
             currentBreakpoint: initialBreakpoint,
             backdropBreakpoint,
-            staticBackdropOpacity: getIonTheme(this) === 'ionic',
         }));
         ani.progressStart(true, 1);
         const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
@@ -407,7 +403,7 @@ export class Modal {
                 this.currentBreakpoint = breakpoint;
                 this.ionBreakpointDidChange.emit({ breakpoint });
             }
-        }, getIonTheme(this) === 'ionic');
+        });
         this.gesture = gesture;
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
         this.gesture.enable(true);
@@ -564,52 +560,37 @@ export class Modal {
         await this.setCurrentBreakpoint(nextBreakpoint);
         return true;
     }
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        // TODO(ROU-11167): Remove theme check when shapes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (shape === undefined) {
-            return 'round';
-        }
-        return shape;
-    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } = this;
         const showHandle = handle !== false && isSheetModal;
-        const theme = getIonTheme(this);
-        const isCardModal = presentingElement !== undefined && theme === 'ios';
+        const mode = getIonMode(this);
+        const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        const shape = this.getShape();
-        return (h(Host, Object.assign({ key: '900cb0c7c99bf9c6cd74d87826318938571dff8f', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'b4da5111fe4719fa450c39b2d4bd884a302a7924', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '4f72dfb1afc92f4f405530ba3c75843ccc645b5f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && h("div", { key: '5a17ac89097f522191af09ae70b5f962f2dc07fd', class: "modal-shadow" }), h("div", Object.assign({ key: '94bc47c8fc046f82e39e86ce65294089006638e2',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: 'c12dbf747e0eb914eaf1331798548ffc7e147763', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'da546ee80c6576b5acc66e959fd5009e0b9a8160', class: "modal-shadow" }), h("div", Object.assign({ key: '306ebe6427440ad5f7ed36d590e562d15a503b75',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'a80bed25fe327dfe7d0f69425892faec601e2445', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'c5d17e346fe255a7c0cacbbf15c0083f2d09c488', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '77abe39febab091fee80d859a47108c1ee5c2377' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '5cc714170a00b67f3eda0cd1d6f37c1489a99c83' }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["modal.ios.scss"],
-            "md": ["modal.md.scss"],
-            "ionic": ["modal.ionic.scss"]
+            "md": ["modal.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["modal.ios.css"],
-            "md": ["modal.md.css"],
-            "ionic": ["modal.ionic.css"]
+            "md": ["modal.md.css"]
         };
     }
     static get properties() {
@@ -1082,23 +1063,6 @@ export class Modal {
                 "attribute": "can-dismiss",
                 "reflect": false,
                 "defaultValue": "true"
-            },
-            "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 a modal with slightly rounded corners,\n`\"round\"` for a modal with fully rounded corners, or `\"rectangular\"`\nfor a modal without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
-                },
-                "attribute": "shape",
-                "reflect": false
             }
         };
     }

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

@@ -1,3 +1,36 @@
+/**
+ * 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.
@@ -46,12 +79,15 @@
   --min-height: auto;
   --max-height: auto;
   --overflow: hidden;
+  --border-radius: 0;
   --border-width: 0;
   --border-style: none;
   --border-color: transparent;
+  --background: var(--ion-background-color, #fff);
   --box-shadow: none;
-  right: 0;
+  --backdrop-opacity: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -59,6 +95,7 @@
   align-items: center;
   justify-content: center;
   outline: none;
+  color: var(--ion-text-color, #000);
   contain: strict;
 }
 
@@ -94,22 +131,44 @@ ion-backdrop {
   background: transparent;
 }
 
+@media only screen and (min-width: 768px) and (min-height: 600px) {
+  :host {
+    --width: 600px;
+    --height: 500px;
+    --ion-safe-area-top: 0px;
+    --ion-safe-area-bottom: 0px;
+    --ion-safe-area-right: 0px;
+    --ion-safe-area-left: 0px;
+  }
+}
+@media only screen and (min-width: 768px) and (min-height: 768px) {
+  :host {
+    --width: 600px;
+    --height: 600px;
+  }
+}
 .modal-handle {
+  left: 0px;
+  right: 0px;
+  top: 5px;
+  border-radius: 8px;
   -webkit-margin-start: auto;
   margin-inline-start: auto;
   -webkit-margin-end: auto;
   margin-inline-end: auto;
   position: absolute;
+  width: 36px;
+  height: 5px;
   /**
    * This allows the handle to appear
    * on top of user content in WebKit.
    */
   transform: translateZ(0);
   border: 0;
+  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
   cursor: pointer;
   z-index: 11;
 }
-
 .modal-handle::before {
   /**
    * Adds a 4px tap area to the perimeter
@@ -122,6 +181,8 @@ ion-backdrop {
   padding-top: 4px;
   padding-bottom: 4px;
   position: absolute;
+  width: 36px;
+  height: 5px;
   transform: translate(-50%, -50%);
   content: "";
 }
@@ -140,110 +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
- * 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 {
-  --background: var(--ion-background-color, #fff);
-  --border-radius: 0;
-  --backdrop-opacity: 0;
-  color: var(--ion-text-color, #000);
-}
-
-@media only screen and (min-width: 768px) and (min-height: 600px) {
-  :host {
-    --width: 600px;
-    --height: 500px;
-    --ion-safe-area-top: 0px;
-    --ion-safe-area-bottom: 0px;
-    --ion-safe-area-right: 0px;
-    --ion-safe-area-left: 0px;
-  }
-}
-@media only screen and (min-width: 768px) and (min-height: 768px) {
-  :host {
-    --width: 600px;
-    --height: 600px;
-  }
-}
-.modal-handle {
-  right: 0px;
-  left: 0px;
-  top: 5px;
-  border-radius: 8px;
-  width: 36px;
-  height: 5px;
-  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
-}
-.modal-handle::before {
-  width: 36px;
-  height: 5px;
-}
-
-/**
- * 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/nav/nav.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
@@ -60,8 +54,8 @@
  * }
  */
 :host {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;

package/dist/collection/components/nav/nav.js

@@ -7,13 +7,9 @@ import { assert } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { lifecycle, setPageHidden, transition } from "../../utils/transition/index";
 import { config } from "../../global/config";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_LEAVE, LIFECYCLE_WILL_UNLOAD } from "./constants";
 import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToViews, matches } from "./view-controller";
-/**
- * @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 Nav {
     constructor() {
         this.transInstr = [];
@@ -677,13 +673,11 @@ export class Nav {
                 }
             }
             : undefined;
-        const theme = getIonTheme(this);
-        const mode = getIonMode(this, theme);
+        const mode = getIonMode(this);
         const enteringEl = enteringView.element;
         // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const leavingEl = leavingView && leavingView.element;
-        const animationOpts = Object.assign(Object.assign({ mode,
-            theme, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && config.getBoolean('animated', true), enteringEl,
+        const animationOpts = Object.assign(Object.assign({ mode, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && config.getBoolean('animated', true), enteringEl,
             leavingEl }, opts), { animationBuilder: opts.animationBuilder || this.animation || config.get('navAnimation') });
         const { hasCompleted } = await transition(animationOpts);
         return this.transitionFinish(hasCompleted, enteringView, leavingView, opts);
@@ -836,7 +830,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: 'bc0a585b0a0f7039195652a8d4fee6a0dd76c407' });
+        return h("slot", { key: 'dfe98cb6604a2015a49f41beffebdd2da957dfff' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -929,7 +923,7 @@ export class Nav {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "By default `ion-nav` animates transition between pages based on the mode (\"ios\" or \"md\").\nHowever, this property allows to create custom transition using `AnimationBuilder` functions."
+                    "text": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions."
                 }
             },
             "rootParams": {

package/dist/collection/components/nav-link/nav-link.js

@@ -3,10 +3,6 @@
  */
 import { Host, h } from "@stencil/core";
 import { navLink } from "./nav-link-utils";
-/**
- * @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 NavLink {
     constructor() {
         this.onClick = () => {
@@ -18,7 +14,7 @@ export class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return h(Host, { key: 'c036800bb9e59917a69c2c9f2d2026434e30e2f6', onClick: this.onClick });
+        return h(Host, { key: 'd2f8545b4fbd5aa25ef36eb01dffbc5d35ccfbb9', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {

package/dist/collection/components/note/note.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

package/dist/collection/components/note/note.js

@@ -3,35 +3,32 @@
  */
 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 Note {
     constructor() {
         this.color = undefined;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '44de4b90804510a887c1230d7abba1f724bf4d7e', class: createColorClasses(this.color, {
-                [theme]: true,
-            }) }, h("slot", { key: 'b9589fc95d66b23d5eaa55afcce3bbdb03151bbd' })));
+        const mode = getIonMode(this);
+        return (h(Host, { key: '10a3495bc21166176986441479f8f7539029d161', class: createColorClasses(this.color, {
+                [mode]: true,
+            }) }, h("slot", { key: 'b6a9459e1b85f608fafd060a4bfeb11637ebe873' })));
     }
     static get is() { return "ion-note"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["note.ios.scss"],
-            "md": ["note.md.scss"],
-            "ionic": ["note.md.scss"]
+            "md": ["note.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["note.ios.css"],
-            "md": ["note.md.css"],
-            "ionic": ["note.md.css"]
+            "md": ["note.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/note/note.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

package/dist/collection/components/picker/picker.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
@@ -180,8 +168,8 @@
 
 :host .picker-highlight {
   border-radius: var(--highlight-border-radius, 8px);
-  right: 0;
   left: 0;
+  right: 0;
   top: 50%;
   bottom: 0;
   -webkit-margin-start: auto;
@@ -201,18 +189,18 @@
 :host input {
   position: absolute;
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
+  clip: rect(0 0 0 0);
   opacity: 0;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   -webkit-appearance: none;
   -moz-appearance: none;
 }

package/dist/collection/components/picker/picker.js

@@ -4,8 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { getElementRoot } from "../../utils/helpers";
 /**
- * @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 Picker {
     constructor() {
@@ -475,7 +474,7 @@ export class Picker {
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { key: 'a4fd70e8cb7f5a75e27ae5bb2b7acb81aef4b548', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '6c204a5bf225821677ce7ea0c5c8e8f2da909962', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (h(Host, { key: 'f92214a09dc85b65873676f40fde2b802960e704', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '6da37f75aca4ea1c9cb3bc733ebda2116279f313', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -490,22 +489,20 @@ export class Picker {
                 if (ev.key === 'Enter') {
                     (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
                 }
-            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: 'c3592ed71cedbeb09fe03675baf5164f5a20c262', class: "picker-before" }), h("div", { key: '122975f2ceb59e82561a6e54868af89e99a72aca', class: "picker-after" }), h("div", { key: '89da0e0407fb6a7724b1781bd3c746371835ec52', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: 'd02ab67173b160d7ff45d9e62e2a38dbfb7af391' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '298e99d83dd3f5bf2798150bab0bb4024af472fa', class: "picker-before" }), h("div", { key: 'ea578f04eb562a4dc6d6cc92de133dcb9fb7f42a', class: "picker-after" }), h("div", { key: '84567824956dfe967992a629904836ba8b75b3ec', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: 'df81f8fb90e1f649b608328034528f5c31c70c3b' })));
     }
     static get is() { return "ion-picker"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["picker.ios.scss"],
-            "md": ["picker.md.scss"],
-            "ionic": ["picker.md.scss"]
+            "md": ["picker.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["picker.ios.css"],
-            "md": ["picker.md.css"],
-            "ionic": ["picker.md.css"]
+            "md": ["picker.md.css"]
         };
     }
     static get events() {