@ionic/core 8.0.0-dev.11711035263.183d2423 → 8.0.0-dev.11711476529.17eae6ec

package/dist/collection/components/menu-button/menu-button.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/menu-toggle/menu-toggle.js

@@ -3,9 +3,12 @@
  */
 import { Host, h } from "@stencil/core";
 import { menuController } from "../../utils/menu-controller/index";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { updateVisibility } from "./menu-toggle-util";
 /**
+ * @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 the toggle to act as the click target.
  */
 export class MenuToggle {
@@ -24,12 +27,12 @@ export class MenuToggle {
         this.visible = await updateVisibility(this.menu);
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '63bcdda9e9917133893d92284b9a91dfe38596a9', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
-                [mode]: true,
+        return (h(Host, { key: '09cc1613fa9538946363397ccc611eaaa4195015', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+                [theme]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: 'a3ecc57b11c04b2f9911e5703ea0c6f66515b2f2' })));
+            } }, h("slot", { key: 'f3f13218947563b6f63c874385f3ec1a4199cf2c' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.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
@@ -201,6 +207,12 @@ 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

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 } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } 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,7 +23,8 @@ import { createSwipeToCloseGesture } from "./gestures/swipe-to-close";
 import { setCardStatusBarDark, setCardStatusBarDefault } 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 `.modal-content` element.
  *
@@ -559,12 +560,12 @@ export class Modal {
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes } = this;
         const showHandle = handle !== false && isSheetModal;
-        const mode = getIonMode(this);
-        const isCardModal = presentingElement !== undefined && mode === 'ios';
+        const theme = getIonTheme(this);
+        const isCardModal = presentingElement !== undefined && theme === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ key: '18053756559601f785776196d9dd269f8250c813', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '813736a125e3f94418fc4b846fba8dd248ad6327', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: 'c080204fb09a67046d1986db28ccb7a1c8f0704d', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { class: "modal-shadow" }), h("div", Object.assign({ key: '1988ad86ef92108ad4c980ee6d98f280e368dee4',
+            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '9f2c13bc3d64876d8782695c5195767d7f2f67d9', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && h("div", { class: "modal-shadow" }), h("div", Object.assign({ key: '7b970bab0b9724033ab390662fbe050f1425e2b6',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -573,20 +574,22 @@ export class Modal {
             */
             role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { 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: '321e79f29eba3faab323d17ae575300e25fc0c51' }))));
+            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: 'ae777acb669ecb0b364899d7c09acdbd222b19f1' }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["modal.ios.scss"],
-            "md": ["modal.md.scss"]
+            "md": ["modal.md.scss"],
+            "ionic": ["modal.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["modal.ios.css"],
-            "md": ["modal.md.css"]
+            "md": ["modal.md.css"],
+            "ionic": ["modal.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/modal/modal.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
@@ -201,6 +207,12 @@ 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

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

@@ -7,9 +7,13 @@ 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 } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } 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 = [];
@@ -673,11 +677,13 @@ export class Nav {
                 }
             }
             : undefined;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
+        const mode = getIonMode(this, theme);
         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, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && config.getBoolean('animated', true), enteringEl,
+        const animationOpts = Object.assign(Object.assign({ mode,
+            theme, 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);
@@ -830,7 +836,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: '2cb1a430d8d29b0f54b1ec80f98e4b82b6c8cc0a' });
+        return h("slot", { key: '0ad6ea9a7b0ed39732734e45e7ae843ac7ef2a7e' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -923,7 +929,7 @@ export class Nav {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "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."
                 }
             },
             "rootParams": {

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

@@ -3,6 +3,10 @@
  */
 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 = () => {
@@ -14,7 +18,7 @@ export class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return h(Host, { key: 'e4aebea5eb131852acea407afb84597df71be4a4', onClick: this.onClick });
+        return h(Host, { key: '45811e228f0a52a658e968c3b996f18007808485', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {

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

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

@@ -3,32 +3,35 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class Note {
     constructor() {
         this.color = undefined;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '4064be8c5aceec02a25b8933338596b1720e19d9', class: createColorClasses(this.color, {
-                [mode]: true,
-            }) }, h("slot", { key: '9b4265b01387096a8a6aba34a1d8217733bb6f1f' })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '82207dc3c86d194b5f495f9af698ec18ccd1e0e6', class: createColorClasses(this.color, {
+                [theme]: true,
+            }) }, h("slot", { key: '6552436c58d1626864d36daea93df3a5d14b67ba' })));
     }
     static get is() { return "ion-note"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["note.ios.scss"],
-            "md": ["note.md.scss"]
+            "md": ["note.md.scss"],
+            "ionic": ["note.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["note.ios.css"],
-            "md": ["note.md.css"]
+            "md": ["note.md.css"],
+            "ionic": ["note.md.css"]
         };
     }
     static get properties() {

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

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: '16c8d2d72dcbd64e2b2fb77200ead6a2107d24a6', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'f7f4c77bde934813a18f221308277580c45715e3', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (h(Host, { key: 'c1f95151ce7ad801835c449b1319485455ca6b00', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '484ce066200180dbd4ca784549bd901b64f65192', "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: '0eead52707acfa004c83fe0acfd4f9162b19f09b', class: "picker-before" }), h("div", { key: '5b4b531e3ed4fd35f1380156cf5332a455433a19', class: "picker-after" }), h("div", { key: '2b478202ac99703e4f72b30906915c7058ca9b9f', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '4a93ca36194ea1d2cec8bef8a0f402c14ee74576' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: 'e883136304ed0cd7c9d0461093fd9562799a8f46', class: "picker-before" }), h("div", { key: 'e36e3469ac82cf98ebd842438c8170dd929d9055', class: "picker-after" }), h("div", { key: 'c345ce8c7c65f8b3517ca1903eb703e2ee314a32', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: 'da9a206ba872c1b13fdc27428da807a771595f62' })));
     }
     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

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

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.
@@ -382,15 +383,15 @@ export class PickerColumn {
     }
     render() {
         const { color, disabled, isActive, numericInput } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '20de89f624d0fdbb4eadf912a6a8a8c1f3c374bc', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '073e5b2f6ffe3c4f3c1c0e000c12e48ff537dacc', class: createColorClasses(color, {
+                [theme]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: '39bd2171785e21aef935787d8222949a2d29a771', name: "prefix" }), h("div", { key: '97217b758b65913db869f322b8f127f0da3a1c28', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
+            }) }, h("slot", { key: '454db3950d9978eb1aed594452f75f01491780fa', name: "prefix" }), h("div", { key: '3087bd8696f9ca0c187ac7cd852c926edb464d4b', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
                 this.scrollEl = el;
-            } }, h("div", { key: '8cfd8f5de1c274f7b2b5b14c7f6f875d475edc5c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cfbf7e8abe54c4df98addb9a24e82dd803ba95c0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8049923186d8b5ce28da2ce90ad720c244395f9c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '180efa3b7874e2b4269fb150794eaeab9f648f2e' }), h("div", { key: '9161cc3e344b92354276981813e1d55ef9979dea', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'ce703fb3ea07d5ea2abf526d64ca85d2beed15f1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6ce6cb5de80ac316a664e9cfcecf1897c8f90e58', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'ecccfa6bd8f6d2d641109e74d0788081e3f29801', name: "suffix" })));
+            } }, h("div", { key: '0206093e64cef7fc2a5c7d60918c33edc5abdd51', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'e1e574212320e65469ac26004a10bffc0ec5878c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cc482c3c2bc0b1ef1505da2a21ece9fb3bf1e359', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'b2d3e0b8fa7a637a52c47a58e28b1accc00c184a' }), h("div", { key: '57aa56f536efa675eb32631ed9c7c6f116d7228a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '93af0d04e18a6f7bd55365d6af89de4b2ebfb66d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bd499cd8879768fc33098189912651f0362e2b6c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '886f3f4ecd7005ff653e8d1975334dacb2701fd8', 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: '9333d9ac8e9990fc840f31e00391177d9cd563b3', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '58a3ee795394ec4a497e41bb348b3f68fa95971a', class: createColorClasses(color, {
+                [theme]: true,
                 ['option-disabled']: disabled,
-            }) }, h("button", { key: '6ca92bc584587230135982106eab542589fc4c9d', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'd9a68906017f77143a0691b9bbc59ae2142da6aa' }))));
+            }) }, h("button", { key: 'c343a70fcf072881ccaa1dc8295acd3f47acc824', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'a06a9d2c13ff8e46c56949e3c50fd30291ec1e83' }))));
     }
     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
