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

package/dist/collection/components/input/test/slot/input.e2e.js

@@ -9,9 +9,13 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-input label-placement="start" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+            <ion-icon slot="start" name="heart" aria-hidden="true"></ion-icon>
             <ion-button slot="end" aria-label="Show/hide password">
               <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
             </ion-button>
+            <ion-button slot="end">
+              <ion-icon slot="icon-only" name="trash" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `, config);
             const input = page.locator('ion-input');
@@ -21,9 +25,13 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-input label-placement="floating" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+            <ion-icon slot="start" name="heart" aria-hidden="true"></ion-icon>
             <ion-button slot="end" aria-label="Show/hide password">
               <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
             </ion-button>
+            <ion-button slot="end">
+              <ion-icon slot="icon-only" name="trash" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `, config);
             const input = page.locator('ion-input');

package/dist/collection/components/item/test/buttons/item.e2e.js

@@ -18,12 +18,28 @@ configs().forEach(({ title, screenshot, config }) => {
         });
     });
 });
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], palettes: ['dark'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('item: buttons dark'), () => {
         test('should not have visual regressions in dark', async ({ page }) => {
-            await page.goto(`/src/components/item/test/buttons?dark=true`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`item-buttons-dark-diff`));
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/27130',
+            });
+            await page.setContent(`
+        <ion-list>
+          <ion-item button="true">
+            <ion-label>Button Item</ion-label>
+          </ion-item>
+          <ion-item button="true" class="ion-activated">
+            <ion-label>Activated Button Item</ion-label>
+          </ion-item>
+          <ion-item button="true" class="ion-focused">
+            <ion-label>Focused Button Item</ion-label>
+          </ion-item>
+        </ion-list>
+      `, config);
+            const list = page.locator('ion-list');
+            await expect(list).toHaveScreenshot(screenshot(`item-buttons-dark-diff`));
         });
     });
 });

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

