voyager-ionic-core 7.6.3 → 7.7.0

package/dist/collection/components/segment/segment.js

@@ -101,6 +101,13 @@ export class Segment {
     }
     async componentDidLoad() {
         this.setCheckedClasses();
+        /**
+         * If the value changes before watchers
+         * are setup, then the ionSelect watch callback
+         * will not fire. As a result, we manually
+         * fire this event when Select is loaded.
+         */
+        this.ionSelect.emit({ value: this.value });
         /**
          * We need to wait for the buttons to all be rendered
          * before we can scroll.
@@ -413,14 +420,14 @@ export class Segment {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '971e62fdaef3b6380aa1bf214605a5bfde662abf', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", null)));
+            }) }, h("slot", { key: 'eaa7a8a3d5237c8bbc03f57690fd0aa7e4c124e3' })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -78,7 +78,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { class: {
+        return (h(Host, { key: 'b50b375ed817b47720b743078202f38c737a4034', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -94,10 +94,10 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { class: "button-inner" }, h("slot", null)), mode === 'md' && h("ion-ripple-effect", null)), h("div", { part: "indicator", class: {
+            } }, h("button", Object.assign({ key: '402f6467ec9ce97aa1df2c72382d07242b51c114', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '4f5a1988296c4e59e64255feff264bbbe2ccc312', class: "button-inner" }, h("slot", { key: '35b2a26cca8c76a111e447fa8cae464c504fcb97' })), mode === 'md' && h("ion-ripple-effect", null)), h("div", { key: 'adca0f1e0efcf18b575013d4fb2f22814c81c147', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: '8a23ffe49dc115ee0603e298bb6a39834b910b67', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,8 +44,27 @@ export class Select {
                  * We ensure the target isn't this element in case the select is slotted
                  * in, for example, an item. This would prevent the select from ever
                  * being opened since the element itself has slot="start"/"end".
+                 *
+                 * Clicking a slotted element also causes a click
+                 * on the <label> element (since it wraps the slots).
+                 * Clicking <label> dispatches another click event on
+                 * the native form control that then bubbles up to this
+                 * listener. This additional event targets the host
+                 * element, so the select overlay is opened.
+                 *
+                 * When the slotted elements are clicked (and therefore
+                 * the ancestor <label> element) we want to prevent the label
+                 * from dispatching another click event.
+                 *
+                 * Do not call stopPropagation() because this will cause
+                 * click handlers on the slotted elements to never fire in React.
+                 * When developers do onClick in React a native "click" listener
+                 * is added on the root element, not the slotted element. When that
+                 * native click listener fires, React then dispatches the synthetic
+                 * click event on the slotted element. However, if stopPropagation
+                 * is called then the native click event will never bubble up
+                 * to the root element.
                  */
-                ev.stopPropagation();
                 ev.preventDefault();
             }
         };
@@ -1205,11 +1224,9 @@ Developers can use the "legacy" property to continue using the legacy form marku
                 "complexType": {
                     "signature": "(event?: UIEvent) => Promise<any>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "event The user interface event that called the open."
-                                }],
-                            "text": "The user interface event that called the open."
+                            "name": "event",
+                            "type": "UIEvent | undefined",
+                            "docs": "The user interface event that called the open."
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/select/test/disabled/select.e2e.js