@@ -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() {
@@ -181,12 +182,12 @@ export class Picker {
     }
     render() {
         const { htmlAttributes } = this;
-        const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: '91d3d127c46d125a2a86222e3002d804ebd8bc84', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        const theme = getIonTheme(this);
+        return (h(Host, Object.assign({ key: '687fd87fb2a0bffcdbd38fe91785d2572d4cd141', "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: '63140c43f7a2e3000076adec0406197cb569f985', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '3e86ec5e61adf40983a1d33ef24f66f4f75307e8', tabindex: "0" }), h("div", { key: '3c3844f369da33e35c9a498d88d1b7e4d686b8ce', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'e03200231976723409505b0c4070e7f596815e50', 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: 'd59de79e8c364376bc16d2edae3672b21443f3fe', class: "picker-columns" }, h("div", { key: 'e79cb88c5397047bc8c7e71efb4f1a338773e744', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '776de64da09485ad1dbf78d4d402e297b94348a6', class: "picker-below-highlight" }))), h("div", { key: 'f0aa77e3b467c3fb4950389d27c13769dc913b14', tabindex: "0" })));
+                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '053fa3b4c98c0f29e45a74551978a831ac9742cb', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'dd3edfc5c879790849087f8ec251ca767d35ec3b', tabindex: "0" }), h("div", { key: '9a1b8b2008e5b6f76d35766164909edea71598ef', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'af96808e7ab42b45ee922a410860b5cbbca38a34', 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: 'b0a382a73555146c5962a4c94fc54bb3080350b9', class: "picker-columns" }, h("div", { key: 'd09fa7270c06d9fccb9ee1043f93f267df1a0bbc', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'c612908bf2523b81cc88e6fc445d52836a00fd45', class: "picker-below-highlight" }))), h("div", { key: 'd6254d12e1570d377ca2721f3f3cb040159aec60', 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
@@ -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