@@ -18,11 +18,11 @@ export class ItemDivider {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ad5aa9c89b5681e6f8f5d69ac21ac9dacbec9e3e', class: createColorClasses(this.color, {
+        return (h(Host, { key: '669dfc87b2046b431539676ef99888a003989559', class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: 'b4f7b4d0e33b408c7db61275334e30a5badfe7b3', name: "start" }), h("div", { key: 'cff3b23931630efde15f8dde6d30efac1e8fcd9e', class: "item-divider-inner" }, h("div", { key: '4799d530879ea6a62760b227061f31c4fbbd8fec', class: "item-divider-wrapper" }, h("slot", { key: '501d8525dd99ac8df4ad16960403c13eafd626e0' })), h("slot", { key: '2104471aa81f0e2519ead0b90038c06bf3515c86', name: "end" }))));
+            }) }, h("slot", { key: 'ebf9e249bc490200d8d39fd83d60d2b7ee55cfdb', name: "start" }), h("div", { key: '492fb40aee6215ec450477dfd2eb2362ab3e6395', class: "item-divider-inner" }, h("div", { key: '7e0fe9b876612ae6363b0dc698e58c0577c6888a', class: "item-divider-wrapper" }, h("slot", { key: '5165aecc360ed102f62b2eafc108e926e63a958e' })), h("slot", { key: 'dd7c743e2c28f13412c1319219a75802d6264051', name: "end" }))));
     }
     static get is() { return "ion-item-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class ItemGroup {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '0221527fc2906cd83c0784144ca8aae0a67791e4', role: "group", class: {
+        return (h(Host, { key: '2406e238ec8ecf7a012922b054268c52ef4aaeae', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,

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

@@ -44,12 +44,12 @@ export class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: 'c721b38ee76748559d1e6feac833b7372c3dec4a', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '515775f7e2c5d8a58b96f1147307ab74d81e2485', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: 'ddbf3c01993e411cde628c47a57e91877fafd339' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'ed236e1c17c2bc1ba6f83b28e6af085d92073632', class: "button-inner" }, h("slot", { key: 'ae673702bcbb336e2e4873ef0ada8e9930dd6a55', name: "top" }), h("div", { key: 'f7d2318ccd62ac617bc41d88a72f24cc9d8d5092', class: "horizontal-wrapper" }, h("slot", { key: '3b39bbde60b6eeb13f5071096837435c21203a19', name: "start" }), h("slot", { key: '8936853bf3bb32b1ea3da22a6d30b49487bf3615', name: "icon-only" }), h("slot", { key: '09d86abb98ae6c49669b7fd70d85359facc2ffc4' }), h("slot", { key: '790319d3de7400f17e3c6badcdb3a87d758302f3', name: "end" })), h("slot", { key: '582c8afb956e9fea04bce128e6c966d2d3d68c10', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", null))));
+            }) }, h(TagType, Object.assign({ key: 'f693d6ab5c7c6d2e2f9408d73c029dcf6abf07ed' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: '2ff80908f299daa20140be78ef9d82126b2706c0', class: "button-inner" }, h("slot", { key: '3e34d6564db8a9062ee05d4209c5dba5f90c5c67', name: "top" }), h("div", { key: '6bf1ace707675849f4bab1925531ee2fffc3a057', class: "horizontal-wrapper" }, h("slot", { key: 'd53ea0f90ea03224a021f141a628c7e226d1cbe2', name: "start" }), h("slot", { key: '114f0bfd8c8ffa26a927d02a185d772c77f31cd8', name: "icon-only" }), h("slot", { key: '6a432a9a7b780da5e6bea789185a4c9c46049059' }), h("slot", { key: 'd2c904f6006e4c101cc2cc8c854a6f6dfe015015', name: "end" })), h("slot", { key: '4bf61ad7ac392366c200243094bb8598293ad7ec', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", null))));
     }
     static get is() { return "ion-item-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class ItemOptions {
     render() {
         const mode = getIonMode(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: 'c577fa8bc7f85f4d29dffedf92e7c4afd54ba955', class: {
+        return (h(Host, { key: 'c41b1f121563c51e6405d8b085ce5bb532ef8222', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,

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

@@ -386,7 +386,7 @@ export class ItemSliding {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9e64f1c1c787f0b5f27703b50b47c36aad38b677', class: {
+        return (h(Host, { key: '827bb81f1d66efde0d20dda0360d5c2712ec6605', class: {
                 [mode]: 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/item-sliding/test/a11y/item-sliding.e2e.js

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

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

@@ -55,13 +55,13 @@ export class Label {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: '8578e060e428e527460990f0ebec07175d0bdfec', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'baf8dbc49818749f4e3bfe797ee8cca7ae0db374', class: createColorClasses(this.color, {
                 [mode]: 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: 'da4e6ab59501e9f832f28f37f2803528a6dd1fab' })));
+            }) }, h("slot", { key: '6cf0ae428262ebd6c6999be7818a86d363e239ac' })));
     }
     static get is() { return "ion-label"; }
     static get encapsulation() { return "scoped"; }

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: '88ce7cb748aada82e16e5985c7c314a7d3eec74e', 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: '54b15a5d29c539889abc182c591afd4f74d5d7dd', class: createColorClasses(this.color, {
+        return (h(Host, { key: '93f1b0c39a26c48a845d5f367c66e76bf4167f05', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: 'cc979979dba150fe38e7ce9597726273e69ad7fa', class: "list-header-inner" }, h("slot", { key: 'a92ffecf3ba54e675cd7353f63438188dbf7681b' }))));
+            }) }, 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: '8b21abdb9968e2b9e69ea4ca4dab98fa9bbcc79b', 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: '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" })));
+            }, 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

@@ -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: '6cd86687e471bd5336ad1d71d0d0323dc2991570', onKeyDown: shouldUseCloseWatcher() ? 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: '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" })));
+            } }, 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"; }

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: '349011cb97d80efbbdccde34096e34abe98d03ff', 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: '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" }))));
+            }) }, 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: '6148f06183b46097ec7ce279891d6dbf41a6a531', 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: '2cc7bb2fa93d354321cb7271be441ee047f877c1' })));
+            } }, 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: '0fc72571cfcdfeadeffbec280e79f864a5dc3577', "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: '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',
+            }, 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: '3e143a68b0293a9cd7c075b0f8b5455a5cabe42d' }))));
+            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: 'b7daa45558793fba3837368da415367bbcc2660e' });
+        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: '467f69e018b51cbf5d8e672a3994087d615920b7', 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: 'c28c242d5e60e447c4c926041fa62abfbad3f0fd', class: createColorClasses(this.color, {
+        return (h(Host, { key: '9e7f4b8fdc9b0adda44cf716d454849730ed9c66', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'e4c8e1d32527ba4a9c6d10d579aaba06cb040042' })));
+            }) }, 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: '6d9d2f8427c722ac1e4ad401e3091f86b95af503', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'b885e06c95ad966d477d873154627766ecf5f5f9', "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: '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' })));
+            }, 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: '6658bfcf04d2e16e5a1acdb82c7b99fba27a6e36', 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: 'a763810ee7cdb6757a6b769edc7b22d0e5d31300', name: "prefix" }), h("div", { key: 'b782e731803faa9afddbd7ecf117cf13b7fed392', 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: '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" })));
+            } }, 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: '8307a2917395b704ca995c64b5e84b828a8f3946', class: createColorClasses(color, {
+        return (h(Host, { key: '0d8327014cbc594992bf9a41c4fea5a4e45aac33', class: createColorClasses(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("button", { key: '2112f812b169e1fa67ab08ccb1d63c8e14e30872', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: '571b4724e055765891db30405488ae368f110dc1' }))));
+            }) }, 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: '4144eef6498c66a82f3873ae5c8e55d2ee1d381e', "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: '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" })));
+                [`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: '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: {
+        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: '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))));
+            } }, 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: 'fb58b5b3124ea4b0ced6d73558844121245a0951', "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: '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' })))));
+            }, 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: 'b38b62bfe013dfe5f847a6faf6934b02ce32c113', 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: 'dace1b39a24a928486fa73031277db04c0f437c0', 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: '4a9ab56b16003ea5fe2a737adf2bc1f4be02d2c7', class: "radio-wrapper" }, h("div", { key: '4545fc8a73dc428c20f521de02e0d65b4d365dc1', 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: '6c0ab29c0a724314c0591915a72ec004d66532e3' })), h("div", { key: '03ce5e87635fdbe5c0b3455e7dc2cbcb0ce189b6', 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: 'db2e1c69be545dcb95fa7c7bd0c36a1fd3423294', 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() {