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

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/label/test/a11y/label.e2e.js

@@ -65,7 +65,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['md'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('label: a11y for ion-color()'), () => {
         test('should not have accessibility violations when focused', async ({ page }) => {
             /**

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: '47eead4d1ec73bedac86f8a8dce8db5e308ad12d', 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: '93f1b0c39a26c48a845d5f367c66e76bf4167f05', 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: '6a1fc2e6f21c1bc4497797474d5b58011255b6d3', class: "list-header-inner" }, h("slot", { key: '1a2167142e719a48fe49bee51a0df25bc8ccbd59' }))));
     }
     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: 'aac7cb449530a6d6f567e53c48f42a216d0f9b07', 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: '44e430f7a79745af164b1eb04ac8f94269a1bbda', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '72e42c320c4a69788fab0051a3a537ff8a2ac61d', tabindex: "0" }), h("div", { key: '7805fff86c4996317fba188ce21e42dd964b5a88', 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: '733928417d9aef2eae34842bfa6836a2902bace8', tabindex: "0" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/loading/test/a11y/loading.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('loading: a11y'), () => {
         test('should set aria-labelledby with a message', async ({ page }) => {
             await page.setContent(`

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: 'e8d4e08518fb44c1b66271ef9cf41c188a6e8446', 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: '12dc0844cd577e514002a3936b488c0a69147644', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'ca93bc3b81a542a148b30b96afad92883af06709' })), h("ion-backdrop", { key: 'f887e38faa59a85ea6dcef92193ee68b8d0cc59c', 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: '74a9fa037fba7c8a6c0b2a63201ba47053eef181', 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: 'beea50b1748cb1932289eefa43f5b28bcf8757dd' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: 'cac396f4e92541a10bf94c2afcf6be515a2f3bb7', class: "button-inner" }, h("slot", { key: 'abad3080be6f8e16f6eb459165f69836f76df126' }, h("ion-icon", { key: '322d013bab64750e88899eefda6e3cc688029077', 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-button/test/a11y/menu-button.e2e.js

@@ -7,7 +7,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * Only ios mode uses ion-color() for the menu button
  */
-configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['ios'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('menu-button: a11y for ion-color()'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

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: '78202849633b083bb3310e1a8d7a43b0b9226764', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '6e1701d21f439cabd9f83607c500eb6111162447' })));
+            } }, h("slot", { key: '9587bbb3a5315e11f57183e52f89609526e3879b' })));
     }
     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: '525f6464ddadb6991b9dfd6de21ae9b029abc96a', "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: 'a87ce56764b71e1244681f07d731e96f3b69b623', 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: '7a0438c07426b457a5b57ffeacdb91c4fd1641c6',
             /*
               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: '08fafd53f6c4213ed28ba7f9de613052fefc810a' }))));
     }
     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: 'aa21646aeb10e5006a825dd9c44e866f2f5c9c28' });
     }
     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: '147b615da688658f272037b3383d0402a3caf982', 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: '9e7f4b8fdc9b0adda44cf716d454849730ed9c66', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'c4060ce2439e96a5ac8763843579b7956a90032f' })));
+            }) }, h("slot", { key: '5bb30c6891649ec408acbd121a1294b3e93620d2' })));
     }
     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: '16c8d2d72dcbd64e2b2fb77200ead6a2107d24a6', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'f7f4c77bde934813a18f221308277580c45715e3', "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: '0eead52707acfa004c83fe0acfd4f9162b19f09b', class: "picker-before" }), h("div", { key: '5b4b531e3ed4fd35f1380156cf5332a455433a19', class: "picker-after" }), h("div", { key: '2b478202ac99703e4f72b30906915c7058ca9b9f', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '4a93ca36194ea1d2cec8bef8a0f402c14ee74576' })));
     }
     static get is() { return "ion-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -275,7 +275,11 @@ export class PickerColumn {
          */
         const parentEl = (this.parentEl = this.el.closest('ion-picker'));
         const visibleCallback = (entries) => {
-            const ev = entries[0];
+            /**
+             * Browsers will sometimes group multiple IO events into a single callback.
+             * As a result, we want to grab the last/most recent event in case there are multiple events.
+             */
+            const ev = entries[entries.length - 1];
             if (ev.isIntersecting) {
                 const { activeItem, el } = this;
                 this.isColumnVisible = true;
@@ -379,14 +383,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: '20de89f624d0fdbb4eadf912a6a8a8c1f3c374bc', 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: '39bd2171785e21aef935787d8222949a2d29a771', name: "prefix" }), h("div", { key: '97217b758b65913db869f322b8f127f0da3a1c28', 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: '8cfd8f5de1c274f7b2b5b14c7f6f875d475edc5c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cfbf7e8abe54c4df98addb9a24e82dd803ba95c0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8049923186d8b5ce28da2ce90ad720c244395f9c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '180efa3b7874e2b4269fb150794eaeab9f648f2e' }), h("div", { key: '9161cc3e344b92354276981813e1d55ef9979dea', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'ce703fb3ea07d5ea2abf526d64ca85d2beed15f1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6ce6cb5de80ac316a664e9cfcecf1897c8f90e58', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'ecccfa6bd8f6d2d641109e74d0788081e3f29801', 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: '0d8327014cbc594992bf9a41c4fea5a4e45aac33', 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: '3d9a87c2290d1f0a5ee0d03f6e050f5523d8cb90', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'cacda0d86d3eb7f531fcad5719e49bc203048d24' }))));
     }
     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: '12511a31ebb68509a5a69ff6ef13015f6aa3ca64', "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: '3ecf735bc0887682c42e6d49bf367902a90a93db', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'bcaff5af935db35dace8904f05d2723184e6d195', tabindex: "0" }), h("div", { key: '3926b745393be7049cb330fdf830f40af8a842e2', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'a3dc1a2afad156118178b7a76826da2c5b15772b', 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: '7cf9aed4a690148bf567afb05ce797d63b0510e8', class: "picker-columns" }, h("div", { key: 'eef6a100428c538ddf5f4c940177254cc7ae6311', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'f5371f3cbecbb551ee8340ca7e0b09eb8ec91f5a', class: "picker-below-highlight" }))), h("div", { key: 'a6db977aaf5489fe0076a4c6f76237726b92b9c5', 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: '1889cd0a42d26d1ccbed8c4292883658c2388efe', 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: 'f5c2e4d4942dfcce5f801889b821c02f1f789ca2', 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: 'e8cc03cd7766a460172a1536d1498e63a0bf0b7f', "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: 'b24b30bc740796b3a5d9ea74e26e34e634c8cc9a', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '04de0f983c074f945065705bf008fa96f8ce31eb', class: "popover-content", part: "content" }, h("slot", { key: 'dc56cb477ed4c891e425fdae256676791a1cf7c8' })))));
     }
     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: '9afb53853b0f805cee6de3311577bbae529d23a6', 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/progress-bar/test/a11y/progress-bar.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('progress-bar: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             /**

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: '939b9f982252f986e80cfc4384b483268c147116', 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: '40b54d34dc0d92aaf875ba6f523e786f38deb583', class: "radio-wrapper" }, h("div", { key: 'd7e8230729bda5c4f101662707509480934773dd', 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: '2e906be3e02467f8ad3469f0006f62cf9fde3036' })), h("div", { key: '6bbe0a60f552d9ba9e4fc55c626ff85f450e93e5', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio/test/a11y/radio.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('radio: a11y'), () => {
         test('default layout should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

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: '6e448f4e0fbc7867865bead79985608e59fe06f2', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     static get is() { return "ion-radio-group"; }
     static get properties() {