voyager-ionic-core 8.4.1 → 8.5.0

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

@@ -189,32 +189,39 @@ input {
   opacity: 0;
 }
 
-:host(.checkbox-justify-space-between) .checkbox-wrapper {
+.checkbox-bottom {
+  padding-top: 4px;
+  display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
+  white-space: normal;
 }
 
-:host(.checkbox-justify-start) .checkbox-wrapper {
-  justify-content: start;
+:host(.checkbox-label-placement-stacked) .checkbox-bottom {
+  font-size: 1rem;
 }
 
-:host(.checkbox-justify-end) .checkbox-wrapper {
-  justify-content: end;
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the checkbox. Otherwise the helper text should
+ * be shown.
+ */
+.checkbox-bottom .error-text {
+  display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
-:host(.checkbox-alignment-start) .checkbox-wrapper {
-  align-items: start;
+.checkbox-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-:host(.checkbox-alignment-center) .checkbox-wrapper {
-  align-items: center;
+:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text {
+  display: block;
 }
 
-:host(.checkbox-justify-space-between),
-:host(.checkbox-justify-start),
-:host(.checkbox-justify-end),
-:host(.checkbox-alignment-start),
-:host(.checkbox-alignment-center) {
-  display: block;
+:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text {
+  display: none;
 }
 
 /**
@@ -243,6 +250,7 @@ input {
  */
 :host(.checkbox-label-placement-end) .checkbox-wrapper {
   flex-direction: row-reverse;
+  justify-content: start;
 }
 
 /**
@@ -285,6 +293,7 @@ input {
  */
 :host(.checkbox-label-placement-stacked) .checkbox-wrapper {
   flex-direction: column;
+  text-align: center;
 }
 
 :host(.checkbox-label-placement-stacked) .label-text-wrapper {
@@ -330,6 +339,34 @@ input {
   }
 }
 
+:host(.checkbox-justify-space-between) .checkbox-wrapper {
+  justify-content: space-between;
+}
+
+:host(.checkbox-justify-start) .checkbox-wrapper {
+  justify-content: start;
+}
+
+:host(.checkbox-justify-end) .checkbox-wrapper {
+  justify-content: end;
+}
+
+:host(.checkbox-alignment-start) .checkbox-wrapper {
+  align-items: start;
+}
+
+:host(.checkbox-alignment-center) .checkbox-wrapper {
+  align-items: center;
+}
+
+:host(.checkbox-justify-space-between),
+:host(.checkbox-justify-start),
+:host(.checkbox-justify-end),
+:host(.checkbox-alignment-start),
+:host(.checkbox-alignment-center) {
+  display: block;
+}
+
 :host(.checkbox-checked) .checkbox-icon,
 :host(.checkbox-indeterminate) .checkbox-icon {
   border-color: var(--border-color-checked);

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

@@ -311,6 +311,7 @@
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
   font-size: 0.75rem;
+  white-space: normal;
 }
 
 /**
@@ -340,7 +341,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -359,7 +360,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
   white-space: nowrap;
   padding-inline-start: 16px;
 }

package/dist/collection/components/input/input.js

@@ -149,8 +149,19 @@ export class Input {
             nativeInput.value = value;
         }
     }
+    /**
+     * dir is a globally enumerated attribute.
+     * As a result, creating these as properties
+     * can have unintended side effects. Instead, we
+     * listen for attribute changes and inherit them
+     * to the inner `<input>` element.
+     */
+    onDirChanged(newValue) {
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
+        forceUpdate(this);
+    }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type']));
+        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
     }
     connectedCallback() {
         const { el } = this;
@@ -414,7 +425,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '54b5662d9a7f011a85e4119650c92b9af275bf96', class: createColorClasses(this.color, {
+        return (h(Host, { key: '166f7dea59931b8276bebef4d7a1fcd5ace90bad', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -425,7 +436,7 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '551cf8a932af3275689ecf32988b84355404e8f1', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'b3601dca7e0f23517748f6e7feb899c953355bc4', class: "native-wrapper" }, h("slot", { key: 'd687a9bb4c5778cfee35ce1b8d6d16ddc8eca768', name: "start" }), h("input", Object.assign({ key: 'ab927e84e43bedf8b7827bb743888a1778292deb', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '0d2ee3f7e69cee75f071f37b2e9bc174572c5a01', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: 'c6da0b068f8abc0fb8ffaee1a71685b03ec837ec', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'cd25ec6d885bdbfdb2def51f1ad1756cc4f3e9e0', class: "native-wrapper" }, h("slot", { key: '2582b54d551c93a89d4a663a8a61b6de5fae85cc', name: "start" }), h("input", Object.assign({ key: '2b496016ba7a0c51ccd5509183e531f802701455', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '2db9987180cd4030ad63de197af838e152b47998', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
@@ -440,7 +451,7 @@ export class Input {
                  * for screen readers as it means users would be unable to swipe past the clear button.
                  */
                 ev.stopPropagation();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'c7715111897f43839c10d38662616edb662cd49b', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'afc44cbe1ad50f17942d5297a12509abecbd6ecd', name: "end" })), shouldRenderHighlight && h("div", { key: 'ee3af32cd9003d497f33e352e56313d43295f3a9', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'ea5e1a5f61046434bf502db692a05dece19aecd9', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'db1e7452cfc25accdb518ff0cc59ae3e2e47b049', name: "end" })), shouldRenderHighlight && h("div", { key: '0daeaaa5238e0c60ccfd251dedc6a381eba2fcc8', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }
@@ -1211,6 +1222,9 @@ export class Input {
             }, {
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "dir",
+                "methodName": "onDirChanged"
             }];
     }
 }

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

@@ -311,6 +311,7 @@
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
   font-size: 0.75rem;
+  white-space: normal;
 }
 
 /**
@@ -340,7 +341,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -359,7 +360,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -799,6 +800,10 @@
   --border-color: var(--highlight-color);
 }
 
+/**
+ * The bottom content should never have
+ * a border with the solid style.
+ */
 :host(.input-fill-solid) .input-bottom {
   border-top: none;
 }

package/dist/collection/components/item-divider/item-divider.js

@@ -18,11 +18,11 @@ export class ItemDivider {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '6cff318230a9b2a9db529df154285d3dd9822efe', class: createColorClasses(this.color, {
+        return (h(Host, { key: '7150b1a3a881c3c312db40821acb9830c2885ccf', class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: 'eb50dfab74ab0fd13697db17ecd60e8fa0bf1750', name: "start" }), h("div", { key: '2806efd89d086f4fb844a479d9c095e1e0775713', class: "item-divider-inner" }, h("div", { key: '77b7d5fa987e5f1c26d8023cd1f974a8a263a3de', class: "item-divider-wrapper" }, h("slot", { key: 'dbafb0deb140a19a2a9748fd5b48760c39c6fd2e' })), h("slot", { key: 'ef9a848fe21e84ef21cd273b8a4d9f95f558175b', name: "end" }))));
+            }) }, h("slot", { key: '6e9d9615f475392a81177bc49b4b01dbdab67925', name: "start" }), h("div", { key: '12fe6b840ad1a1897cc34529e488207b2df448f7', class: "item-divider-inner" }, h("div", { key: '626776a8c9887dd2df5ecf3b7861beb742b41e03', class: "item-divider-wrapper" }, h("slot", { key: '90379dd99914e24ae45c9571c8d390f9b6622fd4' })), h("slot", { key: '105644332c08530155b9cd8e8c6fa9e332072a63', name: "end" }))));
     }
     static get is() { return "ion-item-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item-group/item-group.js

@@ -6,7 +6,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class ItemGroup {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f9ffe0290d3fa546494fe55f952d8554f2a8abf8', role: "group", class: {
+        return (h(Host, { key: 'de2a969ed0dda880bc560a325848b28d0287fdb9', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,

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

@@ -44,12 +44,12 @@ export class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: '89310624997821858c1abde60c0ffb142ca466e0', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '1b7708dd178dc2c9280652ca3da38c84ba7b767f', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: 'e4dfbb3048eed03a7f7e84c6f75545e0ca9b45fb' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'dffcf437fbdc15f2e7a19e60a015e90c73c8377d', class: "button-inner" }, h("slot", { key: '48a23512e0601e062118d8b2c46c8bb96f25509f', name: "top" }), h("div", { key: '952a9a9aa3a476aa1f4408d7e208bf9e916b8c30', class: "horizontal-wrapper" }, h("slot", { key: 'f8d18a61c1ecec4a22a55443cf72bbc51383b64f', name: "start" }), h("slot", { key: '1f9f219e6f879d2e0bf6d80cf0d3f518eb14ce0e', name: "icon-only" }), h("slot", { key: 'a55adcdbe68131e5b1855c2dd45dd9454ab544fb' }), h("slot", { key: '3c4c85a4fbb7efc797d8bc5adf6d238da022ff9f', name: "end" })), h("slot", { key: '503c7e4b306745c523f57f24399ea06ba9b1e21d', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: 'b0e270b0c4f3ff9f9b6d74bad12a9278d7633226' }))));
+            }) }, h(TagType, Object.assign({ key: 'd9f899f5425ad6b97071494485aa3ca90bc89d30' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'adc2cf72b4363be9b9eeb3584723e2bfc862af20', class: "button-inner" }, h("slot", { key: 'e668fe8e655a74e6a35e979e0cd488506b962dbf', name: "top" }), h("div", { key: '2ddcdb92b6b19c3cc549a7aee2400d1a6eeb51f1', class: "horizontal-wrapper" }, h("slot", { key: '441f13df18b72e5ed6bb51b157722e065b5847d2', name: "start" }), h("slot", { key: '425d815874b49e1628880160d7175ed3ca36ca39', name: "icon-only" }), h("slot", { key: '27437d3fa3365b12bc030704e18481fdfb14aebb' }), h("slot", { key: 'bd39330771c7f85c6df10f7f9050335ee7f14ff0', name: "end" })), h("slot", { key: '440cb6dc7743d50b261d4bf61d2c24e24b89e58c', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: '29632941464bbb34551cf64961187643f62bf755' }))));
     }
     static get is() { return "ion-item-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item-options/item-options.js

@@ -17,7 +17,7 @@ export class ItemOptions {
     render() {
         const mode = getIonMode(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: '6d91399d2aaaa81d514d0bbc8dffe53eeec25d36', class: {
+        return (h(Host, { key: '7df4b71547524bf359c48e1b40ccbc44e850f632', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,

package/dist/collection/components/item-sliding/item-sliding.js

@@ -388,7 +388,7 @@ export class ItemSliding {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a5216b11d92a1e1afed09d139212e0df81fdab79', class: {
+        return (h(Host, { key: 'd7697278008dd6531c0e4f9c235b955a337e3140', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

package/dist/collection/components/label/label.js

@@ -55,13 +55,13 @@ export class Label {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: '6353a70565ef6fbbbf4042b000e536c61bcf99a9', class: createColorClasses(this.color, {
+        return (h(Host, { key: '4da84c95351a74b547f8224ecfa66924d21398c5', class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: '6ef9c2758c0168442aa84941af0a6cec1ef1ec21' })));
+            }) }, h("slot", { key: 'ea158ebb620275e5492965234d0ab925d391f919' })));
     }
     static get is() { return "ion-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/list-header/list-header.js

@@ -15,10 +15,10 @@ export class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'fb78bd8601cbd7b90ec84a96e0c8325be1132b1e', class: createColorClasses(this.color, {
+        return (h(Host, { key: '95ce2135e2b1ad4d7d6020b0fb9bc6e02b3c0851', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '2580ad49f3a54973e15f14d645a1e55a6fa066ac', class: "list-header-inner" }, h("slot", { key: '677b2e2ec8eeb3ae6ad329e86c76451cf3ae6c2f' }))));
+            }) }, h("div", { key: '3065b0a094bc31a90518898a5126a813c8a33816', class: "list-header-inner" }, h("slot", { key: 'fe15c87d7867f3e5d8185645c49c0228496697b8' }))));
     }
     static get is() { return "ion-list-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loading/loading.js

@@ -161,9 +161,9 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: 'd97f536b7f443ea19a2bbf2dcbc7f546b8e0a092', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'd6066c8b56b1fe4b597a243a7dab191ef0d21286', 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 }) }), h("ion-backdrop", { key: '6cd39bd7912fd080ab59d041644054c96d238ea9', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'c14ca5a9308844f11bcb010257e15208a75b39bc', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '118bceefa8e1cf8b225a858f224e6d919cf03c26', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '490d6e8ae4433835fe273162d7b90deab944fb39', class: "loading-spinner" }, h("ion-spinner", { key: 'c5cf6549c43df4cb23814b3e62ec4d9e7ea2b64f', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("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 }) }), h("ion-backdrop", { key: '2431eda00a2a3f510f5dfc39b7c7d47c056dfa3d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'cf210aaf5e754e4eccdb49cf7ead4647b3f9b2d1', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'fa9375143d391656d70e181d25b952c77c2fc6ec', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '8e4a4ed994f7f62df86b03696ac95162df41f52d', class: "loading-spinner" }, h("ion-spinner", { key: 'e5b323c272d365853ba92bd211e390b4fd4751d2', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'cae35ec8c34800477bff3ebcec8010e632158233', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/menu/menu.js

@@ -614,14 +614,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '342db8551d26604128b29b21d2d8c37593972ed9', 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),
-            } }, h("div", { key: '894e680fe227534711128c7aca980964ddb5a08a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'e9f5934518dc0cceaeadf1f2820614595fec6bc9' })), h("ion-backdrop", { key: '7282077817657b1bb6c155f1404c0a519fece993', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '3c9bec2862b7fb9d88de66b1600be01f6735e3dd', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '76283b4b2a65c78646f92c3b273eea021eda499c' })), h("ion-backdrop", { key: '121c395bc4873542a1b6ae2c9e23f2e881e75d93', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,7 +46,7 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '7ec29715ce7926b7c2b08f3d9cac8aaa16b3dc28', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '3cde3704f28eb275f4a5ff2985bbb68c1024e79c', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -55,7 +55,7 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: 'd4c5929264af3ba0328118bcc27d2ab7ef5d3809' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '7bfa6e9a93105486623d044861e879ec79ff64f1', class: "button-inner" }, h("slot", { key: '071ab58e285832fc188706166f5547d45d501ac5' }, h("ion-icon", { key: '918ec5d791921de9821c347af4f65f97dd94aabf', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: '00ffdd53f635e706c1dbd01b8e7944498650fe81', type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: 'a02a3374288bd1759b6e352ada8eab0d45c6422f' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: 'ba699f2277a4e7b27ce5e42faeefc53d8805bb43', class: "button-inner" }, h("slot", { key: '829fe6cbdeb173f50d1a670389d1565baa6273e4' }, h("ion-icon", { key: 'a9a9f7b8dcffc648a8429fe0adbe766869de72fd', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: '48deca9a771a249f2fc76eaa8b9741c8d66d8355', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,10 +26,10 @@ export class MenuToggle {
     render() {
         const mode = getIonMode(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '7c27ea5b0795676bf5cb33e1f83aa142c197f64e', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: '88e88fa13ac7f10ba3acfe378bd11cda0c7e2749', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '69f187becedc0fe34603d41d279f043cf0fdf776' })));
+            } }, h("slot", { key: '0a14c7b63eda64702d2fd1b4bc7db4809892842d' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/animations/ios.enter.js

@@ -13,22 +13,68 @@ const createEnterAnimation = () => {
     })
         .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
  */
 export const iosEnterAnimation = (baseEl, opts) => {
-    const { presentingEl, currentBreakpoint } = opts;
+    const { presentingEl, 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.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;

package/dist/collection/components/modal/animations/ios.leave.js

@@ -14,7 +14,7 @@ const createLeaveAnimation = () => {
  * iOS Modal Leave Animation
  */
 export const iosLeaveAnimation = (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();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
@@ -23,7 +23,29 @@ export const iosLeaveAnimation = (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');
+        }
+    });
     const appEl = baseEl.closest('ion-app');
     if (presentingEl && appEl) {
         const isMobile = window.innerWidth < 768;

package/dist/collection/components/modal/animations/md.enter.js

@@ -15,20 +15,67 @@ 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
  */
 export const mdEnterAnimation = (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;
 };

package/dist/collection/components/modal/animations/md.leave.js

@@ -16,13 +16,36 @@ const createLeaveAnimation = () => {
  * Md Modal Leave Animation
  */
 export const mdLeaveAnimation = (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;
 };