voyager-ionic-core 8.0.0-beta.2 → 8.0.0-rc.0

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

@@ -0,0 +1,183 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { Host, h } from "@stencil/core";
+import { printIonWarning } from "../../utils/logging/index";
+import { createColorClasses } from "../../utils/theme";
+import { eyeOff, eye } from "ionicons/icons";
+import { getIonMode } from "../../global/ionic-global";
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
+export class InputPasswordToggle {
+    constructor() {
+        this.togglePasswordVisibility = () => {
+            const { inputElRef } = this;
+            if (!inputElRef) {
+                return;
+            }
+            inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
+        };
+        this.color = undefined;
+        this.showIcon = undefined;
+        this.hideIcon = undefined;
+        this.type = 'password';
+    }
+    /**
+     * Whenever the input type changes we need to re-run validation to ensure the password
+     * toggle is being used with the correct input type. If the application changes the type
+     * outside of this component we also need to re-render so the correct icon is shown.
+     */
+    onTypeChange(newValue) {
+        if (newValue !== 'text' && newValue !== 'password') {
+            printIonWarning(`ion-input-password-toggle only supports inputs of type "text" or "password". Input of type "${newValue}" is not compatible.`, this.el);
+            return;
+        }
+    }
+    connectedCallback() {
+        const { el } = this;
+        const inputElRef = (this.inputElRef = el.closest('ion-input'));
+        if (!inputElRef) {
+            printIonWarning('No ancestor ion-input found for ion-input-password-toggle. This component must be slotted inside of an ion-input.', el);
+            return;
+        }
+        /**
+         * Important: Set the type in connectedCallback because the default value
+         * of this.type may not always be accurate. Usually inputs have the "password" type
+         * but it is possible to have the input to initially have the "text" type. In that scenario
+         * the wrong icon will show briefly before switching to the correct icon. Setting the
+         * type here allows us to avoid that flicker.
+         */
+        this.type = inputElRef.type;
+    }
+    disconnectedCallback() {
+        this.inputElRef = null;
+    }
+    render() {
+        var _a, _b;
+        const { color, type } = this;
+        const mode = getIonMode(this);
+        const showPasswordIcon = (_a = this.showIcon) !== null && _a !== void 0 ? _a : eye;
+        const hidePasswordIcon = (_b = this.hideIcon) !== null && _b !== void 0 ? _b : eyeOff;
+        const isPasswordVisible = type === 'text';
+        return (h(Host, { key: '1cb075999e41c2fde3a3d6cafe6f37c9b5429299', class: createColorClasses(color, {
+                [mode]: true,
+            }) }, h("ion-button", { key: 'cfaaec221f530ecc475690b6508c2333e32ff609', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
+                /**
+                 * This prevents mobile browsers from
+                 * blurring the input when the password toggle
+                 * button is activated.
+                 */
+                ev.preventDefault();
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'dc0fc5fe8df4df4c145e29b30e589f159aab9cd9', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
+    }
+    static get is() { return "ion-input-password-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "ios": ["input-password-toggle.scss"],
+            "md": ["input-password-toggle.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "ios": ["input-password-toggle.css"],
+            "md": ["input-password-toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
+                },
+                "attribute": "color",
+                "reflect": true
+            },
+            "showIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon that can be used to represent showing a password. If not set, the \"eye\" Ionicon will be used."
+                },
+                "attribute": "show-icon",
+                "reflect": false
+            },
+            "hideIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon that can be used to represent hiding a password. If not set, the \"eyeOff\" Ionicon will be used."
+                },
+                "attribute": "hide-icon",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "TextFieldTypes",
+                    "resolved": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
+                    "references": {
+                        "TextFieldTypes": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::TextFieldTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'password'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "type",
+                "methodName": "onTypeChange"
+            }];
+    }
+}

package/dist/collection/components/input-password-toggle/test/a11y/input-password-toggle.e2e.js

@@ -0,0 +1,21 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import AxeBuilder from "@axe-core/playwright";
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('input password toggle: a11y'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+          <main>
+            <ion-input label="input" type="password">
+              <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+            </ion-input>
+          </main>
+        `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});

package/dist/collection/components/input-password-toggle/test/basic/input-password-toggle.e2e.js

@@ -0,0 +1,38 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('input password toggle: states'), () => {
+        test('should be hidden when inside of a readonly input', async ({ page }) => {
+            await page.setContent(`
+          <ion-input label="input" type="password" readonly="true">
+            <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+          </ion-input>
+        `, config);
+            const inputPasswordToggle = page.locator('ion-input-password-toggle');
+            await expect(inputPasswordToggle).toBeHidden();
+        });
+        test('should be hidden when inside of a disabled input', async ({ page }) => {
+            await page.setContent(`
+          <ion-input label="input" type="password" disabled="true">
+            <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+          </ion-input>
+        `, config);
+            const inputPasswordToggle = page.locator('ion-input-password-toggle');
+            await expect(inputPasswordToggle).toBeHidden();
+        });
+    });
+    test.describe(title('input password toggle: rendering'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.setContent(`
+          <ion-input label="input" type="password">
+            <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+          </ion-input>
+        `, config);
+            const inputPasswordToggle = page.locator('ion-input-password-toggle');
+            await expect(inputPasswordToggle).toHaveScreenshot(screenshot('input-password-toggle'));
+        });
+    });
+});

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

@@ -0,0 +1,76 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { Input } from "../../input/input";
+import { InputPasswordToggle } from "../input-password-toggle";
+import { Button } from "../../button/button";
+import { initialize } from "../../../global/ionic-global";
+describe('input password toggle', () => {
+    it('should toggle input type when clicked', async () => {
+        const page = await newSpecPage({
+            components: [Input, InputPasswordToggle, Button],
+            template: () => (h("ion-input", { type: "password" }, h("ion-input-password-toggle", { slot: "end" }))),
+        });
+        const inputPasswordToggle = page.body.querySelector('ion-input-password-toggle');
+        const button = inputPasswordToggle.shadowRoot.querySelector('ion-button');
+        const input = page.body.querySelector('ion-input');
+        expect(input.type).toBe('password');
+        button.click();
+        await page.waitForChanges();
+        expect(input.type).toBe('text');
+        button.click();
+        await page.waitForChanges();
+        expect(input.type).toBe('password');
+    });
+    it('should render custom icons', async () => {
+        const page = await newSpecPage({
+            components: [Input, InputPasswordToggle, Button],
+            template: () => (h("ion-input", { type: "password" }, h("ion-input-password-toggle", { showIcon: "show", hideIcon: "hide", slot: "end" }))),
+        });
+        const inputPasswordToggle = page.body.querySelector('ion-input-password-toggle');
+        const button = inputPasswordToggle.shadowRoot.querySelector('ion-button');
+        const icon = inputPasswordToggle.shadowRoot.querySelector('ion-icon');
+        // Grab the attribute to test since we are not actually passing in a valid SVG
+        expect(icon.getAttribute('icon')).toBe('show');
+        button.click();
+        await page.waitForChanges();
+        expect(icon.getAttribute('icon')).toBe('hide');
+    });
+    it('changing the type on the input should update the icon used in password toggle', async () => {
+        const page = await newSpecPage({
+            components: [Input, InputPasswordToggle, Button],
+            template: () => (h("ion-input", { type: "password" }, h("ion-input-password-toggle", { showIcon: "show", hideIcon: "hide", slot: "end" }))),
+        });
+        const inputPasswordToggle = page.body.querySelector('ion-input-password-toggle');
+        const input = page.body.querySelector('ion-input');
+        const icon = inputPasswordToggle.shadowRoot.querySelector('ion-icon');
+        // Grab the attribute to test since we are not actually passing in a valid SVG
+        expect(icon.getAttribute('icon')).toBe('show');
+        input.type = 'text';
+        await page.waitForChanges();
+        expect(icon.getAttribute('icon')).toBe('hide');
+        input.type = 'password';
+        await page.waitForChanges();
+        expect(icon.getAttribute('icon')).toBe('show');
+    });
+    it('should inherit the mode and color to internal ionic components', async () => {
+        /**
+         * This initialize script tells Stencil how to determine the mode on components.
+         * This is required for any getIonMode internal logic to function properly in spec tests.
+         */
+        initialize();
+        const page = await newSpecPage({
+            components: [Input, InputPasswordToggle, Button],
+            template: () => (h("ion-input", { type: "password", color: "primary" }, h("ion-input-password-toggle", { slot: "end", mode: "ios", color: "danger" }))),
+        });
+        const inputPasswordToggle = page.body.querySelector('ion-input-password-toggle');
+        const button = inputPasswordToggle.shadowRoot.querySelector('ion-button');
+        await page.waitForChanges();
+        // mode is a virtual prop so we need to access it as an attribute
+        expect(button.getAttribute('mode')).toBe('ios');
+        // color is an actual prop so we can access the element property
+        expect(button.color).toBe('danger');
+    });
+});

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: '18d1b78568247bfbf0b0274971b752ace7531f58', 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: 'cbf5fe1a9f4233a303d2366d1fc032d7c445f5c7', name: "start" }), h("div", { key: 'ca2608689325a350b23eb026053dd588ea3004e9', class: "item-divider-inner" }, h("div", { key: '00af1d58d5fc7995754a5266534cdf989a3294eb', class: "item-divider-wrapper" }, h("slot", { key: 'bfa2547fe8de49dcfbfccaeb46736182e514ffbc' })), h("slot", { key: '650dd1153d211eb992e69ff7e98c381cf0555e25', 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: '2443d9e64c1867a9582a2965ed9ac78263965d70', 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: '85fe8f529ab0673f1ddba299473690590a1bca88', 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: 'cde9bca980cb5589204017d80483baab0996586e' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'e2b7886b53b0b85d81fbfd9209c2989673cdb863', class: "button-inner" }, h("slot", { key: 'eaf089857ff0a22d3a9c12574596002e32a28c75', name: "top" }), h("div", { key: '12f5d46fe5b8b5d2a5d2bd9e4782376c5af86f1c', class: "horizontal-wrapper" }, h("slot", { key: 'ba6d89b7c7f9470f73e17808f90d578fbcceba48', name: "start" }), h("slot", { key: '22ad963dd37ae40c03a5723c3e3b05970f40d871', name: "icon-only" }), h("slot", { key: 'a1596a1961b5757828fafaa9edf9da3381482ff3' }), h("slot", { key: 'ad0d2b50de279a712e18985ce9aceda7b5d45712', name: "end" })), h("slot", { key: '2940933c947f7e2d9875f0fb980aff392d5ea7fa', 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: 'ac0cec6a2ea83c9633c10bce379ffdcc99221b52', 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: 'ae9da267d130e2875b2d854952b70daa739effd8', 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: '6820fe45a0aa73dca665a43f588f952e94c194c7', 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: '79815d03fbfc141573f69eb037592837ca3428ce' })));
     }
     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: '9a0eab31e53ae22dbfa7aa58d779d3976797ea08', 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: '8788351ca44861f264661da2412d6ce7906126bd', 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: '8801cb2fdddb2dab0c649aef1ffbac8f0ba9fbe0', class: "list-header-inner" }, h("slot", { key: '7fc87318333b7ee0c3eee91abc64a9275ad43a26' }))));
     }
     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: '255c2d52a0788769ca8ac027eababc903f525d0e', 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: 'd3a70d4e67a6578b01a82f97cb54f79342e7fd62', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '9641470dc2f759e674cd176662c12161bf22e078', tabindex: "0" }), h("div", { key: 'a1b986633eff28e8da49eec08dfb27acab63a88e', 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: 'ab8a43e8d71756be287f92961ebdc0bbe2d1882b', 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: 'f5f151ca5bf4963c0300656327bb9c38bc7869fb', 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: '39ddd64f884cc667e45f99a2922077d87f209205', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '1ccce2c24ec0dfc81a34580c8be60c69c68d2d2d' })), h("ion-backdrop", { key: 'cf2bdf7f4171a4ada3cb55dd15f6b921b626a347', 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: '1588897aeaefa91e13ed15927f2eeaebc01e8f18', 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: 'cb4e5b3d2095e15a53fa24ac65209162ec635476' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '1c2f499b40e8b9b18e3cb0ed28bbcca01e6d777f', class: "button-inner" }, h("slot", { key: 'df2f969098b5779f54c2d51b4816c7b78b45c860' }, h("ion-icon", { key: 'd093d7377c7f1a5a47b3cc319b36e5087421cf4c', 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: '63bcdda9e9917133893d92284b9a91dfe38596a9', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '2cc7bb2fa93d354321cb7271be441ee047f877c1' })));
+            } }, h("slot", { key: 'a3ecc57b11c04b2f9911e5703ea0c6f66515b2f2' })));
     }
     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: '18053756559601f785776196d9dd269f8250c813', "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: 'c080204fb09a67046d1986db28ccb7a1c8f0704d', 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: '1988ad86ef92108ad4c980ee6d98f280e368dee4',
             /*
               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: '321e79f29eba3faab323d17ae575300e25fc0c51' }))));
     }
     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: '2cb1a430d8d29b0f54b1ec80f98e4b82b6c8cc0a' });
     }
     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: 'e4aebea5eb131852acea407afb84597df71be4a4', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {