@ionic/core 7.3.4-dev.11694441708.198de185 → 7.3.4-dev.11694445679.1bc64f72

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

@@ -1,36 +1,3 @@
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 :host {
   /**
    * @prop --background: Background of the toolbar
@@ -56,13 +23,11 @@
   --opacity-scale: 1;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  -webkit-padding-start: var(--ion-safe-area-left);
-  padding-inline-start: var(--ion-safe-area-left);
-  -webkit-padding-end: var(--ion-safe-area-right);
-  padding-inline-end: var(--ion-safe-area-right);
   display: block;
   position: relative;
   width: 100%;
+  padding-right: var(--ion-safe-area-right);
+  padding-left: var(--ion-safe-area-left);
   color: var(--color);
   font-family: var(--ion-font-family, inherit);
   contain: content;
@@ -122,39 +87,6 @@
   position: absolute;
 }
 
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 :host {
   --background: var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #000));
@@ -189,6 +121,10 @@
   margin-top: 3px;
 }
 
+:host(.toolbar-searchbar) ::slotted(ion-back-button) {
+  height: 38px;
+}
+
 ::slotted(ion-buttons) {
   min-height: 38px;
 }
@@ -211,6 +147,16 @@
   text-align: end;
 }
 
+/**
+ * Ensure there is enough spacing between the large
+ * title and any potential content in subsequent
+ * toolbars. We do not add padding to the title
+ * itself because it is absolutely positioned.
+ */
+:host(.toolbar-title-large) {
+  padding-bottom: 7px;
+}
+
 :host(.toolbar-title-large) .toolbar-container {
   flex-wrap: wrap;
   align-items: flex-start;

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

@@ -1,36 +1,3 @@
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 :host {
   /**
    * @prop --background: Background of the toolbar
@@ -56,13 +23,11 @@
   --opacity-scale: 1;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  -webkit-padding-start: var(--ion-safe-area-left);
-  padding-inline-start: var(--ion-safe-area-left);
-  -webkit-padding-end: var(--ion-safe-area-right);
-  padding-inline-end: var(--ion-safe-area-right);
   display: block;
   position: relative;
   width: 100%;
+  padding-right: var(--ion-safe-area-right);
+  padding-left: var(--ion-safe-area-left);
   color: var(--color);
   font-family: var(--ion-font-family, inherit);
   contain: content;
@@ -122,39 +87,6 @@
   position: absolute;
 }
 
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 :host {
   --background: var(--ion-toolbar-background, var(--ion-background-color, #fff));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #424242));

package/dist/collection/index.js

@@ -3,6 +3,7 @@
  */
 import "ionicons";
 export { createAnimation } from './utils/animation/animation';
+export { getIonPageElement } from './utils/transition';
 export { iosTransitionAnimation } from './utils/transition/ios.transition';
 export { mdTransitionAnimation } from './utils/transition/md.transition';
 export { getTimeGivenProgression } from './utils/animation/cubic-bezier';

package/dist/collection/utils/transition/ios.transition.js

@@ -145,10 +145,10 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
   const BACKWARDS_KEYFRAMES = [
     { offset: 0, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.49)` },
     { offset: 0.1, opacity: 0 },
-    { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top + 2}px, 0) scale(1)` },
+    { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` },
   ];
   const FORWARDS_KEYFRAMES = [
-    { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top + 2}px, 0) scale(1)` },
+    { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` },
     { offset: 0.6, opacity: 0 },
     { offset: 1, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.5)` },
   ];
@@ -168,10 +168,10 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
     [ORIGIN_X]: TITLE_START_OFFSET,
   })
     .beforeAddWrite(() => {
-    largeTitleEl.style.setProperty('opacity', '0');
+    largeTitleEl.style.setProperty('display', 'none');
   })
     .afterAddWrite(() => {
-    largeTitleEl.style.setProperty('opacity', '');
+    largeTitleEl.style.setProperty('display', '');
     clonedTitleEl.style.setProperty('display', 'none');
   })
     .keyframes(KEYFRAMES);

