@ionic/core 7.6.7-dev.11706625796.1b3c1ab2 → 7.6.7-dev.11706894781.1cd59fde

package/components/picker-column2.js

@@ -0,0 +1,379 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { m as clamp } from './helpers.js';
+import { b as hapticSelectionChanged, h as hapticSelectionEnd, a as hapticSelectionStart } from './haptic.js';
+import { g as getClassMap } from './theme.js';
+import { b as getIonMode } from './ionic-global.js';
+
+const pickerColumnIosCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-transform-origin:center center;transform-origin:center center;height:46px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}:host-context([dir=rtl]) .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}";
+
+const pickerColumnMdCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #0054e9)}";
+
+const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class PickerColumnCmp extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.ionPickerColChange = createEvent(this, "ionPickerColChange", 7);
+        this.optHeight = 0;
+        this.rotateFactor = 0;
+        this.scaleFactor = 1;
+        this.velocity = 0;
+        this.y = 0;
+        this.noAnimate = true;
+        // `colDidChange` is a flag that gets set when the column is changed
+        // dynamically. When this flag is set, the column will refresh
+        // after the component re-renders to incorporate the new column data.
+        // This is necessary because `this.refresh` queries for the option elements,
+        // so it needs to wait for the latest elements to be available in the DOM.
+        // Ex: column is created with 3 options. User updates the column data
+        // to have 5 options. The column will still think it only has 3 options.
+        this.colDidChange = false;
+        this.col = undefined;
+    }
+    colChanged() {
+        this.colDidChange = true;
+    }
+    async connectedCallback() {
+        let pickerRotateFactor = 0;
+        let pickerScaleFactor = 0.81;
+        const mode = getIonMode(this);
+        if (mode === 'ios') {
+            pickerRotateFactor = -0.46;
+            pickerScaleFactor = 1;
+        }
+        this.rotateFactor = pickerRotateFactor;
+        this.scaleFactor = pickerScaleFactor;
+        this.gesture = (await import('./index3.js')).createGesture({
+            el: this.el,
+            gestureName: 'picker-swipe',
+            gesturePriority: 100,
+            threshold: 0,
+            passive: false,
+            onStart: (ev) => this.onStart(ev),
+            onMove: (ev) => this.onMove(ev),
+            onEnd: (ev) => this.onEnd(ev),
+        });
+        this.gesture.enable();
+        // Options have not been initialized yet
+        // Animation must be disabled through the `noAnimate` flag
+        // Otherwise, the options will render
+        // at the top of the column and transition down
+        this.tmrId = setTimeout(() => {
+            this.noAnimate = false;
+            // After initialization, `refresh()` will be called
+            // At this point, animation will be enabled. The options will
+            // animate as they are being selected.
+            this.refresh(true);
+        }, 250);
+    }
+    componentDidLoad() {
+        this.onDomChange();
+    }
+    componentDidUpdate() {
+        // Options may have changed since last update.
+        if (this.colDidChange) {
+            // Animation must be disabled through the `onDomChange` parameter.
+            // Otherwise, the recently added options will render
+            // at the top of the column and transition down
+            this.onDomChange(true, false);
+            this.colDidChange = false;
+        }
+    }
+    disconnectedCallback() {
+        if (this.rafId !== undefined)
+            cancelAnimationFrame(this.rafId);
+        if (this.tmrId)
+            clearTimeout(this.tmrId);
+        if (this.gesture) {
+            this.gesture.destroy();
+            this.gesture = undefined;
+        }
+    }
+    emitColChange() {
+        this.ionPickerColChange.emit(this.col);
+    }
+    setSelected(selectedIndex, duration) {
+        // if there is a selected index, then figure out it's y position
+        // if there isn't a selected index, then just use the top y position
+        const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
+        this.velocity = 0;
+        // set what y position we're at
+        if (this.rafId !== undefined)
+            cancelAnimationFrame(this.rafId);
+        this.update(y, duration, true);
+        this.emitColChange();
+    }
+    update(y, duration, saveY) {
+        if (!this.optsEl) {
+            return;
+        }
+        // ensure we've got a good round number :)
+        let translateY = 0;
+        let translateZ = 0;
+        const { col, rotateFactor } = this;
+        const prevSelected = col.selectedIndex;
+        const selectedIndex = (col.selectedIndex = this.indexForY(-y));
+        const durationStr = duration === 0 ? '' : duration + 'ms';
+        const scaleStr = `scale(${this.scaleFactor})`;
+        const children = this.optsEl.children;
+        for (let i = 0; i < children.length; i++) {
+            const button = children[i];
+            const opt = col.options[i];
+            const optOffset = i * this.optHeight + y;
+            let transform = '';
+            if (rotateFactor !== 0) {
+                const rotateX = optOffset * rotateFactor;
+                if (Math.abs(rotateX) <= 90) {
+                    translateY = 0;
+                    translateZ = 90;
+                    transform = `rotateX(${rotateX}deg) `;
+                }
+                else {
+                    translateY = -9999;
+                }
+            }
+            else {
+                translateZ = 0;
+                translateY = optOffset;
+            }
+            const selected = selectedIndex === i;
+            transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
+            if (this.scaleFactor !== 1 && !selected) {
+                transform += scaleStr;
+            }
+            // Update transition duration
+            if (this.noAnimate) {
+                opt.duration = 0;
+                button.style.transitionDuration = '';
+            }
+            else if (duration !== opt.duration) {
+                opt.duration = duration;
+                button.style.transitionDuration = durationStr;
+            }
+            // Update transform
+            if (transform !== opt.transform) {
+                opt.transform = transform;
+            }
+            button.style.transform = transform;
+            /**
+             * Ensure that the select column
+             * item has the selected class
+             */
+            opt.selected = selected;
+            if (selected) {
+                button.classList.add(PICKER_OPT_SELECTED);
+            }
+            else {
+                button.classList.remove(PICKER_OPT_SELECTED);
+            }
+        }
+        this.col.prevSelected = prevSelected;
+        if (saveY) {
+            this.y = y;
+        }
+        if (this.lastIndex !== selectedIndex) {
+            // have not set a last index yet
+            hapticSelectionChanged();
+            this.lastIndex = selectedIndex;
+        }
+    }
+    decelerate() {
+        if (this.velocity !== 0) {
+            // still decelerating
+            this.velocity *= DECELERATION_FRICTION;
+            // do not let it go slower than a velocity of 1
+            this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
+            let y = this.y + this.velocity;
+            if (y > this.minY) {
+                // whoops, it's trying to scroll up farther than the options we have!
+                y = this.minY;
+                this.velocity = 0;
+            }
+            else if (y < this.maxY) {
+                // gahh, it's trying to scroll down farther than we can!
+                y = this.maxY;
+                this.velocity = 0;
+            }
+            this.update(y, 0, true);
+            const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1;
+            if (notLockedIn) {
+                // isn't locked in yet, keep decelerating until it is
+                this.rafId = requestAnimationFrame(() => this.decelerate());
+            }
+            else {
+                this.velocity = 0;
+                this.emitColChange();
+                hapticSelectionEnd();
+            }
+        }
+        else if (this.y % this.optHeight !== 0) {
+            // needs to still get locked into a position so options line up
+            const currentPos = Math.abs(this.y % this.optHeight);
+            // create a velocity in the direction it needs to scroll
+            this.velocity = currentPos > this.optHeight / 2 ? 1 : -1;
+            this.decelerate();
+        }
+    }
+    indexForY(y) {
+        return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
+    }
+    onStart(detail) {
+        // We have to prevent default in order to block scrolling under the picker
+        // but we DO NOT have to stop propagation, since we still want
+        // some "click" events to capture
+        if (detail.event.cancelable) {
+            detail.event.preventDefault();
+        }
+        detail.event.stopPropagation();
+        hapticSelectionStart();
+        // reset everything
+        if (this.rafId !== undefined)
+            cancelAnimationFrame(this.rafId);
+        const options = this.col.options;
+        let minY = options.length - 1;
+        let maxY = 0;
+        for (let i = 0; i < options.length; i++) {
+            if (!options[i].disabled) {
+                minY = Math.min(minY, i);
+                maxY = Math.max(maxY, i);
+            }
+        }
+        this.minY = -(minY * this.optHeight);
+        this.maxY = -(maxY * this.optHeight);
+    }
+    onMove(detail) {
+        if (detail.event.cancelable) {
+            detail.event.preventDefault();
+        }
+        detail.event.stopPropagation();
+        // update the scroll position relative to pointer start position
+        let y = this.y + detail.deltaY;
+        if (y > this.minY) {
+            // scrolling up higher than scroll area
+            y = Math.pow(y, 0.8);
+            this.bounceFrom = y;
+        }
+        else if (y < this.maxY) {
+            // scrolling down below scroll area
+            y += Math.pow(this.maxY - y, 0.9);
+            this.bounceFrom = y;
+        }
+        else {
+            this.bounceFrom = 0;
+        }
+        this.update(y, 0, false);
+    }
+    onEnd(detail) {
+        if (this.bounceFrom > 0) {
+            // bounce back up
+            this.update(this.minY, 100, true);
+            this.emitColChange();
+            return;
+        }
+        else if (this.bounceFrom < 0) {
+            // bounce back down
+            this.update(this.maxY, 100, true);
+            this.emitColChange();
+            return;
+        }
+        this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
+        if (this.velocity === 0 && detail.deltaY === 0) {
+            const opt = detail.event.target.closest('.picker-opt');
+            if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) {
+                this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
+            }
+        }
+        else {
+            this.y += detail.deltaY;
+            if (Math.abs(detail.velocityY) < 0.05) {
+                const isScrollingUp = detail.deltaY > 0;
+                const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
+                if (isScrollingUp && optHeightFraction > 0.5) {
+                    this.velocity = Math.abs(this.velocity) * -1;
+                }
+                else if (!isScrollingUp && optHeightFraction <= 0.5) {
+                    this.velocity = Math.abs(this.velocity);
+                }
+            }
+            this.decelerate();
+        }
+    }
+    refresh(forceRefresh, animated) {
+        var _a;
+        let min = this.col.options.length - 1;
+        let max = 0;
+        const options = this.col.options;
+        for (let i = 0; i < options.length; i++) {
+            if (!options[i].disabled) {
+                min = Math.min(min, i);
+                max = Math.max(max, i);
+            }
+        }
+        /**
+         * Only update selected value if column has a
+         * velocity of 0. If it does not, then the
+         * column is animating might land on
+         * a value different than the value at
+         * selectedIndex
+         */
+        if (this.velocity !== 0) {
+            return;
+        }
+        const selectedIndex = clamp(min, (_a = this.col.selectedIndex) !== null && _a !== void 0 ? _a : 0, max);
+        if (this.col.prevSelected !== selectedIndex || forceRefresh) {
+            const y = selectedIndex * this.optHeight * -1;
+            const duration = animated ? TRANSITION_DURATION : 0;
+            this.velocity = 0;
+            this.update(y, duration, true);
+        }
+    }
+    onDomChange(forceRefresh, animated) {
+        const colEl = this.optsEl;
+        if (colEl) {
+            // DOM READ
+            // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the the column has changed
+            this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
+        }
+        this.refresh(forceRefresh, animated);
+    }
+    render() {
+        const col = this.col;
+        const mode = getIonMode(this);
+        return (h(Host, { 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", { 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))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "col": ["colChanged"]
+    }; }
+    static get style() { return {
+        ios: pickerColumnIosCss,
+        md: pickerColumnMdCss
+    }; }
+}, [32, "ion-picker-legacy-column", {
+        "col": [16]
+    }, undefined, {
+        "col": ["colChanged"]
+    }]);
+const PICKER_OPT_SELECTED = 'picker-opt-selected';
+const DECELERATION_FRICTION = 0.97;
+const MAX_PICKER_SPEED = 90;
+const TRANSITION_DURATION = 150;
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-picker-legacy-column"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-picker-legacy-column":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PickerColumnCmp);
+            }
+            break;
+    } });
+}
+
+export { PickerColumnCmp as P, defineCustomElement as d };

