voyager-ionic-core 8.0.0-beta.3 → 8.0.0

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

@@ -10,7 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: '808e4cf8c5778604cfecc6f218d1d24ba06f0a87', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: '6fa504ac5597098086050c0f517a03be8b8032c9', 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: 'cc49bc02396957ee92f8cf63b363ad491d05c8d9', class: getIonMode(this) }, h("ion-list", { key: '99ef366c7a8211b7ccf8847259ed113544db6a31' }, 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: '2ed838c17d47198c697164a0a750aafb6ca61a95', class: getIonMode(this) }, h("ion-list", { key: '24fe7a6e9e45458c201b178ca236645d0f49ea8a' }, header !== undefined && h("ion-list-header", { key: 'ebe64853dcd59c14a8f4dc9c2dc9e66d1e9767f6' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'ed7c6f2d7e1282b3048df0af8f1e3fd3b08297c6' }, h("ion-label", { key: 'a81f6c4011a0dce47b80c98a45d80b1368d84a1e', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '4fd72c62da896092d535580917bb8a5ad6609c05' }, subHeader), message !== undefined && h("p", { key: '88aead29b35d69743abe4015f96a6fa9f199a0ff' }, 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: '57a8669d26c07a5200c221be455c38d7463077ad', class: {
+        return (h(Host, { key: '8a1b489e35564056b3babce548982e58fec74119', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: 'a3c5ba1d02f32b81c3427c38908c0527d07edaff' }, "\u00A0")));
+            } }, h("span", { key: '71df251a41967dc4dab241f6fa906fa4d568dd9e' }, "\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: '794ae74de8e94b2d8877712362c0a24ccb7e87f2', class: createColorClasses(self.color, {
+        return (h(Host, { key: '9422c25aadfdf08861e26bb1aa336c94391d10a3', 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: 'ba9cf1cd2963611627c841ccfbbf396bbf677de5', class: {
+        return (h(Host, { key: 'd04ff97717268184725f25b39bb1416b2b423260', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '0f4cf2471e100df2f35dc429fabba1cd264db480' })));
+            } }, h("slot", { key: '4d355509ab6fcdac415184068ffe1241a5078db3' })));
     }
     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: '84b23a0a736aa6d060c2a7756bbc96b72ef53984', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'f341d086cc626834d2ac83a9b6366fcaf71a72d5', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '102092dedc7cd1eabc7f1fe0ac5d8880a6cda85f' })));
+            } }, h("slot", { key: 'b665bb7a388f1a032685c9e7fe9b412ca742689e' })));
     }
     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: '7939a97d199bf8298684e87be6a8340b4e8d63df', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '77fe8ff42b083bfdb5e01a9873ef45b6f3ce3744', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '275e4051d3c58904fb0870e3feb918d3777b1288' })));
+            }) }, h("slot", { key: 'd479c80ff66f4cfc12ab4a583bd292ef8392895e' })));
     }
     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: 'b59ea2572a066edc9aed8e027d1849a80734ddc2', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '092250aa4c247411c4717bf3871bdd7a47b7177f', 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: '426bf8ee7c7c233cd161f74bf7e46cbe939ac1d5' }, 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: '955b805c6e1ed576604ab0294a7479520573ff0f', class: "button-inner" }, h("slot", { key: 'f1e6dc9f80bc27c956f2333f28f5440a78f2dd6c' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '0414e9284005ce34ad69c4858f1b30aff00beb86' }, 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: 'df97b6b56fb86507d40e68caa49f888ee29f8da4', class: "button-inner" }, h("slot", { key: '715c209dd0cd61ac37b2813815014c685b7a92bc' })), mode === 'md' && h("ion-ripple-effect", { key: 'e6894153a563f63f4f7d84f2703cef0f7522d435', 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, { key: 'ee98a688e181f29f70bf67d8ac9a74f6863de070', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'd0fab7c4acb24591931523584c8f2d0a0685058a', name: "top" }), h("div", { key: '0a71bcbc44d45b0f47834f055e13a4d5ad2ec189', class: "tabs-inner" }, h("slot", { key: 'df40115d87f04d6068b1d44d4eef26d51435405a' })), h("slot", { key: '1ba4b7ff756fec9954645f13b295121fe2dc3ca3', name: "bottom" })));
+        return (h(Host, { key: '13d9b30a83eb565b635ec7c547bd99da8c96aaa0', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'd885dbf0134cd5d256f7e3e9fc4844636c2c6cbf', name: "top" }), h("div", { key: '2f48887902d47c0e29afb8da450da22b874b0e76', class: "tabs-inner" }, h("slot", { key: 'bcdb41418edc7d176e570c37bb6a6ba1dc123f7d' })), h("slot", { key: '85101e7c57cf8cda04bd3a125f1207faf85110d2', 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: '9b808f0e1c85e39e89df51ea0a8b97bf815907ec', class: createColorClasses(this.color, {
+        return (h(Host, { key: '096d8ca01301500d61d9e92299e0cc78c2ad86e3', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '200d6bf3820c9428b645abf8ec2a6f9de849e78a' })));
+            }) }, h("slot", { key: '9399d939ec4f134c24c29bda8857cd348259c666' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -359,7 +359,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '031dd0f49d577017faa1c5ec87184f8047e1be86', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b4cf1f37cacdd1775fefb874b87b30ba753fdc3a', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -368,7 +368,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '867331fa40e10931dc3b476ce96a5c1bf24f10d8', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '0e63c53cdf36b2f5abc80f5e0327c50407785d75', class: "textarea-wrapper-inner" }, h("div", { key: '762d406affec3ff1cc42349b926f39d1a03bb86e', class: "start-slot-wrapper" }, h("slot", { key: '94f5c12011301d17c61c05794e162c06257b1e3f', name: "start" })), h("div", { key: '9f4c77548e14e61cf003c3876270838ee7ccb1c4', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '7677c92431fd88cda4b3318e0eabb5747b23416c', class: "native-textarea", 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 }, this.inheritedAttributes), value)), h("div", { key: 'a3d97905a3e526a6a65fac13cc379c981bfeedd2', class: "end-slot-wrapper" }, h("slot", { key: '3edf3ecd1917595917aa960f99698eabf3268a6f', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '71673192cf9d61dd072d9c0c3caefad313ed7129', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '6ecfbc046cf6e14f0d58dca1bff7db2093620f01', class: "textarea-wrapper-inner" }, h("div", { key: '7d2410de5dd971f74406ab8a321d87709873fa22', class: "start-slot-wrapper" }, h("slot", { key: '061cc0dd516b2f3a4ad7199790028e5d525a3ab2', name: "start" })), h("div", { key: 'f75309006f7c4e835f346cecf243f104e37bd477', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'ba47358352fcd30e659b7ac684ce2e5b83744150', class: "native-textarea", 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 }, this.inheritedAttributes), value)), h("div", { key: 'bebb8b585bc4e7adb9192665679cd7073e23240c', class: "end-slot-wrapper" }, h("slot", { key: '734f40dcc6a57771c00f7528fb19544bb68fc563', name: "end" }))), shouldRenderHighlight && h("div", { key: 'e5a1bbebc2e16cb1b3f2bce312494447a0b36957', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -928,30 +928,6 @@ export class Textarea {
                         }
                     }
                 }
