@ionic/core 7.4.4-dev.11699472805.157e2476 → 7.4.4-dev.11699475060.1eee2115

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-11-08T19:48:34",
+  "timestamp": "2023-11-08T20:26:26",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.4.0",
+    "version": "4.4.1",
     "typescriptVersion": "5.2.2"
   },
   "components": [
@@ -7102,17 +7102,11 @@
         },
         {
           "name": "hourCycle",
-          "type": "\"h11\" | \"h12\" | \"h23\" | \"h24\" | undefined",
+          "type": "\"h12\" | \"h23\" | undefined",
           "complexType": {
-            "original": "DatetimeHourCycle",
-            "resolved": "\"h11\" | \"h12\" | \"h23\" | \"h24\" | undefined",
-            "references": {
-              "DatetimeHourCycle": {
-                "location": "import",
-                "path": "./datetime-interface",
-                "id": "src/components/datetime/datetime-interface.ts::DatetimeHourCycle"
-              }
-            }
+            "original": "'h23' | 'h12'",
+            "resolved": "\"h12\" | \"h23\" | undefined",
+            "references": {}
           },
           "mutable": false,
           "attr": "hour-cycle",
@@ -7120,10 +7114,6 @@
           "docs": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale.",
           "docsTags": [],
           "values": [
-            {
-              "value": "h11",
-              "type": "string"
-            },
             {
               "value": "h12",
               "type": "string"
@@ -7132,10 +7122,6 @@
               "value": "h23",
               "type": "string"
             },
-            {
-              "value": "h24",
-              "type": "string"
-            },
             {
               "type": "undefined"
             }
@@ -27733,7 +27719,7 @@
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
-          "docs": "The starting position of the toast on the screen. Can be tweaked further\nusing the `positionAnchor` property.",
+          "docs": "The position of the toast on the screen.",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -27753,38 +27739,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "positionAnchor",
-          "type": "HTMLElement | string | undefined",
-          "complexType": {
-            "original": "HTMLElement | string",
-            "resolved": "HTMLElement | string | undefined",
-            "references": {
-              "HTMLElement": {
-                "location": "global",
-                "id": "global::HTMLElement"
-              }
-            }
-          },
-          "mutable": false,
-          "attr": "position-anchor",
-          "reflectToAttr": false,
-          "docs": "The element to anchor the toast's position to. Can be set as a direct reference\nor the ID of the element. With `position=\"bottom\"`, the toast will sit above the\nchosen element. With `position=\"top\"`, the toast will sit below the chosen element.\nWith `position=\"middle\"`, the value of `positionAnchor` is ignored.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "HTMLElement"
-            },
-            {
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
         {
           "name": "translucent",
           "type": "boolean",
@@ -27867,9 +27821,8 @@
                 "id": "global::Promise"
               },
               "ToastDismissOptions": {
-                "location": "import",
-                "path": "./toast-interface",
-                "id": "src/components/toast/toast-interface.ts::ToastDismissOptions"
+                "location": "global",
+                "id": "global::ToastDismissOptions"
               }
             },
             "return": "Promise<boolean>"
@@ -27965,9 +27918,8 @@
                 "id": "global::Promise"
               },
               "ToastPresentOptions": {
-                "location": "import",
-                "path": "./toast-interface",
-                "id": "src/components/toast/toast-interface.ts::ToastPresentOptions"
+                "location": "global",
+                "id": "global::ToastPresentOptions"
               }
             },
             "return": "Promise<void>"
@@ -29043,11 +28995,6 @@
       "docstring": "",
       "path": "src/components/datetime/datetime-interface.ts"
     },
-    "src/components/datetime/datetime-interface.ts::DatetimeHourCycle": {
-      "declaration": "export type DatetimeHourCycle = 'h11' | 'h12' | 'h23' | 'h24';",
-      "docstring": "",
-      "path": "src/components/datetime/datetime-interface.ts"
-    },
     "src/components/datetime/datetime-interface.ts::DatetimeChangeEventDetail": {
       "declaration": "export interface DatetimeChangeEventDetail {\n  value?: string | string[] | null;\n}",
       "docstring": "",
@@ -29343,16 +29290,6 @@
       "docstring": "",
       "path": "src/components/toast/toast-interface.ts"
     },
-    "src/components/toast/toast-interface.ts::ToastPresentOptions": {
-      "declaration": "export type ToastPresentOptions = ToastPositionAlias & ToastAnimationPosition;",
-      "docstring": "",
-      "path": "src/components/toast/toast-interface.ts"
-    },
-    "src/components/toast/toast-interface.ts::ToastDismissOptions": {
-      "declaration": "export type ToastDismissOptions = ToastPositionAlias & ToastAnimationPosition;",
-      "docstring": "",
-      "path": "src/components/toast/toast-interface.ts"
-    },
     "src/components/toggle/toggle-interface.ts::ToggleChangeEventDetail": {
       "declaration": "export interface ToggleChangeEventDetail<T = any> {\n  value: T;\n  checked: boolean;\n}",
       "docstring": "",

package/dist/esm/{app-globals-df292a32.js → app-globals-ec816a70.js}

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

package/dist/esm/{button-active-3dd473a1.js → button-active-5136c12d.js}

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-cb894020.js';
-import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-1243b917.js';
+import { w as writeTask } from './index-b49b173c.js';
+import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-6447af60.js';
 import { createGesture } from './index-ff313b19.js';
 
 const createButtonActiveGesture = (el, isButton) => {

package/dist/esm/{data-44d9e816.js → data-009dbf15.js}

@@ -53,19 +53,13 @@ const warnIfValueOutOfBounds = (value, min, max) => {
 const isLeapYear = (year) => {
   return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
 };
-/**
- * Determines the hour cycle for a user.
- * If the hour cycle is explicitly defined, just use that.
- * Otherwise, we try to derive it from either the specified
- * locale extension tags or from Intl.DateTimeFormat directly.
- */
-const getHourCycle = (locale, hourCycle) => {
+const is24Hour = (locale, hourCycle) => {
   /**
-   * If developer has explicitly enabled 24-hour time
+   * If developer has explicitly enabled h23 time
    * then return early and do not look at the system default.
    */
   if (hourCycle !== undefined) {
-    return hourCycle;
+    return hourCycle === 'h23';
   }
   /**
    * If hourCycle was not specified, check the locale
@@ -76,7 +70,7 @@ const getHourCycle = (locale, hourCycle) => {
   const formatted = new Intl.DateTimeFormat(locale, { hour: 'numeric' });
   const options = formatted.resolvedOptions();
   if (options.hourCycle !== undefined) {
-    return options.hourCycle;
+    return options.hourCycle === 'h23';
   }
   /**
    * If hourCycle is not specified (either through lack
@@ -89,33 +83,7 @@ const getHourCycle = (locale, hourCycle) => {
   if (!hour) {
     throw new Error('Hour value not found from DateTimeFormat');
   }
-  /**
-   * Midnight for h11 starts at 0:00am
-   * Midnight for h12 starts at 12:00am
-   * Midnight for h23 starts at 00:00
-   * Midnight for h24 starts at 24:00
-   */
-  switch (hour.value) {
-    case '0':
-      return 'h11';
-    case '12':
-      return 'h12';
-    case '00':
-      return 'h23';
-    case '24':
-      return 'h24';
-    default:
-      throw new Error(`Invalid hour cycle "${hourCycle}"`);
-  }
-};
-/**
- * Determine if the hour cycle uses a 24-hour format.
- * Returns true for h23 and h24. Returns false otherwise.
- * If you don't know the hourCycle, use getHourCycle above
- * and pass the result into this function.
- */
-const is24Hour = (hourCycle) => {
-  return hourCycle === 'h23' || hourCycle === 'h24';
+  return hour.value === '00';
 };
 /**
  * Given a date object, returns the number
@@ -782,7 +750,7 @@ const getFormattedDayPeriod = (dayPeriod) => {
   }
   return dayPeriod.toUpperCase();
 };
-const getLocalizedTime = (locale, refParts, hourCycle) => {
+const getLocalizedTime = (locale, refParts, use24Hour) => {
   const timeParts = {
     hour: refParts.hour,
     minute: refParts.minute,
@@ -804,7 +772,7 @@ const getLocalizedTime = (locale, refParts, hourCycle) => {
      * We use hourCycle here instead of hour12 due to:
      * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
      */
-    hourCycle,
+    hourCycle: use24Hour ? 'h23' : 'h12',
     /**
      * Setting Z at the end indicates that this
      * date string is in the UTC time zone. This
@@ -842,33 +810,17 @@ const addTimePadding = (value) => {
  * 12 hour times it ensures that
  * hour 0 is formatted as '12'.
  */
-const getFormattedHour = (hour, hourCycle) => {
-  /**
-   * Midnight for h11 starts at 0:00am
-   * Midnight for h12 starts at 12:00am
-   * Midnight for h23 starts at 00:00
-   * Midnight for h24 starts at 24:00
-   */
-  if (hour === 0) {
-    switch (hourCycle) {
-      case 'h11':
-        return '0';
-      case 'h12':
-        return '12';
-      case 'h23':
-        return '00';
-      case 'h24':
-        return '24';
-      default:
-        throw new Error(`Invalid hour cycle "${hourCycle}"`);
-    }
+const getFormattedHour = (hour, use24Hour) => {
+  if (use24Hour) {
+    return addTimePadding(hour);
   }
-  const use24Hour = is24Hour(hourCycle);
   /**
-   * h23 and h24 use 24 hour times.
+   * If using 12 hour
+   * format, make sure hour
+   * 0 is formatted as '12'.
    */
-  if (use24Hour) {
-    return addTimePadding(hour);
+  if (hour === 0) {
+    return '12';
   }
   return hour.toString();
 };
@@ -1103,14 +1055,8 @@ const minutes = [
   0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
   32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59,
 ];
-// h11 hour system uses 0-11. Midnight starts at 0:00am.
-const hour11 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-// h12 hour system uses 0-12. Midnight starts at 12:00am.
 const hour12 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-// h23 hour system uses 0-23. Midnight starts at 0:00.
 const hour23 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
-// h24 hour system uses 1-24. Midnight starts at 24:00.
-const hour24 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0];
 /**
  * Given a locale and a mode,
  * return an array with formatted days
@@ -1179,33 +1125,14 @@ const getDaysOfMonth = (month, year, firstDayOfWeek) => {
   }
   return days;
 };
-/**
- * Returns an array of pre-defined hour
- * values based on the provided hourCycle.
- */
-const getHourData = (hourCycle) => {
-  switch (hourCycle) {
-    case 'h11':
-      return hour11;
-    case 'h12':
-      return hour12;
-    case 'h23':
-      return hour23;
-    case 'h24':
-      return hour24;
-    default:
-      throw new Error(`Invalid hour cycle "${hourCycle}"`);
-  }
-};
 /**
  * Given a local, reference datetime parts and option
  * max/min bound datetime parts, calculate the acceptable
  * hour and minute values according to the bounds and locale.
  */
-const generateTime = (locale, refParts, hourCycle = 'h12', minParts, maxParts, hourValues, minuteValues) => {
-  const computedHourCycle = getHourCycle(locale, hourCycle);
-  const use24Hour = is24Hour(computedHourCycle);
-  let processedHours = getHourData(computedHourCycle);
+const generateTime = (refParts, hourCycle = 'h12', minParts, maxParts, hourValues, minuteValues) => {
+  const use24Hour = hourCycle === 'h23';
+  let processedHours = use24Hour ? hour23 : hour12;
   let processedMinutes = minutes;
   let isAMAllowed = true;
   let isPMAllowed = true;
@@ -1537,12 +1464,11 @@ const getCombinedDateColumnData = (locale, todayParts, minParts, maxParts, dayVa
   };
 };
 const getTimeColumnsData = (locale, refParts, hourCycle, minParts, maxParts, allowedHourValues, allowedMinuteValues) => {
-  const computedHourCycle = getHourCycle(locale, hourCycle);
-  const use24Hour = is24Hour(computedHourCycle);
-  const { hours, minutes, am, pm } = generateTime(locale, refParts, computedHourCycle, minParts, maxParts, allowedHourValues, allowedMinuteValues);
+  const use24Hour = is24Hour(locale, hourCycle);
+  const { hours, minutes, am, pm } = generateTime(refParts, use24Hour ? 'h23' : 'h12', minParts, maxParts, allowedHourValues, allowedMinuteValues);
   const hoursItems = hours.map((hour) => {
     return {
-      text: getFormattedHour(hour, computedHourCycle),
+      text: getFormattedHour(hour, use24Hour),
       value: getInternalHourValue(hour, use24Hour, refParts.ampm),
     };
   });
@@ -1572,4 +1498,4 @@ const getTimeColumnsData = (locale, refParts, hourCycle, minParts, maxParts, all
   };
 };
 
-export { getDayColumnData as A, getYearColumnData as B, isMonthFirstLocale as C, getTimeColumnsData as D, isLocaleDayPeriodRTL as E, getDaysOfWeek as F, getMonthAndYear as G, getDaysOfMonth as H, generateMonths as I, getHourCycle as J, getLocalizedTime as K, getMonthAndDay as L, formatValue as M, getNextYear as N, getPreviousYear as O, clampDate as P, parseAmPm as Q, calculateHourFromAMPM as R, getLocalizedDateTime as S, getMonthDayAndYear as T, getDay as a, isAfter as b, isSameDay as c, getPreviousMonth as d, getNextMonth as e, getPartsFromCalendarDay as f, generateDayAriaLabel as g, getEndOfWeek as h, isBefore as i, getStartOfWeek as j, getPreviousDay as k, getNextDay as l, getPreviousWeek as m, getNextWeek as n, parseMaxParts as o, parseMinParts as p, parseDate as q, convertToArrayOfNumbers as r, convertDataToISO as s, getToday as t, getClosestValidDate as u, validateParts as v, warnIfValueOutOfBounds as w, getNumDaysInMonth as x, getCombinedDateColumnData as y, getMonthColumnData as z };
+export { getDayColumnData as A, getYearColumnData as B, isMonthFirstLocale as C, getTimeColumnsData as D, isLocaleDayPeriodRTL as E, getDaysOfWeek as F, getMonthAndYear as G, getDaysOfMonth as H, generateMonths as I, is24Hour as J, getLocalizedTime as K, getMonthAndDay as L, formatValue as M, getNextYear as N, getPreviousYear as O, clampDate as P, parseAmPm as Q, calculateHourFromAMPM as R, getLocalizedDateTime as S, getMonthDayAndYear as T, getDay as a, isAfter as b, isSameDay as c, getPreviousMonth as d, getNextMonth as e, getPartsFromCalendarDay as f, generateDayAriaLabel as g, getEndOfWeek as h, isBefore as i, getStartOfWeek as j, getPreviousDay as k, getNextDay as l, getPreviousWeek as m, getNextWeek as n, parseMaxParts as o, parseMinParts as p, parseDate as q, convertToArrayOfNumbers as r, convertDataToISO as s, getToday as t, getClosestValidDate as u, validateParts as v, warnIfValueOutOfBounds as w, getNumDaysInMonth as x, getCombinedDateColumnData as y, getMonthColumnData as z };

package/dist/esm/{haptic-1243b917.js → haptic-6447af60.js}

@@ -76,7 +76,6 @@ const HapticEngine = {
      * if the browser does not support the Vibrate API.
      */
     if ((capacitor === null || capacitor === void 0 ? void 0 : capacitor.getPlatform()) === 'web') {
-      // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
       return typeof navigator !== 'undefined' && navigator.vibrate !== undefined;
     }
     return true;

package/dist/esm/{index-6e10cd02.js → index-641aeeed.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask, B as Build } from './index-cb894020.js';
+import { w as writeTask, B as Build } from './index-b49b173c.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-6707a3a1.js');
-const mdTransitionAnimation = () => import('./md.transition-957964fd.js');
+const iosTransitionAnimation = () => import('./ios.transition-04c9a97a.js');
+const mdTransitionAnimation = () => import('./md.transition-67a8aabd.js');
 // TODO(FW-2832): types
 const transition = (opts) => {
   return new Promise((resolve, reject) => {

package/dist/esm/{index-cb894020.js → index-b49b173c.js}

@@ -925,7 +925,7 @@ const putBackInOriginalLocation = (parentElm, recursive) => {
             parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
             // remove the old original location comment entirely
             // later on the patch function will know what to do
-            // and move this to the correct spot in need be
+            // and move this to the correct spot if need be
             childNode['s-ol'].remove();
             childNode['s-ol'] = undefined;
             checkSlotRelocate = true;
@@ -1351,30 +1351,37 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+/**
+ * Adjust the `.hidden` property as-needed on any nodes in a DOM subtree which
+ * are slot fallbacks nodes.
+ *
+ * A slot fallback node should be visible by default. Then, it should be
+ * conditionally hidden if:
+ *
+ * - it has a sibling with a `slot` property set to its slot name or if
+ * - it is a default fallback slot node, in which case we hide if it has any
+ *   content
+ *
+ * @param elm the element of interest
+ */
 const updateFallbackSlotVisibility = (elm) => {
-    // tslint:disable-next-line: prefer-const
     const childNodes = elm.childNodes;
-    let childNode;
-    let i;
-    let ilen;
-    let j;
-    let slotNameAttr;
-    let nodeType;
-    for (i = 0, ilen = childNodes.length; i < ilen; i++) {
-        childNode = childNodes[i];
+    for (const childNode of childNodes) {
         if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
             if (childNode['s-sr']) {
                 // this is a slot fallback node
                 // get the slot name for this slot reference node
-                slotNameAttr = childNode['s-sn'];
+                const slotName = childNode['s-sn'];
                 // by default always show a fallback slot node
                 // then hide it if there are other slots in the light dom
                 childNode.hidden = false;
-                for (j = 0; j < ilen; j++) {
-                    nodeType = childNodes[j].nodeType;
-                    if (childNodes[j]['s-hn'] !== childNode['s-hn'] || slotNameAttr !== '') {
-                        // this sibling node is from a different component OR is a named fallback slot node
-                        if (nodeType === 1 /* NODE_TYPE.ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
+                // we need to check all of its sibling nodes in order to see if
+                // `childNode` should be hidden
+                for (const siblingNode of childNodes) {
+                    if (siblingNode['s-hn'] !== childNode['s-hn'] || slotName !== '') {
+                        // this sibling node is from a different component OR is a named
+                        // fallback slot node
+                        if (siblingNode.nodeType === 1 /* NODE_TYPE.ElementNode */ && slotName === siblingNode.getAttribute('slot')) {
                             childNode.hidden = true;
                             break;
                         }
@@ -1383,8 +1390,8 @@ const updateFallbackSlotVisibility = (elm) => {
                         // this is a default fallback slot node
                         // any element or text node (with content)
                         // should hide the default fallback slot node
-                        if (nodeType === 1 /* NODE_TYPE.ElementNode */ ||
-                            (nodeType === 3 /* NODE_TYPE.TextNode */ && childNodes[j].textContent.trim() !== '')) {
+                        if (siblingNode.nodeType === 1 /* NODE_TYPE.ElementNode */ ||
+                            (siblingNode.nodeType === 3 /* NODE_TYPE.TextNode */ && siblingNode.textContent.trim() !== '')) {
                             childNode.hidden = true;
                             break;
                         }
@@ -1396,42 +1403,55 @@ const updateFallbackSlotVisibility = (elm) => {
         }
     }
 };
+/**
+ * Component-global information about nodes which are either currently being
+ * relocated or will be shortly.
+ */
 const relocateNodes = [];
-const relocateSlotContent = (elm) => {
+/**
+ * Mark the contents of a slot for relocation via adding references to them to
+ * the {@link relocateNodes} data structure. The actual work of relocating them
+ * will then be handled in {@link renderVdom}.
+ *
+ * @param elm a render node whose child nodes need to be relocated
+ */
+const markSlotContentForRelocation = (elm) => {
     // tslint:disable-next-line: prefer-const
-    let childNode;
     let node;
     let hostContentNodes;
-    let slotNameAttr;
-    let relocateNodeData;
     let j;
-    let i = 0;
-    const childNodes = elm.childNodes;
-    const ilen = childNodes.length;
-    for (; i < ilen; i++) {
-        childNode = childNodes[i];
+    for (const childNode of elm.childNodes) {
+        // we need to find child nodes which are slot references so we can then try
+        // to match them up with nodes that need to be relocated
         if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
-            // first got the content reference comment node
-            // then we got it's parent, which is where all the host content is in now
+            // first get the content reference comment node ('s-cr'), then we get
+            // its parent, which is where all the host content is now
             hostContentNodes = node.parentNode.childNodes;
-            slotNameAttr = childNode['s-sn'];
+            const slotName = childNode['s-sn'];
+            // iterate through all the nodes under the location where the host was
+            // originally rendered
             for (j = hostContentNodes.length - 1; j >= 0; j--) {
                 node = hostContentNodes[j];
+                // check that the node is not a content reference node or a node
+                // reference and then check that the host name does not match that of
+                // childNode
                 if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
-                    // let's do some relocating to its new home
-                    // but never relocate a content reference node
-                    // that is suppose to always represent the original content location
-                    if (isNodeLocatedInSlot(node, slotNameAttr)) {
+                    // if `node` is located in the slot that `childNode` refers to (via the
+                    // `'s-sn'` property) then we need to relocate it from it's current spot
+                    // (under the host element parent) to the right slot location
+                    if (isNodeLocatedInSlot(node, slotName)) {
                         // it's possible we've already decided to relocate this node
-                        relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
+                        let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
                         // made some changes to slots
                         // let's make sure we also double check
                         // fallbacks are correctly hidden or shown
                         checkSlotFallbackVisibility = true;
-                        node['s-sn'] = node['s-sn'] || slotNameAttr;
+                        // ensure that the slot-name attr is correct
+                        node['s-sn'] = node['s-sn'] || slotName;
                         if (relocateNodeData) {
-                            // previously we never found a slot home for this node
-                            // but turns out we did, so let's remember it now
+                            // we marked this node for relocation previously but didn't find
+                            // out the slot reference node to which it needs to be relocated
+                            // so write it down now!
                             relocateNodeData.$slotRefNode$ = childNode;
                         }
                         else {
@@ -1453,8 +1473,10 @@ const relocateSlotContent = (elm) => {
                         }
                     }
                     else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
-                        // so far this element does not have a slot home, not setting slotRefNode on purpose
-                        // if we never find a home for this element then we'll need to hide it
+                        // the node is not found within the slot (`childNode`) that we're
+                        // currently looking at, so we stick it into `relocateNodes` to
+                        // handle later. If we never find a home for this element then
+                        // we'll need to hide it
                         relocateNodes.push({
                             $nodeToRelocate$: node,
                         });
@@ -1462,30 +1484,41 @@ const relocateSlotContent = (elm) => {
                 }
             }
         }
+        // if we're dealing with any type of element (capable of itself being a
+        // slot reference or containing one) then we recur
         if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-            relocateSlotContent(childNode);
+            markSlotContentForRelocation(childNode);
         }
     }
 };
-const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
+/**
+ * Check whether a node is located in a given named slot.
+ *
+ * @param nodeToRelocate the node of interest
+ * @param slotName the slot name to check
+ * @returns whether the node is located in the slot or not
+ */
+const isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
     if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-        if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
+        if (nodeToRelocate.getAttribute('slot') === null && slotName === '') {
+            // if the node doesn't have a slot attribute, and the slot we're checking
+            // is not a named slot, then we assume the node should be within the slot
             return true;
         }
-        if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
+        if (nodeToRelocate.getAttribute('slot') === slotName) {
             return true;
         }
         return false;
     }
-    if (nodeToRelocate['s-sn'] === slotNameAttr) {
+    if (nodeToRelocate['s-sn'] === slotName) {
         return true;
     }
-    return slotNameAttr === '';
+    return slotName === '';
 };
 /**
- * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by
- * calling them with `null`. This signals that the DOM element corresponding to
- * the VDom node has been removed from the DOM.
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by calling
+ * them with `null`. This signals that the DOM element corresponding to the VDom
+ * node has been removed from the DOM.
  *
  * @param vNode a virtual DOM node
  */
@@ -1564,7 +1597,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
         // the disconnectCallback from working
         plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
         if (checkSlotRelocate) {
-            relocateSlotContent(rootVnode.$elm$);
+            markSlotContentForRelocation(rootVnode.$elm$);
             let relocateData;
             let nodeToRelocate;
             let orgLocationNode;
@@ -2101,7 +2134,18 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
     }
     return Cstr;
 };
-const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
+/**
+ * Initialize a Stencil component given a reference to its host element, its
+ * runtime bookkeeping data structure, runtime metadata about the component,
+ * and (optionally) an HMR version ID.
+ *
+ * @param elm a host element
+ * @param hostRef the element's runtime bookkeeping object
+ * @param cmpMeta runtime metadata for the Stencil component
+ * @param hmrVersionId an (optional) HMR version ID
+ */
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
+    let Cstr;
     // initializeComponent
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
         // Let the runtime know that the component has been initialized