@ionic/core 8.0.0-beta.3 → 8.0.0-beta.4

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

@@ -117,6 +117,17 @@ export class Input {
          */
         this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
     }
+    /**
+     * Whenever the type on the input changes we need
+     * to update the internal type prop on the password
+     * toggle so that that correct icon is shown.
+     */
+    onTypeChange() {
+        const passwordToggle = this.el.querySelector('ion-input-password-toggle');
+        if (passwordToggle) {
+            passwordToggle.type = this.type;
+        }
+    }
     /**
      * Update the native input element when the value changes
      */
@@ -151,6 +162,13 @@ export class Input {
     }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
+        /**
+         * Set the type on the password toggle in the event that this input's
+         * type was set async and does not match the default type for the password toggle.
+         * This can happen when the type is bound using a JS framework binding syntax
+         * such as [type] in Angular.
+         */
+        this.onTypeChange();
     }
     componentDidRender() {
         var _a;
@@ -377,7 +395,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '0b1c4fc7e71413c82badab2af3cbf568bebf8abd', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f1007469471c9610950749d87f1aa8165cea4dbb', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -388,14 +406,14 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: 'fd40ad2a23abf651bc3ff9fd5631632efea47a01', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '85eaadcee636cdf7bf8f40c3dc4bbfabfc5b36a0', class: "native-wrapper" }, h("slot", { key: 'acb7f7e2c3723568a209f8074da92fe6ed5169cd', name: "start" }), h("input", Object.assign({ key: 'b9a9184965601e2eb428a5ca8ca64f15aac47cda', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '12a5a2a2b942e4d7420b7e10b98dc3f5b15c6e28', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '938381505753fbc842583215e32d74dd3a383742', class: "native-wrapper" }, h("slot", { key: '0e835fd6b94f7407696d4ab097a02c6e4b742fc9', name: "start" }), h("input", Object.assign({ key: '1835e2bbbdcaf8a80e3a7665536afb02d571bcb9', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '46513ac42e68143d04b2cf1f4c3f1f70b68d8802', name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: 'bdcffc81c8d07c793a06d9880a02d7b94ddfff2e', name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }
@@ -459,7 +477,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
-                    "resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
+                    "resolved": "\"name\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
                     "references": {
                         "AutocompleteTypes": {
                             "location": "import",
@@ -614,7 +632,7 @@ export class Input {
                     "text": "If `true`, the user cannot interact with the input."
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "enterkeyhint": {
@@ -889,7 +907,7 @@ export class Input {
                     "text": "If `true`, the user cannot modify the value."
                 },
                 "attribute": "readonly",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "required": {
@@ -1094,30 +1112,6 @@ export class Input {
                         }
                     }
                 }
-            }, {
-                "method": "ionStyle",
-                "name": "ionStyle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": "Emitted when the styles change."
-                },
-                "complexType": {
-                    "original": "StyleEventDetail",
-                    "resolved": "StyleEventDetail",
-                    "references": {
-                        "StyleEventDetail": {
-                            "location": "import",
-                            "path": "../../interface",
-                            "id": "src/interface.d.ts::StyleEventDetail"
-                        }
-                    }
-                }
             }];
     }
     static get methods() {
@@ -1167,6 +1161,9 @@ export class Input {
         return [{
                 "propName": "debounce",
                 "methodName": "debounceChanged"
+            }, {
+                "propName": "type",
+                "methodName": "onTypeChange"
             }, {
                 "propName": "value",
                 "methodName": "valueChanged"

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

@@ -597,6 +597,15 @@
   margin-inline-end: 0;
 }
 
+/**
+ * The input password toggle component should be hidden when the input is readonly/disabled
+ * because it is not possible to edit a password.
+ */
+:host([disabled]) ::slotted(ion-input-password-toggle),
+:host([readonly]) ::slotted(ion-input-password-toggle) {
+  display: none;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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-divider/item-divider.js

@@ -18,11 +18,11 @@ export class ItemDivider {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '669dfc87b2046b431539676ef99888a003989559', 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: '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" }))));
+            }) }, 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: '2406e238ec8ecf7a012922b054268c52ef4aaeae', 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: '515775f7e2c5d8a58b96f1147307ab74d81e2485', 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: '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))));
+            }) }, 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: 'c41b1f121563c51e6405d8b085ce5bb532ef8222', 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: '827bb81f1d66efde0d20dda0360d5c2712ec6605', 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/label/label.js

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

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: '47eead4d1ec73bedac86f8a8dce8db5e308ad12d', 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: '93f1b0c39a26c48a845d5f367c66e76bf4167f05', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8788351ca44861f264661da2412d6ce7906126bd', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '6a1fc2e6f21c1bc4497797474d5b58011255b6d3', class: "list-header-inner" }, h("slot", { key: '1a2167142e719a48fe49bee51a0df25bc8ccbd59' }))));
+            }) }, 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: 'aac7cb449530a6d6f567e53c48f42a216d0f9b07', 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: '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" })));
+            }, 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/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: 'e8d4e08518fb44c1b66271ef9cf41c188a6e8446', 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: '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" })));
+            } }, 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"; }