@ionic/core 8.4.4-dev.11740669619.1b5165be → 8.4.4-dev.11740684970.1b945277

package/hydrate/index.js

@@ -2710,16 +2710,6 @@ const shallowEqualStringMap = (map1, map2) => {
     }
     return true;
 };
-const getNextSiblingOfType = (element) => {
-    let sibling = element.nextSibling;
-    while (sibling) {
-        if (sibling.nodeType === Node.ELEMENT_NODE && sibling !== null) {
-            return sibling;
-        }
-        sibling = sibling.nextSibling;
-    }
-    return null;
-};
 
 /* Ionicons v7.2.2, ES Modules */
 const arrowBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='square' stroke-miterlimit='10' stroke-width='48' d='M244 400L100 256l144-144M120 256h292' class='ionicon-fill-none'/></svg>";
@@ -3227,9 +3217,12 @@ let accordionIds = 0;
  * @param message - The string message to be logged to the console.
  */
 const printIonWarning = (message, ...params) => {
-    return console.warn(`[Ionic Warning]: ${message}`, ...params);
+    const logLevel = config.get('logLevel', "WARN" /* LogLevel.WARN */);
+    if (["WARN" /* LogLevel.WARN */].includes(logLevel)) {
+        return console.warn(`[Ionic Warning]: ${message}`, ...params);
+    }
 };
-/*
+/**
  * Logs an error to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
  *
@@ -3237,7 +3230,10 @@ const printIonWarning = (message, ...params) => {
  * @param params - Additional arguments to supply to the console.error.
  */
 const printIonError = (message, ...params) => {
-    return console.error(`[Ionic Error]: ${message}`, ...params);
+    const logLevel = config.get('logLevel', "ERROR" /* LogLevel.ERROR */);
+    if (["ERROR" /* LogLevel.ERROR */, "WARN" /* LogLevel.WARN */].includes(logLevel)) {
+        return console.error(`[Ionic Error]: ${message}`, ...params);
+    }
 };
 /**
  * Prints an error informing developers that an implementation requires an element to be used
@@ -8501,6 +8497,7 @@ class Checkbox {
         this.labelPlacement = 'start';
         this.justify = undefined;
         this.alignment = undefined;
+        this.required = false;
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
@@ -8512,11 +8509,11 @@ class Checkbox {
         }
     }
     render() {
-        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
+        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
         const mode = getIonMode$1(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: '6dc787e1100521d08c4900104e1a3e2f594e919f', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '07a5884062dd256b570e856270c74a5a09d2f2a5', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -8526,10 +8523,10 @@ class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, hAsync("label", { key: '68222fb736a5ec3f2e488649b0e2ce0417dcb224', class: "checkbox-wrapper" }, hAsync("input", Object.assign({ key: 'f12962d7e9b19c744cfdbdeccc67ae7f5d080281', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), hAsync("div", { key: 'c72df2699414b1e5a41a1bc267bc634f0c93dcff', class: {
+            }), onClick: this.onClick }, hAsync("label", { key: '3439d546e8b60187421db698eab63a0bdd31c973', class: "checkbox-wrapper" }, hAsync("input", Object.assign({ key: '9f45cf7dbdedcf01ec132c11e16979adb1aa102f', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), hAsync("div", { key: '4e882f98939cc4b7c7ab7459c751d3f4bb2023fe', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, hAsync("slot", { key: 'a2a80285178a7e0e3b536fc9ca26b8b444aa4307' })), hAsync("div", { key: 'c2b05e0d1fe8df5dcd72858220b5ff51ecaee4cc', class: "native-wrapper" }, hAsync("svg", { key: 'ee24913fded72258ebd9713654a6dba92a18fcf7', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label" }, hAsync("slot", { key: '0abda81297a086d02c4a56af75005547971dfcfe' })), hAsync("div", { key: '36489ea3f48a7d0ec46b77c243f9f253ef5c2b3b', class: "native-wrapper" }, hAsync("svg", { key: '4c53b52f5e93752672a34eb6f180b75fa9af9046', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (hAsync("path", { d: "M6 12L18 12", part: "mark" })) : (hAsync("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
@@ -8556,6 +8553,7 @@ class Checkbox {
             "labelPlacement": [1, "label-placement"],
             "justify": [1],
             "alignment": [1],
+            "required": [4],
             "setFocus": [64]
         },
         "$listeners$": undefined,
@@ -15903,11 +15901,11 @@ class ItemDivider {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '6cff318230a9b2a9db529df154285d3dd9822efe', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7cb307fb16d74eac6138460aad469d8aa2cb44aa', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, hAsync("slot", { key: 'eb50dfab74ab0fd13697db17ecd60e8fa0bf1750', name: "start" }), hAsync("div", { key: '2806efd89d086f4fb844a479d9c095e1e0775713', class: "item-divider-inner" }, hAsync("div", { key: '77b7d5fa987e5f1c26d8023cd1f974a8a263a3de', class: "item-divider-wrapper" }, hAsync("slot", { key: 'dbafb0deb140a19a2a9748fd5b48760c39c6fd2e' })), hAsync("slot", { key: 'ef9a848fe21e84ef21cd273b8a4d9f95f558175b', name: "end" }))));
+            }) }, hAsync("slot", { key: '0f3e94dfa849350b9863d7fc4b68cb5cf1b3e205', name: "start" }), hAsync("div", { key: '3a806bbd2a569890a91c54fec6fe9cd6e69ec924', class: "item-divider-inner" }, hAsync("div", { key: '41df8574ba468669dd136a282195f281c4d181ff', class: "item-divider-wrapper" }, hAsync("slot", { key: '1e30568d695bc42595a71232a1baac6d9e8a598d' })), hAsync("slot", { key: '6f8e6b6fb3216bb1f1ac738931e3ba16654ca8d7', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -15939,7 +15937,7 @@ class ItemGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'f9ffe0290d3fa546494fe55f952d8554f2a8abf8', role: "group", class: {
+        return (hAsync(Host, { key: 'a95b74fed5ce0888eca195ed718f7bfaa53fa86c', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,
@@ -16007,12 +16005,12 @@ class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '89310624997821858c1abde60c0ffb142ca466e0', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'a5acf613ba8d0906abfb08a5865df845f7c82373', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, hAsync(TagType, Object.assign({ key: 'e4dfbb3048eed03a7f7e84c6f75545e0ca9b45fb' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: 'dffcf437fbdc15f2e7a19e60a015e90c73c8377d', class: "button-inner" }, hAsync("slot", { key: '48a23512e0601e062118d8b2c46c8bb96f25509f', name: "top" }), hAsync("div", { key: '952a9a9aa3a476aa1f4408d7e208bf9e916b8c30', class: "horizontal-wrapper" }, hAsync("slot", { key: 'f8d18a61c1ecec4a22a55443cf72bbc51383b64f', name: "start" }), hAsync("slot", { key: '1f9f219e6f879d2e0bf6d80cf0d3f518eb14ce0e', name: "icon-only" }), hAsync("slot", { key: 'a55adcdbe68131e5b1855c2dd45dd9454ab544fb' }), hAsync("slot", { key: '3c4c85a4fbb7efc797d8bc5adf6d238da022ff9f', name: "end" })), hAsync("slot", { key: '503c7e4b306745c523f57f24399ea06ba9b1e21d', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'b0e270b0c4f3ff9f9b6d74bad12a9278d7633226' }))));
+            }) }, hAsync(TagType, Object.assign({ key: 'cc0100d587cc4ba680d926d4754511c40a7b41be' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: 'bf2409257aec9994e5dd8e31ec40ada61970dd46', class: "button-inner" }, hAsync("slot", { key: 'c8cc3a3ffa5d586978860c3a6744232d8cb209c8', name: "top" }), hAsync("div", { key: '09fd76f4e25bb174540c68e67617b1676ea3039a', class: "horizontal-wrapper" }, hAsync("slot", { key: 'c9228eb1219a3130825bce989fb9ed40f3b4060b', name: "start" }), hAsync("slot", { key: '5afa4950062d8dafbe07073ecb49a3f3bb9ef840', name: "icon-only" }), hAsync("slot", { key: '25a2b5c35c83e617cfeba3d261c00505af5eb10c' }), hAsync("slot", { key: 'ac11cc02e44a335288d8f7d8ad4a7f09156f57b8', name: "end" })), hAsync("slot", { key: '45b086ba9a8ba1ee3e8f2f1b581120cabca80dc4', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", { key: '4def7e98ac861c98da78e3b47c9cdb17f1126a68' }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -16059,7 +16057,7 @@ class ItemOptions {
     render() {
         const mode = getIonMode$1(this);
         const isEnd = isEndSide(this.side);
-        return (hAsync(Host, { key: '6d91399d2aaaa81d514d0bbc8dffe53eeec25d36', class: {
+        return (hAsync(Host, { key: 'e73d542ea800d953373c478b287f90bac63c4a29', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,
@@ -16521,7 +16519,7 @@ class ItemSliding {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '47a3edd2ef2080ed9cfc2784277dea09785c7dc4', class: {
+        return (hAsync(Host, { key: 'b88f1f7cd0a5625dbccc0ee0f771c79a1338c5c8', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -16630,13 +16628,13 @@ class Label {
     render() {
         const position = this.position;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '6353a70565ef6fbbbf4042b000e536c61bcf99a9', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'aa8cda765cf7813b02adbc39cff7dec21fc2d730', class: createColorClasses$1(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',
-            }) }, hAsync("slot", { key: '6ef9c2758c0168442aa84941af0a6cec1ef1ec21' })));
+            }) }, hAsync("slot", { key: '297af5559f2ccb3b2d06ea00e074aa96c3e5235c' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16738,10 +16736,10 @@ class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'fb78bd8601cbd7b90ec84a96e0c8325be1132b1e', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'f6e2de02ec55e3c64d129a52fb154e9d4e36ea98', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, hAsync("div", { key: '2580ad49f3a54973e15f14d645a1e55a6fa066ac', class: "list-header-inner" }, hAsync("slot", { key: '677b2e2ec8eeb3ae6ad329e86c76451cf3ae6c2f' }))));
+            }) }, hAsync("div", { key: 'a38b47618205ccdd76bb8e406e37522b1c087780', class: "list-header-inner" }, hAsync("slot", { key: '5afd06a7fbdf06bef5b7b27723515133fae66004' }))));
     }
     static get style() { return {
         ios: IonListHeaderIosStyle0,
@@ -17010,9 +17008,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: 'd97f536b7f443ea19a2bbf2dcbc7f546b8e0a092', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '016c85ddadecf0f7e50912d42301e2b4ba940709', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '6cd39bd7912fd080ab59d041644054c96d238ea9', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'c14ca5a9308844f11bcb010257e15208a75b39bc', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '118bceefa8e1cf8b225a858f224e6d919cf03c26', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '490d6e8ae4433835fe273162d7b90deab944fb39', class: "loading-spinner" }, hAsync("ion-spinner", { key: 'c5cf6549c43df4cb23814b3e62ec4d9e7ea2b64f', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '2b888362122d3b66b0492d53b0c21bd6a2a97501', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: 'ffe727b8b32d635d21c625681b6048c42db9976b', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '0945a45abe13968854ead32235522a6f7d60ac28', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '0c0fd2a371250e0b49781c76147ee7a9c455dc9b', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: 'f78773f16ae5fbfdc1c7a98d70ac8eb1f71c7526', class: "loading-spinner" }, hAsync("ion-spinner", { key: '6381b30b3bde40f8bf39719f231679a72c2058ef', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '1d3ae05e6bb80756655c110c3332150c721963c3', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18020,14 +18018,14 @@ class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (hAsync(Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(Host, { key: 'e67a2f0596e27d7ddf9ef4b65b14cc1b6d1572d2', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, hAsync("div", { key: '894e680fe227534711128c7aca980964ddb5a08a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: 'e9f5934518dc0cceaeadf1f2820614595fec6bc9' })), hAsync("ion-backdrop", { key: '7282077817657b1bb6c155f1404c0a519fece993', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, hAsync("div", { key: '976d3e7f93bc7946e835ddedc1645f2f83544c6c', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: 'e26aea346260736210604815139138f1c602add7' })), hAsync("ion-backdrop", { key: '7d27b0d2f01b2bd3dc3b3342e79c9207c82b1356', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18130,7 +18128,7 @@ class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (hAsync(Host, { key: '7ec29715ce7926b7c2b08f3d9cac8aaa16b3dc28', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'a2b925ae91161c18e95d2cb94f32ae7f9df60186', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -18139,7 +18137,7 @@ class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, hAsync("button", Object.assign({ key: 'd4c5929264af3ba0328118bcc27d2ab7ef5d3809' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '7bfa6e9a93105486623d044861e879ec79ff64f1', class: "button-inner" }, hAsync("slot", { key: '071ab58e285832fc188706166f5547d45d501ac5' }, hAsync("ion-icon", { key: '918ec5d791921de9821c347af4f65f97dd94aabf', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { key: '00ffdd53f635e706c1dbd01b8e7944498650fe81', type: "unbounded" }))));
+            }) }, hAsync("button", Object.assign({ key: '50335dd8aec7567cc9f7132a8583f3cd82398880' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '9f2ec8f6c7994c0fb5441ee104e42efde0795f38', class: "button-inner" }, hAsync("slot", { key: '00c044e0a9fb96761e8cff59cd0dbf5e4440f8e9' }, hAsync("ion-icon", { key: 'dc7c8c15f3a483c78dbf831dc9cd1bfd0c418ca2', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { key: '733f0a1e0d6a145cfe405b73ebc68e1b0522aca5', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -18188,10 +18186,10 @@ class MenuToggle {
     render() {
         const mode = getIonMode$1(this);
         const hidden = this.autoHide && !this.visible;
-        return (hAsync(Host, { key: '7c27ea5b0795676bf5cb33e1f83aa142c197f64e', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (hAsync(Host, { key: 'bc1dfcc3a4d677e31d5b962567122c1912354dd3', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, hAsync("slot", { key: '69f187becedc0fe34603d41d279f043cf0fdf776' })));
+            } }, hAsync("slot", { key: '4b2c290cbe8fd222249ea1e85c5f93fb9ab368f8' })));
     }
     static get style() { return IonMenuToggleStyle0; }
     static get cmpMeta() { return {
@@ -19031,7 +19029,7 @@ const computeDuration = (remaining, velocity) => {
 };
 
 const createSheetEnterAnimation = (opts) => {
-    const { currentBreakpoint, backdropBreakpoint } = opts;
+    const { currentBreakpoint, backdropBreakpoint, expandToScroll } = opts;
     /**
      * If the backdropBreakpoint is undefined, then the backdrop
      * should always fade in. If the backdropBreakpoint came before the
@@ -19051,7 +19049,16 @@ const createSheetEnterAnimation = (opts) => {
         { offset: 0, opacity: 1, transform: 'translateY(100%)' },
         { offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
     ]);
-    return { wrapperAnimation, backdropAnimation };
+    /**
+     * This allows the content to be scrollable at any breakpoint.
+     */
+    const contentAnimation = !expandToScroll
+        ? createAnimation('contentAnimation').keyframes([
+            { offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
+            { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
+        ])
+        : undefined;
+    return { wrapperAnimation, backdropAnimation, contentAnimation };
 };
 const createSheetLeaveAnimation = (opts) => {
     const { currentBreakpoint, backdropBreakpoint } = opts;
@@ -19086,22 +19093,68 @@ const createEnterAnimation$1 = () => {
     })
         .afterClearStyles(['pointer-events']);
     const wrapperAnimation = createAnimation().fromTo('transform', 'translateY(100vh)', 'translateY(0vh)');
-    return { backdropAnimation, wrapperAnimation };
+    return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
 };
 /**
  * iOS Modal Enter Animation for the Card presentation style
  */
 const iosEnterAnimation$3 = (baseEl, opts) => {
-    const { presentingEl, currentBreakpoint } = opts;
+    const { presentingEl, currentBreakpoint, expandToScroll } = opts;
     const root = getElementRoot(baseEl);
-    const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$1();
+    const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$1();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
     wrapperAnimation.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow')).beforeStyles({ opacity: 1 });
+    // The content animation is only added if scrolling is enabled for
+    // all the breakpoints.
+    !expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
     const baseAnimation = createAnimation('entering-base')
         .addElement(baseEl)
         .easing('cubic-bezier(0.32,0.72,0,1)')
         .duration(500)
-        .addAnimation(wrapperAnimation);
+        .addAnimation([wrapperAnimation])
+        .beforeAddWrite(() => {
+        if (expandToScroll) {
+            // Scroll can only be done when the modal is fully expanded.
+            return;
+        }
+        /**
+         * There are some browsers that causes flickering when
+         * dragging the content when scroll is enabled at every
+         * breakpoint. This is due to the wrapper element being
+         * transformed off the screen and having a snap animation.
+         *
+         * A workaround is to clone the footer element and append
+         * it outside of the wrapper element. This way, the footer
+         * is still visible and the drag can be done without
+         * flickering. The original footer is hidden until the modal
+         * is dismissed. This maintains the animation of the footer
+         * when the modal is dismissed.
+         *
+         * The workaround needs to be done before the animation starts
+         * so there are no flickering issues.
+         */
+        const ionFooter = baseEl.querySelector('ion-footer');
+        /**
+         * This check is needed to prevent more than one footer
+         * from being appended to the shadow root.
+         * Otherwise, iOS and MD enter animations would append
+         * the footer twice.
+         */
+        const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
+        if (ionFooter && !ionFooterAlreadyAppended) {
+            const footerHeight = ionFooter.clientHeight;
+            const clonedFooter = ionFooter.cloneNode(true);
+            baseEl.shadowRoot.appendChild(clonedFooter);
+            ionFooter.style.setProperty('display', 'none');
+            ionFooter.setAttribute('aria-hidden', 'true');
+            // Padding is added to prevent some content from being hidden.
+            const page = baseEl.querySelector('.ion-page');
+            page.style.setProperty('padding-bottom', `${footerHeight}px`);
+        }
+    });
+    if (contentAnimation) {
+        baseAnimation.addAnimation(contentAnimation);
+    }
     if (presentingEl) {
         const isMobile = window.innerWidth < 768;
         const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
@@ -19179,7 +19232,7 @@ const createLeaveAnimation$1 = () => {
  * iOS Modal Leave Animation
  */
 const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
-    const { presentingEl, currentBreakpoint } = opts;
+    const { presentingEl, currentBreakpoint, expandToScroll } = opts;
     const root = getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation$1();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
@@ -19188,7 +19241,29 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
         .addElement(baseEl)
         .easing('cubic-bezier(0.32,0.72,0,1)')
         .duration(duration)
-        .addAnimation(wrapperAnimation);
+        .addAnimation(wrapperAnimation)
+        .beforeAddWrite(() => {
+        if (expandToScroll) {
+            // Scroll can only be done when the modal is fully expanded.
+            return;
+        }
+        /**
+         * If expandToScroll is disabled, we need to swap
+         * the visibility to the original, so the footer
+         * dismisses with the modal and doesn't stay
+         * until the modal is removed from the DOM.
+         */
+        const ionFooter = baseEl.querySelector('ion-footer');
+        if (ionFooter) {
+            const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
+            ionFooter.style.removeProperty('display');
+            ionFooter.removeAttribute('aria-hidden');
+            clonedFooter.style.setProperty('display', 'none');
+            clonedFooter.setAttribute('aria-hidden', 'true');
+            const page = baseEl.querySelector('.ion-page');
+            page.style.removeProperty('padding-bottom');
+        }
+    });
     if (presentingEl) {
         const isMobile = window.innerWidth < 768;
         const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
@@ -19266,22 +19341,69 @@ const createEnterAnimation = () => {
         { offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
         { offset: 1, opacity: 1, transform: `translateY(0px)` },
     ]);
-    return { backdropAnimation, wrapperAnimation };
+    return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
 };
 /**
  * Md Modal Enter Animation
  */
 const mdEnterAnimation$2 = (baseEl, opts) => {
-    const { currentBreakpoint } = opts;
+    const { currentBreakpoint, expandToScroll } = opts;
     const root = getElementRoot(baseEl);
-    const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
+    const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
     wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
-    return createAnimation()
+    // The content animation is only added if scrolling is enabled for
+    // all the breakpoints.
+    expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
+    const baseAnimation = createAnimation()
         .addElement(baseEl)
         .easing('cubic-bezier(0.36,0.66,0.04,1)')
         .duration(280)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
+        .addAnimation([backdropAnimation, wrapperAnimation])
+        .beforeAddWrite(() => {
+        if (expandToScroll) {
+            // Scroll can only be done when the modal is fully expanded.
+            return;
+        }
+        /**
+         * There are some browsers that causes flickering when
+         * dragging the content when scroll is enabled at every
+         * breakpoint. This is due to the wrapper element being
+         * transformed off the screen and having a snap animation.
+         *
+         * A workaround is to clone the footer element and append
+         * it outside of the wrapper element. This way, the footer
+         * is still visible and the drag can be done without
+         * flickering. The original footer is hidden until the modal
+         * is dismissed. This maintains the animation of the footer
+         * when the modal is dismissed.
+         *
+         * The workaround needs to be done before the animation starts
+         * so there are no flickering issues.
+         */
+        const ionFooter = baseEl.querySelector('ion-footer');
+        /**
+         * This check is needed to prevent more than one footer
+         * from being appended to the shadow root.
+         * Otherwise, iOS and MD enter animations would append
+         * the footer twice.
+         */
+        const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
+        if (ionFooter && !ionFooterAlreadyAppended) {
+            const footerHeight = ionFooter.clientHeight;
+            const clonedFooter = ionFooter.cloneNode(true);
+            baseEl.shadowRoot.appendChild(clonedFooter);
+            ionFooter.style.setProperty('display', 'none');
+            ionFooter.setAttribute('aria-hidden', 'true');
+            // Padding is added to prevent some content from being hidden.
+            const page = baseEl.querySelector('.ion-page');
+            page.style.setProperty('padding-bottom', `${footerHeight}px`);
+        }
+    });
+    if (contentAnimation) {
+        baseAnimation.addAnimation(contentAnimation);
+    }
+    return baseAnimation;
 };
 
 const createLeaveAnimation = () => {
@@ -19296,18 +19418,41 @@ const createLeaveAnimation = () => {
  * Md Modal Leave Animation
  */
 const mdLeaveAnimation$2 = (baseEl, opts) => {
-    const { currentBreakpoint } = opts;
+    const { currentBreakpoint, expandToScroll } = opts;
     const root = getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
     wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
-    return createAnimation()
+    const baseAnimation = createAnimation()
         .easing('cubic-bezier(0.47,0,0.745,0.715)')
         .duration(200)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
+        .addAnimation([backdropAnimation, wrapperAnimation])
+        .beforeAddWrite(() => {
+        if (expandToScroll) {
+            // Scroll can only be done when the modal is fully expanded.
+            return;
+        }
+        /**
+         * If expandToScroll is disabled, we need to swap
+         * the visibility to the original, so the footer
+         * dismisses with the modal and doesn't stay
+         * until the modal is removed from the DOM.
+         */
+        const ionFooter = baseEl.querySelector('ion-footer');
+        if (ionFooter) {
+            const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
+            ionFooter.style.removeProperty('display');
+            ionFooter.removeAttribute('aria-hidden');
+            clonedFooter.style.setProperty('display', 'none');
+            clonedFooter.setAttribute('aria-hidden', 'true');
+            const page = baseEl.querySelector('.ion-page');
+            page.style.removeProperty('padding-bottom');
+        }
+    });
+    return baseAnimation;
 };
 
-const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
+const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
@@ -19324,6 +19469,10 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
             { offset: 1, transform: 'translateY(100%)' },
         ],
         BACKDROP_KEYFRAMES: backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop,
+        CONTENT_KEYFRAMES: [
+            { offset: 0, maxHeight: '100%' },
+            { offset: 1, maxHeight: '0%' },
+        ],
     };
     const contentEl = baseEl.querySelector('ion-content');
     const height = wrapperEl.clientHeight;
@@ -19331,10 +19480,11 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     let offset = 0;
     let canDismissBlocksGesture = false;
     const canDismissMaxStep = 0.95;
-    const wrapperAnimation = animation.childAnimations.find((ani) => ani.id === 'wrapperAnimation');
-    const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
     const maxBreakpoint = breakpoints[breakpoints.length - 1];
     const minBreakpoint = breakpoints[0];
+    const wrapperAnimation = animation.childAnimations.find((ani) => ani.id === 'wrapperAnimation');
+    const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
+    const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
     const enableBackdrop = () => {
         baseEl.style.setProperty('pointer-events', 'auto');
         backdropEl.style.setProperty('pointer-events', 'auto');
@@ -19357,6 +19507,31 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          */
         baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
     };
+    /**
+     * Toggles the visible modal footer when `expandToScroll` is disabled.
+     * @param footer The footer to show.
+     */
+    const swapFooterVisibility = (footer) => {
+        const originalFooter = baseEl.querySelector('ion-footer');
+        if (!originalFooter) {
+            return;
+        }
+        const clonedFooter = wrapperEl.nextElementSibling;
+        const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
+        const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
+        footerToShow.style.removeProperty('display');
+        footerToShow.removeAttribute('aria-hidden');
+        const page = baseEl.querySelector('.ion-page');
+        if (footer === 'original') {
+            page.style.removeProperty('padding-bottom');
+        }
+        else {
+            const pagePadding = footerToShow.clientHeight;
+            page.style.setProperty('padding-bottom', `${pagePadding}px`);
+        }
+        footerToHide.style.setProperty('display', 'none');
+        footerToHide.setAttribute('aria-hidden', 'true');
+    };
     /**
      * After the entering animation completes,
      * we need to set the animation to go from
@@ -19368,6 +19543,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     if (wrapperAnimation && backdropAnimation) {
         wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
         backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
+        contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
         animation.progressStart(true, 1 - currentBreakpoint);
         /**
          * If backdrop is not enabled, then content
@@ -19384,7 +19560,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
             disableBackdrop();
         }
     }
-    if (contentEl && currentBreakpoint !== maxBreakpoint) {
+    if (contentEl && currentBreakpoint !== maxBreakpoint && expandToScroll) {
         contentEl.scrollY = false;
     }
     const canStart = (detail) => {
@@ -19398,6 +19574,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          */
         const contentEl = findClosestIonContent(detail.event.target);
         currentBreakpoint = getCurrentBreakpoint();
+        /**
+         * If we have expandToScroll disabled, we should not allow the swipe gesture to start
+         * if the content is being swiped.
+         */
+        if (!expandToScroll && contentEl) {
+            return false;
+        }
         if (currentBreakpoint === 1 && contentEl) {
             /**
              * The modal should never swipe to close on the content with a refresher.
@@ -19428,6 +19611,15 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * Remove undefined check
          */
         canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
+        /**
+         * If expandToScroll is disabled, we need to swap
+         * the footer visibility to the original, so if the modal
+         * is dismissed, the footer dismisses with the modal
+         * and doesn't stay on the screen after the modal is gone.
+         */
+        if (!expandToScroll) {
+            swapFooterVisibility('original');
+        }
         /**
          * If we are pulling down, then it is possible we are pulling on the content.
          * We do not want scrolling to happen at the same time as the gesture.
@@ -19543,6 +19735,19 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
                     opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
                 },
             ]);
+            if (contentAnimation) {
+                /**
+                 * The modal content should scroll at any breakpoint when expandToScroll
+                 * is disabled. In order to do this, the content needs to be completely
+                 * viewable so scrolling can access everything. Otherwise, the default
+                 * behavior would show the content off the screen and only allow
+                 * scrolling when the sheet is fully expanded.
+                 */
+                contentAnimation.keyframes([
+                    { offset: 0, maxHeight: `${(1 - breakpointOffset) * 100}%` },
+                    { offset: 1, maxHeight: `${snapToBreakpoint * 100}%` },
+                ]);
+            }
             animation.progressStep(0);
         }
         /**
@@ -19550,6 +19755,14 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * snapping animation completes.
          */
         gesture.enable(false);
+        /**
+         * If expandToScroll is disabled, we need to swap
+         * the footer visibility to the cloned one so the footer
+         * doesn't flicker when the sheet's height is animated.
+         */
+        if (!expandToScroll && shouldRemainOpen) {
+            swapFooterVisibility('cloned');
+        }
         if (shouldPreventDismiss) {
             handleCanDismiss(baseEl, animation);
         }
@@ -19557,13 +19770,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
             onDismiss();
         }
         /**
-         * If the sheet is going to be fully expanded then we should enable
-         * scrolling immediately. The sheet modal animation takes ~500ms to finish
-         * so if we wait until then there is a visible delay for when scrolling is
-         * re-enabled. Native iOS allows for scrolling on the sheet modal as soon
-         * as the gesture is released, so we align with that.
+         * Enables scrolling immediately if the sheet is about to fully expand
+         * or if it allows scrolling at any breakpoint. Without this, there would
+         * be a ~500ms delay while the modal animation completes, causing a
+         * noticeable lag. Native iOS allows scrolling as soon as the gesture is
+         * released, so we align with that behavior.
          */
-        if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
+        if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
             contentEl.scrollY = true;
         }
         return new Promise((resolve) => {
@@ -19581,6 +19794,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
                         raf(() => {
                             wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
                             backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
+                            contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
                             animation.progressStart(true, 1 - snapToBreakpoint);
                             currentBreakpoint = snapToBreakpoint;
                             onBreakpointChange(currentBreakpoint);
@@ -19633,10 +19847,10 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     };
 };
 
-const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
+const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer ion-toolbar:first-of-type{padding-top:6px}";
 var IonModalIosStyle0 = modalIosCss;
 
-const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0,  40px,  0);transform:translate3d(0,  40px,  0);opacity:0.01}";
+const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0,  40px,  0);transform:translate3d(0,  40px,  0);opacity:0.01}";
 var IonModalMdStyle0 = modalMdCss;
 
 // TODO(FW-2832): types
@@ -19715,6 +19929,7 @@ class Modal {
         this.enterAnimation = undefined;
         this.leaveAnimation = undefined;
         this.breakpoints = undefined;
+        this.expandToScroll = true;
         this.initialBreakpoint = undefined;
         this.backdropBreakpoint = 0;
         this.handle = undefined;
@@ -19930,6 +20145,7 @@ class Modal {
             presentingEl: presentingElement,
             currentBreakpoint: this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
+            expandToScroll: this.expandToScroll,
         });
         /* tslint:disable-next-line */
         if (typeof window !== 'undefined') {
@@ -19980,7 +20196,10 @@ class Modal {
         // should be in the DOM and referenced by now, except
         // for the presenting el
         const animationBuilder = this.leaveAnimation || config.get('modalLeave', iosLeaveAnimation$3);
-        const ani = (this.animation = animationBuilder(el, { presentingEl: this.presentingElement }));
+        const ani = (this.animation = animationBuilder(el, {
+            presentingEl: this.presentingElement,
+            expandToScroll: this.expandToScroll,
+        }));
         const contentEl = findIonContent(el);
         if (!contentEl) {
             printIonContentErrorMsg(el);
@@ -20025,9 +20244,10 @@ class Modal {
             presentingEl: this.presentingElement,
             currentBreakpoint: initialBreakpoint,
             backdropBreakpoint,
+            expandToScroll: this.expandToScroll,
         }));
         ani.progressStart(true, 1);
-        const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
+        const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, this.expandToScroll, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
             if (this.currentBreakpoint !== breakpoint) {
                 this.currentBreakpoint = breakpoint;
                 this.ionBreakpointDidChange.emit({ breakpoint });
@@ -20105,6 +20325,7 @@ class Modal {
             presentingEl: presentingElement,
             currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
+            expandToScroll: this.expandToScroll,
         });
         if (dismissed) {
             const { delegate } = this.getDelegate();
@@ -20190,23 +20411,23 @@ class Modal {
         return true;
     }
     render() {
-        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } = this;
+        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
         const mode = getIonMode$1(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (hAsync(Host, Object.assign({ key: 'b4da5111fe4719fa450c39b2d4bd884a302a7924', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'b58b683d13292c390c480a374a26995052914f94', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: 'c12dbf747e0eb914eaf1331798548ffc7e147763', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'da546ee80c6576b5acc66e959fd5009e0b9a8160', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '306ebe6427440ad5f7ed36d590e562d15a503b75',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: '5e89f1e24ab04c68e517941a9b1fbda8bf9cb4cc', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '807f6b6fce3792a2b1e1b0e18c3de96954477f58', class: "modal-shadow" }), hAsync("div", Object.assign({ key: 'd3dbe8e9a297fef87a6dc155211b6be0cb9f249c',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: 'c5d17e346fe255a7c0cacbbf15c0083f2d09c488', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '12964306d8e911a0777bb87c2e3ea906a85596c2', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: '5cc714170a00b67f3eda0cd1d6f37c1489a99c83' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: 'c59a436723e37414b686763a73fa89b174f9bb39' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20228,6 +20449,7 @@ class Modal {
             "enterAnimation": [16],
             "leaveAnimation": [16],
             "breakpoints": [16],
+            "expandToScroll": [4, "expand-to-scroll"],
             "initialBreakpoint": [2, "initial-breakpoint"],
             "backdropBreakpoint": [2, "backdrop-breakpoint"],
             "handle": [4],
@@ -21155,7 +21377,7 @@ class Nav {
         }
     }
     render() {
-        return hAsync("slot", { key: 'dfe98cb6604a2015a49f41beffebdd2da957dfff' });
+        return hAsync("slot", { key: 'bd958b6ade20eaadbfc9df2bd39629e3f85a1128' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21228,7 +21450,7 @@ class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return hAsync(Host, { key: 'd2f8545b4fbd5aa25ef36eb01dffbc5d35ccfbb9', onClick: this.onClick });
+        return hAsync(Host, { key: 'c43e6b9325e3a38452f0eded9d77a58ee57104e4', onClick: this.onClick });
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -21262,9 +21484,9 @@ class Note {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '10a3495bc21166176986441479f8f7539029d161', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'c9a8080cca174d0e5604940507d99e7d45f54e54', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: 'b6a9459e1b85f608fafd060a4bfeb11637ebe873' })));
+            }) }, hAsync("slot", { key: '9f2a060467de809c4da1882cdcc219a0328d3b7d' })));
     }
     static get style() { return {
         ios: IonNoteIosStyle0,
@@ -22029,11 +22251,11 @@ class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, Object.assign({ key: '0712fa8732141848e50ad2e08e2ba66ef2a48991', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'c823f926c4d2b82628024346646fceca1191cdef', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: 'c997632ef0488698739664012de5a6494de438b6', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '20045054a76cca997b410835fa6b305af22dcb12', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a73a6ac20b685ed9694d4fa95ea236ce5d63fdbf', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '1221cdcc2ff013deeba12170129c8fe78308330c', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: '45038a58430a4251100797b902e7034243137564', class: "picker-columns" }, hAsync("div", { key: 'c579bb69cddd4090912855ffd7f59536280f34b9', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '978c6632d82a97d053b729c9de65dd3af4c4cee2', class: "picker-below-highlight" }))), hAsync("div", { key: 'e7e9dc437a3cf6d559e2cb0df71af69047a2ae31', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '03200d82bd8449103fb7c2ee2b6d6e57db0b5559', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '0d5542240826b2525a32496ad4d1070466ba884b', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '66cccbda315bbb64c52b81aa88d3169456cf8883', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: 'd077c6376c7576723ea9a1137a975aae891d037b', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: 'fd5157aface1ee5530e11e36fdbc861d4365b184', class: "picker-columns" }, hAsync("div", { key: '477638622d52c3d340f841b29c9e36997b95e2f4', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '50a6646f5d3d0a864c2061f461d03143b0ee4aec', class: "picker-below-highlight" }))), hAsync("div", { key: '10952d6729077f9e68523a6a77f89297acf6fc47', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23008,9 +23230,9 @@ class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'c015eb8bc01b3287cbd1d71af0aa311b6be89d36', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (hAsync(Host, { key: '93b0e0ed5bef792e165fd710996ae83ec99e0f49', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (hAsync("div", { key: 'f9de3fe2f5c7ad3256d6e5f44b6d03a2b1f96ffb', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '10f9c12aa174f96c7cf9adc30efbb26695c0aa64', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { key: '1d9c0892ce56e0da9044c79eb953827166f5190b', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (hAsync("div", { key: 'd9ed2d7bef6bcfd04afe865c929148beaf2957d9', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '1e423c0781f299fc64419d593e1ed56540f0bd36', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { key: '87a522206a6e8303ca889216c48b113d5c49ed9a', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23114,10 +23336,10 @@ class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'c743c6ef44bb9f765cc15b3b5d2864de6520203a', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '19dec7c5fa1f464ff09fa97451c94c11ef1432a4', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, hAsync("button", { key: '4c3d9eb245c52b2c007f727e145cfb55759bd7a9', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", { key: '4c907d2187cbe9d5941e27f2b12578e2b7271461' }))));
+            }) }, hAsync("button", { key: 'c8363bb865cdcafac7fef0970ba64ebe17f82fb6', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", { key: 'b0ed822ecb983dcb88c0fa4e9d2d6970566d9b55' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24431,9 +24653,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: 'ffe8b37c9ffb5cac210a7307e6cdfcf78712905b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '135246fb813a5040e13225706eeee1310b212ff0', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '12b3ffa3928b4d56a4f09c3d2f5d493d47b45255', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '2c2862d5c7e75b637973c712b4982bf4978c0cdf', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '0cfacc52afaa7abc28c1b7742889d7a1c23a37ad', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '3ef570c44d4fe7f063dd419008c92c8c40d3cd22', class: "popover-content", part: "content" }, hAsync("slot", { key: '6fc5dfdce20fee1642bc1f05d41b5bf7d1034457' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '2d7b7658b01cc68073d601bfc60223c11e7ac17a', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'ca01271efd4fe554f32a489fbcdfa86c3bc272da', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '65567194726f62e74c3af77611230616b239cd64', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '89321d71a93ea3849edcde9c763690523d1358c8', class: "popover-content", part: "content" }, hAsync("slot", { key: '765b44ef54d422572fef6e119c115ee20623a292' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24525,7 +24747,7 @@ class ProgressBar {
         const mode = getIonMode$1(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (hAsync(Host, { key: '8d8ddf0b26fe33803d3a6168cbedd523d1a888e7', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'd92ae727ceb9849199fb949ab831bb6833a68085', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
@@ -24695,7 +24917,7 @@ class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode$1(this);
         const inItem = hostContext('ion-item', el);
-        return (hAsync(Host, { key: '5a0adab55ad009305de4856fa1b9f93f2279a734', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'c9c6410852560d664372af5ff28e778fc82748f1', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -24706,10 +24928,10 @@ class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: 'f5673a798e6d87868339f046445f707e1d93b7b6', class: "radio-wrapper" }, hAsync("div", { key: 'e9190c06f75a171cab63e3f74ccf771c3ed87005', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: 'b7483c1bd096942d3f14fc6d13c7c0bb3b367e42', class: "radio-wrapper" }, hAsync("div", { key: '3b978fa691b0ec49c8d04bf6c966cc7c034b111c', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, hAsync("slot", { key: '6cedf4e7b3bd03e4a635727dd7b6094bab64af64' })), hAsync("div", { key: '26dd48d9d2848b7f100b732abdc4a3171adde483', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, hAsync("slot", { key: 'c1553adfaf6ed22261654fd04491ea18dc727144' })), hAsync("div", { key: '2defa43821d151d8130683b6b9859aca6ed944d1', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24742,12 +24964,20 @@ class Radio {
 }
 let radioButtonIds = 0;
 
+const radioGroupIosCss = "ion-radio-group{display:block}.supporting-text{line-height:1.5}.error-text{display:none;color:var(--ion-color-danger, #eb445a)}.helper-text{display:block;color:var(--ion-color-step-550, #737373)}.ion-touched.ion-invalid .error-text{display:block}.ion-touched.ion-invalid .helper-text{display:none}ion-list .supporting-text{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}";
+var IonRadioGroupIosStyle0 = radioGroupIosCss;
+
+const radioGroupMdCss = "ion-radio-group{display:block}.supporting-text{line-height:1.5}.error-text{display:none;color:var(--ion-color-danger, #eb445a)}.helper-text{display:block;color:var(--ion-color-step-550, #737373)}.ion-touched.ion-invalid .error-text{display:block}.ion-touched.ion-invalid .helper-text{display:none}ion-list .supporting-text{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}";
+var IonRadioGroupMdStyle0 = radioGroupMdCss;
+
 class RadioGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionChange = createEvent(this, "ionChange", 7);
         this.ionValueChange = createEvent(this, "ionValueChange", 7);
         this.inputId = `ion-rg-${radioGroupIds++}`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
         this.labelId = `${this.inputId}-lbl`;
         this.setRadioTabindex = (value) => {
             const radios = this.getRadios();
@@ -24799,6 +25029,8 @@ class RadioGroup {
         this.compareWith = undefined;
         this.name = this.inputId;
         this.value = undefined;
+        this.helperText = undefined;
+        this.errorText = undefined;
     }
     valueChanged(value) {
         this.setRadioTabindex(value);
@@ -24897,24 +25129,51 @@ class RadioGroup {
         const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
         radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
     }
+    /**
+     * Renders the helper text or error text values
+     */
+    renderHintText() {
+        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const hasHintText = !!helperText || !!errorText;
+        if (!hasHintText) {
+            return;
+        }
+        return (hAsync("div", { class: "supporting-text" }, hAsync("div", { id: helperTextId, class: "helper-text" }, helperText), hAsync("div", { id: errorTextId, class: "error-text" }, errorText)));
+    }
+    getHintTextID() {
+        const { el, helperText, errorText, helperTextId, errorTextId } = this;
+        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+            return errorTextId;
+        }
+        if (helperText) {
+            return helperTextId;
+        }
+        return undefined;
+    }
     render() {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, name, value, false);
-        return hAsync(Host, { key: 'a853e38901f0f4ba17bbf21ebb5da5b5c20b327e', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return (hAsync(Host, { key: 'cac92777297029d7fd1b6af264d92850e35dfbba', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: mode }, this.renderHintText(), hAsync("slot", { key: '7f9bd643f5e29ca4b7dee8abd65da88118740192' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": ["valueChanged"]
     }; }
+    static get style() { return {
+        ios: IonRadioGroupIosStyle0,
+        md: IonRadioGroupMdStyle0
+    }; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 36,
         "$tagName$": "ion-radio-group",
         "$members$": {
             "allowEmptySelection": [4, "allow-empty-selection"],
             "compareWith": [1, "compare-with"],
             "name": [1],
             "value": [1032],
+            "helperText": [1, "helper-text"],
+            "errorText": [1, "error-text"],
             "setFocus": [64]
         },
         "$listeners$": [[4, "keydown", "onKeydown"]],
@@ -25534,7 +25793,7 @@ class Range {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (hAsync(Host, { key: '05c699caaead7cc74deaae2a958c4632191473a8', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '657e59ea74a41a279f96f3fe50752541941b3d00', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -25543,10 +25802,10 @@ class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, hAsync("label", { key: '959837bcc48c4bda33ae1f62b66ef444329a2961', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: 'a434c6b5c26f57f52b3af98d881e7e6a179c89fc', class: {
+            }) }, hAsync("label", { key: '96ad0cfec290bd25456925927e7638a0659a00c9', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: 'ca61076e921551c5de35c9d23262326a94c90ec5', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '87df1037b6b3337bd1fab05d33a26bf658c57914', class: "native-wrapper" }, hAsync("slot", { key: '2cb88f101da49b70aeae29b0bf5445fac241bb2f', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '17b835cfb2bd9b8e1957afd425543ff02b913d83', name: "end" })))));
+            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '8f0f832bff583f68d65a25d3c8e92559edd5c134', class: "native-wrapper" }, hAsync("slot", { key: '4faaa86fd7e912f10ce19fc4ae47ed3407240585', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: 'a78d24ceb84ea094a37dc45f912bc457de3ee3e3', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26447,7 +26706,7 @@ class Refresher {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '9d4ac22988aec2c6af0b0c90934c52f62f0e4ce3', slot: "fixed", class: {
+        return (hAsync(Host, { key: 'a3ef3ff131f96f85b27a3aba05aa6d5341e7abf8', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -26675,7 +26934,7 @@ class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '19633bbcf02e3dba885d6bdcdaf2269bf4c8e2f5', class: mode }, hAsync("div", { key: '28922e434a55a6cac0476fe2bee56941ce0d1c02', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: 'fe575bf996021884677e9b23a3215d63caf894f5', class: "refresher-pulling-icon" }, hAsync("div", { key: '59fe12297fd95bc33b8df8cd35316e2a1c084d91', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: 'af9cc013ae04945c140b2865610ca73edb52ab48', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { key: '34df66ad1b0f706a0532957251aa2c20bf4587d8', class: "arrow-container" }, hAsync("ion-icon", { key: 'ffdb5c123e606b823491c6c51cc2b497f62581bb', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: 'ac3a2032bb969264d20fa057e9123441005d7a9d', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: 'd969d10915548e72aae289b52154366f3dd39b31', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: 'a8f854f81a94812d7bef8ce088331d94f49ff53d', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: 'a1f646945370e40c844d62bc0c647443ae9dfbe7', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: 'ab3ff4047769b6436e222b46d193c1e8b23e2fce', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (hAsync(Host, { key: '3f39dbc86521bbbe306cabeb2173fc50a2608650', class: mode }, hAsync("div", { key: '854c88a15d009d50b671c462d06a71dd328b29b7', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: 'a7ca7d3a4fad085ea52fd50b9a603562582b01f8', class: "refresher-pulling-icon" }, hAsync("div", { key: '0a9233c62be54d7fe9d9fc149dc980853ce70e30', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: '799dcda1fbe21384eb1b71adacd77fc6e572dd97', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { key: '6fd197609d90f3588206d6c37c7d4629d6d95158', class: "arrow-container" }, hAsync("ion-icon", { key: '2ed5ed7934cd34d655bb9decd490a02629ece58a', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: 'abcab0502dd83fd7804f6046e0218744e028747d', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: '4c1c52856bd9a1730cd911b111a20a8a4bb2f8a5', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: '4bea8d0f376c246ff967bd42a67d083e424bc4b8', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: '887c40075bb7b9867b7dd75c87ef56076a1004fa', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: 'd631774dd81cd16254f1d50eb90069f952db3e13', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -26718,7 +26977,7 @@ class Reorder {
     render() {
         const mode = getIonMode$1(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (hAsync(Host, { key: '27266e30bcb7e10c57fb6d546399cfb1f1c93b23', class: mode }, hAsync("slot", { key: '8745cb9a31458e884c27eed1fb90d104fe9a79eb' }, hAsync("ion-icon", { key: '6c4b9631a2f5610f1e21b2db025b6702d0d593bf', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (hAsync(Host, { key: 'b99138409354d1d74f62005ed067ef2edcb5167f', class: mode }, hAsync("slot", { key: 'dcd6d99f8103414767458b3eb4aac8bb6e2eebab' }, hAsync("ion-icon", { key: 'ec70966b5b489e5604f3e1e25aba1916953b27ba', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -26972,7 +27231,7 @@ class ReorderGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'a38c7fbceb677201330a602273d5b55abb32da19', class: {
+        return (hAsync(Host, { key: '7c2a33e57dff31ad71bab015eb086a5348453ba5', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -27080,7 +27339,7 @@ class RippleEffect {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '7ae559bda5d2c1856a45bfa150c2cb4f83373f8e', role: "presentation", class: {
+        return (hAsync(Host, { key: '17c87440165ecda9c2e6fb93e48eb252dcc25a96', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));
@@ -28022,10 +28281,10 @@ class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: '529ceed5beaf92d7b4cc315c82f449eac18310e8', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '369e9502b2a95159b162d85bd498c7ae5f04a27a', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, hAsync("a", Object.assign({ key: 'd5f1f8b256695d70bdafd20ff3d1b625963fa2da' }, attrs), hAsync("slot", { key: '613fcdb36a71e076f989551ea21f1d5c118b1cd2' }))));
+            }) }, hAsync("a", Object.assign({ key: 'f479cde56291938b5ca7bba6891d2cbf21f82c81' }, attrs), hAsync("slot", { key: '7f46ea35e0c4ac19f0ccfe593ef3706dec0e3b2e' }))));
     }
     static get style() { return IonRouterLinkStyle0; }
     static get cmpMeta() { return {
@@ -28220,7 +28479,7 @@ class RouterOutlet {
         return true;
     }
     render() {
-        return hAsync("slot", { key: 'a70341f58d19df55de1dad00e3464388e446aa2a' });
+        return hAsync("slot", { key: '6a9003284c80d75b9945d508c8a3d56bbf283948' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28254,7 +28513,7 @@ class Row {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'aea072a5005e3f1f309f0d1ae5be5ee19869b035', class: getIonMode$1(this) }, hAsync("slot", { key: '2a481c2126ac6ca65f0a1bbd07c2d3365409cb78' })));
+        return (hAsync(Host, { key: '3d11237af000c5670007ff4a9b7b18e66e32aafd', class: getIonMode$1(this) }, hAsync("slot", { key: 'cd71e7f2baeaf32f36079743912eb591114ceeaa' })));
     }
     static get style() { return IonRowStyle0; }
     static get cmpMeta() { return {
@@ -28648,8 +28907,8 @@ class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '0ef595eb1628928d4c7fdb166b8e41768700fa6e', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: 'ea2c9b36d991acf5af7662059cb6b045f683ca94', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: '17d57ece5852d03047e4d53ddad6c9d88a432a00', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '0bfb27aeaa3e94828ae948e9b13c3d0cfcf57b98', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '51916fccce5a19bb5ed81abce0d60350c4cfbb33', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: '0a3d7d21538f32a1fd5160adc1c5f3f0c22a3de2', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -28659,14 +28918,14 @@ class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, hAsync("div", { key: 'f67c2124e70c24eef0a271516e9c4bdaf7e98ceb', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '8c7f7ccc6809cca30ccc8c4e98e349d3f916321d', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: 'f06524d3163b3883bbde937862aa1e0e8f49f6e1', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '9f7ba2bec93412ecb674b197be13db1de308bb57', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: '8bba360c7bb1f480861406841eb7d8a4453f0210', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '92b9e26c0883db6f6f49feffd848828a21bdd125', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '03d102d471ef37bd0a2681c0a234fe376ed0e344', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '85fd9eb2eb18cb270007a5bb691914586a3e8fcc', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '19fc3dbc722acc47ff7eb3c94ad4de8aed38dff4', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '7332cab0d6a9b267680af452b1751324e5bb1a26', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29250,14 +29509,14 @@ class Segment {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'b1eb4a6e4f953f6c4882395585799503735bbc6b', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'b032b33244524cfbe3e05e9f95fc94e59e8589fe', role: "tablist", onClick: this.onClick, class: createColorClasses$1(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,
-            }) }, hAsync("slot", { key: 'e7df6b017d154f30eb8021bc965f2e6c8e6480bf', onSlotchange: this.onSlottedItemsChange })));
+            }) }, hAsync("slot", { key: 'e752fff555f586ed10248a75ef1d40f38d91e677', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29328,35 +29587,7 @@ class SegmentButton {
     valueChanged() {
         this.updateState();
     }
-    waitForSegmentContent(ionSegment, contentId) {
-        return new Promise((resolve, reject) => {
-            let timeoutId = undefined;
-            let animationFrameId;
-            const check = () => {
-                if (!ionSegment) {
-                    reject(new Error(`Segment not found when looking for Segment Content`));
-                    return;
-                }
-                const segmentView = getNextSiblingOfType(ionSegment); // Skip the text nodes
-                const segmentContent = segmentView === null || segmentView === void 0 ? void 0 : segmentView.querySelector(`ion-segment-content[id="${contentId}"]`);
-                if (segmentContent && timeoutId) {
-                    clearTimeout(timeoutId); // Clear the timeout if the segmentContent is found
-                    cancelAnimationFrame(animationFrameId);
-                    resolve(segmentContent);
-                }
-                else {
-                    animationFrameId = requestAnimationFrame(check); // Keep checking on the next animation frame
-                }
-            };
-            check();
-            // Set a timeout to reject the promise
-            timeoutId = setTimeout(() => {
-                cancelAnimationFrame(animationFrameId);
-                reject(new Error(`Unable to find Segment Content with id="${contentId} within 1000 ms`));
-            }, 1000);
-        });
-    }
-    async connectedCallback() {
+    connectedCallback() {
         const segmentEl = (this.segmentEl = this.el.closest('ion-segment'));
         if (segmentEl) {
             this.updateState();
@@ -29366,14 +29597,11 @@ class SegmentButton {
         // Return if there is no contentId defined
         if (!this.contentId)
             return;
-        let segmentContent;
-        try {
-            // Attempt to find the Segment Content by its contentId
-            segmentContent = await this.waitForSegmentContent(segmentEl, this.contentId);
-        }
-        catch (error) {
-            // If no associated Segment Content exists, log an error and return
-            console.error('Segment Button: ', error.message);
+        // Attempt to find the Segment Content by its contentId
+        const segmentContent = document.getElementById(this.contentId);
+        // If no associated Segment Content exists, log an error and return
+        if (!segmentContent) {
+            console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
             return;
         }
         // Ensure the found element is a valid ION-SEGMENT-CONTENT
@@ -29419,7 +29647,7 @@ class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode$1(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (hAsync(Host, { key: 'f9da656c8eccb80e4ef30e3fa977f2dbbefbc988', class: {
+        return (hAsync(Host, { key: '1267f90cf66d6a395848018e81445f600975c10a', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -29435,7 +29663,7 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", Object.assign({ key: '00dbcdbd81cd74abdd39803f6840a6e477cc7b0c', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '5200c082a9c4788010c4fc33fe75e2b2ad28364a', class: "button-inner" }, hAsync("slot", { key: 'cf3fce2b5d22436b84cd4367a5885df7d6a2715f' })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'f1a2816465f4c2c06644be07315bff2da77e2342' })), hAsync("div", { key: 'aaf31c0ed39641fca698ee98d0773131f4eea6bd', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: 'fc556651361b7ac305aaedd25ea4afe3173abd20', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("button", Object.assign({ key: 'd98af1f28b6e899369bf0923ea9db87f09461210', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: 'dc6daf1419bed5c084d7b4cbf0ea63237905d9ea', class: "button-inner" }, hAsync("slot", { key: '751d8e462cf8d73584e5332bfe7b274792988e6a' })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'c26d306ca5a7bd34fbd114da069c51968a894bbc' })), hAsync("div", { key: '6031046a18c2d37e393f4fb2ff8d925f3fdfd1d6', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: 'c97316f72c390dcccabc328f69274a816d9479be', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29471,7 +29699,7 @@ class SegmentContent {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '03684b2999ac64fe13e376fd7e7f279976e9d4f2' }, hAsync("slot", { key: '143031075bf33ca19e7cfd76fc8a67b83ccaf11c' })));
+        return (hAsync(Host, { key: '1f7f256fdeb7ec661c84f268b239ab21ef170629' }, hAsync("slot", { key: 'c704cf3b4c13deeb612d8a8ffdccef65d62f0866' })));
     }
     static get style() { return IonSegmentContentStyle0; }
     static get cmpMeta() { return {
@@ -29584,10 +29812,10 @@ class SegmentView {
     }
     render() {
         const { disabled, isManualScroll } = this;
-        return (hAsync(Host, { key: '9f4f11d31c4db776f077e59ae895b35dd4454717', class: {
+        return (hAsync(Host, { key: '4d51263d62b33762e7bbea48834b1701014c7f99', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
-            } }, hAsync("slot", { key: 'ea58b21f031cee2ab2b70580f336deaefa364538' })));
+            } }, hAsync("slot", { key: '4191dcd9964efc4815ceec776a953f24ad75f02d' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -29702,6 +29930,7 @@ class Select {
         this.expandedIcon = undefined;
         this.shape = undefined;
         this.value = undefined;
+        this.required = false;
     }
     styleChanged() {
         this.emitStyle();
@@ -30186,8 +30415,8 @@ class Select {
         return renderedLabel;
     }
     renderListbox() {
-        const { disabled, inputId, isExpanded } = this;
-        return (hAsync("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+        const { disabled, inputId, isExpanded, required } = this;
+        return (hAsync("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
     render() {
         const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
@@ -30218,7 +30447,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '9ac4966b075bd4303ed7ddb0d9ad08eaf9118f20', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -30234,7 +30463,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, hAsync("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), hAsync("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
+            }) }, hAsync("label", { key: '3c92e27a0a7ff5dd79c8f0e16b4f4e56179ba5d3', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: 'a46adb7393b38babe2acb1440f2ac8986fb861ca', class: "select-wrapper-inner" }, hAsync("slot", { key: '0fe7486767ba41835d8af22d2764ddf85041dd04', name: "start" }), hAsync("div", { key: '51ddfb2a9c3ad0f7faf99d80c3833991f5bc1c84', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '8521aa8290bb1948160fd469fab501e6dbe215f2', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '3fe6a82c12d65ac759c51cf4d8b842eefeec130a', class: "select-highlight" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30270,6 +30499,7 @@ class Select {
             "expandedIcon": [1, "expanded-icon"],
             "shape": [1],
             "value": [1032],
+            "required": [4],
             "isExpanded": [32],
             "open": [64]
         },
@@ -30394,7 +30624,7 @@ class SelectModal {
             } }, option.text))));
     }
     render() {
-        return (hAsync(Host, { key: '4df42c447b4026d09d9231f09dc4bdae9a8cfe4a', class: getIonMode$1(this) }, hAsync("ion-header", { key: '211c4e869b858867f3d60637e570aeb01de41de7' }, hAsync("ion-toolbar", { key: 'dc4b151331aecbaaaafb460802ee9b689493601d' }, this.header !== undefined && hAsync("ion-title", { key: 'ba1347a59ae0a5c6770c239b5ec02a536a445bd1' }, this.header), hAsync("ion-buttons", { key: '43c98fd25d7e7f54b94b24e53535c6d5ba599892', slot: "end" }, hAsync("ion-button", { key: '51b2b3f3eed42637b2cfc213c95d0bcf10e4b89d', onClick: () => this.closeModal() }, "Close")))), hAsync("ion-content", { key: 'fe721b09f80555856211f7e40dbfc31a533acae1' }, hAsync("ion-list", { key: 'd0b932d137136958d896408fb2fa571023775b92' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (hAsync(Host, { key: '0050013822a291082f6be05ed4b14632ef88d09c', class: getIonMode$1(this) }, hAsync("ion-header", { key: 'b45b98ec81bb7ee2fefd56a3ed39dae5573b9caa' }, hAsync("ion-toolbar", { key: '9ed8534528a89469d4ca99e59f5ed25930cd6e8d' }, this.header !== undefined && hAsync("ion-title", { key: '61b6bbd26b5d6ad8f0348a12e57f856e99ff0a7b' }, this.header), hAsync("ion-buttons", { key: '0624431bcb4dbc0ab14554cd93bfefefc3d4053c', slot: "end" }, hAsync("ion-button", { key: '9f4915f3b94521b40dbf5dba7e47840d7bdc0586', onClick: () => this.closeModal() }, "Close")))), hAsync("ion-content", { key: 'df16869a6036e9aee1a1bf45bf46cc309cf7eb9b' }, hAsync("ion-list", { key: '0aa82c226df3416937136a2f4229169fccd651a1' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -30427,7 +30657,7 @@ class SelectOption {
         this.value = undefined;
     }
     render() {
-        return hAsync(Host, { key: '2e6fa159464f04f6d8720f960141f67918bc7534', role: "option", id: this.inputId, class: getIonMode$1(this) });
+        return hAsync(Host, { key: 'fa94cf1fc8b3ebed6981b05589072f7bc4402beb', role: "option", id: this.inputId, class: getIonMode$1(this) });
     }
     get el() { return getElement(this); }
     static get style() { return IonSelectOptionStyle0; }
@@ -30547,7 +30777,7 @@ class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (hAsync(Host, { key: 'dd0990db4de4f175b176b27f35501dd1604ca400', class: getIonMode$1(this) }, hAsync("ion-list", { key: 'cea2bc3687b8b2490a2a9ff4a1e16cd34169558e' }, header !== undefined && hAsync("ion-list-header", { key: '194aebb53453c43f913daae45a1a3066a1708c4c' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: 'b706b07a3c63ad8104d2db413e210c735ec1bec9' }, hAsync("ion-label", { key: '6e52b5b4cf6b04ff3dd5671d64264233de4190d5', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: '6ef4440d17f5db8c96c63b9aa5073f4fe4b8ad62' }, subHeader), message !== undefined && hAsync("p", { key: 'c7b3b76c30ecd606c0e985a0258c13d3a75756e7' }, message)))), this.renderOptions(options))));
+        return (hAsync(Host, { key: 'aef83e0c71338c7fe840d8aa8a35457f0c02aca1', class: getIonMode$1(this) }, hAsync("ion-list", { key: '0d006a2d50f1e60774a0b2492216f06d57bb8f29' }, header !== undefined && hAsync("ion-list-header", { key: 'dd7cf5ab850f6597e678bf65e9a6e0cec335a61a' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: 'fff2b677c26dbaa1c0d716f9bdaa4cd551e9ad70' }, hAsync("ion-label", { key: '6358214355dc87a4e4cf8dd8954310a26461f037', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: '06fd296221969ef34df9dc8bbc256ee66af9fdba' }, subHeader), message !== undefined && hAsync("p", { key: 'eac5f5aee78dcdf1cc5276d95e5e9892bbb69f24' }, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -30595,11 +30825,11 @@ 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$1(this);
-        return (hAsync(Host, { key: 'fdfabf9364caf507450239b62be24f08873bd650', class: {
+        return (hAsync(Host, { key: '59a41a7f3ba2de4f44de57b3243c8f803eb88e2c', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, hAsync("span", { key: '3482c88dcc177547185ce87972afa064a542367d' }, "\u00A0")));
+            } }, hAsync("span", { key: 'a59a5cea5504f523c4d9b1f428f66772103290aa' }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get style() { return IonSkeletonTextStyle0; }
@@ -30652,7 +30882,7 @@ class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (hAsync(Host, { key: '9d30ee9f5aa0dd0e220da07e75d05b8b2435224d', class: createColorClasses$1(self.color, {
+        return (hAsync(Host, { key: '8cb73346083cb8a17e38c90e3405fee806c55bbf', class: createColorClasses$1(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
@@ -30752,12 +30982,12 @@ class SplitPane {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '1ca0b0299d03605bb358112ca56cbafbe58f00f5', class: {
+        return (hAsync(Host, { key: 'a63ee13973b94cd58b0da9c00b06bd39b206dd60', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, hAsync("slot", { key: 'abe231361727ae7fc63edd592a4490caac1909fb' })));
+            } }, hAsync("slot", { key: 'da6743bb0d17791f863d1f0ca1f59f5ceffe9613' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30826,10 +31056,10 @@ class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (hAsync(Host, { key: 'cb75d0877979b3b8df8f7e1952bfa9677da1eaa5', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: 'c18543ba57c4a6a08d519476d1e268524046d678', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: '37fbb7b7a6b03eb93b1dacd2dc1025b78eb2aa6b' })));
+            } }, hAsync("slot", { key: 'e46d100188fc8876e44ebf01f081ce57475b2883' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30907,11 +31137,11 @@ class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode$1(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (hAsync(Host, { key: 'a87fd2ea5df053705a37ea7ffec043e75c4a9907', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'fe1cc3174f095ba3c8c6d6c2c20021596801a7c9', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, hAsync("slot", { key: '81a6223299b6cab29d7ddced590e9152e2b3ded0' })));
+            }) }, hAsync("slot", { key: 'f7705b1b4f45d28ae8b7c08b91b0f6c9d4176f3f' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31009,7 +31239,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: '5976c45943ea7ea8e7c1a85fc9996de421439f08', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: '9ce7b8a8e9d929c260de383c5cf59f971698b2b5', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -31021,7 +31251,7 @@ class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, hAsync("a", Object.assign({ key: '1db09d861b67ff292018fb4b0dc7b85bd4677eb8' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: '4381eafcb27e8c7bb0d86d4f115ceb0caf03b9b4', class: "button-inner" }, hAsync("slot", { key: '1981135f6fbb88376c1bd923c55c70fe8b5c5159' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '0509bc7155d055d1ed710600e9cf4df135881491', type: "unbounded" }))));
+            } }, hAsync("a", Object.assign({ key: '567878182ae2a8c5dc172e3fd1f5817f3e1eeabe' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: 'b862980ed811d341e40cf6eb443922f2007307e0', class: "button-inner" }, hAsync("slot", { key: '09ef67551c8fbf8525a933aad07eefc472463b6d' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '85f92cbca73bc53b74818debfbb95cddf9e7bbd1', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -31197,7 +31427,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: 'e01ccf6bfaccad094515be50e407399c733fc226', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '38d2d01dbfd8a08f01e6f0e27274b21d75424e37', name: "top" }), hAsync("div", { key: '7e894f0f423e2d43e1c68daff5f9f6c442fad237', class: "tabs-inner" }, hAsync("slot", { key: 'df16be529a0370a26d0adf850530b31607507c23' })), hAsync("slot", { key: '44642e1cb24c3281c43db75fd69a32fe0defe40a', name: "bottom" })));
+        return (hAsync(Host, { key: 'd2ff833e4e7bfee10f963dfa05459174ae031319', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '2722be047d4f75c86beea7dc55320ce323c2236e', name: "top" }), hAsync("div", { key: '307ee4c138fe6a5aa48137e2445dae86131a584b', class: "tabs-inner" }, hAsync("slot", { key: '3da8af51f45c932aead1b2addf1e9e30330a986e' })), hAsync("slot", { key: '54d17cf20967460901fd1ca537b1db507ab336c2', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return IonTabsStyle0; }
@@ -31239,9 +31469,9 @@ class Text {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'e134d70c04344b708a2ecf6253722781ad2ca826', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '54fc089c6b77f7c4a8e0c4441d06507e7a0489c4', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: 'da79c760f7ebbcd007ce110439f05a62cb22eac8' })));
+            }) }, hAsync("slot", { key: '308480aa067e52eb4bf7dc619fb7e3b89fcdb62b' })));
     }
     static get style() { return IonTextStyle0; }
     static get cmpMeta() { return {
@@ -31623,7 +31853,7 @@ class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'd6e25c83d8eab8cb1a5b6ab411c9a13847f69f8d', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7c5b5a536fcd80e82e952dd91bd13fc0f89082f0', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -31632,7 +31862,7 @@ class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, hAsync("label", { key: 'f840a5be2b776a4b9c18c6da24e0b7d3d4838fee', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '979461fc0d4684926d79d75759c63c6867b7622b', class: "textarea-wrapper-inner" }, hAsync("div", { key: '88f0d5d4bac29597cc2588e5b2ed72fb4fbe153d', class: "start-slot-wrapper" }, hAsync("slot", { key: '21dcca0e59c1260e3d0d1e126c1c590de15c4bad', name: "start" })), hAsync("div", { key: '3c48a4bb3d763a389d3429123e7c110064b9b8d4', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '1550599ad15b3f215c104c014e90711f073ace8b', 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), hAsync("div", { key: '4f01ab4d2994a6de6f49eb9ed2e310d00daf21b2', class: "end-slot-wrapper" }, hAsync("slot", { key: '501e288b6807e039972bb4f0b63906114255518a', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'd3008eed34494aa9f8e98a28eac3b465dc4c2bd0', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: '3ba91b8e5a7ef4b4f4a9f1b4d6a4d9079c41dfdd', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '878f717486c422db8709e646add56f467f1451de', class: "textarea-wrapper-inner" }, hAsync("div", { key: 'f9d84b85e5ad6de4d2055323b8a81b3bb36664b3', class: "start-slot-wrapper" }, hAsync("slot", { key: 'c658096d7125b8f1d76d03713daa596ed47d87f5', name: "start" })), hAsync("div", { key: 'ba8267f5e94c6c7e9400b157395624b0f5f63a3d', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '599216481ddd50df91a796cd2b78e1bc0ed7ab74', 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), hAsync("div", { key: '9a7f5dc599a4437fb693a9dfae443f07ab87b771', class: "end-slot-wrapper" }, hAsync("slot", { key: 'a9806727dca8bd9b6a648ea824d910e26811f61c', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'f22b68afb0c58abb2fc78a9d5805b3ed11eb98c6', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31694,7 +31924,7 @@ class Thumbnail {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'cfa9aeb1d4fd624a9732c5230d29dd887e4b7771', class: getIonMode$1(this) }, hAsync("slot", { key: '29bc6e64063cba44e2643228df54394883933918' })));
+        return (hAsync(Host, { key: '0396aae5f545bbf7ebe1cbb05bc25f9181d2afe3', class: getIonMode$1(this) }, hAsync("slot", { key: 'bf01dbadd4042a4b45ce24a8ce408f15e7647a03' })));
     }
     static get style() { return IonThumbnailStyle0; }
     static get cmpMeta() { return {
@@ -32530,9 +32760,9 @@ 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 (hAsync(Host, Object.assign({ key: 'c05655ff06af8d0e48c2a85396b07ad942fa81b4', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '66ce48d7589420d8cb9756ddaf916a7ec8f949b5', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '9393ead4de1bf28529661d6f64049d34e18d725c', class: wrapperClass }, hAsync("div", { key: '3e9dd73c17c337849c3f26e8d0f395b3e5ee20a7', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '5d15b18364301ad55e44e9f601014ac33181590b', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'f6dd164502637a882c5caf18445d8509b85ad6f9', 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$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '04ca865d1c2ac8a17102375030227721e3ba48f5', class: wrapperClass }, hAsync("div", { key: '1d0f4463c7f2428d57dc32e457d88015884361ea', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '3da9f1331b002463bbf23deaae3410d3fb9c90b5', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '4dfe8a6c966a9e5c5b35aec950631b895591f767', 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 getElement(this); }
     static get watchers() { return {
@@ -32666,6 +32896,7 @@ class Toggle {
         this.labelPlacement = 'start';
         this.justify = undefined;
         this.alignment = undefined;
+        this.required = false;
     }
     disabledChanged() {
         if (this.gesture) {
@@ -32747,12 +32978,12 @@ class Toggle {
         return this.el.textContent !== '';
     }
     render() {
-        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
+        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
         const mode = getIonMode$1(this);
         const value = this.getValue();
         const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '065d333e3972a6df8df047c1af6457eaa394d45a', onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -32762,10 +32993,10 @@ class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, hAsync("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: 'f387b1ea840737a9737917e516834c887be99c09', 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)), hAsync("div", { key: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
+            }) }, hAsync("label", { key: '6923b623b995cef1db15123ef4dd072f6d6c2c7e', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: '0e558a2c37834620fc945ea1de0098e75c56947d', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), hAsync("div", { key: 'a62663c6f58665cf16af7a3fda3a41a78136c6d4', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, hAsync("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), hAsync("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, hAsync("slot", { key: '91a2c83740ef75c78f70b60941778580f1722d47' })), hAsync("div", { key: '1a638f883542dd9aac3749cc9bfcdd7ba8ea9046', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32788,6 +33019,7 @@ class Toggle {
             "labelPlacement": [1, "label-placement"],
             "justify": [1],
             "alignment": [1],
+            "required": [4],
             "activated": [32]
         },
         "$listeners$": undefined,
@@ -32819,6 +33051,10 @@ var IonToolbarMdStyle0 = toolbarMdCss;
  * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
  * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
+ *
+ * @part background - The background of the toolbar, covering the entire area behind the toolbar content.
+ * @part container - The container that wraps all toolbar content, including the default slot and named slot content.
+ * @part content - The container for the default slot, wrapping content provided without a named slot.
  */
 class Toolbar {
     constructor(hostRef) {
@@ -32869,10 +33105,10 @@ class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (hAsync(Host, { key: '462538a5ecd01baf3cde116c9f029aeda26c81be', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'e4d089de5c5b16f34fda10f3fe00054aa38bbc7f', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, hAsync("div", { key: 'c0b4415d3b2472de643a9be7cb3b13b3b628621b', class: "toolbar-background" }), hAsync("div", { key: '0ccb8a2dbeaa28d8f9bed87629c0c097446690c2', class: "toolbar-container" }, hAsync("slot", { key: '3e726dac359e923df21d80301651f16063a3de20', name: "start" }), hAsync("slot", { key: 'cd799330b56a7f8833bc61bb2807aafb21846f71', name: "secondary" }), hAsync("div", { key: '395282e6ac8c53576922dcdb5f08c25d34638c86', class: "toolbar-content" }, hAsync("slot", { key: 'a437c60e4ba5aae65e55169ae82a6f379868ec1d' })), hAsync("slot", { key: '711af9b9d321a7b31ede924c9bdcad767aa9a1ca', name: "primary" }), hAsync("slot", { key: 'ecc02edeaf80a837890bcb08d5096df1e22a0b9a', name: "end" }))));
+            })) }, hAsync("div", { key: '6463fdec00f2c50fa8691ceed3213157b275f398', class: "toolbar-background", part: "background" }), hAsync("div", { key: 'ffcd3cf5ba187dfff98cb01101cb1dae93d0e057', class: "toolbar-container", part: "container" }, hAsync("slot", { key: '899f1b18a87a1c873f0e4c3d7b9b3dfe20fdb1e5', name: "start" }), hAsync("slot", { key: 'bf2fc384b24742e5f441f9193d173635d5d45dc7', name: "secondary" }), hAsync("div", { key: '21cebe9074ad0858567edaa106571aab5895ef1d', class: "toolbar-content", part: "content" }, hAsync("slot", { key: 'ac05301746a1e6bfb3f6c533d2fe1c770d066419' })), hAsync("slot", { key: '1dbd07d1c7d31b16a612c05672c2d559d85e83bb', name: "primary" }), hAsync("slot", { key: '617e1daa50d7f168d290f751005d79ce777f0793', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -32922,11 +33158,11 @@ class ToolbarTitle {
     render() {
         const mode = getIonMode$1(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: '7293d2ecd6262feb0d8d769effbb208230baed89', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '388b4015f0d64a8d5b04d622d1e1fb61d0922d6c', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: '086ec3a361ebdf6506846a8704b457cda3a6f897', class: "toolbar-title" }, hAsync("slot", { key: '59add7eb92b82d6832a8f0894f897c51fdf4f214' }))));
+            }) }, hAsync("div", { key: '56f719e88e9322a8862acbfd0b343fd0473bfead', class: "toolbar-title" }, hAsync("slot", { key: 'd35b7c06089c2d498126bbfe859ffc4961de6276' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {