voyager-ionic-core 8.0.1 → 8.1.0

package/components/ion-tabs.js

@@ -140,7 +140,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        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" })));
+        return (h(Host, { key: '239bdb2ff2ec5cfcc74c51812cf6240f48acc617', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '2b266d0f87c7c82e992fe0d9b5c8f25569b118e3', name: "top" }), h("div", { key: '4cbbd010f0b0b1cd82714db7d098d28fab6d5218', class: "tabs-inner" }, h("slot", { key: '72b2a02cd29d5b30e47758f3d6daaa1021916256' })), h("slot", { key: '25494076dbbf7606d477b44f1b969719e7b4a805', name: "bottom" })));
     }
     get el() { return this; }
     static get style() { return IonTabsStyle0; }

package/components/ion-text.js

@@ -17,9 +17,9 @@ const Text = /*@__PURE__*/ proxyCustomElement(class Text extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '096d8ca01301500d61d9e92299e0cc78c2ad86e3', class: createColorClasses(this.color, {
+        return (h(Host, { key: '4b76333b1ea5cab134b9dc1f5670c0d5a253fc32', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '9399d939ec4f134c24c29bda8857cd348259c666' })));
+            }) }, h("slot", { key: '3dee5f16bc58b3d92547d910bd4f441a00ce2039' })));
     }
     static get style() { return IonTextStyle0; }
 }, [1, "ion-text", {

package/components/ion-textarea.js

@@ -364,7 +364,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'b4cf1f37cacdd1775fefb874b87b30ba753fdc3a', class: createColorClasses(this.color, {
+        return (h(Host, { key: '37595a18d77dea1a337ac1c672e5f08a4128111d', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -373,7 +373,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, 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()));
+            }) }, h("label", { key: '67342758743e5a40448a32ff695876d39778621f', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'a994be8264bf5652811cf816d79a04178954e83f', class: "textarea-wrapper-inner" }, h("div", { key: 'e09c93ebcd5b3d227d51e682ca23dfc7fd7027ad', class: "start-slot-wrapper" }, h("slot", { key: 'd39758f21f19ae70aea21e9a9a7b7c20991fe593', name: "start" })), h("div", { key: '6a4e10e53de4bb235ee30def4c9ae5bdee888816', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '9e254e551f124d972e9bc6b09ef0f2bb55890be5', 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: 'a66aa2d2bc4778a0bec56a8b9ec9052a832eb3b2', class: "end-slot-wrapper" }, h("slot", { key: '8e6a90b4475de32e23afc593da4108610dcca663', name: "end" }))), shouldRenderHighlight && h("div", { key: '6da03205a8daff45581b20f0af3938634a9d5f8c', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-thumbnail.js

@@ -14,7 +14,7 @@ const Thumbnail = /*@__PURE__*/ proxyCustomElement(class Thumbnail extends HTMLE
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '29ed7678be93e55afad58bd37a61db3a289a5d76', class: getIonMode(this) }, h("slot", { key: 'da1eb174d2544b9d452c98076f6e0abcda60099d' })));
+        return (h(Host, { key: 'ea55000055f941b0c79561e8934be6242ec8e114', class: getIonMode(this) }, h("slot", { key: 'a4f934f442797f5c66a77e0ef8920fdd07c204f2' })));
     }
     static get style() { return IonThumbnailStyle0; }
 }, [1, "ion-thumbnail"]);

package/components/ion-title.js

@@ -38,11 +38,11 @@ const ToolbarTitle = /*@__PURE__*/ proxyCustomElement(class ToolbarTitle extends
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: '5cb49f3642fb3c937cdba729ab7d561213d9bce5', class: createColorClasses(this.color, {
+        return (h(Host, { key: '5a58dc437a6f4257244bbdd7e9a682a17d8c9a6b', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'f089bf6cff17ab109fec7de8b1bf96bf33bede1f', class: "toolbar-title" }, h("slot", { key: 'ed74c4e77126a309970ff719baa6ebaebb00d2e6' }))));
+            }) }, h("div", { key: '58682ea7b8f47a08adfad419b5c76b34784c6501', class: "toolbar-title" }, h("slot", { key: '8a9248534e4c3076f5e2dfda38ef86069796851c' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-toast.js

@@ -828,9 +828,9 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
         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: 'f3555e5e093ce5dc5114df2e7ed298afa79eee02', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'da148788489146a20b42023fdc6401e53c044767', 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: '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')))));
+            }, 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: 'ab0a4d783aa43ba961492b3eb8beb60a38153057', class: wrapperClass }, h("div", { key: '83e49027fd1ca6553d6910ff91befeea43576f3c', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '025cb4b6b170a89548969a25bcce4ab7a3817898', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'b811b4e1cbc1528c2cfb57898f5615692120f840', 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')))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-toggle.js

@@ -161,7 +161,7 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'c945ab955306b2fcb7833f7ff771ac943d73d27d', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'b0d648e071bc8095998b519ce4dcdd0ea91575c0', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -171,10 +171,10 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, 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: {
+            }) }, h("label", { key: '9a2fe1d16dba66a9dfef450efebf2e5cbe3dcd00', class: "toggle-wrapper" }, h("input", Object.assign({ key: '4358d18cb86da768155c17f9da3aac641296c256', 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: '0ec99e452164d7059cc4f93d09e5b918f82c022a', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '718b24b4d59b979c11edfb1d90fa0270ac248b2f' })), h("div", { key: '293595f9dc291df38a54e23f81797b89428ff2c5', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '1c5cbc99905a79e842e9487eb3ca654e1bab3c66' })), h("div", { key: 'ca8196423b429899febd11c7337d768ff05df6f4', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-toolbar.js

@@ -63,10 +63,10 @@ const Toolbar = /*@__PURE__*/ proxyCustomElement(class Toolbar extends HTMLEleme
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'af016bf9981a2d6182783c6643e2d460245ecc2f', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '4bb3a55001408a3bdf033af76b9196cb96c07c09', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, 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" }))));
+            })) }, h("div", { key: '0891db157d6e028c6d03696f13fb510ea91b0296', class: "toolbar-background" }), h("div", { key: '95fbc870d808f74af4bb18cd8f8ec8c7828a9e0b', class: "toolbar-container" }, h("slot", { key: '84d4a9644660fe00ca085055ca8d12f3647531ad', name: "start" }), h("slot", { key: 'fd361dc9c9979f59aed2fedcf94629506fae62b0', name: "secondary" }), h("div", { key: '54d2b28616a4627c55766f66dc453707752758a6', class: "toolbar-content" }, h("slot", { key: '8f65e0830cce7135640b90eb694e282cb7e5efd2' })), h("slot", { key: 'c78be11a207c8674f222543646398636956087e6', name: "primary" }), h("slot", { key: 'ab25e1601ccaa8cb0d81921b849bcb7402aa7826', name: "end" }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/ios.transition.js

@@ -56,20 +56,22 @@ const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringE
         const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect();
         const enteringBackButtonBox = enteringBackButton.getBoundingClientRect();
         const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text');
-        const enteringBackButtonTextBox = enteringBackButtonTextEl.getBoundingClientRect();
+        // Text element not rendered if developers pass text="" to the back button
+        const enteringBackButtonTextBox = enteringBackButtonTextEl === null || enteringBackButtonTextEl === void 0 ? void 0 : enteringBackButtonTextEl.getBoundingClientRect();
         const leavingLargeTitleTextEl = shadow(leavingLargeTitle).querySelector('.toolbar-title');
         const leavingLargeTitleTextBox = leavingLargeTitleTextEl.getBoundingClientRect();
-        animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, enteringBackButtonTextEl, enteringBackButtonTextBox);
+        animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, enteringBackButtonBox, enteringBackButtonTextEl, enteringBackButtonTextBox);
         animateBackButton(rootAnimation, rtl, backDirection, enteringBackButton, enteringBackButtonBox, enteringBackButtonTextEl, enteringBackButtonTextBox, leavingLargeTitle, leavingLargeTitleTextBox);
     }
     else if (shouldAnimationBackward) {
         const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect();
         const leavingBackButtonBox = leavingBackButton.getBoundingClientRect();
         const leavingBackButtonTextEl = shadow(leavingBackButton).querySelector('.button-text');
-        const leavingBackButtonTextBox = leavingBackButtonTextEl.getBoundingClientRect();
+        // Text element not rendered if developers pass text="" to the back button
+        const leavingBackButtonTextBox = leavingBackButtonTextEl === null || leavingBackButtonTextEl === void 0 ? void 0 : leavingBackButtonTextEl.getBoundingClientRect();
         const enteringLargeTitleTextEl = shadow(enteringLargeTitle).querySelector('.toolbar-title');
         const enteringLargeTitleTextBox = enteringLargeTitleTextEl.getBoundingClientRect();
-        animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
+        animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
         animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox, enteringLargeTitle, enteringLargeTitleTextBox);
     }
     return {
@@ -83,26 +85,31 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
     const TEXT_ORIGIN_X = rtl ? 'right' : 'left';
     const ICON_ORIGIN_X = rtl ? 'left' : 'right';
     const CONTAINER_ORIGIN_X = rtl ? 'right' : 'left';
-    /**
-     * When the title and back button texts match
-     * then they should overlap during the page transition.
-     * If the texts do not match up then the back button text scale adjusts
-     * to not perfectly match the large title text otherwise the
-     * proportions will be incorrect.
-     * When the texts match we scale both the width and height to account for
-     * font weight differences between the title and back button.
-     */
-    const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
-    const WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width;
-    /**
-     * We subtract an offset to account for slight sizing/padding
-     * differences between the title and the back button.
-     */
-    const HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height;
-    const TEXT_START_SCALE = doTitleAndButtonTextsMatch
-        ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})`
-        : `scale(${HEIGHT_SCALE})`;
+    let WIDTH_SCALE = 1;
+    let HEIGHT_SCALE = 1;
+    let TEXT_START_SCALE = `scale(${HEIGHT_SCALE})`;
     const TEXT_END_SCALE = 'scale(1)';
+    if (backButtonTextEl && backButtonTextBox) {
+        /**
+         * When the title and back button texts match then they should overlap during the
+         * page transition. If the texts do not match up then the back button text scale
+         * adjusts to not perfectly match the large title text otherwise the proportions
+         * will be incorrect. When the texts match we scale both the width and height to
+         * account for font weight differences between the title and back button.
+         */
+        const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+        WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width;
+        /**
+         * Subtract an offset to account for slight sizing/padding differences between the
+         * title and the back button.
+         */
+        HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height;
+        /**
+         * Even though we set TEXT_START_SCALE to HEIGHT_SCALE above, we potentially need
+         * to re-compute this here since the HEIGHT_SCALE may have changed.
+         */
+        TEXT_START_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`;
+    }
     const backButtonIconEl = shadow(backButtonEl).querySelector('ion-icon');
     const backButtonIconBox = backButtonIconEl.getBoundingClientRect();
     /**
@@ -199,11 +206,11 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         top: '0px',
         [CONTAINER_ORIGIN_X]: '0px',
     })
-        .keyframes(CONTAINER_KEYFRAMES);
-    enteringBackButtonTextAnimation
-        .beforeStyles({
-        'transform-origin': `${TEXT_ORIGIN_X} top`,
-    })
+        /**
+         * The write hooks must be set on this animation as it is guaranteed to run. Other
+         * animations such as the back button text animation will not run if the back button
+         * has no visible text.
+         */
         .beforeAddWrite(() => {
         backButtonEl.style.setProperty('display', 'none');
         clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET);
@@ -212,6 +219,11 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         backButtonEl.style.setProperty('display', '');
         clonedBackButtonEl.style.setProperty('display', 'none');
         clonedBackButtonEl.style.removeProperty(TEXT_ORIGIN_X);
+    })
+        .keyframes(CONTAINER_KEYFRAMES);
+    enteringBackButtonTextAnimation
+        .beforeStyles({
+        'transform-origin': `${TEXT_ORIGIN_X} top`,
     })
         .keyframes(TEXT_KEYFRAMES);
     enteringBackButtonIconAnimation