@@ -13,7 +13,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
                 description: 'https://github.com/ionic-team/ionic-framework/issues/28284',
             });
             await page.setContent(`
-        <ion-select interface="popover">
+        <ion-select aria-label="Select" interface="popover">
           <ion-select-option value="a" disabled="true">A</ion-select-option>
           <ion-select-option value="b">B</ion-select-option>
         </ion-select>

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

@@ -57,3 +57,18 @@ describe('ion-select', () => {
         expect(slotEl).toBe(null);
     });
 });
+describe('select: slot interactivity', () => {
+    test('should not prevent click handlers from firing', async () => {
+        // https://github.com/ionic-team/ionic-framework/issues/28818
+        const divSpy = jest.fn();
+        const buttonSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [Select],
+            template: () => (h("div", { onClick: divSpy }, h("ion-select", { label: "Label Prop Text" }, h("button", { slot: "end", onClick: buttonSpy }, "Button")))),
+        });
+        const button = page.body.querySelector('button');
+        await button.click();
+        expect(buttonSpy).toHaveBeenCalled();
+        expect(divSpy).toHaveBeenCalled();
+    });
+});

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

@@ -10,7 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        return h(Host, { role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: 'fe62f2d62ede6866e20969a2e7ae25453648fcef', 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, { class: getIonMode(this) }, h("ion-list", null, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '9d3995131364d4f1d282e0a1fc34e778e94c9f98', class: getIonMode(this) }, h("ion-list", { key: '14244dcd6375eb61d65f3a9450d42a5d7b2d6541' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, 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, { class: {
+        return (h(Host, { key: 'ee3cd9a5448fb69c8ddfc88a993f9968e1a381ff', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", null, "\u00A0")));
+            } }, h("span", { key: '8aa792724a3b77877062e9aae838d9e1572b576f' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class Spinner {
         const spinnerName = self.getName();
         const spinner = (_a = SPINNERS[spinnerName]) !== null && _a !== void 0 ? _a : SPINNERS['lines'];
         const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
-        const svgs = []; // TODO(FW-2832): type
+        const svgs = [];
         if (spinner.circles !== undefined) {
             for (let i = 0; i < spinner.circles; i++) {
                 svgs.push(buildCircle(spinner, duration, i, spinner.circles));
@@ -39,7 +39,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { class: createColorClasses(self.color, {
+        return (h(Host, { key: '47cd6cd98e36e5b99fbe263a6a102610cae240c3', 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

@@ -66,16 +66,15 @@ export class SplitPane {
             this.visible = false;
             return;
         }
-        if (window.matchMedia) {
-            // Listen on media query
-            const callback = (q) => {
-                this.visible = q.matches;
-            };
-            const mediaList = window.matchMedia(mediaQuery);
-            mediaList.addListener(callback);
-            this.rmL = () => mediaList.removeListener(callback);
-            this.visible = mediaList.matches;
-        }
+        // Listen on media query
+        const callback = (q) => {
+            this.visible = q.matches;
+        };
+        const mediaList = window.matchMedia(mediaQuery);
+        // TODO FW-5869
+        mediaList.addListener(callback);
+        this.rmL = () => mediaList.removeListener(callback);
+        this.visible = mediaList.matches;
     }
     isPane(element) {
         if (!this.visible) {
@@ -109,12 +108,12 @@ export class SplitPane {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: '3efe241375d23ae12c47927aa1fc1f3f4b4e5807', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", null)));
+            } }, h("slot", { key: 'd5c94319658e2291dcc356e6ed7a9abc1a48a8b9' })));
     }
     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, { role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '0f4b90f0b1027e89bd447ace17af31c8e155a827', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", null)));
+            } }, h("slot", { key: 'ec3eaacf8b7085510e89273aa8373805ee98a381' })));
     }
     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, { role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'e2b4b50270f171ed251359df6c65c5e7e4d526a4', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", null)));
+            }) }, h("slot", { key: '37495b2eddd01a758ceaeb36426abc9bd20bcca3' })));
     }
     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, { onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '9926f9392e7910ff3159397e4f907e0d7d2cf5a0', 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({}, 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", { class: "button-inner" }, h("slot", null)), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '4b3ace749583a5502e94462f9a70c5158fe0194a' }, 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: 'a2a30c02fbd5052da12586a5ab00a45f3bf53b88', class: "button-inner" }, h("slot", { key: '3fb22ffbb09000d99537b531220c029330ae6940' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -135,7 +135,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { onIonTabButtonClick: this.onTabClicked }, h("slot", { name: "top" }), h("div", { class: "tabs-inner" }, h("slot", null)), h("slot", { name: "bottom" })));
+        return (h(Host, { key: '9044f05f4716fd9c158864175290dfb044e63539', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '178492f52f15a042e47531007a3564a935847818', name: "top" }), h("div", { key: 'b3affaaeb7752194acde36d9de74dbe2b3280cd1', class: "tabs-inner" }, h("slot", { key: '98f0f4e2903f1a6cec041e06b75073c57960a912' })), h("slot", { key: '0899482561bdaf35e97e5a40860c40978daca03a', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -236,11 +236,9 @@ export class Tabs {
                 "complexType": {
                     "signature": "(tab: string | HTMLIonTabElement) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
-                                }],
-                            "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+                            "name": "tab",
+                            "type": "string | HTMLIonTabElement",
+                            "docs": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
                         }],
                     "references": {
                         "Promise": {
@@ -266,11 +264,9 @@ export class Tabs {
                 "complexType": {
                     "signature": "(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
-                                }],
-                            "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+                            "name": "tab",
+                            "type": "string | HTMLIonTabElement",
+                            "docs": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
                         }],
                     "references": {
                         "Promise": {
@@ -313,8 +309,9 @@ export class Tabs {
                 "complexType": {
                     "signature": "(id: string) => Promise<RouteWrite>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -13,9 +13,9 @@ export class Text {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '8922ebdd7486c9cb9f9b547a49e5be2261df4ba1', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", null)));
+            }) }, h("slot", { key: '164cbd0f81a00adfac04f544524e905f721c121c' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/test/textarea-events.e2e.js

@@ -10,7 +10,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test.describe(title('textarea: events: ionChange'), () => {
         test.describe('when the textarea is blurred', () => {
             test('should emit if the value has changed', async ({ page }) => {
-                await page.setContent(`<ion-textarea></ion-textarea>`, config);
+                await page.setContent(`<ion-textarea aria-label="textarea"></ion-textarea>`, config);
                 const nativeTextarea = page.locator('ion-textarea textarea');
                 const ionChangeSpy = await page.spyOnEvent('ionChange');
                 await nativeTextarea.type('new value', { delay: 100 });
@@ -21,7 +21,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
                 expect(ionChangeSpy).toHaveReceivedEventTimes(1);
             });
             test('should emit if the textarea is cleared with an initial value', async ({ page }) => {
-                await page.setContent(`<ion-textarea clear-on-edit="true" value="123"></ion-textarea>`, config);
+                await page.setContent(`<ion-textarea aria-label="textarea" clear-on-edit="true" value="123"></ion-textarea>`, config);
                 const textarea = page.locator('ion-textarea');
                 const nativeTextarea = textarea.locator('textarea');
                 const ionChangeSpy = await page.spyOnEvent('ionChange');
@@ -32,7 +32,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
                 expect(ionChangeSpy).toHaveReceivedEventTimes(1);
             });
             test('should not emit if the value is set programmatically', async ({ page }) => {
-                await page.setContent(`<ion-textarea></ion-textarea>`, config);
+                await page.setContent(`<ion-textarea aria-label="textarea"></ion-textarea>`, config);
                 const textarea = page.locator('ion-textarea');
                 const ionChangeSpy = await page.spyOnEvent('ionChange');
                 await textarea.evaluate((el) => {
@@ -51,7 +51,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
     test.describe(title('textarea: events: ionInput'), () => {
         test('should emit when the user types', async ({ page }) => {
-            await page.setContent(`<ion-textarea value="some value"></ion-textarea>`, config);
+            await page.setContent(`<ion-textarea aria-label="textarea" value="some value"></ion-textarea>`, config);
             const ionInputSpy = await page.spyOnEvent('ionInput');
             const nativeTextarea = page.locator('ion-textarea textarea');
             await nativeTextarea.type('new value', { delay: 100 });

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

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
-        return (h(Host, { class: getIonMode(this) }, h("slot", null)));
+        return (h(Host, { key: '2b3d5139161f4b9075dce537c14b4087986b37c4', class: getIonMode(this) }, h("slot", { key: '3c4838c43e1230f9413a3cb66584417fd11382b2' })));
     }
     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 mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b68a272a33ec81d282629a569676f64d3215a0c7', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { class: "toolbar-title" }, h("slot", null))));
+            }) }, h("div", { key: '9069816a14e6e358695c5bd465787cf297c761bc', class: "toolbar-title" }, h("slot", { key: '8894bd04f2292b54050ee864abb5396deadf9874' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -384,9 +384,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('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({ tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '15a5c3e8d475435c838b70c55ef2e7cc12d6abfb', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { class: wrapperClass }, h("div", { class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { class: "toast-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 }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'a6ed7fb75ab098dc632d1a546b4d5298675c14c1', class: wrapperClass }, h("div", { key: '68ff7219e9abae0b7c2030369ebffd2fe0edf7de', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '6b45ca5e283d3507c682cbe733e27a94460a7f69', class: "toast-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"; }
@@ -1026,17 +1026,13 @@ export class Toast {
                 "complexType": {
                     "signature": "(data?: any, role?: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "data Any data to emit in the dismiss events."
-                                }],
-                            "text": "Any data to emit in the dismiss events."
+                            "name": "data",
+                            "type": "any",
+                            "docs": "Any data to emit in the dismiss events."
                         }, {
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
-                                }],
-                            "text": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                            "name": "role",
+                            "type": "string | undefined",
+                            "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/toolbar/toolbar.js

@@ -62,10 +62,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: 'afac0f08f3981483c072984ce047df5dc9cc1e99', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { class: "toolbar-background" }), h("div", { class: "toolbar-container" }, h("slot", { name: "start" }), h("slot", { name: "secondary" }), h("div", { class: "toolbar-content" }, h("slot", null)), h("slot", { name: "primary" }), h("slot", { name: "end" }))));
+            })) }, h("div", { key: '30d4f1d0ec01cc646398301b5f7d469391eb35d2', class: "toolbar-background" }), h("div", { key: '175d1f283e670b57a9bf8fd2a8c5e7d0da749aa8', class: "toolbar-container" }, h("slot", { key: '4853b18092737b32b5995457536fa5a7fc2816ef', name: "start" }), h("slot", { key: '6eb4921200aad02d7977d134edad6cff2aad91ad', name: "secondary" }), h("div", { key: '024e0339c74c4b9a886d49e96723243719643dc2', class: "toolbar-content" }, h("slot", { key: 'b6452c84692fedd6efe33ac67907d01253b76f8f' })), h("slot", { key: '636e56eeaa318ce45a9c3854a30b8eb2819a33e0', name: "primary" }), h("slot", { key: 'a45c19b93dca3719d75bd4d99acc49de87137a7d', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/hardware-back-button.js

@@ -1,6 +1,21 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { win } from "./browser/index";
+import { config } from "../global/config";
+/**
+ * CloseWatcher is a newer API that lets
+ * use detect the hardware back button event
+ * in a web browser: https://caniuse.com/?search=closewatcher
+ * However, not every browser supports it yet.
+ *
+ * This needs to be a function so that we can
+ * check the config once it has been set.
+ * Otherwise, this code would be evaluated the
+ * moment this file is evaluated which could be
+ * before the config is set.
+ */
+export const shoudUseCloseWatcher = () => config.get('experimentalCloseWatcher', false) && win !== undefined && 'CloseWatcher' in win;
 /**
  * When hardwareBackButton: false in config,
  * we need to make sure we also block the default
@@ -17,7 +32,7 @@ export const blockHardwareBackButton = () => {
 export const startHardwareBackButton = () => {
     const doc = document;
     let busy = false;
-    doc.addEventListener('backbutton', () => {
+    const backButtonCallback = () => {
         if (busy) {
             return;
         }
@@ -63,7 +78,35 @@ export const startHardwareBackButton = () => {
             }
         };
         processHandlers();
-    });
+    };
+    /**
+     * If the CloseWatcher is defined then
+     * we don't want to also listen for the native
+     * backbutton event otherwise we may get duplicate
+     * events firing.
+     */
+    if (shoudUseCloseWatcher()) {
+        let watcher;
+        const configureWatcher = () => {
+            watcher === null || watcher === void 0 ? void 0 : watcher.destroy();
+            watcher = new win.CloseWatcher();
+            /**
+             * Once a close request happens
+             * the watcher gets destroyed.
+             * As a result, we need to re-configure
+             * the watcher so we can respond to other
+             * close requests.
+             */
+            watcher.onclose = () => {
+                backButtonCallback();
+                configureWatcher();
+            };
+        };
+        configureWatcher();
+    }
+    else {
+        doc.addEventListener('backbutton', backButtonCallback);
+    }
 };
 export const OVERLAY_BACK_BUTTON_PRIORITY = 100;
 export const MENU_BACK_BUTTON_PRIORITY = 99; // 1 less than overlay priority since menu is displayed behind overlays

package/dist/collection/utils/helpers.js

@@ -34,7 +34,7 @@ const transitionEnd = (el, expectedDuration = 0, callback) => {
         el.addEventListener('transitionend', onTransitionEnd, opts);
         animationTimeout = setTimeout(onTransitionEnd, expectedDuration + ANIMATION_FALLBACK_TIMEOUT);
         unRegTrans = () => {
-            if (animationTimeout) {
+            if (animationTimeout !== undefined) {
                 clearTimeout(animationTimeout);
                 animationTimeout = undefined;
             }