@ionic/core 7.3.4-dev.11694548895.1578981b → 7.3.4-dev.11694608913.1bc64f72

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

@@ -71,6 +71,7 @@ export class Toggle {
     this.labelPlacement = 'start';
     this.legacy = undefined;
     this.justify = 'space-between';
+    this.alignment = 'center';
   }
   disabledChanged() {
     this.emitStyle();
@@ -168,7 +169,7 @@ export class Toggle {
     return legacyFormController.hasLegacyControl() ? this.renderLegacyToggle() : this.renderToggle();
   }
   renderToggle() {
-    const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name } = this;
+    const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
     const mode = getIonMode(this);
     const value = this.getValue();
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
@@ -180,6 +181,7 @@ export class Toggle {
         'toggle-checked': checked,
         'toggle-disabled': disabled,
         [`toggle-justify-${justify}`]: true,
+        [`toggle-alignment-${alignment}`]: true,
         [`toggle-label-placement-${labelPlacement}`]: true,
         [`toggle-${rtl}`]: true,
       }) }, h("label", { class: "toggle-wrapper" }, h("input", Object.assign({ type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { class: {
@@ -352,15 +354,15 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'start' | 'end' | 'fixed'",
-          "resolved": "\"end\" | \"fixed\" | \"start\"",
+          "original": "'start' | 'end' | 'fixed' | 'stacked'",
+          "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "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 (\"...\")."
+          "text": "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."
         },
         "attribute": "label-placement",
         "reflect": false,
@@ -400,6 +402,24 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "attribute": "justify",
         "reflect": false,
         "defaultValue": "'space-between'"
+      },
+      "alignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'start' | 'center'",
+          "resolved": "\"center\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "attribute": "alignment",
+        "reflect": false,
+        "defaultValue": "'center'"
       }
     };
   }

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

@@ -123,7 +123,6 @@ input {
   display: flex;
   position: relative;
   flex-grow: 1;
-  align-items: center;
   height: inherit;
   transition: background-color 15ms linear;
   cursor: inherit;
@@ -146,6 +145,15 @@ input {
   margin-bottom: 10px;
 }
 
+:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.toggle-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -172,6 +180,14 @@ input {
   justify-content: end;
 }
 
+:host(.toggle-alignment-start) .toggle-wrapper {
+  align-items: start;
+}
+
+:host(.toggle-alignment-center) .toggle-wrapper {
+  align-items: center;
+}
+
 /**
  * Label is on the left of the input in LTR and
  * on the right in RTL.
@@ -235,6 +251,24 @@ input {
   max-width: 200px;
 }
 
+/**
+ * Label is on top of the toggle.
+ */
+:host(.toggle-label-placement-stacked) .toggle-wrapper {
+  flex-direction: column;
+}
+
+:host(.toggle-label-placement-stacked) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the toggle should be on the bottom
+   * when the label sits on top.
+   */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
 .toggle-icon-wrapper {
   display: flex;
   position: relative;

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/input-shims/hacks/scroll-assist.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { win } from "../../browser/index";
 import { getScrollElement, scrollByPoint } from "../../content";
 import { raf } from "../../helpers";
 import { KeyboardResize } from "../../native/keyboard";
@@ -21,20 +20,6 @@ export const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, ke
    * Resize info is available on Capacitor 4+
    */
   const addScrollPadding = enableScrollPadding && (keyboardResize === undefined || keyboardResize.mode === KeyboardResize.None);
-  /**
-   * When adding scroll padding we need to know
-   * how much of the viewport the keyboard obscures.
-   * We do this by subtracting the keyboard height
-   * from the platform height.
-   *
-   * If we compute this value when switching between
-   * inputs then the webview may already be resized.
-   * At this point, `win.innerHeight` has already accounted
-   * for the keyboard meaning we would then subtract
-   * the keyboard height again. This will result in the input
-   * being scrolled more than it needs to.
-   */
-  const platformHeight = win !== undefined ? win.innerHeight : 0;
   /**
    * When the input is about to receive
    * focus, we need to move it to prevent
@@ -51,7 +36,7 @@ export const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, ke
       inputEl.removeAttribute(SKIP_SCROLL_ASSIST);
       return;
     }
-    jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, addScrollPadding, disableClonedInput, platformHeight);
+    jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, addScrollPadding, disableClonedInput);
   };
   componentEl.addEventListener('focusin', focusIn, true);
   return () => {
@@ -74,11 +59,11 @@ const setManualFocus = (el) => {
   el.setAttribute(SKIP_SCROLL_ASSIST, 'true');
   el.focus();
 };
-const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHeight, enableScrollPadding, disableClonedInput = false, platformHeight = 0) => {
+const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHeight, enableScrollPadding, disableClonedInput = false) => {
   if (!contentEl && !footerEl) {
     return;
   }
-  const scrollData = getScrollData(componentEl, (contentEl || footerEl), keyboardHeight, platformHeight);
+  const scrollData = getScrollData(componentEl, (contentEl || footerEl), keyboardHeight);
   if (contentEl && Math.abs(scrollData.scrollAmount) < 4) {
     // the text input is in a safe position that doesn't
     // require it to be scrolled into view, just set focus now

package/dist/collection/utils/input-shims/hacks/scroll-data.js

@@ -3,10 +3,11 @@
  */
 import { SCROLL_AMOUNT_PADDING } from "./common";
 const SCROLL_ASSIST_SPEED = 0.3;
-export const getScrollData = (componentEl, contentEl, keyboardHeight, platformHeight) => {
+export const getScrollData = (componentEl, contentEl, keyboardHeight) => {
   var _a;
   const itemEl = (_a = componentEl.closest('ion-item,[ion-item]')) !== null && _a !== void 0 ? _a : componentEl;
-  return calcScrollData(itemEl.getBoundingClientRect(), contentEl.getBoundingClientRect(), keyboardHeight, platformHeight);
+  return calcScrollData(itemEl.getBoundingClientRect(), contentEl.getBoundingClientRect(), keyboardHeight, componentEl.ownerDocument.defaultView.innerHeight // TODO(FW-2832): type
+  );
 };
 const calcScrollData = (inputRect, contentRect, keyboardHeight, platformHeight) => {
   // compute input's Y values relative to the body

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-09-12T20:03:48",
+  "timestamp": "2023-09-13T12:44:09",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.2.1",
+    "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"
@@ -28122,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",
@@ -28290,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": [
@@ -28311,6 +28436,10 @@
               "value": "fixed",
               "type": "string"
             },
+            {
+              "value": "stacked",
+              "type": "string"
+            },
             {
               "value": "start",
               "type": "string"
@@ -29157,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/{app-globals-c7886b40.js → app-globals-e8ddf830.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { i as initialize } from './ionic-global-9080266a.js';
+import { i as initialize } from './ionic-global-1ef19007.js';
 
 const globalScripts = initialize;
 

package/dist/esm/{button-active-b76ae4ec.js → button-active-2da0f611.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-adfb2000.js';
+import { w as writeTask } from './index-847f2fde.js';
 import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-6447af60.js';
 import { createGesture } from './index-ff313b19.js';
 

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-01839411.js → index-6391de89.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask, B as Build } from './index-adfb2000.js';
+import { w as writeTask, B as Build } from './index-847f2fde.js';
 import { r as raf } from './helpers-3379ba19.js';
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
@@ -10,8 +10,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-f43871cd.js');
-const mdTransitionAnimation = () => import('./md.transition-12d21ad0.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-adfb2000.js → index-847f2fde.js}

@@ -131,13 +131,13 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
         if (vnodeData.key) {
             key = vnodeData.key;
         }
         if (vnodeData.name) {
             slotName = vnodeData.name;
         }
-        // normalize class / className attributes
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -383,7 +383,7 @@ const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes
                 }
             }
             else if (childVNode.$hostId$ === hostId) {
-                // this comment node is specifically for this host id
+                // this comment node is specifcally for this host id
                 if (childNodeType === SLOT_NODE_ID) {
                     // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
                     childVNode.$tag$ = 'slot';
@@ -1610,7 +1610,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                         // has a different next sibling or parent relocated
                         if (nodeToRelocate !== insertBeforeNode) {
                             if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
-                                // probably a component in the index.html that doesn't have its hostname set
+                                // probably a component in the index.html that doesn't have it's hostname set
                                 nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
                             }
                             // add it back to the dom but in its new home
@@ -2014,12 +2014,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
-                    //  In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
+                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
                     //
-                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
                     //
                     //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties