@ionic/core 8.0.0-dev.11712932867.11504809 → 8.0.0-dev.11713893672.15a2b23e

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

@@ -7,10 +7,9 @@ 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 { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @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.
@@ -20,6 +19,7 @@ export class PickerColumn {
         this.isScrolling = false;
         this.isColumnVisible = false;
         this.canExitInputMode = true;
+        this.updateValueTextOnScroll = false;
         this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
             const { isColumnVisible, scrollEl } = this;
             if (isColumnVisible && scrollEl) {
@@ -34,6 +34,7 @@ export class PickerColumn {
                      * of these can cause a scroll to occur.
                      */
                     this.canExitInputMode = canExitInputMode;
+                    this.updateValueTextOnScroll = false;
                     scrollEl.scroll({
                         top,
                         left: 0,
@@ -106,6 +107,7 @@ export class PickerColumn {
             let activeEl = this.activeItem;
             const scrollCallback = () => {
                 raf(() => {
+                    var _a;
                     if (!scrollEl)
                         return;
                     if (timeout) {
@@ -186,8 +188,23 @@ export class PickerColumn {
                     }
                     activeEl = newActiveElement;
                     this.setPickerItemActiveState(newActiveElement, true);
+                    /**
+                     * Set the aria-valuetext even though the value prop has not been updated yet.
+                     * This enables some screen readers to announce the value as the users drag
+                     * as opposed to when their release their pointer from the screen.
+                     *
+                     * When the value is programmatically updated, we will smoothly scroll
+                     * to the new option. However, we do not want to update aria-valuetext mid-scroll
+                     * as that can cause the old value to be briefly set before being set to the
+                     * correct option. This will cause some screen readers to announce the old value
+                     * again before announcing the new value. The correct valuetext will be set on render.
+                     */
+                    if (this.updateValueTextOnScroll) {
+                        (_a = this.assistiveFocusable) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
+                    }
                     timeout = setTimeout(() => {
                         this.isScrolling = false;
+                        this.updateValueTextOnScroll = true;
                         enableHaptics && hapticSelectionEnd();
                         /**
                          * Certain tasks (such as those that
@@ -246,12 +263,132 @@ 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;
+            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;
+            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();
+            }
+        };
+        /**
+         * Utility to generate the correct text for aria-valuetext.
+         */
+        this.getOptionValueText = (el) => {
+            var _a;
+            return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
+        };
+        /**
+         * 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 = () => {
+            const { activeItem } = this;
+            const valueText = this.getOptionValueText(activeItem);
+            /**
+             * When using the picker, the valuetext provides important context that valuenow
+             * does not. Additionally, using non-zero valuemin/valuemax values can cause
+             * WebKit to incorrectly announce numeric valuetext values (such as a year
+             * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
+             */
+            return (h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 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) {
             /**
@@ -367,6 +504,10 @@ 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 = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
@@ -383,15 +524,15 @@ export class PickerColumn {
     }
     render() {
         const { color, disabled, isActive, numericInput } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '5b4b09a7fb30f8e3ab5e800f67f2c617da1fdd04', class: createColorClasses(color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '50fe50a49f88aa9ec435436083f3cd1ef49c8c9c', class: createColorClasses(color, {
+                [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: '51d283efa13a6c349a167c98e4a491254d248acf', name: "prefix" }), h("div", { key: '0fbfb227c40ba664ca0000d8b852430745615bcc', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), h("slot", { key: '6350829748690895ab3ef101b9f2ae993852de7d', name: "prefix" }), h("div", { key: 'eaff9925aa8553f63ba2a1ae2bdfaa02963e0a5d', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            } }, 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" })));
+            } }, h("div", { key: '25a24c4174782f2ec8a1fe06cbaf1f564b1f632f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '7f4e9a5f1f74f7e8d5ad74178894edc80c0fb523', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '329b88b4af1d0e37da347e5f3fe9b462efcc2886', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '82b9d5d541d41801bce06db0867d6cfbcee4ac3e' }), h("div", { key: '288ae193601d1eb49ead06f79eb1affa478f31d3', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '29661d0b74d11d650c2b23be66f857dd008dc5a0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'a7bd71b4abcb027654a828ffa65d87b6874d7484', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '83ddd19d09ec48fe31b51f9f272a562320f90098', name: "suffix" })));
     }
     static get is() { return "ion-picker-column"; }
     static get encapsulation() { return "shadow"; }
@@ -491,6 +632,7 @@ export class PickerColumn {
     }
     static get states() {
         return {
+            "ariaLabel": {},
             "isActive": {}
         };
     }
@@ -595,6 +737,9 @@ 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/test/picker-column.spec.js

@@ -0,0 +1,83 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { PickerColumn } from "../picker-column";
+import { PickerColumnOption } from "../../picker-column-option/picker-column-option";
+describe('picker-column: assistive element', () => {
+    beforeEach(() => {
+        const mockIntersectionObserver = jest.fn();
+        mockIntersectionObserver.mockReturnValue({
+            observe: () => null,
+            unobserve: () => null,
+            disconnect: () => null,
+        });
+        global.IntersectionObserver = mockIntersectionObserver;
+    });
+    it('should have a default label', async () => {
+        const page = await newSpecPage({
+            components: [PickerColumn],
+            template: () => h("ion-picker-column", null),
+        });
+        const pickerCol = page.body.querySelector('ion-picker-column');
+        const assistiveFocusable = pickerCol.shadowRoot.querySelector('.assistive-focusable');
+        expect(assistiveFocusable.getAttribute('aria-label')).not.toBe(null);
+    });
+    it('should have a custom label', async () => {
+        const page = await newSpecPage({
+            components: [PickerColumn],
+            template: () => h("ion-picker-column", { "aria-label": "my label" }),
+        });
+        const pickerCol = page.body.querySelector('ion-picker-column');
+        const assistiveFocusable = pickerCol.shadowRoot.querySelector('.assistive-focusable');
+        expect(assistiveFocusable.getAttribute('aria-label')).toBe('my label');
+    });
+    it('should update a custom label', async () => {
+        const page = await newSpecPage({
+            components: [PickerColumn],
+            template: () => h("ion-picker-column", null),
+        });
+        const pickerCol = page.body.querySelector('ion-picker-column');
+        const assistiveFocusable = pickerCol.shadowRoot.querySelector('.assistive-focusable');
+        pickerCol.setAttribute('aria-label', 'my label');
+        await page.waitForChanges();
+        expect(assistiveFocusable.getAttribute('aria-label')).toBe('my label');
+    });
+    it('should receive keyboard focus when enabled', async () => {
+        const page = await newSpecPage({
+            components: [PickerColumn],
+            template: () => h("ion-picker-column", null),
+        });
+        const pickerCol = page.body.querySelector('ion-picker-column');
+        const assistiveFocusable = pickerCol.shadowRoot.querySelector('.assistive-focusable');
+        expect(assistiveFocusable.tabIndex).toBe(0);
+    });
+    it('should not receive keyboard focus when disabled', async () => {
+        const page = await newSpecPage({
+            components: [PickerColumn],
+            template: () => h("ion-picker-column", { disabled: true }),
+        });
+        const pickerCol = page.body.querySelector('ion-picker-column');
+        const assistiveFocusable = pickerCol.shadowRoot.querySelector('.assistive-focusable');
+        expect(assistiveFocusable.tabIndex).toBe(-1);
+    });
+    it('should use option aria-label as assistive element aria-valuetext', async () => {
+        const page = await newSpecPage({
+            components: [PickerColumn, PickerColumnOption],
+            template: () => (h("ion-picker-column", { value: 1 }, h("ion-picker-column-option", { value: 1, "aria-label": "My Label" }, "My Text"))),
+        });
+        const pickerCol = page.body.querySelector('ion-picker-column');
+        const assistiveFocusable = pickerCol.shadowRoot.querySelector('.assistive-focusable');
+        expect(assistiveFocusable.getAttribute('aria-valuetext')).toBe('My Label');
+    });
+    it('should use option text as assistive element aria-valuetext when no label provided', async () => {
+        const page = await newSpecPage({
+            components: [PickerColumn, PickerColumnOption],
+            template: () => (h("ion-picker-column", { value: 1 }, h("ion-picker-column-option", { value: 1 }, "My Text"))),
+        });
+        const pickerCol = page.body.querySelector('ion-picker-column');
+        const assistiveFocusable = pickerCol.shadowRoot.querySelector('.assistive-focusable');
+        expect(assistiveFocusable.getAttribute('aria-valuetext')).toBe('My Text');
+    });
+});

package/dist/collection/components/picker-column-option/picker-column-option.ios.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -4,11 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
 import { createColorClasses } from "../../utils/theme";
-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.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class PickerColumnOption {
     constructor() {
         /**
@@ -79,26 +75,24 @@ export class PickerColumnOption {
     }
     render() {
         const { color, disabled, ariaLabel } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '7f590f416e43f74cca1649bb739eabb43bef8ec9', class: createColorClasses(color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '9333d9ac8e9990fc840f31e00391177d9cd563b3', class: createColorClasses(color, {
+                [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("button", { key: 'cc640ef332d72da10fcc58d5d7ee2a6a087c4cc3', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: '3816ea2975ccc61d064d285815080f59abfa01eb' }))));
+            }) }, h("button", { key: '6ca92bc584587230135982106eab542589fc4c9d', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'd9a68906017f77143a0691b9bbc59ae2142da6aa' }))));
     }
     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"],
-            "ionic": ["picker-column-option.md.scss"]
+            "md": ["picker-column-option.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["picker-column-option.ios.css"],
-            "md": ["picker-column-option.md.css"],
-            "ionic": ["picker-column-option.md.css"]
+            "md": ["picker-column-option.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/picker-column-option/picker-column-option.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/picker-legacy/picker.ios.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -168,12 +162,6 @@
   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,13 +7,12 @@ 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 { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } 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 the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Picker {
     constructor() {
@@ -182,12 +181,12 @@ export class Picker {
     }
     render() {
         const { htmlAttributes } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, Object.assign({ key: 'd988de06290eb92ff6f7be07959780d0d19fadb3', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        const mode = getIonMode(this);
+        return (h(Host, Object.assign({ key: '91d3d127c46d125a2a86222e3002d804ebd8bc84', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [theme]: true,
+            }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '17f85a6ff9c41b38de985d86e58f0f91315c767e', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '46358c402039738cdf47496228564b8f836ca1ca', tabindex: "0" }), h("div", { key: 'fb6a2892d259042a10fb1766bb0e1fce6a048e2b', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '082583fd8895f1f12de7a4761af718c886ad1c89', 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: 'b6d169cbe219ada5875c818e1fbff2b3b8e75343', class: "picker-columns" }, h("div", { key: '3598b21e94c321adfffb83778ddc3ac9f5c7daba', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'afbd8f751a842f52d1fe23fc409b01f5074e0f57', class: "picker-below-highlight" }))), h("div", { key: '248251b4ddfed8078ce242e5ce52b53caa49ccf0', tabindex: "0" })));
+                [`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" })));
     }
     static get is() { return "ion-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/picker-legacy/picker.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -168,12 +162,6 @@
   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,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -126,12 +120,6 @@
   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, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
  * @internal
  */
@@ -335,10 +335,10 @@ export class PickerColumnCmp {
     }
     render() {
         const col = this.col;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'b8c99747752c30cc7dbd4e63c6a10e1b713b0958', 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: {
+        const mode = getIonMode(this);
+        return (h(Host, { key: '90b9d07917c0643cf8a622f090abefcd2846ac96', 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: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '5f22527170ea87eacfff014b5ef8f0ba48a116b8', 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", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '4adca834de9295a18bdb355ebbfa49813f0f93f8', 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", { 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,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -126,12 +120,6 @@
   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,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -183,12 +177,6 @@
   }
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use