@ionic/core 8.8.4-dev.11776186452.1cc0af05 → 8.8.4-dev.11776246162.138c2737

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

@@ -17,9 +17,9 @@ export class SelectOption {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '0cbcce707a2318d0d340ec71d4b0e65e1412bbd1', class: {
+        return (h(Host, { key: '39af595655b3645c923617fe4d4fa64112008273', class: {
                 [theme]: true,
-            }, role: "option", id: this.inputId }, h("slot", { key: 'efec7e8638cc038209ccdb5a2a4ba9c4cf417c51', name: "start" }), h("slot", { key: 'bcd0e9b789ab9d47ccd8b38722778567fbee896e' }), h("slot", { key: '9efd253bb1497ca1f2295a2c7a241e9e80981635', name: "end" })));
+            }, role: "option", id: this.inputId }));
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }
@@ -73,25 +73,6 @@ export class SelectOption {
                 "setter": false,
                 "reflect": false,
                 "attribute": "value"
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Text that is placed underneath the option text to provide additional details about the option."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "description"
             }
         };
     }

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

@@ -1,58 +1,3 @@
-/**
- * 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.
- */
 /**
  * Convert a pixels given value into rem
  * 
@@ -139,28 +84,6 @@ ion-label {
   overflow-y: auto;
 }
 
-.select-option-label {
-  display: flex;
-  align-items: center;
-}
-
-.select-option-description {
-  display: block;
-}
-
-.select-option-label {
-  gap: 12px;
-}
-
-.select-option-description {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-  font-size: 0.75rem;
-}
-
 /**
  * Convert a pixels given value into rem
  * 

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

@@ -3,7 +3,6 @@
  */
 import { Host, h, forceUpdate } from "@stencil/core";
 import { safeCall } from "../../utils/overlays";
