@ionic/core 8.0.0-dev.11713809015.1aabd368 → 8.0.0-dev.11713988726.1e82b9a0

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: '097a845a8ac8ba1199592b1977d676246f1e7499' });
     }
     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: '277265608ad47c1d65916399aaf55627252e8c88', 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: 'd8c6677e550cba7278bb1577c25e2aee65d21e3f', class: createColorClasses(this.color, {
+                [theme]: true,
+            }) }, h("slot", { key: 'ad557d58f1390a4c600750b5b2caaf41c6f46a60' })));
     }
     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
@@ -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: '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: 'b70075a7cf47d77c635e6c89d8f201cc4d5a389e', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'e429a3f1b2ffaff1588d0ea4d9f57ce94d6751f3', "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: 'fc4abe70911b2ba36367d58b2afcc51ff2aba677', class: "picker-before" }), h("div", { key: 'c9e39cf56810b3a8aced29e685ea73840b29e040', class: "picker-after" }), h("div", { key: 'b5a9f584410a89d6d882c0baa215598b0bcb74c5', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: 'c4ff363a7b843666599d601ebc5ccfbd425b1f08' })));
     }
     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
@@ -55,7 +61,6 @@
  */
 :host {
   display: flex;
-  position: relative;
   align-items: center;
   justify-content: center;
   max-width: 100%;
@@ -64,24 +69,6 @@
   text-align: center;
 }
 
