@ionic/core 8.3.0 → 8.3.1-dev.11725635440.155711c4

package/dist/collection/components/note/note.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
@@ -53,6 +59,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/picker/picker.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
@@ -53,6 +59,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
@@ -168,8 +180,8 @@
 
 :host .picker-highlight {
   border-radius: var(--highlight-border-radius, 8px);
-  left: 0;
   right: 0;
+  left: 0;
   top: 50%;
   bottom: 0;
   -webkit-margin-start: auto;
@@ -189,18 +201,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,7 +4,8 @@
 import { Host, h } from "@stencil/core";
 import { getElementRoot } from "../../utils/helpers";
 /**
- * @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 Picker {
     constructor() {
@@ -474,7 +475,7 @@ export class Picker {
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { key: '02b0687b1f80ba295a965dfba76dd59e2d1de5d3', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'f83ed84bcf9e02539c00d8a4e63e6a0d7fc4ac71', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (h(Host, { key: '2d007df5759a9ebed88d794354ebaef4e2a51b56', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '6a8723a290e0615d3856db6525737256091cf170', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -489,20 +490,22 @@ 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: '45b07fb0617d8e006712776bf78302288edb3ff4', class: "picker-before" }), h("div", { key: '73009229368e0d62b09c913aacade26f068a7aa9', class: "picker-after" }), h("div", { key: 'b73da00e446cd1cfd511c39212e14a00d355752e', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: 'd969f5efc5ddb9eda6c4828702efd1ceeb69f767' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '65ab09b2d852acdb3085fdb807940c439b31338e', class: "picker-before" }), h("div", { key: 'd3781006c58e456133e04f9c0d6f54e775c3fc8d', class: "picker-after" }), h("div", { key: '34bf77b3b4ea1c2f3aa8e55f6288a6e808bc256d', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '854507de0a26d84cf24dc37dd3077e3d7f8883ab' })));
     }
     static get is() { return "ion-picker"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["picker.ios.scss"],
-            "md": ["picker.md.scss"]
+            "md": ["picker.md.scss"],
+            "ionic": ["picker.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["picker.ios.css"],
-            "md": ["picker.md.css"]
+            "md": ["picker.md.css"],
+            "ionic": ["picker.md.css"]
         };
     }
     static get events() {

package/dist/collection/components/picker/picker.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
@@ -53,6 +59,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
@@ -168,8 +180,8 @@
 
 :host .picker-highlight {
   border-radius: var(--highlight-border-radius, 8px);
-  left: 0;
   right: 0;
+  left: 0;
   top: 50%;
   bottom: 0;
   -webkit-margin-start: auto;
@@ -189,18 +201,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-column/picker-column.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
@@ -69,8 +75,8 @@
  * events. This allows screen readers to navigate the column.
  */
 .assistive-focusable {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -167,7 +173,8 @@
   scroll-snap-align: none;
 }
 
-::slotted([slot=prefix]), ::slotted([slot=suffix]) {
+::slotted([slot=prefix]),
+::slotted([slot=suffix]) {
   max-width: 200px;
   text-overflow: ellipsis;
   white-space: nowrap;

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

@@ -7,9 +7,10 @@ import { getElementRoot, raf } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
 import { isPlatform } from "../../utils/platform";
 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.
  *
  * @slot prefix - Content to show on the left side of the picker options.
  * @slot suffix - Content to show on the right side of the picker options.
@@ -533,13 +534,13 @@ export class PickerColumn {
     }
     render() {
         const { color, disabled, isActive, numericInput } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'd60736ce74c0e8c774a163272b78fbad32993ec2', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'd8394b411538657d4dcf74d419d26731674b4139', class: createColorClasses(color, {
+                [theme]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, this.renderAssistiveFocusable(), h("slot", { key: '74611112ef154b343ae29a773f8cd8a01cc1447d', name: "prefix" }), h("div", { key: 'af772d2b61b7eb41a567593d290b80a50b7caa72', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), h("slot", { key: '76f125144484f040f1f84fdd94bfa4f667ded873', name: "prefix" }), h("div", { key: '43ce783c7ec5168ba05cdad07259d6f64accd948', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
             },
             /**
@@ -560,7 +561,7 @@ export class PickerColumn {
              * To prevent this, we set the tabIndex to -1. This
              * will match the behavior of the other browsers.
              */
-            tabIndex: -1 }, h("div", { key: '4b646ee97bcf8ed541b9798c91dff189eec41dd1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'a44d1a10d20a13aeb47f9871b09e291aa7f216bd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6a481715bd68fa68dc2a76c2e867ce771ea680b0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '23236e731b1ad432c104761ebeec91697a6b7643' }), h("div", { key: '58a6c1f35a3ff0b26acaceebfd477d74b6dcfd6d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'ea864872dec6dc363406d1bd9101b1bf21944db6', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '28cc4c570d0dd59f491eef2b15a5ed706d28b7bb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'cff1cc0bea732a5ce22bb451c5ea404a84af1993', name: "suffix" })));
+            tabIndex: -1 }, h("div", { key: 'c34013dd35974ee01b8d6c7afee63ed274669742', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '775350f6dfd63e89a39f043fca24b3205eb6b012', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'c11a4228f40a3abbce211633dab9d4a73e7bab66', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '6c1a0a56e44e7091b63f405801ad480731522ac5' }), h("div", { key: '47e32bd7a7c7e446920ed21d9ea8a353500f93cc', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'b0e0a8f82cfa913aef913c799a5314ef435aae45', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'c0c6b1b323ae8123fdc4ca7b42355d22645e2916', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '0f61d56444d9d34fafd1d9ba4a6461845ce848d5', name: "suffix" })));
     }
     static get is() { return "ion-picker-column"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/picker-column-option/picker-column-option.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

package/dist/collection/components/picker-column-option/picker-column-option.js

@@ -4,7 +4,11 @@
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } 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.
+ */
 export class PickerColumnOption {
     constructor() {
         /**
@@ -75,24 +79,26 @@ export class PickerColumnOption {
     }
     render() {
         const { color, disabled, ariaLabel } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'cc4435a0ce0e55be1321bcabaf342ed68cf5ba1e', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '4808bb9a8e4427c371441f42be82d3f0422bd6d6', class: createColorClasses(color, {
+                [theme]: true,
                 ['option-disabled']: disabled,
-            }) }, h("button", { key: '0187fb967771e0787807a8538dce4e59f6a98565', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'dbe52552f3f27332816748c12d929cc81060841d' }))));
+            }) }, h("button", { key: '45d1142d3a83d97c4c3108dc02bc6d5ee2802c5b', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: '3d0a4b0f1ceacc9679fd5850738409ccd10b73e6' }))));
     }
     static get is() { return "ion-picker-column-option"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["picker-column-option.ios.scss"],
-            "md": ["picker-column-option.md.scss"]
+            "md": ["picker-column-option.md.scss"],
+            "ionic": ["picker-column-option.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["picker-column-option.ios.css"],
-            "md": ["picker-column-option.md.css"]
+            "md": ["picker-column-option.md.css"],
+            "ionic": ["picker-column-option.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/picker-column-option/picker-column-option.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

package/dist/collection/components/picker-legacy/picker.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
@@ -103,8 +109,8 @@
 
 .picker-wrapper {
   border-radius: var(--border-radius);
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   -webkit-margin-start: auto;
   margin-inline-start: auto;
@@ -162,6 +168,12 @@
   pointer-events: none;
 }
 
+/**
+ * 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-legacy/picker.js

@@ -7,12 +7,13 @@ import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.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 Picker {
     constructor() {
@@ -184,12 +185,12 @@ export class Picker {
     }
     render() {
         const { htmlAttributes } = this;
-        const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: '3b163ca87354a3a4f302ff016d5affd0dc97bccc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        const theme = getIonTheme(this);
+        return (h(Host, Object.assign({ key: 'a36fccc6cc5adb35016a1b35ebc0da1532e6c48a', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true,
+            }, class: Object.assign({ [theme]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'da4224447bdbcfbadd1bd63ebe7a7bfdb8aa3129', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '211475c859b7acf4d64556905c45993201d92d43', tabindex: "0" }), h("div", { key: 'c3b3674038155809caea84ae6348ff0d66897a64', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'a21757da70dc7864945a5751d9da3ca4bf87897b', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '0220da1854d09ef22d2d9a32eaa3c3b222be5a0a', class: "picker-columns" }, h("div", { key: '55757c165ba9e38e56b4dee76a9b13d3ff8b21e6', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '160092a46a48287bf75e5dfe3502f1755a2d0c70', class: "picker-below-highlight" }))), h("div", { key: 'e212db6cca7d75fc0eda0baf4312dd51b9b7a4ef', tabindex: "0" })));
+                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '139410342112f23387e8e80aee19747c7657753e', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'db8b9b6126f0b00fca50ece90a9418aa363f9844', tabindex: "0" }), h("div", { key: '60db8680187182b4fa080509fb197c3694204e60', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '671e1b7d523a3fe83376aaf2d79ed70c712606c6', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '24d71acd315b352111ca82c0307f9c96275a43b7', class: "picker-columns" }, h("div", { key: '763229a27c3a2c01ec0ac92930861ff24b7664ca', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '6dc995dbbc70ebc9b491ee87bb93249bda490240', class: "picker-below-highlight" }))), h("div", { key: '6a80f957217a8b824779c95133c5e1d2d2dec13e', tabindex: "0" })));
     }
     static get is() { return "ion-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/picker-legacy/picker.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
@@ -103,8 +109,8 @@
 
 .picker-wrapper {
   border-radius: var(--border-radius);
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   -webkit-margin-start: auto;
   margin-inline-start: auto;
@@ -162,6 +168,12 @@
   pointer-events: none;
 }
 
+/**
+ * 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-legacy-column/picker-column.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
@@ -120,6 +126,12 @@
   white-space: nowrap;
 }
 
+/**
+ * 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-legacy-column/picker-column.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
 import { getClassMap } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 /**
  * @internal
  */
@@ -335,10 +335,10 @@ export class PickerColumnCmp {
     }
     render() {
         const col = this.col;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '56289a294e5c580f3e7fe5fc12777aa7f80ad19b', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'c27a6cefcbe86c84423d9e3bf07aecb692d0cbc0', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: 'd21f44667b5df567d6879723fe643ea7c2c60bef', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: 'bb427e5f24fd832703926e0e847ad05567597262', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '0413f7c074b6534b8967387ecb9957a79a267aff', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: '46e316911e42570f50e81c16026a784d474a11ce', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '139092ca616fafdb338bf6018929698f6b6f39b5', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '4343e0f17f3d6951afe7c4e376e38e7a95bedc7d', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     static get is() { return "ion-picker-legacy-column"; }
     static get originalStyleUrls() {

package/dist/collection/components/picker-legacy-column/picker-column.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
@@ -120,6 +126,12 @@
   white-space: nowrap;
 }
 
+/**
+ * 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/popover/popover.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
@@ -78,8 +84,8 @@
   --height: auto;
   --offset-x: 0px;
   --offset-y: 0px;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -177,6 +183,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/popover/popover.js

@@ -11,7 +11,7 @@ import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId,
 import { isPlatform } from "../../utils/platform";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
-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";
@@ -19,12 +19,13 @@ import { mdLeaveAnimation } from "./animations/md.leave";
 import { configureDismissInteraction, configureKeyboardInteraction, configureTriggerInteraction } from "./utils";
 // 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.
  *
  * @slot - Content is placed inside of the `.popover-content` element.
  *
  * @part backdrop - The `ion-backdrop` element.
- * @part arrow - The arrow that points to the reference element. Only applies on `ios` mode.
+ * @part arrow - The arrow that points to the reference element. Only applies on `"ios"` theme.
  * @part content - The wrapper element for the default slot.
  */
 export class Popover {
@@ -138,7 +139,7 @@ export class Popover {
         const popoverId = (_b = (_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : setOverlayId(el);
         this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
         if (this.alignment === undefined) {
-            this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
+            this.alignment = getIonTheme(this) === 'ios' ? 'center' : 'start';
         }
     }
     componentDidLoad() {
@@ -334,26 +335,28 @@ export class Popover {
         return eventMethod(this.el, 'ionPopoverWillDismiss');
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '3a7c4c39384bab1447c4bd6b9b06d7837a09353b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '39bf21ef8ecf42517b9d1bb35bb2de318d514630', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '38a1c4ad29238d1e81cab407f099121fa4947cce', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'f825494c5e3be89d7fcf0229e29b405bccb13edb', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '3acae5a0106389c776c8ffe5bf10f3ff006e0346', class: "popover-arrow", part: "arrow" }), h("div", { key: '2aa73e9f06b1d2ac4c0d36c23186b9164f395079', class: "popover-content", part: "content" }, h("slot", { key: '62f5713414aae47dde6a8aef1f9b69af287534ae' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '563cc51c835a8b81fedb2de896ee426768c50de2', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '8af6ff024ba1f97162f556ddebf7994581d5c5cd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: 'bbd8a7bd929833855c77e081020ae8bdc69e70a3', class: "popover-arrow", part: "arrow" }), h("div", { key: '9fcf98f42b35abc4cbdcd63dfac2af287846294c', class: "popover-content", part: "content" }, h("slot", { key: '0e88929d602761f4013d6a42b7f57fad213176b1' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["popover.ios.scss"],
-            "md": ["popover.md.scss"]
+            "md": ["popover.md.scss"],
+            "ionic": ["popover.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["popover.ios.css"],
-            "md": ["popover.md.css"]
+            "md": ["popover.md.css"],
+            "ionic": ["popover.md.css"]
         };
     }
     static get properties() {
@@ -612,7 +615,7 @@ export class Popover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the popover 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 popover 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,
@@ -800,7 +803,7 @@ export class Popover {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `ios` mode, and `\"start\"` for `md` mode."
+                    "text": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `\"ios\"` theme, and `\"start\"` for `\"md\"` theme."
                 },
                 "attribute": "alignment",
                 "reflect": false
@@ -817,7 +820,7 @@ export class Popover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the popover will display an arrow that points at the\n`reference` when running in `ios` mode. Does not apply in `md` mode."
+                    "text": "If `true`, the popover will display an arrow that points at the\n`reference` on `\"ios\"` theme."
                 },
                 "attribute": "arrow",
                 "reflect": false,