@ionic/core 8.7.16-dev.11769699401.1dc7caf4 → 8.7.16-dev.11770318223.1177a6ea

package/dist/collection/components/input-otp/input-otp.js

@@ -2,11 +2,22 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Fragment, Host, h } from "@stencil/core";
+import { reportValidityToElementInternals } from "../../utils/forms/index";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ *
+ * @part group - The container element that wraps all input boxes.
+ * @part container - The wrapper element for each individual input box.
+ * @part native - The native input element.
+ * @part separator - The separator element displayed between input boxes.
+ * @part description - The container element for the description text.
+ */
 export class InputOTP {
     constructor() {
         this.inheritedAttributes = {};
@@ -347,6 +358,12 @@ export class InputOTP {
             (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
         };
     }
+    /**
+     * Update element internals when disabled prop changes
+     */
+    disabledChanged() {
+        this.updateElementInternals();
+    }
     /**
      * Sets focus to an input box.
      * @param index - The index of the input box to focus (0-based).
@@ -367,6 +384,7 @@ export class InputOTP {
     valueChanged() {
         this.initializeValues();
         this.updateTabIndexes();
+        this.updateElementInternals();
     }
     /**
      * Processes the separators prop into an array of numbers.
@@ -423,6 +441,7 @@ export class InputOTP {
     }
     componentDidLoad() {
         this.updateTabIndexes();
+        this.updateElementInternals();
     }
     /**
      * Get the regex pattern for allowed characters.
@@ -499,6 +518,47 @@ export class InputOTP {
             this.ionComplete.emit({ value: newValue });
         }
     }
+    /**
+     * Gets the value of the input group as a string for form submission.
+     * Returns an empty string if the value is null or undefined.
+     */
+    getValue() {
+        return this.value != null ? this.value.toString() : '';
+    }
+    /**
+     * Called when the form state is restored.
+     * Restores the component's value.
+     */
+    formStateRestoreCallback(value) {
+        this.value = value;
+    }
+    /**
+     * Called when the form is reset.
+     * Resets the component's value.
+     */
+    formResetCallback() {
+        this.value = '';
+    }
+    /**
+     * Updates the form value and reports validity state to the browser via
+     * ElementInternals. This should be called when the component loads, when
+     * the disabled prop changes, and when the value changes to ensure the form
+     * value stays in sync and validation state is updated.
+     */
+    updateElementInternals() {
+        var _a;
+        // Disabled form controls should not be included in form data
+        // Pass null to setFormValue when disabled to exclude it from form submission
+        const value = this.disabled ? null : this.getValue();
+        // ElementInternals may not be fully available in test environments
+        // so we need to check if the method exists before calling it
+        if (typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(value);
+        }
+        // Use the first input element for validity reporting since all inputs
+        // share the same validation state
+        reportValidityToElementInternals((_a = this.inputRefs[0]) !== null && _a !== void 0 ? _a : null, this.internals);
+    }
     /**
      * Emits an `ionChange` event.
      * This API should be called for user committed changes.
@@ -605,7 +665,7 @@ export class InputOTP {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
-        return (h(Host, { key: '16e1e487d2aabe8e9f84682fb50f30966179ffa6', class: createColorClasses(color, {
+        return (h(Host, { key: '126bef771f8ed7a0daed6b8a488e92447c34a789', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -613,13 +673,14 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", Object.assign({ key: 'd7757f5984abe39da9b6320683198db040d0220e', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: '6254cef5b2379359b319b4e573868340885e310a', class: {
+            }) }, h("div", Object.assign({ key: '21b793dcf64bf259a70a2c96b70083b1a7638aa6', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper", part: "container" }, h("input", { class: "native-input", part: "native", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator", part: "separator" }))))), h("div", { key: '0f104b086ffb0f506354b0f1f5ac52d73f498380', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, h("slot", { key: '4f4b63bb67a01b7618719f9bde56ef60d582e7d6' }))));
+            }, part: "description" }, h("slot", { key: '0f3f8b788335a58469e9a8042abcf8e9ae7f07ec' }))));
     }
     static get is() { return "ion-input-otp"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "ios": ["input-otp.ios.scss"],
@@ -1044,6 +1105,9 @@ export class InputOTP {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }, {
@@ -1054,5 +1118,6 @@ export class InputOTP {
                 "methodName": "processSeparators"
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 let inputIds = 0;

package/dist/collection/components/input-otp/input-otp.md.css

@@ -167,9 +167,11 @@
   border-color: var(--border-color);
   background: var(--background);
   color: var(--color);
+  font-family: inherit;
   font-size: inherit;
   text-align: center;
   appearance: none;
+  box-sizing: border-box;
 }
 
 :host(.has-focus) .native-input {
@@ -249,6 +251,7 @@
   --highlight-color-focused: var(--ion-color-primary, #0054e9);
   --highlight-color-valid: var(--ion-color-success, #2dd55b);
   --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  font-family: var(--ion-font-family, inherit);
   font-size: 0.875rem;
 }
 

package/dist/collection/components/input-password-toggle/input-password-toggle.js

@@ -94,16 +94,16 @@ export class InputPasswordToggle {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode(this);
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: 'e265bb6460041189fea1812d391121a9e8dde669', class: createColorClasses(color, {
+        return (h(Host, { key: 'e3c21d5bedebeadb57c0c9b7f065d15ab0d49e4a', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: '1bbd8cb49d7768248c3b07e7bd77f4a8f9ebc19c', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: '0a83d58e059bc3b7ef604270e92351d7fa5d129c', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'a159fa04d547fa75142d117596eedf884454d79c', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'af9a7e202fe0b3f75f10b3e13bf1e5fb653194d1', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     static get is() { return "ion-input-password-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item-divider/item-divider.js

@@ -25,11 +25,11 @@ export class ItemDivider {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '46f930d038a8558a4e25887c68a91b0a69e52360', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f026528e983b0b77cd059400d961d012dec9caae', class: createColorClasses(this.color, {
                 [theme]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: '90d9a689440656669b31204af3516e7b69c99cba', name: "start" }), h("div", { key: 'cfe916d9abf53e8c7fd8bf83a4c93ccd3bef1c18', class: "item-divider-inner" }, h("div", { key: 'bec1b90d37f9fc32b0025f6397df38d8d2750c03', class: "item-divider-wrapper" }, h("slot", { key: 'c44a3ee1ffad90859e2bd2b674c30cfe2009a739' })), h("slot", { key: 'a746e357af8c80072a76837901af5d146304df6a', name: "end" }))));
+            }) }, h("slot", { key: '409f111b2b37782bd242af5f3205d871d85b6254', name: "start" }), h("div", { key: '6811502ae39e51104b46f4f3b272631017a91e4a', class: "item-divider-inner" }, h("div", { key: 'c7cf5918a8e8f891426fda028586b36f21909b00', class: "item-divider-wrapper" }, h("slot", { key: '7db6745917458bb6d854c0662bbf0394142d2996' })), h("slot", { key: 'bad5e02a4d4852fc6e106552b314a42842a0b2e7', name: "end" }))));
     }
     static get is() { return "ion-item-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item-group/item-group.js

@@ -10,7 +10,7 @@ import { getIonTheme } from "../../global/ionic-global";
 export class ItemGroup {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '0781b620a79a4d69a99da8761d5812f6494dacd3', role: "group", class: {
+        return (h(Host, { key: '3fb0784b321736344604e259cfb05c6307159bed', role: "group", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-group-${theme}`]: true,

package/dist/collection/components/item-option/item-option.js

@@ -69,14 +69,14 @@ export class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: 'ee1762e16639662dca1cd9448cc8b232c507d19b', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c36a39053b339086ee45e30a5051256fecf1e9d6', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 [`item-option-${shape}`]: shape !== undefined,
                 [`item-option-${hue}`]: hue !== undefined,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: '8f583bac97a4ff120ed69fc584305f59408ec4d3' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: '901da7a78a71df5dad3908ab80fe32e734d7e437', class: "button-inner" }, h("slot", { key: '06263119ba9afd2ec8fedb3d5fa8f37464c00d34', name: "top" }), h("div", { key: '1bc966ccc6c453e4aaa4d6c7ec64bbecc11c54cf', class: "horizontal-wrapper" }, h("slot", { key: '2a6c548dbec92bc07062be5d57564f1dbc551ba8', name: "start" }), h("slot", { key: '6c6325fd4f2000c59779cae7cfd5b070b2ac54b9', name: "icon-only" }), h("slot", { key: '4ca2f7b2aced99ffc191497989efd6676c59da0f' }), h("slot", { key: '69e229a01881c8d1ddba0410407a1552fe6751d5', name: "end" })), h("slot", { key: 'd81b00fdcc5d46f2852b471267338308c0a1d00a', name: "bottom" })), theme === 'md' && h("ion-ripple-effect", { key: '44884946e44486c42df711efa4b22652c6b42ebf' }))));
+            }) }, h(TagType, Object.assign({ key: '8fa60eb0b2538cd1afe7ad26d0ba9ea0a152b754' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'd444dd749c3abfdb43f66ac8eae49c3e3b3b9960', class: "button-inner" }, h("slot", { key: 'b8164b8893c95c6d4ae9d79a5755eb52c3a1af22', name: "top" }), h("div", { key: '6c840ac03adc45b6dce2f11d64b143a3208e2071', class: "horizontal-wrapper" }, h("slot", { key: '8c08ea25119e1831b9320c2f2e61461d45158611', name: "start" }), h("slot", { key: 'dfc5823b66fcfdcad6277105bd86590958632fdd', name: "icon-only" }), h("slot", { key: '30d0d597802daca4a534055e3f326c38a77c5cf8' }), h("slot", { key: 'bc58e8826067ad905b81608ad0344ed4dedd3a07', name: "end" })), h("slot", { key: '59c3e025a00824c163dbcbeb359ba82871ba06f2', name: "bottom" })), theme === 'md' && h("ion-ripple-effect", { key: '046a2ae39dbec7aebcbac3e250d80016065ed0f0' }))));
     }
     static get is() { return "ion-item-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item-options/item-options.js

@@ -25,7 +25,7 @@ export class ItemOptions {
     render() {
         const theme = getIonTheme(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: '38b7632e7027ed35ec6d981ae7e45a6c21430362', class: {
+        return (h(Host, { key: 'cc55282505679d51fb90ebf30869e930c71afbd4', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-options-${theme}`]: true,

package/dist/collection/components/item-sliding/item-sliding.js

@@ -395,7 +395,7 @@ export class ItemSliding {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'c6d3f3b293f89bf1b7ec264fca241cc1c9675854', class: {
+        return (h(Host, { key: '79cd09dd43183008f470b31abb7b3606f653a98b', class: {
                 [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

package/dist/collection/components/label/label.js

@@ -54,13 +54,13 @@ export class Label {
     render() {
         const position = this.position;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '0ba94de3410c90898d63744748bc9172414dcaa7', class: createColorClasses(this.color, {
+        return (h(Host, { key: '583b4ed56decb1f5ce39ea6f58fbaa6d4fde01a5', class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: '001aa07a7d2689abf209946f049668ac5e4f9766' })));
+            }) }, h("slot", { key: '89467c7725dc79d73d51442cb5a233e244cef1b3' })));
     }
     static get is() { return "ion-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/list/list.js

@@ -46,7 +46,7 @@ export class List {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const { lines, inset } = this;
-        return (h(Host, { key: '7deda9d813391cac1c4156fb9e9fd1f1a43cdea8', role: "list", class: {
+        return (h(Host, { key: 'dcdfb595a6b45307f9810e1ded25ba635c947940', role: "list", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`list-${theme}`]: true,

package/dist/collection/components/list-header/list-header.js

@@ -12,10 +12,10 @@ export class ListHeader {
     render() {
         const { lines } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'cee1cdcc73c8f852941e2080ca059cf3e9476622', class: createColorClasses(this.color, {
+        return (h(Host, { key: '984b0c19c652d264ce1a9832777948a9b5b84326', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '3863ba35771a41ef520ed0ede73839663a67357c', class: "list-header-inner" }, h("slot", { key: '237ed9be79524579b98fb344e1c90c59f2cee926' }))));
+            }) }, h("div", { key: '1bf4519d8aa94fe4b98c6f54aba74dbcbb52fab0', class: "list-header-inner" }, h("slot", { key: '8d7fa8eca680fe3da8b8e4e01b3f885672c9c2bb' }))));
     }
     static get is() { return "ion-list-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loading/loading.js

@@ -180,9 +180,9 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: '16ed5f0600e08cdd435b6a25c3531fb318d68a30', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '0c475f8e28e680e28e09317557795fc56e0835d8', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'd69cf5c81f565ac85a49a97c638c01ba382312ed', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '7632c156a7e38ebeaf1b467a29baea0ce2655f67', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'c6da42d2f7cc23a273d9af15890be3cd6c086fbc', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '406bca826943780a742d3a3afffdc8e13b193ef2', class: "loading-spinner" }, h("ion-spinner", { key: 'ad437d51c9c9c7d23434c7484418fbb0a082830c', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '5c8bf806fea5711213a9acba2429e13667bf7a73', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'd7e88feb6df8edbc326a84d07b294618f7ce6adc', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'f9622f45b2d9e913c325b228a1e6ed03cf2b98e8', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'f4dfdce70c4515878b247d0cc116b5cec2cf79a4', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '6d4475e00c444eb3d217813ae8cc1a02a97b969e', class: "loading-spinner" }, h("ion-spinner", { key: 'd9ad8dd56ec7677c18d06936c1a1b21a0a6a87a8', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'bd3159e18f33ec25d3480d47ce33fa7dfd1f1460', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/menu/menu.js

@@ -661,14 +661,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: '77c64f0e339d5446f0e798d282935aace70da864', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '12bd2c4e9aa2f314ffc45d7f43290bd9910ca8b0', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [theme]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: '6a2f346328fa682f8e9feae415427a0bfc34c958', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'd115caef9535f0a99becb1e7b6c28386f00bc4af' })), h("ion-backdrop", { key: '777937d2d456a4c1d22632fad6726c7db3647baf', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: 'd43e12f2502ae5da847eb0d2a70d0a3945733739', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '19977e6584bdbb5b01e6e0a4a7f4558087175b33' })), h("ion-backdrop", { key: '22e79a7edca409248bd3637474d6783f1d7de1b3', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-button/menu-button.js

@@ -67,7 +67,7 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '03935c67ec2448862cb0f2b4e643946438e1e566', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '206b8482b58e7ee49ea89393a15e9cf30578297b', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -76,7 +76,7 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: 'e877eed6a614918eaaf7e041ba725331e27797a5' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: 'dca1c233c1da70ad7cd8f511713a0b18caa1666d', class: "button-inner" }, h("slot", { key: '7b663519d50fa74c5a287d4e0fc896406f48e759' }, h("ion-icon", { key: '42d30513e68b6c3830ec8a42e7d08abd55aad33b', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: '6b8c422244d078255fed90abe147a1701cbd6b92', type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: '33017f0cde4835383f65b82f24e088dc2cf46517' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '63aadc2910f7fd7ae070fe108822c51441dd8ea5', class: "button-inner" }, h("slot", { key: '6696b67329bdf6a0a7db0739d16717eb9ffc5f3b' }, h("ion-icon", { key: '7f88dd0caa7003db810bce76189ecbaba9ff6317', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: '1a2063529bb63cc055fb4bb7d1ad3032df2a74b4', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-toggle/menu-toggle.js

@@ -34,10 +34,10 @@ export class MenuToggle {
     render() {
         const theme = getIonTheme(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '971acbed9c17a29b559281e20f8b3d53aa5a1fde', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: 'c3ddce789a90d720769919ebf854d05cc75f599e', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [theme]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: 'c6ba836a3380866148420953f5ef4a86ad9b6b85' })));
+            } }, h("slot", { key: 'f1334ba9d20148b673a0b6185ab5ef92f448f720' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js

@@ -986,20 +986,20 @@ export class Modal {
         const isHandleCycle = handleBehavior === 'cycle';
         const shape = this.getShape();
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '547adca39bb8f0070f2e2c17d39300eab5d66202', "no-router": true,
+        return (h(Host, Object.assign({ key: 'd36246ed3c1bb7e50a191f75d54ceee48c4c4f1c', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'b15340363a5399cdbd015f3ba6a07ca9a057af3a', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && h("div", { key: 'd13cb2c5efe07b13e7f4a0ea358c8003944779a7', class: "modal-shadow" }), h("div", Object.assign({ key: 'd6f252655e0c11b7a76917781ad038d3eca4f1f6',
+            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '3550cdf2a29d85e68c98edf8c0a2caae3614b46e', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && h("div", { key: '921908df9bf5504c38b4d296f84ce576a4f3b9c7', class: "modal-shadow" }), h("div", Object.assign({ key: 'bc8ea67569c73ce2d54e3de73534b57d2f0e0007',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '8ea59f134f0a949f27c5413a406771a5fe7d1d13', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '571869adf074e27cebfafc2799de64825f8436fd', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'c609a98d061e83c610c892aca9792e6784dbc02c', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'd8341d77adf77a5271a093d0c562838f11f79c3f', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -834,7 +834,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: '7ba9deeadcdaa58afa69cb6d0f9f12b72b1cc5d6' });
+        return h("slot", { key: 'd6dd0b1e0ba59381a139f4a49de3eb8351fa87a4' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class NavLink {
         };
     }
     render() {
-        return h(Host, { key: 'e516e140c532b6fb17a2cbab9159a696be6af9f2', onClick: this.onClick });
+        return h(Host, { key: '61246716bdf9556db90e07680bc1a289f9658d5c', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {

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

@@ -11,9 +11,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Note {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'd9aa35a602491c26342032b2aba8ebd63416a6b5', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a8470df6b8fb8ca327a282fc23705bc230f13a40', class: createColorClasses(this.color, {
                 [theme]: true,
-            }) }, h("slot", { key: 'c5d448d5f23357487d9e98dfb0ea7f4e9960a325' })));
+            }) }, h("slot", { key: '07cbdef68f010b06638f359f70dff3f1d659d899' })));
     }
     static get is() { return "ion-note"; }
     static get encapsulation() { return "shadow"; }

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

@@ -452,7 +452,7 @@ export class Picker {
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { key: '8778f74b10b575bf28bfb9d21df51a52a7c92ac4', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'd6b77646ebcc32785b3edbb70794aabf19d68503', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (h(Host, { key: '0e3b8112fd28191ff6af8313fee72919d9b23ee7', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '92e86aab71f000c35fcf5f4082116285f2e43016', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -467,7 +467,7 @@ export class Picker {
                 if (ev.key === 'Enter') {
                     (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
                 }
-            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '3ccb1c92e3ee586d4ac50dbf3728f19c7d727c7c', class: "picker-before" }), h("div", { key: 'ac7765a517ddbb3d338239a3c91ead67cab9b0e8', class: "picker-after" }), h("div", { key: '16a07f2aad1e1bc77119b6f8d060ae073b566472', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: 'dc3b58388c3936ce16285822b1e2a50b730031b6' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '5fad8573cd44bee093f26cd4d7cabad836789e79', class: "picker-before" }), h("div", { key: 'fd26db9e86a3cafe125283eeff0da8be7ea2928e', class: "picker-after" }), h("div", { key: '8174b0f258f3ce00707132c674ff53d3b9fc2aee', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: 'a118b0ec709164758ae95fcb9e110befb574138f' })));
     }
     static get is() { return "ion-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -552,14 +552,14 @@ export class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '7c9603b518a73f9883ff01464fe3f70c14b9059c', class: createColorClasses(color, {
+        return (h(Host, { key: '867e0dc27b3a65348415b4e35e980c99d95e183c', class: createColorClasses(color, {
                 [theme]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: 'e98e79dd51550361131d59a8871fe2990dc40edc', name: "prefix" }), h("div", { key: '85894791c93da84401138285bf4fbb169897c3d6', class: "picker-opts", ref: (el) => {
+            }) }, h("slot", { key: '9d68fc2f1524834436098f856af9867d4688c37b', name: "prefix" }), h("div", { key: 'a0b300c9b537ef853bd8703ad10da64dab3876dc', class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: 'd9546be214c2faf2340faf31d8468c2f39f31e4c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '47671f18a0a0659c0660b3b82d234e92b6dcc721', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'f3fc8f9cfc67d0d0dfbf7c134524353297117170', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '4c30c1e5df5f1758978458dbd7e405a01d3118fe' }), h("div", { key: '4e71db05a18d645c6fa49d3a6e67a68cc374b868', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '7fd2461759a92a6909ab514a14bdb41f7d2d16d5', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '015fc0875e5e2df575810fd79635ed5a0f5a29dd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd706a79b1b5b31dc1e358fe1d64b41a2104ea153', name: "suffix" })));
+            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: '4617d1409c852871ff85d0ff6ac2c3d265e56a92', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '893559f2b0035135c582e34c334b56c74ddd829c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '44d379b7d3bdff1574cc95330b22d4f629e26724', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '25a5bd6d8f3d360594b38fe8867b925a67111792' }), h("div", { key: '39d4ffe9c6c2c1ee101b65a648ceaa3582676770', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6ea72753cdc8ca3b9b1e5fd0aad8772fa090b39f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8ec67b388428e1d5d648884b2a69f953aa79702e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'ba379669ca1976f3078c076f93c415e42c37847e', name: "suffix" })));
     }
     static get is() { return "ion-picker-column"; }
     static get encapsulation() { return "shadow"; }

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

@@ -95,10 +95,10 @@ export class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'dc87366ba724d5a0243dcde6bc8cc5c16d6d0c26', class: createColorClasses(color, {
+        return (h(Host, { key: '9ceebae71b6df0b01f36691d82d716f6756625d9', class: createColorClasses(color, {
                 [theme]: true,
                 ['option-disabled']: disabled,
-            }) }, h("div", { key: '4cb0791a9e8f0e6c3403b2cb72c74502025f5218', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'f6b8dd7bc429991ae9c0d3448127117d62c068ba' }))));
+            }) }, h("div", { key: '1f26246d601779dadfaf055d195e2a4959180f5a', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'eed413474a8b7ec7a73da27fa72a2d0a9a2aae2b' }))));
     }
     static get is() { return "ion-picker-column-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -208,11 +208,11 @@ export class Picker {
     render() {
         const { htmlAttributes } = this;
         const theme = getIonTheme(this);
-        return (h(Host, Object.assign({ key: '722010a58f4c7fc3128b1f95675eba2b2b4a6f6a', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'efcc823fad9cb37c1379bef4f4b84c6461f3a3a6', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [theme]: true,
                 // Used internally for styling
-                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'b3acdedf7f305b26dbec78a9e3445f24707b6673', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '67bc76dbd12f1429ff5b5951480ed248fdef0d3b', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '9bf585133a606474e1ec4ddc1028f06e1bbc88d5', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '8bd35f590263153814969636c3c47399f13aed64', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'e12063ea0bd81dfc54e379adddca75941cb8f172', class: "picker-columns" }, h("div", { key: '96baa0fab12ef8d9b79d8f10617a6791dcb2711c', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '42f2f7ad28a1802a5763e113c3fa3f807caa96de', class: "picker-below-highlight" }))), h("div", { key: '274d15028222bbd586c0497d56934d0ff72125bd', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '3f44bf34e039210ae149c590c393ee9f7fb85da0', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'c2a51a89c525b1a22cbc8583cd30f41c3c356d4f', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '23837ffe309d0aad9b8ea09d7ac94d21040ef0d7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '91ba7e553d570768142715ded4bcc27fceedbce4', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '22661cafeb555f1435ec1e0a122404a48136095b', class: "picker-columns" }, h("div", { key: '5f3db32468b8c60f63c70d81a27b18cce6f2e259', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '1bae6b170125b1671a480506ba73636b42b65909', class: "picker-below-highlight" }))), h("div", { key: '91beb94ce537122fbd6cd0c2bd3c00f908d0fefe', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

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

@@ -335,9 +335,9 @@ export class PickerColumnCmp {
     render() {
         const col = this.col;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'ab339936b884abbaf075bfaf1a1556dc396ea959', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: '66a5b7f51aa1ee343dbad3830e03933dbdab27ed', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: '3cea9388a0818db89789087b90790b7734c4a9bf', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '4e4a704f5a6ca6e1647960655ce3fe454fa33f0a', 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", { key: '536ee0f81d87db545846d5cdc8364e93f15a344c', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: '19a170752bacdabd50c719f6d1aa9e58a2bd830b', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '871671f796aa6a1f78e07ab2599d94b5fd8cd0bf', 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", { key: '89792e1dc75a4359a4706a8fd1846fe29b866173', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     static get is() { return "ion-picker-legacy-column"; }
     static get originalStyleUrls() {

package/dist/collection/components/popover/popover.js

@@ -468,9 +468,9 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: 'fb80dc11f59086710e4e54c233635413371b9252', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'e8ebbd19da899a41cb6d41943c14cb4605fa62e1', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'e854b033fc34c173ce02287c481ce81b792efe80', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '5a91c7205e9f0f574a44a384db56fbaf14de8405', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '276be1ecb2a2867e76e9b03107dc9f6f458f91b9', class: "popover-arrow", part: "arrow" }), h("div", { key: '8043b42faba716795b324d3946ce41dec9c841a4', class: "popover-content", part: "content" }, h("slot", { key: 'afdb7c5009e221fa24ab62f37c24316be8949925' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'de4eb1fe04b8916bb0995228847ee6a8f235ee2b', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '0e99e5cfd770663997b05f1758f5da4484ceec64', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '6d37b27153356b39f10793de706b4cfd07fe0813', class: "popover-arrow", part: "arrow" }), h("div", { key: 'fba3fe24c507f5b3771c75aa8351555ddda6bda7', class: "popover-content", part: "content" }, h("slot", { key: 'c5e8dab6e463112be97a361a858d97f9e2fb1629' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -57,7 +57,7 @@ export class ProgressBar {
         const shape = this.getShape();
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: '09f756769766e86f291305dff5bd8f0886d08fdb', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: '9adef68c31bdf39d48199e01587f8d5295d4c6af', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [theme]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,

package/dist/collection/components/radio/radio.js

@@ -137,7 +137,7 @@ export class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const theme = getIonTheme(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: '1b569684af9f60c173d115365e6b489345710b12', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '7ac17b6d0b96104b5baba1bb8c28c37f30005fdd', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -148,10 +148,10 @@ export class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '1e16fd85e901ba9b30f8b15b3ec0995258fc27b1', class: "radio-wrapper" }, h("div", { key: 'f37d80531099fb119e671824bc8ea7d1077b6895', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '41305f13b3025e3876236097131beb7ef8a40515', class: "radio-wrapper" }, h("div", { key: '603d3ac36c227995a3b9f5bd6fa1ec4de4fa304a', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: 'a9458913373b29cf2d6a20fbc8871a6613ae174e' })), h("div", { key: '2e937c439425c196f1b610a7031f9b92bf0c745c', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '838d3a84c3ce2aaa31e61ce2b82c6a23818b0908' })), h("div", { key: '3d4ac72bbf52e04a2500782223baac24784f361e', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-group/radio-group.js

@@ -247,10 +247,10 @@ export class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const theme = getIonTheme(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: '6ea0f1a50a62a9700e4773512d2e48d691ed8537', class: {
+        return (h(Host, { key: '801cf46f2080c3663ef9788ddd1eb1e6a7c9ebc0', class: {
                 [theme]: true,
                 'in-list': hostContext('ion-list', el),
-            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick }, this.renderHintText(), h("slot", { key: 'afcce9c9827a3aadc111b7faae64894de0b433f2' })));
+            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick }, this.renderHintText(), h("slot", { key: '6663344513033d02e4114b983a20adf015037635' })));
     }
     static get is() { return "ion-radio-group"; }
     static get encapsulation() { return "shadow"; }