-/**
- * Renders an invisible element on top of the column that receives focus
- * events. This allows screen readers to navigate the column.
- */
-.assistive-focusable {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.assistive-focusable:focus {
-  outline: none;
-}
-
 .picker-opts {
   /**
    * This padding must be set here and not on the
@@ -167,7 +154,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.
@@ -102,7 +103,7 @@ export class PickerColumn {
             const enableHaptics = isPlatform('ios');
             const { el, scrollEl } = this;
             let timeout;
-            let { activeItem: activeEl } = this.activeItem;
+            let activeEl = this.activeItem;
             const scrollCallback = () => {
                 raf(() => {
                     if (!scrollEl)
@@ -245,121 +246,12 @@ export class PickerColumn {
              */
             this.el.classList.remove('picker-column-active');
         };
-        /**
-         * Find the next enabled option after the active option.
-         * @param stride - How many options to "jump" over in order to select the next option.
-         * This can be used to implement PageUp/PageDown behaviors where pressing these keys
-         * scrolls the picker by more than 1 option. For example, a stride of 5 means select
-         * the enabled option 5 options after the active one. Note that the actual option selected
-         * may be past the stride if the option at the stride is disabled.
-         */
-        this.findNextOption = (stride = 1) => {
-            const { activeItem } = this.activeItem;
-            if (!activeItem)
-                return null;
-            let prevNode = activeItem;
-            let node = activeItem.nextElementSibling;
-            while (node != null) {
-                if (stride > 0) {
-                    stride--;
-                }
-                if (node.tagName === 'ION-PICKER-COLUMN-OPTION' && !node.disabled && stride === 0) {
-                    return node;
-                }
-                prevNode = node;
-                // Use nextElementSibling instead of nextSibling to avoid text/comment nodes
-                node = node.nextElementSibling;
-            }
-            return prevNode;
-        };
-        /**
-         * Find the next enabled option after the active option.
-         * @param stride - How many options to "jump" over in order to select the next option.
-         * This can be used to implement PageUp/PageDown behaviors where pressing these keys
-         * scrolls the picker by more than 1 option. For example, a stride of 5 means select
-         * the enabled option 5 options before the active one. Note that the actual option selected
-         *  may be past the stride if the option at the stride is disabled.
-         */
-        this.findPreviousOption = (stride = 1) => {
-            const { activeItem } = this.activeItem;
-            if (!activeItem)
-                return null;
-            let nextNode = activeItem;
-            let node = activeItem.previousElementSibling;
-            while (node != null) {
-                if (stride > 0) {
-                    stride--;
-                }
-                if (node.tagName === 'ION-PICKER-COLUMN-OPTION' && !node.disabled && stride === 0) {
-                    return node;
-                }
-                nextNode = node;
-                // Use previousElementSibling instead of previousSibling to avoid text/comment nodes
-                node = node.previousElementSibling;
-            }
-            return nextNode;
-        };
-        this.onKeyDown = (ev) => {
-            let newOption = null;
-            switch (ev.key) {
-                case 'ArrowDown':
-                    newOption = this.findNextOption();
-                    break;
-                case 'ArrowUp':
-                    newOption = this.findPreviousOption();
-                    break;
-                case 'PageUp':
-                    newOption = this.findPreviousOption(5);
-                    break;
-                case 'PageDown':
-                    newOption = this.findNextOption(5);
-                    break;
-                case 'Home':
-                    /**
-                     * There is no guarantee that the first child will be an ion-picker-column-option,
-                     * so we do not use firstElementChild.
-                     */
-                    newOption = this.el.querySelector('ion-picker-column-option:first-of-type');
-                    break;
-                case 'End':
-                    /**
-                     * There is no guarantee that the last child will be an ion-picker-column-option,
-                     * so we do not use lastElementChild.
-                     */
-                    newOption = this.el.querySelector('ion-picker-column-option:last-of-type');
-                    break;
-                default:
-                    break;
-            }
-            if (newOption !== null) {
-                this.value = newOption.value;
-                // This stops any default browser behavior such as scrolling
-                ev.preventDefault();
-            }
-        };
-        /**
-         * Render an element that overlays the column. This element is for assistive
-         * tech to allow users to navigate the column up/down. This element should receive
-         * focus as it listens for synthesized keyboard events as required by the
-         * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
-         */
-        this.renderAssistiveFocusable = () => {
-            var _a;
-            const { activeItem, activeItemIndex } = this.activeItem;
-            const { el } = this;
-            const valueText = activeItem ? (_a = activeItem.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : activeItem.innerText : '';
-            return (h("div", { class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": el.childElementCount - 1, "aria-valuenow": activeItemIndex >= 0 ? activeItemIndex : 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
-        };
-        this.ariaLabel = null;
         this.isActive = false;
         this.disabled = false;
         this.value = undefined;
         this.color = 'primary';
         this.numericInput = false;
     }
-    ariaLabelChanged(newValue) {
-        this.ariaLabel = newValue;
-    }
     valueChange() {
         if (this.isColumnVisible) {
             /**
@@ -390,8 +282,7 @@ export class PickerColumn {
              */
             const ev = entries[entries.length - 1];
             if (ev.isIntersecting) {
-                const { activeItem } = this.activeItem;
-                const { el } = this;
+                const { activeItem, el } = this;
                 this.isColumnVisible = true;
                 /**
                  * Because this initial call to scrollActiveItemIntoView has to fire before
@@ -431,8 +322,7 @@ export class PickerColumn {
         }
     }
     componentDidRender() {
-        const { activeItem } = this.activeItem;
-        const { el, isColumnVisible, value } = this;
+        const { el, activeItem, isColumnVisible, value } = this;
         if (isColumnVisible && !activeItem) {
             const firstOption = el.querySelector('ion-picker-column-option');
             /**
@@ -449,7 +339,7 @@ export class PickerColumn {
     }
     /** @internal  */
     async scrollActiveItemIntoView(smooth = false) {
-        const { activeItem: activeEl } = this.activeItem;
+        const activeEl = this.activeItem;
         if (activeEl) {
             this.centerPickerItemInView(activeEl, smooth, false);
         }
@@ -477,39 +367,31 @@ export class PickerColumn {
             this.scrollEl.focus();
         }
     }
-    connectedCallback() {
-        var _a;
-        this.ariaLabel = (_a = this.el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : 'Select a value';
-    }
     get activeItem() {
         const { value } = this;
-        const options = this.el.querySelectorAll('ion-picker-column-option');
-        for (let i = 0; i <= options.length - 1; i++) {
-            const option = options[i];
+        const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
+        return options.find((option) => {
             /**
              * If the whole picker column is disabled, the current value should appear active
              * If the current value item is specifically disabled, it should not appear active
              */
-            if (option.value === value && !option.disabled) {
-                return {
-                    activeItem: option,
-                    activeItemIndex: i,
-                };
+            if (!this.disabled && option.disabled) {
+                return false;
             }
-        }
-        return { activeItem: undefined, activeItemIndex: -1 };
+            return option.value === value;
+        });
     }
     render() {
         const { color, disabled, isActive, numericInput } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '87534568ba47096dca1be00fee184052767087f5', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '5b4b09a7fb30f8e3ab5e800f67f2c617da1fdd04', class: createColorClasses(color, {
+                [theme]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, this.renderAssistiveFocusable(), h("slot", { key: '8dedc4f294f1a6658a12151a765f6fa790f4d854', name: "prefix" }), h("div", { key: 'c82975dc3996d3ddb8dee12ad381ee733466a069', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
+            }) }, h("slot", { key: '51d283efa13a6c349a167c98e4a491254d248acf', name: "prefix" }), h("div", { key: '0fbfb227c40ba664ca0000d8b852430745615bcc', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
                 this.scrollEl = el;
-            } }, h("div", { key: '2de49979f9339f4a9a384e115ea5a073b6467e50', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '304e0bcc506f4c4d35d053e95c85de9c9bdc303c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '3da0eb1d7e1d8b196112f7d695447b40716eef1d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '43668a05c3eb39749bde1137e33872e1b406cba9' }), h("div", { key: '95d4ae922ad45aa541a70b08958b08a2d3c79fbe', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '412aca51c2d3b4cc1bcc1fffca68922db64f7745', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '2319fa61c7649dec3efa2ec2e7b93d5e9a775708', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '010cee6ffdbe1a6d5331cb4e185b1aa0b6effd2d', name: "suffix" })));
+            } }, h("div", { key: '6d1185d5bc6d89784f88ae659bf7ba7431af20d3', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6fda1cbf32072e52f951e2308f6af38c7144e005', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '7c75de24231bdc280fde466adb059edfac8e6ec2', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '145998962977f8f4e5c33014f55a73b65843d46f' }), h("div", { key: 'a23c27a02df0120a8f73f26568ad5b0e20e27103', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'abc7cc1d146eddc3e0746530a59b4245fa4512cc', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8b289129c28d79148db152c5e5f4488c160bb1b2', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'af40d3dbff658e92b4dc1f5793afa2710569f30b', name: "suffix" })));
     }
     static get is() { return "ion-picker-column"; }
     static get encapsulation() { return "shadow"; }
@@ -609,7 +491,6 @@ export class PickerColumn {
     }
     static get states() {
         return {
-            "ariaLabel": {},
             "isActive": {}
         };
     }
@@ -714,9 +595,6 @@ export class PickerColumn {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "aria-label",
-                "methodName": "ariaLabelChanged"
-            }, {
                 "propName": "value",
                 "methodName": "valueChange"
             }];

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: '7f590f416e43f74cca1649bb739eabb43bef8ec9', 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: 'cc640ef332d72da10fcc58d5d7ee2a6a087c4cc3', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: '3816ea2975ccc61d064d285815080f59abfa01eb' }))));
     }
     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() {