package/components/{picker-internal.js → picker.js}

@@ -4,13 +4,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getElementRoot } from './helpers.js';
 
-const pickerInternalIosCss = ":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef))}";
-const IonPickerInternalIosStyle0 = pickerInternalIosCss;
+const pickerIosCss = ":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)))}";
 
-const pickerInternalMdCss = ":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}";
-const IonPickerInternalMdStyle0 = pickerInternalMdCss;
+const pickerMdCss = ":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}";
 
-const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal extends HTMLElement {
+const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -44,7 +42,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
         this.onFocusOut = (ev) => {
             // TODO(FW-2832): type
             const { relatedTarget } = ev;
-            if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
+            if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN' && relatedTarget !== this.inputEl)) {
                 this.exitInputMode();
             }
         };
@@ -62,7 +60,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
              * make sure that this function only ever runs when
              * focusing a picker column.
              */
-            if (target.tagName !== 'ION-PICKER-COLUMN-INTERNAL') {
+            if (target.tagName !== 'ION-PICKER-COLUMN') {
                 return;
             }
             /**
@@ -129,7 +127,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
                      * since we just tapped the highlight and
                      * not a column.
                      */
-                    if (ev.target.tagName === 'ION-PICKER-COLUMN-INTERNAL') {
+                    if (ev.target.tagName === 'ION-PICKER-COLUMN') {
                         /**
                          * If user taps 2 different columns
                          * then we should just switch to input mode
@@ -163,7 +161,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
                      * If there is only 1 numeric input column
                      * then we should skip multi column input.
                      */
-                    const columns = el.querySelectorAll('ion-picker-column-internal.picker-column-numeric-input');
+                    const columns = el.querySelectorAll('ion-picker-column.picker-column-numeric-input');
                     const columnEl = columns.length === 1 ? ev.target : undefined;
                     this.actionOnClick = () => {
                         this.enterInputMode(columnEl);
@@ -197,7 +195,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
              * Only active input mode if there is at
              * least one column that accepts numeric input.
              */
-            const hasInputColumn = el.querySelector('ion-picker-column-internal.picker-column-numeric-input');
+            const hasInputColumn = el.querySelector('ion-picker-column.picker-column-numeric-input');
             if (!hasInputColumn) {
                 return;
             }
@@ -251,7 +249,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
             if (!inputEl || !inputModeColumn) {
                 return;
             }
-            const values = inputModeColumn.items.filter((item) => item.disabled !== true);
+            const options = Array.from(inputModeColumn.querySelectorAll('ion-picker-column-option')).filter((el) => el.disabled !== true);
             /**
              * If users pause for a bit, the search
              * value should be reset similar to how a
@@ -291,8 +289,13 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
              * 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
              * 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
              */
-            const findItemFromCompleteValue = values.find(({ text }) => {
-                const parsedText = text.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
+            const findItemFromCompleteValue = options.find(({ textContent }) => {
+                /**
+                 * Keyboard entry is currently only used inside of Datetime
+                 * where we guarantee textContent is set.
+                 * If we end up exposing this feature publicly we should revisit this assumption.
+                 */
+                const parsedText = textContent.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
                 return parsedText === inputEl.value;
             });
             if (findItemFromCompleteValue) {
@@ -317,9 +320,11 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
          */
         this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
             const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
-            const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
-            if (item) {
-                colEl.setValue(item.value);
+            const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => {
+                return el.disabled !== true && el.textContent.replace(behavior, '') === value;
+            });
+            if (option) {
+                colEl.setValue(option.value);
             }
         };
         this.selectMultiColumn = () => {
@@ -327,7 +332,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
             if (!inputEl) {
                 return;
             }
-            const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter((col) => col.numericInput);
+            const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);
             const firstColumn = numericPickers[0];
             const lastColumn = numericPickers[1];
             let value = inputEl.value;
@@ -475,7 +480,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { key: 'f6b301345583f5ccfc31cce536176af7aeefd193', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'e57fd191d49cc500b719d5b9ad35054d55e96c43', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (h(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -490,28 +495,28 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
                 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: '3360e7d913f87293844928e430acde69d399f68e', class: "picker-before" }), h("div", { key: '4db89e681458d4eec5d60ff47d3e0ba9fd116682', class: "picker-after" }), h("div", { key: 'a21b20d77dac8141623995b5a53f416d3d9fc1ef', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '86c7d926523b615b4769bd1a4e9713b351089369' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { class: "picker-before" }), h("div", { class: "picker-after" }), h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", null)));
     }
     get el() { return this; }
     static get style() { return {
-        ios: IonPickerInternalIosStyle0,
-        md: IonPickerInternalMdStyle0
+        ios: pickerIosCss,
+        md: pickerMdCss
     }; }
-}, [33, "ion-picker-internal", {
+}, [33, "ion-picker", {
         "exitInputMode": [64]
     }, [[1, "touchstart", "preventTouchStartPropagation"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ion-picker-internal"];
+    const components = ["ion-picker"];
     components.forEach(tagName => { switch (tagName) {
-        case "ion-picker-internal":
+        case "ion-picker":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, PickerInternal);
+                customElements.define(tagName, Picker);
             }
             break;
     } });
 }
 
-export { PickerInternal as P, defineCustomElement as d };
+export { Picker as P, defineCustomElement as d };

package/components/popover.js

@@ -965,11 +965,9 @@ const mdLeaveAnimation = (baseEl) => {
         .addAnimation([backdropAnimation, wrapperAnimation]);
 };
 
-const popoverIosCss = ":host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host{--width:200px;--max-height:90%;--box-shadow:none;--backdrop-opacity:var(--ion-backdrop-opacity, 0.08)}:host(.popover-desktop){--box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.12)}.popover-content{border-radius:10px}:host(.popover-desktop) .popover-content{border:0.5px solid var(--ion-color-step-100, #e6e6e6)}.popover-arrow{display:block;position:absolute;width:20px;height:10px;overflow:hidden}.popover-arrow::after{top:3px;border-radius:3px;position:absolute;width:14px;height:14px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--background);content:\"\";z-index:10}@supports (inset-inline-start: 0){.popover-arrow::after{inset-inline-start:3px}}@supports not (inset-inline-start: 0){.popover-arrow::after{left:3px}:host-context([dir=rtl]) .popover-arrow::after{left:unset;right:unset;right:3px}[dir=rtl] .popover-arrow::after{left:unset;right:unset;right:3px}@supports selector(:dir(rtl)){.popover-arrow::after:dir(rtl){left:unset;right:unset;right:3px}}}:host(.popover-bottom) .popover-arrow{top:auto;bottom:-10px}:host(.popover-bottom) .popover-arrow::after{top:-6px}:host(.popover-side-left) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host(.popover-side-right) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host(.popover-side-top) .popover-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.popover-side-start) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host-context([dir=rtl]):host(.popover-side-start) .popover-arrow,:host-context([dir=rtl]).popover-side-start .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}@supports selector(:dir(rtl)){:host(.popover-side-start:dir(rtl)) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}:host(.popover-side-end) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host-context([dir=rtl]):host(.popover-side-end) .popover-arrow,:host-context([dir=rtl]).popover-side-end .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@supports selector(:dir(rtl)){:host(.popover-side-end:dir(rtl)) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}.popover-arrow,.popover-content{opacity:0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.popover-translucent) .popover-content,:host(.popover-translucent) .popover-arrow::after{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}";
-const IonPopoverIosStyle0 = popoverIosCss;
+const popoverIosCss = ":host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host{--width:200px;--max-height:90%;--box-shadow:none;--backdrop-opacity:var(--ion-backdrop-opacity, 0.08)}:host(.popover-desktop){--box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.12)}.popover-content{border-radius:10px}:host(.popover-desktop) .popover-content{border:0.5px solid var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.popover-arrow{display:block;position:absolute;width:20px;height:10px;overflow:hidden}.popover-arrow::after{top:3px;border-radius:3px;position:absolute;width:14px;height:14px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--background);content:\"\";z-index:10}@supports (inset-inline-start: 0){.popover-arrow::after{inset-inline-start:3px}}@supports not (inset-inline-start: 0){.popover-arrow::after{left:3px}:host-context([dir=rtl]) .popover-arrow::after{left:unset;right:unset;right:3px}[dir=rtl] .popover-arrow::after{left:unset;right:unset;right:3px}@supports selector(:dir(rtl)){.popover-arrow::after:dir(rtl){left:unset;right:unset;right:3px}}}:host(.popover-bottom) .popover-arrow{top:auto;bottom:-10px}:host(.popover-bottom) .popover-arrow::after{top:-6px}:host(.popover-side-left) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host(.popover-side-right) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host(.popover-side-top) .popover-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.popover-side-start) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host-context([dir=rtl]):host(.popover-side-start) .popover-arrow,:host-context([dir=rtl]).popover-side-start .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}@supports selector(:dir(rtl)){:host(.popover-side-start:dir(rtl)) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}:host(.popover-side-end) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host-context([dir=rtl]):host(.popover-side-end) .popover-arrow,:host-context([dir=rtl]).popover-side-end .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@supports selector(:dir(rtl)){:host(.popover-side-end:dir(rtl)) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}.popover-arrow,.popover-content{opacity:0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.popover-translucent) .popover-content,:host(.popover-translucent) .popover-arrow::after{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}";
 
 const popoverMdCss = ":host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host{--width:250px;--max-height:90%;--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}.popover-content{border-radius:4px;-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]) .popover-content{-webkit-transform-origin:right top;transform-origin:right top}[dir=rtl] .popover-content{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.popover-content:dir(rtl){-webkit-transform-origin:right top;transform-origin:right top}}.popover-viewport{-webkit-transition-delay:100ms;transition-delay:100ms}.popover-wrapper{opacity:0}";
-const IonPopoverMdStyle0 = popoverMdCss;
 
 const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLElement {
     constructor() {
@@ -1288,9 +1286,9 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: 'f335ae001173483e6a973b2084f8a7b6b895ae5d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '8468f39b0a0f30b42ae9cac51950e5f0b9be1069', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: 'cb4eeaef385187f3c8e566931844e30edd5451c4', class: "popover-content", part: "content" }, h("slot", { key: '80a5739a4beb6eba150503e426104701954c90b9' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { class: "popover-content", part: "content" }, h("slot", null)))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -1299,8 +1297,8 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
         "isOpen": ["onIsOpenChange"]
     }; }
     static get style() { return {
-        ios: IonPopoverIosStyle0,
-        md: IonPopoverMdStyle0
+        ios: popoverIosCss,
+        md: popoverMdCss
     }; }
 }, [33, "ion-popover", {
         "hasController": [4, "has-controller"],

package/components/radio-group.js

@@ -158,7 +158,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return h(Host, { key: 'd8e84feca8f4dbe7605bc4ad096b6e68b482ba68', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return h(Host, { role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     get el() { return this; }
     static get watchers() { return {