@@ -225,7 +237,7 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         enteringBackButtonAnimation,
     ]);
 };
-const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonTextEl, backButtonTextBox) => {
+const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonBox, backButtonTextEl, backButtonTextBox) => {
     var _a, _b;
     /**
      * The horizontal transform origin for the large title
@@ -245,52 +257,67 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
      * title and the back button due to padding and font weight.
      */
     const LARGE_TITLE_TRANSLATION_OFFSET = 8;
+    let END_TRANSLATE_X = rtl
+        ? `-${window.innerWidth - backButtonBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
+        : `${backButtonBox.x + LARGE_TITLE_TRANSLATION_OFFSET}px`;
     /**
-     * The scaled title should (roughly) overlap the back button.
-     * This ensures that the back button and title overlap during
-     * the animation. Note that since both elements either fade in
-     * or fade out over the course of the animation, neither element
-     * will be fully visible on top of the other. As a result, the overlap
-     * does not need to be perfect, so approximate values are acceptable here.
+     * How much to scale the large title up/down by.
      */
-    const END_TRANSLATE_X = rtl
-        ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
-        : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`;
+    let HEIGHT_SCALE = 0.5;
     /**
-     * The top of the scaled large title
-     * should match with the top of the
-     * back button text element.
-     * We subtract 2px to account for the top padding
-     * on the large title element.
+     * The large title always starts full size.
      */
-    const LARGE_TITLE_TOP_PADDING = 2;
-    const END_TRANSLATE_Y = `${backButtonTextBox.y - LARGE_TITLE_TOP_PADDING}px`;
+    const START_SCALE = 'scale(1)';
     /**
-     * In the forward direction, the large title should start at its
-     * normal size and then scale down to be (roughly) the size of the
-     * back button on the other view. In the backward direction, the
-     * large title should start at (roughly) the size of the back button
-     * and then scale up to its original size.
-     *
-     * Note that since both elements either fade in
-     * or fade out over the course of the animation, neither element
-     * will be fully visible on top of the other. As a result, the overlap
-     * does not need to be perfect, so approximate values are acceptable here.
+     * By default, we don't worry about having the large title scaled to perfectly
+     * match the back button because we don't know if the back button's text matches
+     * the large title's text.
      */
+    let END_SCALE = `scale(${HEIGHT_SCALE})`;
+    // Text element not rendered if developers pass text="" to the back button
+    if (backButtonTextEl && backButtonTextBox) {
+        /**
+         * The scaled title should (roughly) overlap the back button. This ensures that
+         * the back button and title overlap during the animation. Note that since both
+         * elements either fade in or fade out over the course of the animation, neither
+         * element will be fully visible on top of the other. As a result, the overlap
+         * does not need to be perfect, so approximate values are acceptable here.
+         */
+        END_TRANSLATE_X = rtl
+            ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
+            : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`;
+        /**
+         * In the forward direction, the large title should start at its normal size and
+         * then scale down to be (roughly) the size of the back button on the other view.
+         * In the backward direction, the large title should start at (roughly) the size
+         * of the back button and then scale up to its original size.
+         * Note that since both elements either fade in or fade out over the course of the
+         * animation, neither element will be fully visible on top of the other. As a result,
+         * the overlap  does not need to be perfect, so approximate values are acceptable here.
+         */
+        /**
+         * When the title and back button texts match then they should overlap during the
+         * page transition. If the texts do not match up then the large title text scale
+         * adjusts to not perfectly match the back button text otherwise the proportions
+         * will be incorrect. When the texts match we scale both the width and height to
+         * account for font weight differences between the title and back button.
+         */
+        const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+        const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width;
+        HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET);
+        /**
+         * Even though we set TEXT_START_SCALE to HEIGHT_SCALE above, we potentially need
+         * to re-compute this here since the HEIGHT_SCALE may have changed.
+         */
+        END_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`;
+    }
     /**
-     * When the title and back button texts match
-     * then they should overlap during the page transition.
-     * If the texts do not match up then the large title text scale adjusts
-     * to not perfectly match the back button text otherwise the
-     * proportions will be incorrect.
-     * When the texts match we scale both the width and height to account for
-     * font weight differences between the title and back button.
+     * The midpoints of the back button and the title should align such that the back
+     * button and title appear to be centered with each other.
      */
-    const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
-    const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width;
-    const HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET);
-    const START_SCALE = 'scale(1)';
-    const END_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`;
+    const backButtonMidPoint = backButtonBox.top + backButtonBox.height / 2;
+    const titleMidPoint = (largeTitleBox.height * HEIGHT_SCALE) / 2;
+    const END_TRANSLATE_Y = `${backButtonMidPoint - titleMidPoint}px`;
     const BACKWARDS_KEYFRAMES = [
         { offset: 0, opacity: 0, transform: `translate3d(${END_TRANSLATE_X}, ${END_TRANSLATE_Y}, 0) ${END_SCALE}` },
         { offset: 0.1, opacity: 0 },

package/components/label.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as createColorClasses, h as hostContext } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
 
-const labelIosCss = ".item.sc-ion-label-ios-h,.item .sc-ion-label-ios-h{--color:initial;display:block;color:var(--color);font-family:var(--ion-font-family, inherit);font-size:inherit;text-overflow:ellipsis;-webkit-box-sizing:border-box;box-sizing:border-box}.ion-color.sc-ion-label-ios-h{color:var(--ion-color-base)}.ion-text-nowrap.sc-ion-label-ios-h{overflow:hidden}.item-interactive-disabled.sc-ion-label-ios-h:not(.item-multiple-inputs),.item-interactive-disabled:not(.item-multiple-inputs) .sc-ion-label-ios-h{cursor:default;opacity:0.3;pointer-events:none}.item-input.sc-ion-label-ios-h,.item-input .sc-ion-label-ios-h{-ms-flex:initial;flex:initial;max-width:200px;pointer-events:none}.item-textarea.sc-ion-label-ios-h,.item-textarea .sc-ion-label-ios-h{-ms-flex-item-align:baseline;align-self:baseline}.item-skeleton-text.sc-ion-label-ios-h,.item-skeleton-text .sc-ion-label-ios-h{overflow:hidden}.label-fixed.sc-ion-label-ios-h{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.label-stacked.sc-ion-label-ios-h,.label-floating.sc-ion-label-ios-h{margin-bottom:0;-ms-flex-item-align:stretch;align-self:stretch;width:auto;max-width:100%}.label-no-animate.label-floating.sc-ion-label-ios-h{-webkit-transition:none;transition:none}.sc-ion-label-ios-s h1,.sc-ion-label-ios-s h2,.sc-ion-label-ios-s h3,.sc-ion-label-ios-s h4,.sc-ion-label-ios-s h5,.sc-ion-label-ios-s h6{text-overflow:inherit;overflow:inherit}.ion-text-wrap.sc-ion-label-ios-h{font-size:0.875rem;line-height:1.5}.label-stacked.sc-ion-label-ios-h{margin-bottom:4px;font-size:0.875rem}.label-floating.sc-ion-label-ios-h{margin-bottom:0;-webkit-transform:translate(0, 29px);transform:translate(0, 29px);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:-webkit-transform 150ms ease-in-out;transition:-webkit-transform 150ms ease-in-out;transition:transform 150ms ease-in-out;transition:transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out}[dir=rtl].sc-ion-label-ios-h -no-combinator.label-floating.sc-ion-label-ios-h,[dir=rtl] .sc-ion-label-ios-h -no-combinator.label-floating.sc-ion-label-ios-h,[dir=rtl].label-floating.sc-ion-label-ios-h,[dir=rtl] .label-floating.sc-ion-label-ios-h{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.label-floating.sc-ion-label-ios-h:dir(rtl){-webkit-transform-origin:right top;transform-origin:right top}}.item-textarea.label-floating.sc-ion-label-ios-h,.item-textarea .label-floating.sc-ion-label-ios-h{-webkit-transform:translate(0, 28px);transform:translate(0, 28px)}.item-has-focus.label-floating.sc-ion-label-ios-h,.item-has-focus .label-floating.sc-ion-label-ios-h,.item-has-placeholder.sc-ion-label-ios-h:not(.item-input).label-floating,.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-ios-h,.item-has-value.label-floating.sc-ion-label-ios-h,.item-has-value .label-floating.sc-ion-label-ios-h{-webkit-transform:scale(0.82);transform:scale(0.82)}.sc-ion-label-ios-s h1{margin-left:0;margin-right:0;margin-top:3px;margin-bottom:2px;font-size:1.375rem;font-weight:normal}.sc-ion-label-ios-s h2{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:1.0625rem;font-weight:normal}.sc-ion-label-ios-s h3,.sc-ion-label-ios-s h4,.sc-ion-label-ios-s h5,.sc-ion-label-ios-s h6{margin-left:0;margin-right:0;margin-top:0;margin-bottom:3px;font-size:0.875rem;font-weight:normal;line-height:normal}.sc-ion-label-ios-s p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:0.875rem;line-height:normal;text-overflow:inherit;overflow:inherit}.sc-ion-label-ios-s>p{color:var(--ion-text-color-step-550, #a3a3a3)}.sc-ion-label-ios-h.in-item-color.sc-ion-label-ios-s>p{color:inherit}.sc-ion-label-ios-s h2:last-child,.sc-ion-label-ios-s h3:last-child,.sc-ion-label-ios-s h4:last-child,.sc-ion-label-ios-s h5:last-child,.sc-ion-label-ios-s h6:last-child,.sc-ion-label-ios-s p:last-child{margin-bottom:0}";
+const labelIosCss = ".item.sc-ion-label-ios-h,.item .sc-ion-label-ios-h{--color:initial;display:block;color:var(--color);font-family:var(--ion-font-family, inherit);font-size:inherit;text-overflow:ellipsis;-webkit-box-sizing:border-box;box-sizing:border-box}.ion-color.sc-ion-label-ios-h{color:var(--ion-color-base)}.ion-text-nowrap.sc-ion-label-ios-h{overflow:hidden}.item-interactive-disabled.sc-ion-label-ios-h:not(.item-multiple-inputs),.item-interactive-disabled:not(.item-multiple-inputs) .sc-ion-label-ios-h{cursor:default;opacity:0.3;pointer-events:none}.item-input.sc-ion-label-ios-h,.item-input .sc-ion-label-ios-h{-ms-flex:initial;flex:initial;max-width:200px;pointer-events:none}.item-textarea.sc-ion-label-ios-h,.item-textarea .sc-ion-label-ios-h{-ms-flex-item-align:baseline;align-self:baseline}.item-skeleton-text.sc-ion-label-ios-h,.item-skeleton-text .sc-ion-label-ios-h{overflow:hidden}.label-fixed.sc-ion-label-ios-h{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.label-stacked.sc-ion-label-ios-h,.label-floating.sc-ion-label-ios-h{margin-bottom:0;-ms-flex-item-align:stretch;align-self:stretch;width:auto;max-width:100%}.label-no-animate.label-floating.sc-ion-label-ios-h{-webkit-transition:none;transition:none}.sc-ion-label-ios-s h1,.sc-ion-label-ios-s h2,.sc-ion-label-ios-s h3,.sc-ion-label-ios-s h4,.sc-ion-label-ios-s h5,.sc-ion-label-ios-s h6{text-overflow:inherit;overflow:inherit}.ion-text-wrap.sc-ion-label-ios-h{font-size:0.875rem;line-height:1.5}.label-stacked.sc-ion-label-ios-h{margin-bottom:4px;font-size:0.875rem}.label-floating.sc-ion-label-ios-h{margin-bottom:0;-webkit-transform:translate(0, 29px);transform:translate(0, 29px);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:-webkit-transform 150ms ease-in-out;transition:-webkit-transform 150ms ease-in-out;transition:transform 150ms ease-in-out;transition:transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out}[dir=rtl].sc-ion-label-ios-h -no-combinator.label-floating.sc-ion-label-ios-h,[dir=rtl] .sc-ion-label-ios-h -no-combinator.label-floating.sc-ion-label-ios-h,[dir=rtl].label-floating.sc-ion-label-ios-h,[dir=rtl] .label-floating.sc-ion-label-ios-h{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.label-floating.sc-ion-label-ios-h:dir(rtl){-webkit-transform-origin:right top;transform-origin:right top}}.item-textarea.label-floating.sc-ion-label-ios-h,.item-textarea .label-floating.sc-ion-label-ios-h{-webkit-transform:translate(0, 28px);transform:translate(0, 28px)}.item-has-focus.label-floating.sc-ion-label-ios-h,.item-has-focus .label-floating.sc-ion-label-ios-h,.item-has-placeholder.sc-ion-label-ios-h:not(.item-input).label-floating,.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-ios-h,.item-has-value.label-floating.sc-ion-label-ios-h,.item-has-value .label-floating.sc-ion-label-ios-h{-webkit-transform:scale(0.82);transform:scale(0.82)}.sc-ion-label-ios-s h1{margin-left:0;margin-right:0;margin-top:3px;margin-bottom:2px;font-size:1.375rem;font-weight:normal}.sc-ion-label-ios-s h2{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:1.0625rem;font-weight:normal}.sc-ion-label-ios-s h3,.sc-ion-label-ios-s h4,.sc-ion-label-ios-s h5,.sc-ion-label-ios-s h6{margin-left:0;margin-right:0;margin-top:0;margin-bottom:3px;font-size:0.875rem;font-weight:normal;line-height:normal}.sc-ion-label-ios-s p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:0.875rem;line-height:normal;text-overflow:inherit;overflow:inherit}.sc-ion-label-ios-s>p{color:var(--ion-color-step-400, var(--ion-text-color-step-600, #999999))}.sc-ion-label-ios-h.in-item-color.sc-ion-label-ios-s>p{color:inherit}.sc-ion-label-ios-s h2:last-child,.sc-ion-label-ios-s h3:last-child,.sc-ion-label-ios-s h4:last-child,.sc-ion-label-ios-s h5:last-child,.sc-ion-label-ios-s h6:last-child,.sc-ion-label-ios-s p:last-child{margin-bottom:0}";
 const IonLabelIosStyle0 = labelIosCss;
 
 const labelMdCss = ".item.sc-ion-label-md-h,.item .sc-ion-label-md-h{--color:initial;display:block;color:var(--color);font-family:var(--ion-font-family, inherit);font-size:inherit;text-overflow:ellipsis;-webkit-box-sizing:border-box;box-sizing:border-box}.ion-color.sc-ion-label-md-h{color:var(--ion-color-base)}.ion-text-nowrap.sc-ion-label-md-h{overflow:hidden}.item-interactive-disabled.sc-ion-label-md-h:not(.item-multiple-inputs),.item-interactive-disabled:not(.item-multiple-inputs) .sc-ion-label-md-h{cursor:default;opacity:0.3;pointer-events:none}.item-input.sc-ion-label-md-h,.item-input .sc-ion-label-md-h{-ms-flex:initial;flex:initial;max-width:200px;pointer-events:none}.item-textarea.sc-ion-label-md-h,.item-textarea .sc-ion-label-md-h{-ms-flex-item-align:baseline;align-self:baseline}.item-skeleton-text.sc-ion-label-md-h,.item-skeleton-text .sc-ion-label-md-h{overflow:hidden}.label-fixed.sc-ion-label-md-h{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.label-stacked.sc-ion-label-md-h,.label-floating.sc-ion-label-md-h{margin-bottom:0;-ms-flex-item-align:stretch;align-self:stretch;width:auto;max-width:100%}.label-no-animate.label-floating.sc-ion-label-md-h{-webkit-transition:none;transition:none}.sc-ion-label-md-s h1,.sc-ion-label-md-s h2,.sc-ion-label-md-s h3,.sc-ion-label-md-s h4,.sc-ion-label-md-s h5,.sc-ion-label-md-s h6{text-overflow:inherit;overflow:inherit}.ion-text-wrap.sc-ion-label-md-h{line-height:1.5}.label-stacked.sc-ion-label-md-h,.label-floating.sc-ion-label-md-h{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-transform-origin:top left;transform-origin:top left}.label-stacked.label-rtl.sc-ion-label-md-h,.label-floating.label-rtl.sc-ion-label-md-h{-webkit-transform-origin:top right;transform-origin:top right}.label-stacked.sc-ion-label-md-h{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1)}.label-floating.sc-ion-label-md-h{-webkit-transform:translateY(96%);transform:translateY(96%);-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.ion-focused.label-floating.sc-ion-label-md-h,.ion-focused .label-floating.sc-ion-label-md-h,.item-has-focus.label-floating.sc-ion-label-md-h,.item-has-focus .label-floating.sc-ion-label-md-h,.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating,.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h,.item-has-value.label-floating.sc-ion-label-md-h,.item-has-value .label-floating.sc-ion-label-md-h{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75)}.ion-focused.label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused .label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused.label-floating.sc-ion-label-md-h:not(.ion-color),.ion-focused .label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus.label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--ion-color-primary, #0054e9)}.ion-focused.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.ion-focused.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--ion-color-contrast)}.ion-invalid.ion-touched.label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-invalid.ion-touched .label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-invalid.ion-touched.label-floating.sc-ion-label-md-h:not(.ion-color),.ion-invalid.ion-touched .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--highlight-color-invalid)}.sc-ion-label-md-s h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:1.5rem;font-weight:normal}.sc-ion-label-md-s h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:1rem;font-weight:normal}.sc-ion-label-md-s h3,.sc-ion-label-md-s h4,.sc-ion-label-md-s h5,.sc-ion-label-md-s h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:0.875rem;font-weight:normal;line-height:normal}.sc-ion-label-md-s p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:0.875rem;line-height:1.25rem;text-overflow:inherit;overflow:inherit}.sc-ion-label-md-s>p{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.sc-ion-label-md-h.in-item-color.sc-ion-label-md-s>p{color:inherit}";
@@ -63,13 +63,13 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: '6353a70565ef6fbbbf4042b000e536c61bcf99a9', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c2c0f388dab910d294efb9fbb409ee4ef829c1ed', class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: '6ef9c2758c0168442aa84941af0a6cec1ef1ec21' })));
+            }) }, h("slot", { key: '4de6b69950f417873a13c851018ec31ea2686f0a' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/list-header.js

@@ -22,10 +22,10 @@ const ListHeader = /*@__PURE__*/ proxyCustomElement(class ListHeader extends HTM
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'fb78bd8601cbd7b90ec84a96e0c8325be1132b1e', class: createColorClasses(this.color, {
+        return (h(Host, { key: '7e2e050f13722f2b870a2415d99a9e631e9ca267', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '2580ad49f3a54973e15f14d645a1e55a6fa066ac', class: "list-header-inner" }, h("slot", { key: '677b2e2ec8eeb3ae6ad329e86c76451cf3ae6c2f' }))));
+            }) }, h("div", { key: '6117bebc45800d874e9b75355476fbced5cc8398', class: "list-header-inner" }, h("slot", { key: '9165fb274cd2c45a5a65c271d8b1f30e8a00c890' }))));
     }
     static get style() { return {
         ios: IonListHeaderIosStyle0,

package/components/list.js

@@ -33,7 +33,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
     render() {
         const mode = getIonMode(this);
         const { lines, inset } = this;
-        return (h(Host, { key: '5ff2b0b3989cc99ce17abb8bcd7ec1847940d1ec', role: "list", class: {
+        return (h(Host, { key: '8bde220025a7eeca6da075379c6487c4c9bdddc1', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,

package/components/overlays.js

@@ -225,7 +225,7 @@ const trapKeyboardFocus = (ev, doc) => {
      * behind the sheet should be focusable until
      * the backdrop is enabled.
      */
-    if (lastOverlay.classList.contains('ion-disable-focus-trap')) {
+    if (lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS)) {
         return;
     }
     const trapScopedFocus = () => {
@@ -900,5 +900,6 @@ const revealOverlaysToScreenReaders = () => {
         }
     }
 };
+const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
 
-export { BACKDROP as B, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getPresentedOverlay as o, pickerController as p, focusLastDescendant as q, safeCall as s, toastController as t };
+export { BACKDROP as B, FOCUS_TRAP_DISABLE_CLASS as F, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getPresentedOverlay as o, pickerController as p, focusLastDescendant as q, safeCall as s, toastController as t };

package/components/picker-column-option.js

@@ -86,10 +86,10 @@ const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOp
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'c743c6ef44bb9f765cc15b3b5d2864de6520203a', class: createColorClasses(color, {
+        return (h(Host, { key: 'cc4435a0ce0e55be1321bcabaf342ed68cf5ba1e', class: createColorClasses(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("button", { key: '4c3d9eb245c52b2c007f727e145cfb55759bd7a9', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: '4c907d2187cbe9d5941e27f2b12578e2b7271461' }))));
+            }) }, h("button", { key: '0187fb967771e0787807a8538dce4e59f6a98565', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'dbe52552f3f27332816748c12d929cc81060841d' }))));
     }
     get el() { return this; }
     static get watchers() { return {