-            }, {
-                "method": "ionStyle",
-                "name": "ionStyle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": "Emitted when the styles change."
-                },
-                "complexType": {
-                    "original": "StyleEventDetail",
-                    "resolved": "StyleEventDetail",
-                    "references": {
-                        "StyleEventDetail": {
-                            "location": "import",
-                            "path": "../../interface",
-                            "id": "src/interface.d.ts::StyleEventDetail"
-                        }
-                    }
-                }
             }, {
                 "method": "ionBlur",
                 "name": "ionBlur",

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, { key: 'a399199598f8eb605a2c41e0b372609e0c1df8ee', class: getIonMode(this) }, h("slot", { key: 'a63159fa02a1339273066bf7d74ec7d5d2ed0c53' })));
+        return (h(Host, { key: '29ed7678be93e55afad58bd37a61db3a289a5d76', class: getIonMode(this) }, h("slot", { key: 'da1eb174d2544b9d452c98076f6e0abcda60099d' })));
     }
     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, { key: '2e4240e81db3a6c9293b7cc0589226429c82790d', class: createColorClasses(this.color, {
+        return (h(Host, { key: '5cb49f3642fb3c937cdba729ab7d561213d9bce5', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '2dccef7ee6ec217b12844e0ed72401eb834ac54e', class: "toolbar-title" }, h("slot", { key: '8d109bb5cd4e883d1e47aaa6b26ac9a345de525e' }))));
+            }) }, h("div", { key: 'f089bf6cff17ab109fec7de8b1bf96bf33bede1f', class: "toolbar-title" }, h("slot", { key: 'ed74c4e77126a309970ff719baa6ebaebb00d2e6' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -388,9 +388,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({ key: '66dcfb5335d7476659c05a3df8f8b49f198197c5', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'f3555e5e093ce5dc5114df2e7ed298afa79eee02', 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", { key: 'fb798e74b5ebcb1e17f368679d4947a490d0fdeb', class: wrapperClass }, h("div", { key: '0b39964d740f1172d172dca5af306c083f3435ae', 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: '265b36d5c914ac6a42a9a8e622237e026035a658', 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: '3a98853e3b9c4c015a0e4035ad34f7fe02ec3b1c', class: wrapperClass }, h("div", { key: '3c3447ce2a1fd4aecc3f7da1c1bb0c504fb6fcf7', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '40bb8c55ac8bf7ce283bf2cdeb5902e76ad911ca', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'bfe843cce24b0205cdce48a544b294dcb0946eb4', 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"; }

package/dist/collection/components/toggle/toggle.ios.css

@@ -82,6 +82,7 @@
 }
 
 :host(.in-item) {
+  flex: 1 1 0;
   width: 100%;
   height: 100%;
 }

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

@@ -157,7 +157,7 @@ export class Toggle {
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '4a786aed54ad9c746cc3fb4cc73dc831d5cc39dc', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'c945ab955306b2fcb7833f7ff771ac943d73d27d', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -167,10 +167,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '7e0d74361076d55bf500a08c7f24856c1f712afa', class: "toggle-wrapper" }, h("input", Object.assign({ key: '1112f0a15dd0e8b39a1cb60e2bdef19e37e9a4ce', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: 'ff94aa7e50d1b68d8131f54141209ca67b4889b9', class: {
+            }) }, h("label", { key: '71fb6976e877639ca9f28c2103f6290917cdb6ce', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'ed2495568197928ef1f17fc60470f4d9754a6244', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '953ab9a29c432de4b869aeac296007e703bcdf27', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: 'd43b70d600179d41f98b17b2e249b8e672096ccd' })), h("div", { key: 'c8e1bec8e42a09e3947209fdc7a31c66a474702f', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '718b24b4d59b979c11edfb1d90fa0270ac248b2f' })), h("div", { key: '293595f9dc291df38a54e23f81797b89428ff2c5', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -82,6 +82,7 @@
 }
 
 :host(.in-item) {
+  flex: 1 1 0;
   width: 100%;
   height: 100%;
 }

package/dist/collection/components/toolbar/test/basic/toolbar.e2e.js

@@ -3,13 +3,141 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs().forEach(({ title, screenshot, config }) => {
+configs({ palettes: ['light', 'dark'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('toolbar: basic (LTR only)'), () => {
+        test('should not have visual regressions with text only', async ({ page }) => {
+            await page.setContent(`
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Toolbar</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        `, config);
+            const header = page.locator('ion-header');
+            await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`));
+        });
+    });
+});
+configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('toolbar: basic'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/toolbar/test/basic`, config);
-            // capture both header toolbars at once, but don't include all the white space in the ion-content
+        test('should truncate long title with ellipsis', async ({ page }) => {
+            await page.setContent(`
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        `, config);
+            const header = page.locator('ion-header');
+            await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-long-text`));
+        });
+        test('should not have visual regressions with icon-only buttons', async ({ page }) => {
+            await page.setContent(`
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button>
+                  <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+                </ion-button>
+                <ion-button>
+                  <ion-icon slot="icon-only" name="search"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary">
+                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Toolbar</ion-title>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button class="ion-activated">
+                  <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+                </ion-button>
+                <ion-button class="ion-activated">
+                  <ion-icon slot="icon-only" name="search"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary" class="ion-activated">
+                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Activated Buttons</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        `, config);
+            const header = page.locator('ion-header');
+            await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-icon-buttons`));
+        });
+        test('should not have visual regressions with buttons with icons and text', async ({ page }) => {
+            await page.setContent(`
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="solid">
+                  <ion-icon slot="start" name="person-circle"></ion-icon>
+                  Solid
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Solid</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button fill="solid" color="secondary">
+                  Help
+                  <ion-icon slot="end" name="help-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="solid" class="ion-activated">
+                  <ion-icon slot="start" name="person-circle"></ion-icon>
+                  Solid
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Solid Activated</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button fill="solid" color="secondary" class="ion-activated">
+                  Help
+                  <ion-icon slot="end" name="help-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="outline">
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Star
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Outline</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary" fill="outline">
+                  Info
+                  <ion-icon slot="end" name="information-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="outline" class="ion-activated">
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Star
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Outline Activated</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary" fill="outline" class="ion-activated">
+                  Info
+                  <ion-icon slot="end" name="information-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+        `, config);
             const header = page.locator('ion-header');
-            await expect(header).toHaveScreenshot(screenshot(`toolbar-basic`));
+            await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-icon-buttons`));
         });
     });
 });

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, { key: 'ccdad3d73213ea96f320bedcfc77dba0b1d5a1e6', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: 'af016bf9981a2d6182783c6643e2d460245ecc2f', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: 'a7511bff77244f06648e7a9fa88dba7cfa341736', class: "toolbar-background" }), h("div", { key: '11347fdb377f492d454709d552754b71c0d62754', class: "toolbar-container" }, h("slot", { key: '49b7e5f7fa17329b9160f1017d00c0d39fbd1e59', name: "start" }), h("slot", { key: '23f248e4273880e4629f1149dfb3081f873d9fcb', name: "secondary" }), h("div", { key: '4f2d1b71e624c2e63427c13a1e5c4c37a422004e', class: "toolbar-content" }, h("slot", { key: '3554cda5a394ec59b6161ce45fd1c71e41dfc26c' })), h("slot", { key: 'de77e5bca3c49d3c961838681fca239ff4d4bba9', name: "primary" }), h("slot", { key: 'e3e32c04cd0558ea1cd2af1a99d527eb67de5863', name: "end" }))));
+            })) }, h("div", { key: '437debb5b7c561b315d887ae8d47186cba5521ce', class: "toolbar-background" }), h("div", { key: '4c2429fa3e8526fedf456e4658be92d5dce8ca34', class: "toolbar-container" }, h("slot", { key: '4c07db12cfc48b4836b566449b854c24db308e3a', name: "start" }), h("slot", { key: '12855ec04622c09cc404f9b4f07f57a73e5770a0', name: "secondary" }), h("div", { key: '56f37d52c91de2b76910defbc9e5b7c1def3861c', class: "toolbar-content" }, h("slot", { key: 'c10ec3fdbea10a6388f4f510d45188f7fda1a371' })), h("slot", { key: 'c8ed49c6888faf35e71f2a8f4f6bf98fb0c34a25', name: "primary" }), h("slot", { key: '0251f3980082a092304f95cbc002bc8c633c5739', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/animation/animation-utils.js

@@ -2,36 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 let animationPrefix;
-/**
- * Web Animations requires hyphenated CSS properties
- * to be written in camelCase when animating
- */
-export const processKeyframes = (keyframes) => {
-    keyframes.forEach((keyframe) => {
-        for (const key in keyframe) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (keyframe.hasOwnProperty(key)) {
-                const value = keyframe[key];
-                if (key === 'easing') {
-                    const newKey = 'animation-timing-function';
-                    keyframe[newKey] = value;
-                    delete keyframe[key];
-                }
-                else {
-                    const newKey = convertCamelCaseToHypen(key);
-                    if (newKey !== key) {
-                        keyframe[newKey] = value;
-                        delete keyframe[key];
-                    }
-                }
-            }
-        }
-    });
-    return keyframes;
-};
-const convertCamelCaseToHypen = (str) => {
-    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-};
 export const getAnimationPrefix = (el) => {
     if (animationPrefix === undefined) {
         const supportsUnprefixed = el.style.animationName !== undefined;
@@ -44,78 +14,6 @@ export const setStyleProperty = (element, propertyName, value) => {
     const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
     element.style.setProperty(prefix + propertyName, value);
 };
-export const removeStyleProperty = (element, propertyName) => {
-    const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
-    element.style.removeProperty(prefix + propertyName);
-};
-export const animationEnd = (el, callback) => {
-    let unRegTrans;
-    const opts = { passive: true };
-    const unregister = () => {
-        if (unRegTrans) {
-            unRegTrans();
-        }
-    };
-    const onTransitionEnd = (ev) => {
-        if (el === ev.target) {
-            unregister();
-            callback(ev);
-        }
-    };
-    if (el) {
-        el.addEventListener('webkitAnimationEnd', onTransitionEnd, opts);
-        el.addEventListener('animationend', onTransitionEnd, opts);
-        unRegTrans = () => {
-            el.removeEventListener('webkitAnimationEnd', onTransitionEnd, opts);
-            el.removeEventListener('animationend', onTransitionEnd, opts);
-        };
-    }
-    return unregister;
-};
-// TODO(FW-2832): type
-export const generateKeyframeRules = (keyframes = []) => {
-    return keyframes
-        .map((keyframe) => {
-        const offset = keyframe.offset;
-        const frameString = [];
-        for (const property in keyframe) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (keyframe.hasOwnProperty(property) && property !== 'offset') {
-                frameString.push(`${property}: ${keyframe[property]};`);
-            }
-        }
-        return `${offset * 100}% { ${frameString.join(' ')} }`;
-    })
-        .join(' ');
-};
-const keyframeIds = [];
-export const generateKeyframeName = (keyframeRules) => {
-    let index = keyframeIds.indexOf(keyframeRules);
-    if (index < 0) {
-        index = keyframeIds.push(keyframeRules) - 1;
-    }
-    return `ion-animation-${index}`;
-};
-export const getStyleContainer = (element) => {
-    // getRootNode is not always available in SSR environments.
-    // TODO(FW-2832): types
-    const rootNode = element.getRootNode !== undefined ? element.getRootNode() : element;
-    return rootNode.head || rootNode;
-};
-export const createKeyframeStylesheet = (keyframeName, keyframeRules, element) => {
-    var _a;
-    const styleContainer = getStyleContainer(element);
-    const keyframePrefix = getAnimationPrefix(element);
-    const existingStylesheet = styleContainer.querySelector('#' + keyframeName);
-    if (existingStylesheet) {
-        return existingStylesheet;
-    }
-    const stylesheet = ((_a = element.ownerDocument) !== null && _a !== void 0 ? _a : document).createElement('style');
-    stylesheet.id = keyframeName;
-    stylesheet.textContent = `@${keyframePrefix}keyframes ${keyframeName} { ${keyframeRules} } @${keyframePrefix}keyframes ${keyframeName}-alt { ${keyframeRules} }`;
-    styleContainer.appendChild(stylesheet);
-    return stylesheet;
-};
 export const addClassToArray = (classes = [], className) => {
     if (className !== undefined) {
         const classNameToAppend = Array.isArray(className) ? className : [className];