voyager-ionic-core 8.0.0-beta.1 → 8.0.0-beta.2

package/dist/collection/components/label/label.md.css

@@ -66,11 +66,6 @@
   box-sizing: border-box;
 }
 
-:host-context(.item-legacy) {
-  white-space: nowrap;
-  overflow: hidden;
-}
-
 :host(.ion-color) {
   color: var(--ion-color-base);
 }
@@ -281,65 +276,6 @@
   transform: translateY(50%) scale(0.75);
 }
 
-/**
- * When translating the label inside of an ion-item with `fill="outline"`,
- * add pseudo-elements to imitate fieldset-like padding without shifting the label
- */
-:host-context(.item-fill-outline.ion-focused).label-floating,
-:host-context(.item-fill-outline.item-has-focus).label-floating,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating,
-:host-context(.item-fill-outline.item-has-value).label-floating {
-  transform: translateY(-6px) scale(0.75);
-  position: relative;
-  max-width: min-content;
-  background-color: var(--ion-item-background, var(--ion-background-color, #fff));
-  overflow: visible;
-  z-index: 3;
-}
-:host-context(.item-fill-outline.ion-focused).label-floating::before, :host-context(.item-fill-outline.ion-focused).label-floating::after,
-:host-context(.item-fill-outline.item-has-focus).label-floating::before,
-:host-context(.item-fill-outline.item-has-focus).label-floating::after,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::before,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::after,
-:host-context(.item-fill-outline.item-has-value).label-floating::before,
-:host-context(.item-fill-outline.item-has-value).label-floating::after {
-  position: absolute;
-  width: 4px;
-  height: 100%;
-  background-color: var(--ion-item-background, var(--ion-background-color, #fff));
-  content: "";
-}
-:host-context(.item-fill-outline.ion-focused).label-floating::before,
-:host-context(.item-fill-outline.item-has-focus).label-floating::before,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::before,
-:host-context(.item-fill-outline.item-has-value).label-floating::before {
-  /* stylelint-disable property-disallowed-list */
-  left: calc(-1 * 4px);
-  /* stylelint-enable property-disallowed-list */
-}
-:host-context(.item-fill-outline.ion-focused).label-floating::after,
-:host-context(.item-fill-outline.item-has-focus).label-floating::after,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::after,
-:host-context(.item-fill-outline.item-has-value).label-floating::after {
-  /* stylelint-disable property-disallowed-list */
-  right: calc(-1 * 4px);
-  /* stylelint-enable property-disallowed-list */
-}
-
-:host-context(.item-fill-outline.ion-focused.item-has-start-slot).label-floating,
-:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating,
-:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating {
-  transform: translateX(-32px) translateY(-6px) scale(0.75);
-}
-
-:host-context(.item-fill-outline.ion-focused.item-has-start-slot).label-floating.label-rtl,
-:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating.label-rtl,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating.label-rtl,
-:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating.label-rtl {
-  transform: translateX(calc(-1 * -32px)) translateY(-6px) scale(0.75);
-}
-
 :host-context(.ion-focused).label-stacked:not(.ion-color),
 :host-context(.ion-focused).label-floating:not(.ion-color),
 :host-context(.item-has-focus).label-stacked:not(.ion-color),
@@ -354,17 +290,6 @@
   color: var(--ion-color-contrast);
 }
 
-:host-context(.item-fill-solid.ion-focused.ion-color).label-stacked:not(.ion-color),
-:host-context(.item-fill-solid.ion-focused.ion-color).label-floating:not(.ion-color),
-:host-context(.item-fill-outline.ion-focused.ion-color).label-stacked:not(.ion-color),
-:host-context(.item-fill-outline.ion-focused.ion-color).label-floating:not(.ion-color),
-:host-context(.item-fill-solid.item-has-focus.ion-color).label-stacked:not(.ion-color),
-:host-context(.item-fill-solid.item-has-focus.ion-color).label-floating:not(.ion-color),
-:host-context(.item-fill-outline.item-has-focus.ion-color).label-stacked:not(.ion-color),
-:host-context(.item-fill-outline.item-has-focus.ion-color).label-floating:not(.ion-color) {
-  color: var(--ion-color-base);
-}
-
 :host-context(.ion-invalid.ion-touched).label-stacked:not(.ion-color),
 :host-context(.ion-invalid.ion-touched).label-floating:not(.ion-color) {
   color: var(--highlight-color-invalid);

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

@@ -27,7 +27,7 @@ export class List {
     render() {
         const mode = getIonMode(this);
         const { lines, inset } = this;
-        return (h(Host, { key: '9a0eab31e53ae22dbfa7aa58d779d3976797ea08', role: "list", class: {
+        return (h(Host, { key: '88ce7cb748aada82e16e5985c7c314a7d3eec74e', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,

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

@@ -15,10 +15,10 @@ export class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '7b0de2d26ec09f11740ad55bba5e4d2f52623b58', class: createColorClasses(this.color, {
+        return (h(Host, { key: '54b15a5d29c539889abc182c591afd4f74d5d7dd', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '86cbae45e24ce7607b011cd3cd1ae82e741a111c', class: "list-header-inner" }, h("slot", { key: 'a276c0540cd1bdd907b01620d5bfb9c996c08b90' }))));
+            }) }, h("div", { key: 'cc979979dba150fe38e7ce9597726273e69ad7fa', class: "list-header-inner" }, h("slot", { key: 'a92ffecf3ba54e675cd7353f63438188dbf7681b' }))));
     }
     static get is() { return "ion-list-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -158,9 +158,9 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: '0b32f7915df1327934877cc71228aea71205266f', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '8b21abdb9968e2b9e69ea4ca4dab98fa9bbcc79b', 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)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'ca6c4c48b83457685a17c7a396e67cd7a6b06ab9', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'd76304807d988c02de44fc947124a15179ba2c6c', tabindex: "0" }), h("div", { key: '79ec338787a709a668c8f170d75a271bad3c2488', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { class: "loading-spinner" }, h("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'a8e3e70c79e1b359f821c6769b1f4b4bf90da992', tabindex: "0" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '1a76dd7ce9a801e0171cfa1d3db3b9b5f1574517', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '1db24db60f9fad1a9b760a83aa94cab40582d33a', tabindex: "0" }), h("div", { key: '479d80d7a1c89c3b0f63df815a6f8f20221fd158', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { class: "loading-spinner" }, h("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'eaaf110a1a174b56a249a867cc676eebfa6b9bdc', tabindex: "0" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,7 +5,7 @@ import { Build, Host, h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { focusFirstDescendant, focusLastDescendant } from "../../utils/focus-trap";
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
-import { shoudUseCloseWatcher } from "../../utils/hardware-back-button";
+import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
 import { getPresentedOverlay } from "../../utils/overlays";
@@ -586,14 +586,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: 'b75052668f8384e55009d5a9f436f2de590bf2c3', onKeyDown: shoudUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '6cd86687e471bd5336ad1d71d0d0323dc2991570', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: 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: 'd500486fe03917b9115fa399921d73f95602d14e', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '2078b5b36210658681980be69b8dc791e0b7dd96' })), h("ion-backdrop", { key: 'c43171d0f0804c0430b319de54e80c38d1768c80', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: 'b9420db4e6d8c77903ed9191ddb092c24d8006b0', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '3633bed75a12aa7437613497e7dabb1c62a2ebb9' })), h("ion-backdrop", { key: '00d60182f11380b51033b5aca9376ce29c41ae37', 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"; }
@@ -649,9 +649,15 @@ export class Menu {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
+                    "original": "MenuType",
+                    "resolved": "\"overlay\" | \"push\" | \"reveal\" | undefined",
+                    "references": {
+                        "MenuType": {
+                            "location": "import",
+                            "path": "./menu-interface",
+                            "id": "src/components/menu/menu-interface.ts::MenuType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

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

@@ -46,7 +46,7 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '3cdbc04925c8c62ac65763fe83efdfffda0a16fa', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '349011cb97d80efbbdccde34096e34abe98d03ff', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -55,7 +55,7 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: '63db22c49359bf77fa344f5a13b733570ff088a4' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '011af3fa930dd888f7f4aca24ba294d23b2ceba7', class: "button-inner" }, h("slot", { key: 'dc75fd2f1f3d42eb30aefd9cd3ef137d6c8a515a' }, h("ion-icon", { key: '55cfdc7df1eab0bdc386e2a5c90be87be56a000a', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: 'e8b326cd96486ad62026413b5616801d496fc969' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: 'a9878e6fd2f6bd774c4f1d142d7ab2cf09c4ad44', class: "button-inner" }, h("slot", { key: 'd5e7a66233bad1cce7ad814f403aac2f73792d83' }, h("ion-icon", { key: '3c01d567a4ed591a0db3b5ac6645b7afcda43e51', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,10 +26,10 @@ export class MenuToggle {
     render() {
         const mode = getIonMode(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: 'fa7f54b6264dd2110f4cda34aaa6ea7ec4f5040f', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: '6148f06183b46097ec7ce279891d6dbf41a6a531', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '6e1701d21f439cabd9f83607c500eb6111162447' })));
+            } }, h("slot", { key: '2cc7bb2fa93d354321cb7271be441ee047f877c1' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -562,9 +562,9 @@ export class Modal {
         const mode = getIonMode(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ key: 'dbd61751e4964ad81fc1dee19468b716d4f23c8a', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '0fc72571cfcdfeadeffbec280e79f864a5dc3577', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: 'a7646a7a7aeef7eef1bb647373f509d4a26036ad', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { class: "modal-shadow" }), h("div", Object.assign({ key: 'bc6bc6ff7d2357206265240eaa76d730a0ecfd2c',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '4ce27aace82b3c2a24b5dcef0cbb2d27a8d333d1', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { class: "modal-shadow" }), h("div", Object.assign({ key: 'b54e9d3bf5f31b9533535d8273538ff0ea69bc53',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -573,7 +573,7 @@ export class Modal {
             */
             role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { 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" })), h("slot", { key: '0ce06b895deb1da5fbdefa65b079dbd1ada349f7' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '3e143a68b0293a9cd7c075b0f8b5455a5cabe42d' }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -14,7 +14,7 @@ export class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return h(Host, { key: '7b6b746a0e945a48b308eec2dcd9893daf00bca1', onClick: this.onClick });
+        return h(Host, { key: '467f69e018b51cbf5d8e672a3994087d615920b7', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {

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

@@ -13,9 +13,9 @@ export class Note {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '83fbede35bbb772419d68f6ad398aab0e00b9f61', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c28c242d5e60e447c4c926041fa62abfbad3f0fd', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'c4060ce2439e96a5ac8763843579b7956a90032f' })));
+            }) }, h("slot", { key: 'e4c8e1d32527ba4a9c6d10d579aaba06cb040042' })));
     }
     static get is() { return "ion-note"; }
     static get encapsulation() { return "shadow"; }

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

@@ -474,7 +474,7 @@ export class Picker {
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { key: '56b1421dee69c5aa7521b70199f047f4033c0a94', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '6956b6ee5debbad88e90d8b307833a4c112cabfb', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (h(Host, { key: '6d9d2f8427c722ac1e4ad401e3091f86b95af503', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'b885e06c95ad966d477d873154627766ecf5f5f9', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -489,7 +489,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: 'b6acaac9ed883ab1db90a09f7ef3c15feb8fa38b', class: "picker-before" }), h("div", { key: '76a49ca1b135f5fdd31a6230053af1f58d0d7dd1', class: "picker-after" }), h("div", { key: '1e265527d12ffd6dc005133ac7fcfc2a1e02c7c3', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '828077cb8f6a8061d3509aca018d7b06d3e98130' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '91e060f4dd634ebaca072dbe7726a84f6f2c7040', class: "picker-before" }), h("div", { key: '2e06c9db12040c5a7af48c79ce3e1c32ce7a6ae4', class: "picker-after" }), h("div", { key: '791a934f6886ca89b370f71cd5c848ee6dac5b90', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: 'aed4fe303f87b804ce00f2633b0af4905600670a' })));
     }
     static get is() { return "ion-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -379,14 +379,14 @@ export class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '0b055a464237262bab4d99b2de320c9ea1312f29', class: createColorClasses(color, {
+        return (h(Host, { key: '6658bfcf04d2e16e5a1acdb82c7b99fba27a6e36', class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: 'a162598e503c1f4eef59dbadaa5ecc11dc45d82c', name: "prefix" }), h("div", { key: '23f0370a1639adcdacde40fc59ced3cd49fc8e91', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
+            }) }, h("slot", { key: 'a763810ee7cdb6757a6b769edc7b22d0e5d31300', name: "prefix" }), h("div", { key: 'b782e731803faa9afddbd7ecf117cf13b7fed392', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
                 this.scrollEl = el;
-            } }, h("div", { key: '9b86b9b11a53f06b3afea9b76ecca9344e025bc4', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'c95a1998f3d4c13ca60b81f0de01f1f5811d86df', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '04381e68d992a247a38942aea307d1f863876eb5', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '379fda12a9e49c5616e590deb9ddaea908fbed9b' }), h("div", { key: 'c911bf19f4bb531d1ca46d1b3f9d6286d0ac3801', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '9dc907617ad53c1542d492ab1d60c986dd869348', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '219691c9c450dd1eecaf1304eac5870dad1d76e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '8471ea689166cd864ad0fcdb959b7a9db15dfb8d', name: "suffix" })));
+            } }, h("div", { key: '1ad66da148e1b68654fb239e5b0378b6588952ec', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '40d9a15a9387fd6505cf2089dc0bd025c1d024ef', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6594be21a3dea1668cc90488d0b9b611ca8f65a8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '3e848b150f81d6283e5a04876f9b7cd61ba8079e' }), h("div", { key: 'e1e4ccb1cd80e937aee528f99fa969cf45228db3', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '1cc415a51d3f525777f2dfcc0ff0fea670307f9e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'aa247ca6aa986648a5b2822a8eb648d246de695c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '712e32d320c95cf293eb71ec395988414a3aea11', 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

@@ -76,10 +76,10 @@ export class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '1d5358c019c01ca429ddb514b9f9b67a3c89f652', class: createColorClasses(color, {
+        return (h(Host, { key: '8307a2917395b704ca995c64b5e84b828a8f3946', class: createColorClasses(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("button", { key: 'c86794a15b61062a886c6f5113723ccd98238e9f', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'ab7f80cacdd39b5aedf7d2cc8eddc6288093629a' }))));
+            }) }, h("button", { key: '2112f812b169e1fa67ab08ccb1d63c8e14e30872', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: '571b4724e055765891db30405488ae368f110dc1' }))));
     }
     static get is() { return "ion-picker-column-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -182,11 +182,11 @@ export class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: '1cf2f8a25a3eca7ac59eff969803c85540f102fc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '4144eef6498c66a82f3873ae5c8e55d2ee1d381e', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '3a70c7c6e0457afda2e9ef4619cb253b583b7805', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4c90cf7dfeb9d2bdb5e947739864dbc2d1e327e0', tabindex: "0" }), h("div", { key: '050098ced341fd86bfcd72595b1f7a52c3b01b46', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'b0d9420fb053d0c71af04c88224a38f804fd99ba', 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: '82cd2788c394079cb8843c240c17e3629eef0953', class: "picker-columns" }, h("div", { key: '34d2ce59e88b5967e52fe8077ef3a151c6ce38e5', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'b604b101bc0006efc246aea9320d9f44419c531f', class: "picker-below-highlight" }))), h("div", { key: '70437d735b009386b4f5ae250b555c039c366183', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '4344a38bea27537a0f907d929ae3e88d16e751a5', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'a9634e85c6feb73e298407dadb02c1260e2f2f9b', tabindex: "0" }), h("div", { key: '871bb60dbb57c7b0c357491d84da97a2b3900071', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '92e0d584c0d5e0c365af7d48781181248718e17e', 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: '76c9024a822a96a9f9cd0e121629e5c02ba757e3', class: "picker-columns" }, h("div", { key: 'd1326bb793aedff0a5fc16eb2ddd5d5152210838', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '1a9273ff23a5fc42003929dbdc267a29587cc5c6', class: "picker-below-highlight" }))), h("div", { key: 'cbc1280639e26e1b50e8dc9b6e640b357eb22c33', tabindex: "0" })));
     }
     static get is() { return "ion-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

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

@@ -336,9 +336,9 @@ export class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: '0337ac8379be177501b8d61f0ac0f68ecbb8344d', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: 'b7342219fdfcf106d905e3badefe021fd46ad12b', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '013ba8ea1c2fe4fe717386b9cc87484913c234f7', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: 'c87f5f3f1efca050c20bcd697aae905f0f370afc', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     static get is() { return "ion-picker-legacy-column"; }
     static get originalStyleUrls() {

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

@@ -336,9 +336,9 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: 'a4a6fb333562cb2ecc2ac2350541de9be61837af', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'fb58b5b3124ea4b0ced6d73558844121245a0951', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'de9c7ad73f221e6e9a55e2bc7e1ffad7b936b0dd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '1cb5abc9835c044e6d14d444283f34b65b0b134e', class: "popover-content", part: "content" }, h("slot", { key: '0e4db95e6341e823f87877325bb1164193ae6676' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'a7b6a76eeeb840b806434cf5c9beaaf43a975867', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '9c59d1a567f66fb939aa194e452b46fd1dbef27c', class: "popover-content", part: "content" }, h("slot", { key: 'a8e260ace3d487c9e9c861725488a4bef7aeeb02' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -107,7 +107,7 @@ export class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: '46bb0202f75b6cc81df10de71fbe971dc4dcaa68', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'dace1b39a24a928486fa73031277db04c0f437c0', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -118,10 +118,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: '55061e8cc857752d963c9e4a65f46727f5c2cd9d', class: "radio-wrapper" }, h("div", { key: '589fd41fccd0e6d007e7bc502067f3f2447e4b80', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '4a9ab56b16003ea5fe2a737adf2bc1f4be02d2c7', class: "radio-wrapper" }, h("div", { key: '4545fc8a73dc428c20f521de02e0d65b4d365dc1', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '0076f1f3b64c1a0cf2bc511424956a63d6cf2db9' })), h("div", { key: '1505a84e6dc8715f8fcb19ce94fab79e624a0622', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '6c0ab29c0a724314c0591915a72ec004d66532e3' })), h("div", { key: '03ce5e87635fdbe5c0b3455e7dc2cbcb0ce189b6', 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

@@ -153,7 +153,7 @@ export class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return h(Host, { key: '3d43aa6696c5293b49fc44cf91e3e41c4f4d12df', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return h(Host, { key: 'db2e1c69be545dcb95fa7c7bd0c36a1fd3423294', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     static get is() { return "ion-radio-group"; }
     static get properties() {