-import { renderOptionLabel } from "../../utils/select-option-render";
 import { getClassMap } from "../../utils/theme";
 import { getIonTheme } from "../../global/ionic-global";
 /**
@@ -76,71 +75,39 @@ export class SelectPopover {
         }
     }
     renderCheckboxOptions(options) {
-        return options.map((option, index) => {
-            /**
-             * Cast to `SelectOverlayOption` to access rich content
-             * fields (`startContent`, `endContent`, `description`)
-             * that are passed through from `ion-select` but not
-             * part of the public `SelectPopoverOption` interface.
-             */
-            const richOption = option;
-            const optionLabelOptions = {
-                id: `popover-option-${index}`,
-                label: richOption.text,
-                startContent: richOption.startContent,
-                endContent: richOption.endContent,
-                description: richOption.description,
-            };
-            return (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);
-                } }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
-        });
+        return 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))));
     }
     renderRadioOptions(options) {
         const checked = options.filter((o) => o.checked).map((o) => o.value)[0];
-        return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option, index) => {
-            /**
-             * Cast to `SelectOverlayOption` to access rich content
-             * fields (`startContent`, `endContent`, `description`)
-             * that are passed through from `ion-select` but not
-             * part of the public `SelectPopoverOption` interface.
-             */
-            const richOption = option;
-            const optionLabelOptions = {
-                id: `popover-option-${index}`,
-                label: richOption.text,
-                startContent: richOption.startContent,
-                endContent: richOption.endContent,
-                description: richOption.description,
-            };
-            return (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, onClick: () => this.dismissParentPopover(), onKeyUp: (ev) => {
-                    if (ev.key === ' ') {
-                        /**
-                         * Selecting a radio option with keyboard navigation,
-                         * either through the Enter or Space keys, should
-                         * dismiss the popover.
-                         */
-                        this.dismissParentPopover();
-                    }
-                } }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
-        })));
+        return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, 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, onClick: () => this.dismissParentPopover(), onKeyUp: (ev) => {
+                if (ev.key === ' ') {
+                    /**
+                     * Selecting a radio option with keyboard navigation,
+                     * either through the Enter or Space keys, should
+                     * dismiss the popover.
+                     */
+                    this.dismissParentPopover();
+                }
+            } }, option.text))))));
     }
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'cf05dabe58fcd71a74ac46ab8cb3da7dd687068f', class: {
+        return (h(Host, { key: '9b5160e6657620038fb4167ab7d08e2687be554b', class: {
                 [theme]: true,
-            } }, h("ion-list", { key: 'a8367a02dd063da5b55ab133ccfa914990e86023' }, header !== undefined && h("ion-list-header", { key: 'a5c1442720cc3e4a7c629f459c34d7a70f7ee913' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '282735c1127096b1b0bf85b3fd20f26fe4535849' }, h("ion-label", { key: '42aa5709d92f7d0232ef07d607cf4ef19f9ad633', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'f89fee59d120604bc141ec5cc0a872e9c46fd059' }, subHeader), message !== undefined && h("p", { key: '4778170bb58e781570c448d5d5d485b7ac2c9a7a' }, message)))), this.renderOptions(options))));
+            } }, h("ion-list", { key: '5f015bcc53bf96de3da98f05a73c6e1e7bc3250c' }, header !== undefined && h("ion-list-header", { key: 'e7275a4b3b0b8706b6a89ed9fd4bf1bb6cf274a8' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'ca5750144abaf01d613f7ff4923939e6d6f4c0c8' }, h("ion-label", { key: '299735684f529e05f08405b6587dec23fb8d2851', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'af85ac2c17050eca4902811a886e7001b92701fe' }, subHeader), message !== undefined && h("p", { key: 'f64006af8f2ffaf41d6d21701efa2d40580796e0' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }
@@ -148,14 +115,14 @@ export class SelectPopover {
         return {
             "ios": ["select-popover.ios.scss"],
             "md": ["select-popover.md.scss"],
-            "ionic": ["select-popover.ionic.scss"]
+            "ionic": ["select-popover.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select-popover.ios.css"],
             "md": ["select-popover.md.css"],
-            "ionic": ["select-popover.ionic.css"]
+            "ionic": ["select-popover.md.css"]
         };
     }
     static get properties() {

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

@@ -1,58 +1,3 @@
-/**
- * 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.
- */
 /**
  * Convert a pixels given value into rem
  * 
@@ -139,28 +84,6 @@ ion-label {
   overflow-y: auto;
 }
 
-.select-option-label {
-  display: flex;
-  align-items: center;
-}
-
-.select-option-description {
-  display: block;
-}
-
-.select-option-label {
-  gap: 12px;
-}
-
-.select-option-description {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-  font-size: 0.75rem;
-}
-
 /**
  * Convert a pixels given value into rem
  * 

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

@@ -32,11 +32,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 theme = getIonTheme(this);
-        return (h(Host, { key: '7ecf3ae7e75872c65ba0620eecba500c7e75efd9', class: {
+        return (h(Host, { key: '5014563646b6c5213750d503babce3013b66ec96', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '5d0cd4fec873b8874cbc61eeb14cc3332948714c' }, "\u00A0")));
+            } }, h("span", { key: '4b816883b1c71bb1db66d8b2b084559f7cb489bd' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,7 +56,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: 'ffa2aff2489b312e7fe5ed12367a8e7a5a0c9e84', class: createColorClasses(self.color, {
+        return (h(Host, { key: '0b3ce4b99c2c828d05b507c4f073811ebbe17d0f', class: createColorClasses(self.color, {
                 [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

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

@@ -130,12 +130,12 @@ export class SplitPane {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'ba071f752105c205268870e6a6c56ff9bd526b58', class: {
+        return (h(Host, { key: '9d0c67f1f81b09bb9a6f14a66053e5cc7431a286', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '32717b94ab9f2e35d8e8e078916e17b2f537a36c' })));
+            } }, h("slot", { key: 'ab7b3050d3c5484bd00949cf57efa4396b4d5bc3' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,10 +51,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: 'd0f187723395ce3a1b8bca0532ef5debbc937112', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'b249545a5adfcef4616afe79aa0f215bab464d0a', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '101dbf0b24d10663caac383cc55e00e7d8b69075' })));
+            } }, h("slot", { key: '19e2a406d96d20d8d4af8c3ff900e975d06021f6' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -111,13 +111,13 @@ export class TabBar {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: 'c611d612cadde5ccd785bca07044dd6d4b6ab7d8', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'e6466b90b72ed2e62c8c20fee2bc0b262ca4ccae', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
                 [`tab-bar-${expand}`]: true,
                 [`tab-bar-${shape}`]: shape !== undefined,
-            }) }, h("slot", { key: 'e2a59593a95658fe2b4960900922525e180ff0b3' })));
+            }) }, h("slot", { key: '6801f9523822178692d9091b0132f1b1dd41892d' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -93,7 +93,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: 'bcb528b6ff33f94949450e5dfd68e4d960cf5423', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '5a32785eaf0570cdc3444d52ce8bba8174c3e0b9', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -106,7 +106,7 @@ export class TabButton {
                 'ion-selectable': true,
                 [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: '25b6a211e06c352c77e01d66f4158fc3a08431c1' }, 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: 'eb7a8ec7ff898fd69adc41e9d9bda04c72c8751c', class: "button-inner" }, h("slot", { key: 'b5e0aaebcc81dd3d306f9bf079033e956117700e' })), theme === 'md' && h("ion-ripple-effect", { key: '5f236205851b6512f2a4cd187950ca7b88e6622f', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '1441f409b4a60823a57f27b90f6840b557b7d65a' }, 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: '1566ca0af66b6e51068aca221a89133d2af061ed', class: "button-inner" }, h("slot", { key: '757878091cfe3768107eb0a53b8d1c895ce43399' })), theme === 'md' && h("ion-ripple-effect", { key: '28dde3e7127bdc9d5e1477b47458a5a4ab71328e', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -165,7 +165,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '349bb9ccaaa04426ea24f5dad1386a7876d9abdf', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '2ee0972213087203ebe442be897a95877d7c45f4', name: "top" }), h("div", { key: '15d7938fd4220c276d450eb277ae01fff6a82446', class: "tabs-inner" }, h("slot", { key: 'fb9005ecedc09ff3b4e90837806ace918c121dff' })), h("slot", { key: '0471aa1559469c9416d53ff4a1526b9cc2efde4b', name: "bottom" })));
+        return (h(Host, { key: '9c05f69a72ab24897f1febab0928783d08224734', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '56407c9562bfd095e0259e430879151b824287fd', name: "top" }), h("div", { key: '6a86ceff372b8a60342040d9361ad31bf05e80ec', class: "tabs-inner" }, h("slot", { key: 'a554d3e835236a87686a0a53bd16d3124e77c0c5' })), h("slot", { key: 'd241d4cfba26a7ce3a3f93703dae18b8857bd9ee', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,9 +11,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Text {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '5b28c2e9965f6d9f5b25ba6c77f29e4c1de2da3c', class: createColorClasses(this.color, {
+        return (h(Host, { key: '7a3f31d6e219207a1ff98ac441357caa512012e5', class: createColorClasses(this.color, {
                 [theme]: true,
-            }) }, h("slot", { key: 'cbe285130bb096c5f3f4a7345a71db49d8bdef82' })));
+            }) }, h("slot", { key: '392d48d6a5e0e5d1b44e762ec96fb8b53b3ebd49' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js

@@ -565,7 +565,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '83736da2d61c935a71121245858009adef0b9d80', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b31341357553adac08f518e48d83127415f36500', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -577,7 +577,7 @@ export class Textarea {
                 'in-item': inItem,
                 'textarea-disabled': disabled,
                 'textarea-readonly': readonly,
-            }) }, h("label", { key: '808ab4bcee4e76cc3e156fd50246a0b55010afae', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'f18d3890414a2807df4ad853e5788b5ab6d43117', class: "textarea-wrapper-inner" }, 
+            }) }, h("label", { key: '406cb6739da3382da1f723c42f4ea5aee86e09d4', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '69056191d5f1036bcb88a31d44bc61e3a98f9ebc', class: "textarea-wrapper-inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -587,7 +587,7 @@ export class Textarea {
          * <label> element, ensuring that clicking the label text
          * focuses the textarea.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: '9f6e88c47eb3535c2aec69e340fdcbe85ab62252', class: "textarea-outline" }), h("div", { key: 'd475f7f4aee2ec5e03f4926de20f31269a8fa822', class: "start-slot-wrapper" }, h("slot", { key: '3a73320f79fba2a1ea0570e10897d047320bf0a4', name: "start" })), h("div", { key: '4a6d0e4ca328435d537b814c052ba083e9470d6d', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: 'afb9bad3b1cb2e904cad008abdc5a7145a2c2e0b', class: "native-textarea", part: "native", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: '5de4fa3ef8c3b06b78f30fe5d7569df1012345a7', class: "end-slot-wrapper" }, h("slot", { key: 'fec86a4fdd3a3bafc34e63e51ee52be45f2d9203', name: "end" }))), shouldRenderHighlight && h("div", { key: 'd6414e625a41de93eb44670c2b26300c4c1c0470', class: "textarea-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: 'eff37b99e2f47f1973cc61611647c28ae7271a4d', class: "textarea-outline" }), h("div", { key: '9c70d10b3d2cce601f670cd86bfc19fff10233da', class: "start-slot-wrapper" }, h("slot", { key: 'b0c92cc7941a0810faabfb1acf177c019e200a5d', name: "start" })), h("div", { key: 'a6f9a2c06a009c322d29aa3a6e2b5a79f3532c5b', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: 'eb6bf7370fa3047ed475680111d3e232f0c0644c', class: "native-textarea", part: "native", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'e869ef964514267c0d419d474c16303c01d26cec', class: "end-slot-wrapper" }, h("slot", { key: '8e9905fe7caaf4be904f9cfbc3d9d7f9c48deb50', name: "end" }))), shouldRenderHighlight && h("div", { key: '4287784c6b896b13a4205f5f959aebbbcdd49db3', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/thumbnail/thumbnail.js

@@ -10,9 +10,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '4e648ac7ee9586cb95ee5bba2cce9f36eb831763', class: {
+        return (h(Host, { key: '6053cf163155d4268dad4fc81ffc6bbc70d75659', class: {
                 [theme]: true,
-            } }, h("slot", { key: '2f249fca7ef22eb02a7a7a59a77dc3414aaca2ae' })));
+            } }, h("slot", { key: 'b7afb5835bce7c7ed9e5cf44758bbe2d802e1271' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/title/title.js

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '1878dd41dc0bae351513c0fe0a2513b19860e2ca', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8db3e5f9dbd8b1762a9919eaeef29c98649dfb25', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '6a901d75e397beb1392efe9369a0c1006267fc3b', class: "toolbar-title" }, h("slot", { key: 'd024f2dd88be52409be89df1e05aecfd31f851ee' }))));
+            }) }, h("div", { key: 'a31ebae2c494a51d2145eec69d0b1bc635108a01', class: "toolbar-title" }, h("slot", { key: 'f5975b44b3e3afbf98dcbdb53fc78447b49407b3' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/animations/ionic.enter.js

@@ -0,0 +1,33 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { createAnimation } from "../../../utils/animation/animation";
+import { getElementRoot } from "../../../utils/helpers";
+import { getOffsetForMiddlePosition } from "./utils";
+/**
+ * Ionic Toast Enter Animation
+ */
+export const ionicEnterAnimation = (baseEl, opts) => {
+    const baseAnimation = createAnimation();
+    const wrapperAnimation = createAnimation();
+    const { position, top, bottom } = opts;
+    const root = getElementRoot(baseEl);
+    const wrapperEl = root.querySelector('.toast-wrapper');
+    wrapperAnimation.addElement(wrapperEl);
+    switch (position) {
+        case 'top':
+            wrapperEl.style.setProperty('transform', `translateY(${top})`);
+            wrapperAnimation.fromTo('opacity', 0.01, 1);
+            break;
+        case 'middle':
+            const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
+            wrapperEl.style.top = `${topPosition}px`;
+            wrapperAnimation.fromTo('opacity', 0.01, 1);
+            break;
+        default:
+            wrapperEl.style.setProperty('transform', `translateY(${bottom})`);
+            wrapperAnimation.fromTo('opacity', 0.01, 1);
+            break;
+    }
+    return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(400).addAnimation(wrapperAnimation);
+};

package/dist/collection/components/toast/animations/ionic.leave.js

@@ -0,0 +1,16 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { createAnimation } from "../../../utils/animation/animation";
+import { getElementRoot } from "../../../utils/helpers";
+/**
+ * Ionic Toast Leave Animation
+ */
+export const ionicLeaveAnimation = (baseEl) => {
+    const baseAnimation = createAnimation();
+    const wrapperAnimation = createAnimation();
+    const root = getElementRoot(baseEl);
+    const wrapperEl = root.querySelector('.toast-wrapper');
+    wrapperAnimation.addElement(wrapperEl).fromTo('opacity', 0.99, 0);
+    return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(300).addAnimation(wrapperAnimation);
+};

package/dist/collection/components/toast/toast.js

@@ -11,6 +11,7 @@ import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { createColorClasses, getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
 import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { ionicEnterAnimation } from "./animations/ionic.enter";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
@@ -224,7 +225,7 @@ export class Toast {
          * in the dismiss animation.
          */
         this.lastPresentedPosition = animationPosition;
-        await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, {
+        await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, {
             position,
             top: animationPosition.top,
             bottom: animationPosition.bottom,
@@ -439,9 +440,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: '8f2a7964ecbc74d57a7743475f51abba45ec5302', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'e83590dd87745fc9579319513eb22c0db5d3e53f', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'bb637ccbcda0c68c34d0a9efc8bd5c0ee9da49f9', class: wrapperClass, part: "wrapper" }, h("div", { key: '3779659eb5d855dd360503b336090c7e0b569975', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '768a222c9b188978afeda83119d71bde8fb6e2b3', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '4a5fc7d5f374f5a7de1a916351143d5a31d939cf', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'b4c4d4565138cc76ffa9fd5cebc4e489b82cea55', class: wrapperClass, part: "wrapper" }, h("div", { key: '14228286e4c4f6738b14816938e1edb75014f322', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '3403984f86018dedb3cc32b3bd5541a6d0db154f', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '0965413313935e3fe90ce0789d2d029af91f3124', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/toggle.js

@@ -338,7 +338,7 @@ export class Toggle {
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const isIonicTheme = theme === 'ionic';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'c6cb748b63423fee5ec8a20c971da76a789565be', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: 'b12951146a79d3839e6263e91e747398a0fa901d', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -350,10 +350,10 @@ export class Toggle {
                 [`toggle-${rtl}`]: true,
                 'ion-activatable': isIonicTheme,
                 'ion-focusable': isIonicTheme,
-            }) }, h("label", { key: '74cfa7dff2e55a9a7a921c1eb2b2d32429c8468c', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'c08526492a357cee5485895a72292c7530ed5503', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: 'bd59cd8dab463e12125da45e43f9b6251240f158', class: {
+            }) }, h("label", { key: 'cf1d27243bf9bdd5bafaf6d86b76beb311b5e01c', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'b3eb0f146836f5994c15bf1fd67a79f72b9414f7', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '56ddcfd6452f30fd6b38d0fd85be3ec966aa120b', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '548804cb29efb86561074081acb7a3ebc4a20615' }), this.renderHintText()), h("div", { key: '4de487ca61f42687072b7b67541c4abefd1665f6', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '706e5b667ee242fb1afb3e4afa613f9798fbe25b' }), this.renderHintText()), h("div", { key: '255ccd7d60f7d78b4eba8d380b303a72093e9d16', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }