voyager-ionic-core 8.3.4 → 8.4.1

package/dist/collection/components/select/select.js

@@ -4,7 +4,7 @@
 import { Host, h, forceUpdate } from "@stencil/core";
 import { compareOptions, createNotchController, isOptionSelected } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
-import { actionSheetController, alertController, popoverController } from "../../utils/overlays";
+import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { watchForOptions } from "../../utils/watch-options";
@@ -160,13 +160,12 @@ export class Select {
             this.setFocus();
         });
         await overlay.present();
-        // focus selected option for popovers
-        if (this.interface === 'popover') {
-            const indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
+        // focus selected option for popovers and modals
+        if (this.interface === 'popover' || this.interface === 'modal') {
+            const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
             if (indexOfSelected > -1) {
                 const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
                 if (selectedItem) {
-                    focusVisibleElement(selectedItem);
                     /**
                      * Browsers such as Firefox do not
                      * correctly delegate focus when manually
@@ -180,8 +179,11 @@ export class Select {
                      */
                     const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
                     if (interactiveEl) {
-                        interactiveEl.focus();
+                        // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
+                        // and removing `ion-focused` style
+                        interactiveEl.setFocus();
                     }
+                    focusVisibleElement(selectedItem);
                 }
             }
             else {
@@ -190,11 +192,14 @@ export class Select {
                  */
                 const firstEnabledOption = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
                 if (firstEnabledOption) {
-                    focusVisibleElement(firstEnabledOption.closest('ion-item'));
                     /**
                      * Focus the option for the same reason as we do above.
+                     *
+                     * Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
+                     * and removing `ion-focused` style
                      */
-                    firstEnabledOption.focus();
+                    firstEnabledOption.setFocus();
+                    focusVisibleElement(firstEnabledOption.closest('ion-item'));
                 }
             }
         }
@@ -216,6 +221,9 @@ export class Select {
         if (selectInterface === 'popover') {
             return this.openPopover(ev);
         }
+        if (selectInterface === 'modal') {
+            return this.openModal();
+        }
         return this.openAlert();
     }
     updateOverlayOptions() {
@@ -232,7 +240,13 @@ export class Select {
             case 'popover':
                 const popover = overlay.querySelector('ion-select-popover');
                 if (popover) {
-                    popover.options = this.createPopoverOptions(childOpts, value);
+                    popover.options = this.createOverlaySelectOptions(childOpts, value);
+                }
+                break;
+            case 'modal':
+                const modal = overlay.querySelector('ion-select-modal');
+                if (modal) {
+                    modal.options = this.createOverlaySelectOptions(childOpts, value);
                 }
                 break;
             case 'alert':
@@ -287,7 +301,7 @@ export class Select {
         });
         return alertInputs;
     }
-    createPopoverOptions(data, selectValue) {
+    createOverlaySelectOptions(data, selectValue) {
         const popoverOptions = data.map((option) => {
             const value = getOptionValue(option);
             // Remove hydrated before copying over classes
@@ -347,7 +361,7 @@ export class Select {
                 message: interfaceOptions.message,
                 multiple,
                 value,
-                options: this.createPopoverOptions(this.childOpts, value),
+                options: this.createOverlaySelectOptions(this.childOpts, value),
             } });
         /**
          * Workaround for Stencil to autodefine
@@ -416,6 +430,29 @@ export class Select {
         }
         return alertController.create(alertOpts);
     }
+    openModal() {
+        const { multiple, value, interfaceOptions } = this;
+        const mode = getIonMode(this);
+        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
+                header: interfaceOptions.header,
+                multiple,
+                value,
+                options: this.createOverlaySelectOptions(this.childOpts, value),
+            } });
+        /**
+         * Workaround for Stencil to autodefine
+         * ion-select-modal and ion-modal when
+         * using Custom Elements build.
+         */
+        // eslint-disable-next-line
+        if (false) {
+            // eslint-disable-next-line
+            // @ts-ignore
+            document.createElement('ion-select-modal');
+            document.createElement('ion-modal');
+        }
+        return modalController.create(modalOpts);
+    }
     /**
      * Close the select interface.
      */
@@ -623,7 +660,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '73c571c1f8468e1c3f4fe02fbbb33ba9cbc8e989', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -639,7 +676,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '2b08538cba0b9f747541d57ac18fb6a1ea658878', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '33f54373bcb02c72a9d0af2efffebc27ee2c69fe', class: "select-wrapper-inner" }, h("slot", { key: 'd1c93aec99dc1cd6410f93309cef615fe04b541b', name: "start" }), h("div", { key: '493d1a3cad9565516f855bef75685b020785ffd3', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '353a3ee5635f8a8f3be411efd6caef6c2ad74a89', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'fd5f85555db02affe954f9f4f2876ac8fe676234', class: "select-highlight" }))));
+            }) }, h("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, h("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), h("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -761,7 +798,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "SelectInterface",
-                    "resolved": "\"action-sheet\" | \"alert\" | \"popover\"",
+                    "resolved": "\"action-sheet\" | \"alert\" | \"modal\" | \"popover\"",
                     "references": {
                         "SelectInterface": {
                             "location": "import",
@@ -774,7 +811,7 @@ export class Select {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The interface the select should use: `action-sheet`, `popover` or `alert`."
+                    "text": "The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`."
                 },
                 "attribute": "interface",
                 "reflect": false,
@@ -792,7 +829,7 @@ export class Select {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Any additional options that the `alert`, `action-sheet` or `popover` interface\ncan take. See the [ion-alert docs](./alert), the\n[ion-action-sheet docs](./action-sheet) and the\n[ion-popover docs](./popover) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface."
+                    "text": "Any additional options that the `alert`, `action-sheet` or `popover` interface\ncan take. See the [ion-alert docs](./alert), the\n[ion-action-sheet docs](./action-sheet), the\n[ion-popover docs](./popover), and the [ion-modal docs](./modal) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface."
                 },
                 "attribute": "interface-options",
                 "reflect": false,
@@ -1143,6 +1180,14 @@ export class Select {
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
+                        },
+                        "HTMLIonRadioElement": {
+                            "location": "global",
+                            "id": "global::HTMLIonRadioElement"
+                        },
+                        "HTMLIonCheckboxElement": {
+                            "location": "global",
+                            "id": "global::HTMLIonCheckboxElement"
                         }
                     },
                     "return": "Promise<any>"

package/dist/collection/components/select-modal/select-modal-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/select-modal/select-modal.ios.css

@@ -0,0 +1,3 @@
+:host {
+  height: 100%;
+}

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

@@ -0,0 +1,159 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { getIonMode } from "../../global/ionic-global";
+import { Host, forceUpdate, h } from "@stencil/core";
+import { safeCall } from "../../utils/overlays";
+import { getClassMap } from "../../utils/theme";
+export class SelectModal {
+    constructor() {
+        this.header = undefined;
+        this.multiple = undefined;
+        this.options = [];
+    }
+    closeModal() {
+        const modal = this.el.closest('ion-modal');
+        if (modal) {
+            modal.dismiss();
+        }
+    }
+    findOptionFromEvent(ev) {
+        const { options } = this;
+        return options.find((o) => o.value === ev.target.value);
+    }
+    getValues(ev) {
+        const { multiple, options } = this;
+        if (multiple) {
+            // this is a modal with checkboxes (multiple value select)
+            // return an array of all the checked values
+            return options.filter((o) => o.checked).map((o) => o.value);
+        }
+        // this is a modal with radio buttons (single value select)
+        // return the value that was clicked, otherwise undefined
+        const option = ev ? this.findOptionFromEvent(ev) : null;
+        return option ? option.value : undefined;
+    }
+    callOptionHandler(ev) {
+        const option = this.findOptionFromEvent(ev);
+        const values = this.getValues(ev);
+        if (option === null || option === void 0 ? void 0 : option.handler) {
+            safeCall(option.handler, values);
+        }
+    }
+    setChecked(ev) {
+        const { multiple } = this;
+        const option = this.findOptionFromEvent(ev);
+        // this is a modal with checkboxes (multiple value select)
+        // we need to set the checked value for this option
+        if (multiple && option) {
+            option.checked = ev.detail.checked;
+        }
+    }
+    renderRadioOptions() {
+        const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
+        return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { class: Object.assign({
+                // TODO FW-4784
+                'item-radio-checked': option.value === checked
+            }, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyUp: (ev) => {
+                if (ev.key === ' ') {
+                    /**
+                     * Selecting a radio option with keyboard navigation,
+                     * either through the Enter or Space keys, should
+                     * dismiss the modal.
+                     */
+                    this.closeModal();
+                }
+            } }, option.text))))));
+    }
+    renderCheckboxOptions() {
+        return this.options.map((option) => (h("ion-item", { class: Object.assign({
+                // TODO FW-4784
+                'item-checkbox-checked': option.checked
+            }, getClassMap(option.cssClass)) }, h("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
+                this.setChecked(ev);
+                this.callOptionHandler(ev);
+                // TODO FW-4784
+                forceUpdate(this);
+            } }, option.text))));
+    }
+    render() {
+        return (h(Host, { key: 'f4b92f4fc3d646f9a327e43a9622abaf69659c28', class: getIonMode(this) }, h("ion-header", { key: '11232ef496e7abd69e55cef988963a4869a7b01e' }, h("ion-toolbar", { key: 'e7c41878691a504d44c658db02807867df542588' }, this.header !== undefined && h("ion-title", { key: 'fcf9d33e0f3e0076ff14805de68848f9ef199cca' }, this.header), h("ion-buttons", { key: '748a967ae0ce68bc2fd018a6b9ebe0e4b810f6ac', slot: "end" }, h("ion-button", { key: 'f5e60791870b5085a31b7af70ed4bb3fb83eb185', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '159797957b6f788a9b393d91864c18db34481c68' }, h("ion-list", { key: '4124554fe8b2411637cbf02f08e50e0d8f804175' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+    }
+    static get is() { return "ion-select-modal"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "ios": ["select-modal.ios.scss"],
+            "md": ["select-modal.md.scss"],
+            "ionic": ["select-modal.md.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "ios": ["select-modal.ios.css"],
+            "md": ["select-modal.md.css"],
+            "ionic": ["select-modal.md.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "header",
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "multiple",
+                "reflect": false
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectModalOption[]",
+                    "resolved": "SelectModalOption[]",
+                    "references": {
+                        "SelectModalOption": {
+                            "location": "import",
+                            "path": "./select-modal-interface",
+                            "id": "src/components/select-modal/select-modal-interface.ts::SelectModalOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/select-modal/select-modal.md.css

@@ -0,0 +1,110 @@
+:host {
+  height: 100%;
+}
+
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+ion-list ion-radio::part(container) {
+  display: none;
+}
+
+ion-list ion-radio::part(label) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+ion-item {
+  --inner-border-width: 0;
+}
+
+.item-radio-checked {
+  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
+  --background-focused: var(--ion-color-primary, #0054e9);
+  --background-focused-opacity: 0.2;
+  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-hover-opacity: 0.12;
+}
+
+.item-checkbox-checked {
+  --background-activated: var(--ion-item-color, var(--ion-text-color, #000));
+  --background-focused: var(--ion-item-color, var(--ion-text-color, #000));
+  --background-hover: var(--ion-item-color, var(--ion-text-color, #000));
+  --color: var(--ion-color-primary, #0054e9);
+}

package/dist/collection/components/select-modal/test/fixtures.js

@@ -0,0 +1,48 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+export class SelectModalPage {
+    constructor(page) {
+        this.options = [];
+        this.page = page;
+    }
+    async setup(config, options, multiple = false) {
+        const { page } = this;
+        await page.setContent(`
+    <ion-modal>
+      <ion-select-modal></ion-select-modal>
+    </ion-modal>
+    <script>
+      const selectModal = document.querySelector('ion-select-modal');
+      selectModal.options = ${JSON.stringify(options)};
+      selectModal.multiple = ${multiple};
+    </script>
+    `, config);
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        this.ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+        this.modal = page.locator('ion-modal');
+        this.selectModal = page.locator('ion-select-modal');
+        this.multiple = multiple;
+        this.options = options;
+        await this.modal.evaluate((modal) => modal.present());
+        await ionModalDidPresent.next();
+    }
+    async screenshot(screenshot, name) {
+        await expect(this.selectModal).toHaveScreenshot(screenshot(name));
+    }
+    async clickOption(value) {
+        const option = this.getOption(value);
+        await option.click();
+    }
+    async pressSpaceOnOption(value) {
+        const option = this.getOption(value);
+        await option.press('Space');
+    }
+    getOption(value) {
+        const { multiple, selectModal } = this;
+        const selector = multiple ? 'ion-checkbox' : 'ion-radio';
+        const index = this.options.findIndex((o) => o.value === value);
+        return selectModal.locator(selector).nth(index);
+    }
+}

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

@@ -10,7 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: 'ba5a9c695c53fe0802af11a49f4305a9b8f71773', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: '2e6fa159464f04f6d8720f960141f67918bc7534', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -102,7 +102,7 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: '302553a2eec4d1442751b8af28b7c9bd3487fd5d', class: getIonMode(this) }, h("ion-list", { key: '39ae8579e6fe3bae2c7504147268ad5c82fd27e6' }, header !== undefined && h("ion-list-header", { key: 'e0e6686380d188f46c593e1bb25287dcf08c75c2' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '8a2d8652db269593c0ba7d767277e12c2b06144d' }, h("ion-label", { key: 'a30cc0ecf95d5bdd6421ee1683922c1b853e98ea', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'c298459ca450123808a08d65660825b2c26d00e5' }, subHeader), message !== undefined && h("p", { key: 'ed895fbaec020e809021138401341b6fd7675035' }, message)))), this.renderOptions(options))));
+        return (h(Host, { key: 'dd0990db4de4f175b176b27f35501dd1604ca400', class: getIonMode(this) }, h("ion-list", { key: 'cea2bc3687b8b2490a2a9ff4a1e16cd34169558e' }, header !== undefined && h("ion-list-header", { key: '194aebb53453c43f913daae45a1a3066a1708c4c' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'b706b07a3c63ad8104d2db413e210c735ec1bec9' }, h("ion-label", { key: '6e52b5b4cf6b04ff3dd5671d64264233de4190d5', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '6ef4440d17f5db8c96c63b9aa5073f4fe4b8ad62' }, subHeader), message !== undefined && h("p", { key: 'c7b3b76c30ecd606c0e985a0258c13d3a75756e7' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -25,11 +25,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: '1a3e78e9a6f740d609d1f0b7a16cb6eff4a2d617', class: {
+        return (h(Host, { key: 'fdfabf9364caf507450239b62be24f08873bd650', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: 'be3eabe196ec6e8ec19857375ba30f4c8aa58e7f' }, "\u00A0")));
+            } }, h("span", { key: '3482c88dcc177547185ce87972afa064a542367d' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -39,7 +39,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '50cbaed55eeab15292447d106a80b93db4cb40de', class: createColorClasses(self.color, {
+        return (h(Host, { key: '9d30ee9f5aa0dd0e220da07e75d05b8b2435224d', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/collection/components/split-pane/split-pane.js

@@ -118,12 +118,12 @@ export class SplitPane {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'd54c356cd4bff7e55325160882dea8249f47f388', class: {
+        return (h(Host, { key: '1ca0b0299d03605bb358112ca56cbafbe58f00f5', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: 'af62690d0fd686cfbd29d888c79eda9001f13e2f' })));
+            } }, h("slot", { key: 'abe231361727ae7fc63edd592a4490caac1909fb' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab.js

@@ -48,10 +48,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '46d5498418f5379861c3d7465e8021dec45f1200', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'cb75d0877979b3b8df8f7e1952bfa9677da1eaa5', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'b45045dccb87dfe75e3f5a5a474bb48b6c98e922' })));
+            } }, h("slot", { key: '37fbb7b7a6b03eb93b1dacd2dc1025b78eb2aa6b' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,11 +51,11 @@ export class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '3a8595dd83f89e8319471a7a7f9f64b2565b384c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'a87fd2ea5df053705a37ea7ffec043e75c4a9907', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '8b65eceb922f6abfa15f41046261586fb94b981f' })));
+            }) }, h("slot", { key: '81a6223299b6cab29d7ddced590e9152e2b3ded0' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '4b528ce31f67e10ad849e0c99bd034bba675c227', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '5976c45943ea7ea8e7c1a85fc9996de421439f08', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -82,7 +82,7 @@ export class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: '0da8784b1b243ffaaaf04dd7adb55d6881ed0c08' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: '2c628e8f1ebc129f84876c01530468cb97d8bf3a', class: "button-inner" }, h("slot", { key: '8052a171d197a7de1a7eb12b091c35f73ae1ee21' })), mode === 'md' && h("ion-ripple-effect", { key: '4186bdb5ed045ec16f495a14fa30ac864c576227', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '1db09d861b67ff292018fb4b0dc7b85bd4677eb8' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: '4381eafcb27e8c7bb0d86d4f115ceb0caf03b9b4', class: "button-inner" }, h("slot", { key: '1981135f6fbb88376c1bd923c55c70fe8b5c5159' })), mode === 'md' && h("ion-ripple-effect", { key: '0509bc7155d055d1ed710600e9cf4df135881491', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -145,7 +145,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: 'eb094c9bd15b7777c53bd0bd6d225784fa472849', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'a516ca6915bf26e77eeeb0ff684c4fcc7d4420a7', name: "top" }), h("div", { key: 'dd2a32a072d77afe216abc4958c1d686405fb780', class: "tabs-inner" }, h("slot", { key: '222c20ba862068f5c78e7bbef4fa213499fb2fa5' })), h("slot", { key: '3e76dcb1b21873aa137d095c56131514054ead3a', name: "bottom" })));
+        return (h(Host, { key: 'e01ccf6bfaccad094515be50e407399c733fc226', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '38d2d01dbfd8a08f01e6f0e27274b21d75424e37', name: "top" }), h("div", { key: '7e894f0f423e2d43e1c68daff5f9f6c442fad237', class: "tabs-inner" }, h("slot", { key: 'df16be529a0370a26d0adf850530b31607507c23' })), h("slot", { key: '44642e1cb24c3281c43db75fd69a32fe0defe40a', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.js

@@ -13,9 +13,9 @@ export class Text {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '4b76333b1ea5cab134b9dc1f5670c0d5a253fc32', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e134d70c04344b708a2ecf6253722781ad2ca826', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '3dee5f16bc58b3d92547d910bd4f441a00ce2039' })));
+            }) }, h("slot", { key: 'da79c760f7ebbcd007ce110439f05a62cb22eac8' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }