@ionic/core 8.5.4-dev.11744406052.1d9f8ea6 → 8.5.4-dev.11744646756.1244bf71

package/components/list.js

@@ -5,16 +5,16 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { b as getIonMode } from './ionic-global.js';
 
 const listIosCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{-webkit-transform:translateZ(0);transform:translateZ(0);overflow:hidden}.list-ios{background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-ios.list-inset{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px;border-radius:10px}.list-ios.list-inset ion-item:only-child,.list-ios.list-inset ion-item:not(:only-of-type):last-of-type,.list-ios.list-inset ion-item-sliding:last-of-type ion-item{--border-width:0;--inner-border-width:0}.list-ios.list-inset+ion-list.list-inset{margin-top:0}.list-ios-lines-none .item-lines-default{--inner-border-width:0px;--border-width:0px}.list-ios-lines-full .item-lines-default{--inner-border-width:0px;--border-width:0 0 0.55px 0}.list-ios-lines-inset .item-lines-default{--inner-border-width:0 0 0.55px 0;--border-width:0px}ion-card .list-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
-const IonListIosStyle0 = listIosCss;
 
 const listMdCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{-webkit-transform:translateZ(0);transform:translateZ(0);overflow:hidden}.list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-md>.input:last-child::after{inset-inline-start:0}.list-md.list-inset{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px;border-radius:2px}.list-md.list-inset ion-item:not(:only-of-type):last-of-type,.list-md.list-inset ion-item-sliding:last-of-type ion-item{--border-width:0;--inner-border-width:0}.list-md.list-inset ion-item:only-child{--border-width:0;--inner-border-width:0}.list-md.list-inset+ion-list.list-inset{margin-top:0}.list-md-lines-none .item-lines-default{--inner-border-width:0px;--border-width:0px}.list-md-lines-full .item-lines-default{--inner-border-width:0px;--border-width:0 0 1px 0}.list-md-lines-inset .item-lines-default{--inner-border-width:0 0 1px 0;--border-width:0px}ion-card .list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
-const IonListMdStyle0 = listMdCss;
 
 const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.lines = undefined;
+        /**
+         * If `true`, the list will have margin around it and rounded corners.
+         */
         this.inset = false;
     }
     /**
@@ -44,8 +44,8 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
     }
     get el() { return this; }
     static get style() { return {
-        ios: IonListIosStyle0,
-        md: IonListMdStyle0
+        ios: listIosCss,
+        md: listMdCss
     }; }
 }, [32, "ion-list", {
         "lines": [1],

package/components/modal.js

@@ -4,7 +4,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, writeTask, h, Host } from '@stencil/core/internal/client';
 import { a as findClosestIonContent, i as isIonContent, d as disableContentScrollY, r as resetContentScrollY, f as findIonContent, p as printIonContentErrorMsg } from './index8.js';
 import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate.js';
-import { g as getElementRoot, k as clamp, r as raf, d as inheritAttributes, j as hasLazyBuild } from './helpers.js';
+import { f as clamp, g as getElementRoot, r as raf, d as inheritAttributes, k as hasLazyBuild } from './helpers.js';
 import { c as createLockController } from './lock-controller.js';
 import { p as printIonWarning } from './index6.js';
 import { g as getCapacitor } from './capacitor.js';
@@ -12,11 +12,11 @@ import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CL
 import { g as getClassMap } from './theme.js';
 import { e as deepReady, w as waitForMount } from './index2.js';
 import { b as getIonMode, c as config } from './ionic-global.js';
-import { KEYBOARD_DID_OPEN } from './keyboard2.js';
+import { KEYBOARD_DID_OPEN } from './keyboard.js';
 import { c as createAnimation } from './animation.js';
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
 import { createGesture } from './index3.js';
-import { w as win } from './index5.js';
+import { w as win } from './index9.js';
 import { d as defineCustomElement$1 } from './backdrop.js';
 
 var Style;
@@ -439,7 +439,7 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) =>
          * canDismiss is checked.
          */
         const shouldComplete = !isAttemptingDismissWithCanDismiss && threshold >= DISMISS_THRESHOLD;
-        let newStepValue = shouldComplete ? -0.001 : 0.001;
+        let newStepValue = shouldComplete ? -1e-3 : 0.001;
         if (!shouldComplete) {
             animation.easing('cubic-bezier(1, 0, 0.68, 0.28)');
             newStepValue += getTimeGivenProgression([0, 0], [1, 0], [0.68, 0.28], [1, 1], clampedStep)[0];
@@ -1346,10 +1346,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
 };
 
 const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);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);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer ion-toolbar:first-of-type{padding-top:6px}";
-const IonModalIosStyle0 = modalIosCss;
 
 const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);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);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0,  40px,  0);transform:translate3d(0,  40px,  0);opacity:0.01}";
-const IonModalMdStyle0 = modalMdCss;
 
 const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
     constructor() {
@@ -1374,6 +1372,112 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         this.inline = false;
         // Whether or not modal is being dismissed via gesture
         this.gestureAnimationDismissing = false;
+        this.presented = false;
+        /** @internal */
+        this.hasController = false;
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
+        this.keyboardClose = true;
+        /**
+         * Controls whether scrolling or dragging within the sheet modal expands
+         * it to a larger breakpoint. This only takes effect when `breakpoints`
+         * and `initialBreakpoint` are set.
+         *
+         * If `true`, scrolling or dragging anywhere in the modal will first expand
+         * it to the next breakpoint. Once fully expanded, scrolling will affect the
+         * content.
+         * If `false`, scrolling will always affect the content. The modal will
+         * only expand when dragging the header or handle. The modal will close when
+         * dragging the header or handle. It can also be closed when dragging the
+         * content, but only if the content is scrolled to the top.
+         */
+        this.expandToScroll = true;
+        /**
+         * A decimal value between 0 and 1 that indicates the
+         * point after which the backdrop will begin to fade in
+         * when using a sheet modal. Prior to this point, the
+         * backdrop will be hidden and the content underneath
+         * the sheet can be interacted with. This value is exclusive
+         * meaning the backdrop will become active after the value
+         * specified.
+         */
+        this.backdropBreakpoint = 0;
+        /**
+         * The interaction behavior for the sheet modal when the handle is pressed.
+         *
+         * Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed.
+         * Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.
+         *
+         * Handle behavior is unavailable when the `handle` property is set to `false` or
+         * when the `breakpoints` property is not set (using a fullscreen or card modal).
+         */
+        this.handleBehavior = 'none';
+        /**
+         * If `true`, the modal will be dismissed when the backdrop is clicked.
+         */
+        this.backdropDismiss = true;
+        /**
+         * If `true`, a backdrop will be displayed behind the modal.
+         * This property controls whether or not the backdrop
+         * darkens the screen when the modal is presented.
+         * It does not control whether or not the backdrop
+         * is active or present in the DOM.
+         */
+        this.showBackdrop = true;
+        /**
+         * If `true`, the modal will animate.
+         */
+        this.animated = true;
+        /**
+         * If `true`, the modal will open. If `false`, the modal will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the modalController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the modal dismisses. You will need to do that in your code.
+         */
+        this.isOpen = false;
+        /**
+         * If `true`, the component passed into `ion-modal` will
+         * automatically be mounted when the modal is created. The
+         * component will remain mounted even when the modal is dismissed.
+         * However, the component will be destroyed when the modal is
+         * destroyed. This property is not reactive and should only be
+         * used when initially creating a modal.
+         *
+         * Note: This feature only applies to inline modals in JavaScript
+         * frameworks such as Angular, React, and Vue.
+         */
+        this.keepContentsMounted = false;
+        /**
+         * If `true`, focus will not be allowed to move outside of this overlay.
+         * If `false`, focus will be allowed to move outside of the overlay.
+         *
+         * In most scenarios this property should remain set to `true`. Setting
+         * this property to `false` can cause severe accessibility issues as users
+         * relying on assistive technologies may be able to move focus into
+         * a confusing state. We recommend only setting this to `false` when
+         * absolutely necessary.
+         *
+         * Developers may want to consider disabling focus trapping if this
+         * overlay presents a non-Ionic overlay from a 3rd party library.
+         * Developers would disable focus trapping on the Ionic overlay
+         * when presenting the 3rd party overlay and then re-enable
+         * focus trapping when dismissing the 3rd party overlay and moving
+         * focus back to the Ionic overlay.
+         */
+        this.focusTrap = true;
+        /**
+         * Determines whether or not a modal can dismiss
+         * when calling the `dismiss` method.
+         *
+         * If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.
+         * If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+         *
+         * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+         * if you need to access `this` from within the callback.
+         */
+        this.canDismiss = true;
         this.onHandleClick = () => {
             const { sheetTransition, handleBehavior } = this;
             if (handleBehavior !== 'cycle' || sheetTransition !== undefined) {
@@ -1411,32 +1515,6 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
                 el.dispatchEvent(ev);
             }
         };
-        this.presented = false;
-        this.hasController = false;
-        this.overlayIndex = undefined;
-        this.delegate = undefined;
-        this.keyboardClose = true;
-        this.enterAnimation = undefined;
-        this.leaveAnimation = undefined;
-        this.breakpoints = undefined;
-        this.expandToScroll = true;
-        this.initialBreakpoint = undefined;
-        this.backdropBreakpoint = 0;
-        this.handle = undefined;
-        this.handleBehavior = 'none';
-        this.component = undefined;
-        this.componentProps = undefined;
-        this.cssClass = undefined;
-        this.backdropDismiss = true;
-        this.showBackdrop = true;
-        this.animated = true;
-        this.presentingElement = undefined;
-        this.htmlAttributes = undefined;
-        this.isOpen = false;
-        this.trigger = undefined;
-        this.keepContentsMounted = false;
-        this.focusTrap = true;
-        this.canDismiss = true;
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
@@ -1925,16 +2003,16 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         "trigger": ["triggerChanged"]
     }; }
     static get style() { return {
-        ios: IonModalIosStyle0,
-        md: IonModalMdStyle0
+        ios: modalIosCss,
+        md: modalMdCss
     }; }
 }, [33, "ion-modal", {
         "hasController": [4, "has-controller"],
         "overlayIndex": [2, "overlay-index"],
         "delegate": [16],
         "keyboardClose": [4, "keyboard-close"],
-        "enterAnimation": [16],
-        "leaveAnimation": [16],
+        "enterAnimation": [16, "enter-animation"],
+        "leaveAnimation": [16, "leave-animation"],
         "breakpoints": [16],
         "expandToScroll": [4, "expand-to-scroll"],
         "initialBreakpoint": [2, "initial-breakpoint"],
@@ -1942,13 +2020,13 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         "handle": [4],
         "handleBehavior": [1, "handle-behavior"],
         "component": [1],
-        "componentProps": [16],
+        "componentProps": [16, "component-props"],
         "cssClass": [1, "css-class"],
         "backdropDismiss": [4, "backdrop-dismiss"],
         "showBackdrop": [4, "show-backdrop"],
         "animated": [4],
-        "presentingElement": [16],
-        "htmlAttributes": [16],
+        "presentingElement": [16, "presenting-element"],
+        "htmlAttributes": [16, "html-attributes"],
         "isOpen": [4, "is-open"],
         "trigger": [1],
         "keepContentsMounted": [4, "keep-contents-mounted"],

package/components/notch-controller.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win } from './index5.js';
+import { w as win } from './index9.js';
 import { r as raf } from './helpers.js';
 
 /**

package/components/overlays.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { d as doc } from './index5.js';
-import { f as focusVisibleElement, c as componentOnReady, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
+import { d as doc } from './index9.js';
+import { h as focusVisibleElement, c as componentOnReady, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
 import { OVERLAY_BACK_BUTTON_PRIORITY, shouldUseCloseWatcher } from './hardware-back-button.js';
 import { b as getIonMode, c as config, a as isPlatform } from './ionic-global.js';
 import { C as CoreDelegate } from './framework-delegate.js';

package/components/picker-column-option.js

@@ -7,10 +7,8 @@ import { c as createColorClasses } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
 
 const pickerColumnOptionIosCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}";
-const IonPickerColumnOptionIosStyle0 = pickerColumnOptionIosCss;
 
 const pickerColumnOptionMdCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
-const IonPickerColumnOptionMdStyle0 = pickerColumnOptionMdCss;
 
 const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOption extends HTMLElement {
     constructor() {
@@ -23,9 +21,24 @@ const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOp
          * clicking an enable option.
          */
         this.pickerColumn = null;
+        /**
+         * The aria-label of the option.
+         *
+         * If the value changes, then it will trigger a
+         * re-render of the picker since it's a @State variable.
+         * Otherwise, the `aria-label` attribute cannot be updated
+         * after the component is loaded.
+         */
         this.ariaLabel = null;
+        /**
+         * If `true`, the user cannot interact with the picker column option.
+         */
         this.disabled = false;
-        this.value = undefined;
+        /**
+         * The color to use from your application's color palette.
+         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+         * For more information on colors, see [theming](/docs/theming/basics).
+         */
         this.color = 'primary';
     }
     /**
@@ -96,8 +109,8 @@ const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOp
         "aria-label": ["onAriaLabelChange"]
     }; }
     static get style() { return {
-        ios: IonPickerColumnOptionIosStyle0,
-        md: IonPickerColumnOptionMdStyle0
+        ios: pickerColumnOptionIosCss,
+        md: pickerColumnOptionMdCss
     }; }
 }, [33, "ion-picker-column-option", {
         "disabled": [4],

package/components/picker-column.js

@@ -2,14 +2,13 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as doc } from './index5.js';
+import { d as doc } from './index9.js';
 import { r as raf, g as getElementRoot } from './helpers.js';
-import { a as hapticSelectionStart, b as hapticSelectionChanged, h as hapticSelectionEnd } from './haptic.js';
+import { b as hapticSelectionStart, a as hapticSelectionChanged, h as hapticSelectionEnd } from './haptic.js';
 import { a as isPlatform, b as getIonMode } from './ionic-global.js';
 import { c as createColorClasses } from './theme.js';
 
 const pickerColumnCss = ":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}.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{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}.picker-item-empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker-opts::-webkit-scrollbar{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([slot=prefix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}::slotted([slot=suffix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}:host(.picker-column-disabled) .picker-opts{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
-const IonPickerColumnStyle0 = pickerColumnCss;
 
 const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends HTMLElement {
     constructor() {
@@ -21,6 +20,28 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
         this.isColumnVisible = false;
         this.canExitInputMode = true;
         this.updateValueTextOnScroll = false;
+        this.ariaLabel = null;
+        this.isActive = false;
+        /**
+         * If `true`, the user cannot interact with the picker.
+         */
+        this.disabled = false;
+        /**
+         * The color to use from your application's color palette.
+         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+         * For more information on colors, see [theming](/docs/theming/basics).
+         */
+        this.color = 'primary';
+        /**
+         * If `true`, tapping the picker will
+         * reveal a number input keyboard that lets
+         * the user type in values for each picker
+         * column. This is useful when working
+         * with time pickers.
+         *
+         * @internal
+         */
+        this.numericInput = false;
         this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
             const { isColumnVisible, scrollEl } = this;
             if (isColumnVisible && scrollEl) {
@@ -387,12 +408,6 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
              */
             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;
@@ -566,7 +581,7 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
         "aria-label": ["ariaLabelChanged"],
         "value": ["valueChange"]
     }; }