package/dist/docs.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2023-09-11T14:18:14",
+  "timestamp": "2023-09-11T15:24:10",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.1.0",
-    "typescriptVersion": "5.0.4"
+    "version": "4.2.0",
+    "typescriptVersion": "5.1.6"
   },
   "components": [
     {
@@ -4959,6 +4959,33 @@
       ],
       "usage": {},
       "props": [
+        {
+          "name": "alignment",
+          "type": "\"center\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'center'",
+            "resolved": "\"center\" | \"start\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "alignment",
+          "reflectToAttr": false,
+          "docs": "How to control the alignment of the checkbox and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.",
+          "docsTags": [],
+          "default": "'center'",
+          "values": [
+            {
+              "value": "center",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "checked",
           "type": "boolean",
@@ -5124,16 +5151,16 @@
         },
         {
           "name": "labelPlacement",
-          "type": "\"end\" | \"fixed\" | \"start\"",
+          "type": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
           "complexType": {
-            "original": "'start' | 'end' | 'fixed'",
-            "resolved": "\"end\" | \"fixed\" | \"start\"",
+            "original": "'start' | 'end' | 'fixed' | 'stacked'",
+            "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
             "references": {}
           },
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
-          "docs": "Where to place the label relative to the checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docs": "Where to place the label relative to the checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -5145,6 +5172,10 @@
               "value": "fixed",
               "type": "string"
             },
+            {
+              "value": "stacked",
+              "type": "string"
+            },
             {
               "value": "start",
               "type": "string"
@@ -6808,6 +6839,22 @@
         {
           "name": "part",
           "text": "month-year-button - The button that opens the month/year picker when\nusing a grid style layout."
+        },
+        {
+          "name": "part",
+          "text": "calendar-day - The individual buttons that display a day inside of the datetime\ncalendar."
+        },
+        {
+          "name": "part",
+          "text": "calendar-day active - The currently selected calendar day."
+        },
+        {
+          "name": "part",
+          "text": "calendar-day today - The calendar day that contains the current day."
+        },
+        {
+          "name": "part",
+          "text": "calendar-day disabled - The calendar day that is disabled."
         }
       ],
       "usage": {},
@@ -7828,6 +7875,22 @@
         }
       ],
       "parts": [
+        {
+          "name": "calendar-day",
+          "docs": "The individual buttons that display a day inside of the datetime\ncalendar."
+        },
+        {
+          "name": "calendar-day active",
+          "docs": "The currently selected calendar day."
+        },
+        {
+          "name": "calendar-day disabled",
+          "docs": "The calendar day that is disabled."
+        },
+        {
+          "name": "calendar-day today",
+          "docs": "The calendar day that contains the current day."
+        },
         {
           "name": "month-year-button",
           "docs": "The button that opens the month/year picker when\nusing a grid style layout."
@@ -19254,6 +19317,33 @@
       ],
       "usage": {},
       "props": [
+        {
+          "name": "alignment",
+          "type": "\"center\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'center'",
+            "resolved": "\"center\" | \"start\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "alignment",
+          "reflectToAttr": false,
+          "docs": "How to control the alignment of the radio and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.",
+          "docsTags": [],
+          "default": "'center'",
+          "values": [
+            {
+              "value": "center",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "color",
           "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
@@ -19375,16 +19465,16 @@
         },
         {
           "name": "labelPlacement",
-          "type": "\"end\" | \"fixed\" | \"start\"",
+          "type": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
           "complexType": {
-            "original": "'start' | 'end' | 'fixed'",
-            "resolved": "\"end\" | \"fixed\" | \"start\"",
+            "original": "'start' | 'end' | 'fixed' | 'stacked'",
+            "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
             "references": {}
           },
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
-          "docs": "Where to place the label relative to the radio.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docs": "Where to place the label relative to the radio.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -19396,6 +19486,10 @@
               "value": "fixed",
               "type": "string"
             },
+            {
+              "value": "stacked",
+              "type": "string"
+            },
             {
               "value": "start",
               "type": "string"
@@ -19924,16 +20018,16 @@
         },
         {
           "name": "labelPlacement",
-          "type": "\"end\" | \"fixed\" | \"start\"",
+          "type": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
           "complexType": {
-            "original": "'start' | 'end' | 'fixed'",
-            "resolved": "\"end\" | \"fixed\" | \"start\"",
+            "original": "'start' | 'end' | 'fixed' | 'stacked'",
+            "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
             "references": {}
           },
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
-          "docs": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docs": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the range regardless of the direction.",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -19945,6 +20039,10 @@
               "value": "fixed",
               "type": "string"
             },
+            {
+              "value": "stacked",
+              "type": "string"
+            },
             {
               "value": "start",
               "type": "string"
@@ -21930,7 +22028,12 @@
           "complexType": {
             "original": "\"ios\" | \"md\"",
             "resolved": "\"ios\" | \"md\"",
-            "references": {}
+            "references": {
+              "Mode": {
+                "location": "global",
+                "id": "global::Mode"
+              }
+            }
           },
           "mutable": true,
           "attr": "mode",
@@ -28117,6 +28220,33 @@
       ],
       "usage": {},
       "props": [
+        {
+          "name": "alignment",
+          "type": "\"center\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'center'",
+            "resolved": "\"center\" | \"start\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "alignment",
+          "reflectToAttr": false,
+          "docs": "How to control the alignment of the toggle and label on the cross axis.\n``\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.",
+          "docsTags": [],
+          "default": "'center'",
+          "values": [
+            {
+              "value": "center",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "checked",
           "type": "boolean",
@@ -28285,16 +28415,16 @@
         },
         {
           "name": "labelPlacement",
-          "type": "\"end\" | \"fixed\" | \"start\"",
+          "type": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
           "complexType": {
-            "original": "'start' | 'end' | 'fixed'",
-            "resolved": "\"end\" | \"fixed\" | \"start\"",
+            "original": "'start' | 'end' | 'fixed' | 'stacked'",
+            "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
             "references": {}
           },
           "mutable": false,
           "attr": "label-placement",
           "reflectToAttr": false,
-          "docs": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
+          "docs": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.",
           "docsTags": [],
           "default": "'start'",
           "values": [
@@ -28306,6 +28436,10 @@
               "value": "fixed",
               "type": "string"
             },
+            {
+              "value": "stacked",
+              "type": "string"
+            },
             {
               "value": "start",
               "type": "string"
@@ -29152,7 +29286,7 @@
       "path": "src/components/toast/toast-interface.ts"
     },
     "src/components/toast/toast-interface.ts::ToastButton": {
-      "declaration": "export interface ToastButton {\n  text?: string;\n  icon?: string;\n  side?: 'start' | 'end';\n  role?: 'cancel' | string;\n  cssClass?: string | string[];\n  htmlAttributes?: { [key: string]: any };\n  handler?: () => boolean | void | Promise<boolean | void>;\n}",
+      "declaration": "export interface ToastButton {\n  text?: string;\n  icon?: string;\n  side?: 'start' | 'end';\n  role?: 'cancel' | string;\n\n  /**\n   * @deprecated Use the toast button's CSS Shadow Parts instead.\n   */\n  cssClass?: string | string[];\n  htmlAttributes?: { [key: string]: any };\n  handler?: () => boolean | void | Promise<boolean | void>;\n}",
       "docstring": "",
       "path": "src/components/toast/toast-interface.ts"
     },

package/dist/esm/{data-4b448e3a.js → data-009dbf15.js}

@@ -185,7 +185,22 @@ const getPartsFromCalendarDay = (el) => {
 };
 function parseDate(val) {
   if (Array.isArray(val)) {
-    return val.map((valStr) => parseDate(valStr));
+    const parsedArray = [];
+    for (const valStr of val) {
+      const parsedVal = parseDate(valStr);
+      /**
+       * If any of the values weren't parsed correctly, consider
+       * the entire batch incorrect. This simplifies the type
+       * signatures by having "undefined" be a general error case
+       * instead of returning (Datetime | undefined)[], which is
+       * harder for TS to perform type narrowing on.
+       */
+      if (!parsedVal) {
+        return undefined;
+      }
+      parsedArray.push(parsedVal);
+    }
+    return parsedArray;
   }
   // manually parse IS0 cuz Date.parse cannot be trusted
   // ISO 8601 format: 1994-12-15T13:47:20Z
@@ -205,6 +220,7 @@ function parseDate(val) {
   }
   if (parse === null) {
     // wasn't able to parse the ISO datetime
+    printIonWarning(`Unable to parse date string: ${val}. Please provide a valid ISO 8601 datetime string.`);
     return undefined;
   }
   // ensure all the parse values exist with at least 0
@@ -1225,12 +1241,20 @@ const generateTime = (refParts, hourCycle = 'h12', minParts, maxParts, hourValue
  * Given DatetimeParts, generate the previous,
  * current, and and next months.
  */
-const generateMonths = (refParts) => {
-  return [
-    getPreviousMonth(refParts),
-    { month: refParts.month, year: refParts.year, day: refParts.day },
-    getNextMonth(refParts),
-  ];
+const generateMonths = (refParts, forcedDate) => {
+  const current = { month: refParts.month, year: refParts.year, day: refParts.day };
+  /**
+   * If we're forcing a month to appear, and it's different from the current month,
+   * ensure it appears by replacing the next or previous month as appropriate.
+   */
+  if (forcedDate !== undefined && (refParts.month !== forcedDate.month || refParts.year !== forcedDate.year)) {
+    const forced = { month: forcedDate.month, year: forcedDate.year, day: forcedDate.day };
+    const forcedMonthIsBefore = isBefore(forced, current);
+    return forcedMonthIsBefore
+      ? [forced, current, getNextMonth(refParts)]
+      : [getPreviousMonth(refParts), current, forced];
+  }
+  return [getPreviousMonth(refParts), current, getNextMonth(refParts)];
 };
 const getMonthColumnData = (locale, refParts, minParts, maxParts, monthValues, formatOptions = {
   month: 'long',

package/dist/esm/{index-2970aafc.js → index-6391de89.js}

@@ -10,8 +10,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-4e8d7fb7.js');
-const mdTransitionAnimation = () => import('./md.transition-2b41d64c.js');
+const iosTransitionAnimation = () => import('./ios.transition-3137d23e.js');
+const mdTransitionAnimation = () => import('./md.transition-48b3b77c.js');
 // TODO(FW-2832): types
 const transition = (opts) => {
   return new Promise((resolve, reject) => {

package/dist/esm/index.js

@@ -2,19 +2,19 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 export { c as createAnimation } from './animation-a1d9e088.js';
-export { iosTransitionAnimation } from './ios.transition-4e8d7fb7.js';
-export { mdTransitionAnimation } from './md.transition-2b41d64c.js';
+export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-6391de89.js';
+export { iosTransitionAnimation } from './ios.transition-3137d23e.js';
+export { mdTransitionAnimation } from './md.transition-48b3b77c.js';
 export { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
 export { createGesture } from './index-ff313b19.js';
 export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-1ef19007.js';
 export { c as componentOnReady } from './helpers-3379ba19.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-96c9ace3.js';
-export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD } from './index-2970aafc.js';
 export { m as menuController } from './index-b3e05099.js';
 export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-e1dadfe6.js';
 import './index-7a14ecec.js';
-import './gesture-controller-0fa396c4.js';
 import './index-847f2fde.js';
+import './gesture-controller-0fa396c4.js';
 import './hardware-back-button-39299f84.js';
 import './framework-delegate-aa433dea.js';
 import './index-595d62c9.js';