-    static get style() { return IonPickerColumnStyle0; }
+    static get style() { return pickerColumnCss; }
 }, [1, "ion-picker-column", {
         "disabled": [4],
         "value": [1032],

package/components/picker-column2.js

@@ -2,16 +2,14 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { k as clamp } from './helpers.js';
-import { b as hapticSelectionChanged, h as hapticSelectionEnd, a as hapticSelectionStart } from './haptic.js';
+import { f as clamp } from './helpers.js';
+import { a as hapticSelectionChanged, h as hapticSelectionEnd, b 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}.picker-opt{inset-inline-start: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 IonPickerLegacyColumnIosStyle0 = pickerColumnIosCss;
 
 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}.picker-opt{inset-inline-start: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 IonPickerLegacyColumnMdStyle0 = pickerColumnMdCss;
 
 const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class PickerColumnCmp extends HTMLElement {
     constructor() {
@@ -32,7 +30,6 @@ const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class PickerColumnCmp e
         // 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;
@@ -280,7 +277,7 @@ const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class PickerColumnCmp e
             this.emitColChange();
             return;
         }
-        this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
+        this.velocity = clamp(-90, 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')) {
@@ -352,8 +349,8 @@ const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class PickerColumnCmp e
         "col": ["colChanged"]
     }; }
     static get style() { return {
-        ios: IonPickerLegacyColumnIosStyle0,
-        md: IonPickerLegacyColumnMdStyle0
+        ios: pickerColumnIosCss,
+        md: pickerColumnMdCss
     }; }
 }, [32, "ion-picker-legacy-column", {
         "col": [16]

package/components/picker.js

@@ -5,10 +5,8 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { g as getElementRoot } from './helpers.js';
 
 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}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start: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 IonPickerIosStyle0 = pickerIosCss;
 
 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}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start: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 IonPickerMdStyle0 = pickerMdCss;
 
 const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement {
     constructor() {
@@ -478,8 +476,8 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
     }
     get el() { return this; }
     static get style() { return {
-        ios: IonPickerIosStyle0,
-        md: IonPickerMdStyle0
+        ios: pickerIosCss,
+        md: pickerMdCss
     }; }
 }, [33, "ion-picker", {
         "exitInputMode": [64]