@ionic/core 7.4.4-dev.11699475060.1eee2115 → 7.4.4-dev.11700515976.1ccd503d

package/components/alert.js

@@ -166,6 +166,14 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
   }
   onKeydown(ev) {
     const inputTypes = new Set(this.processedInputs.map((i) => i.type));
+    /**
+     * Based on keyboard navigation requirements, the
+     * checkbox should not respond to the enter keydown event.
+     */
+    if (inputTypes.has('checkbox') && ev.key === 'Enter') {
+      ev.preventDefault();
+      return;
+    }
     // The only inputs we want to navigate between using arrow keys are the radios
     // ignore the keydown event if it is not on a radio button
     if (!inputTypes.has('radio') ||

package/components/checkbox.js

@@ -52,9 +52,6 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
       this.ionBlur.emit();
     };
     this.onClick = (ev) => {
-      if (this.disabled) {
-        return;
-      }
       this.toggleChecked(ev);
     };
     this.color = undefined;

package/components/data.js

@@ -53,13 +53,19 @@ const warnIfValueOutOfBounds = (value, min, max) => {
 const isLeapYear = (year) => {
   return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
 };
-const is24Hour = (locale, hourCycle) => {
+/**
+ * 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) => {
   /**
-   * If developer has explicitly enabled h23 time
+   * If developer has explicitly enabled 24-hour time
    * then return early and do not look at the system default.
    */
   if (hourCycle !== undefined) {
-    return hourCycle === 'h23';
+    return hourCycle;
   }
   /**
    * If hourCycle was not specified, check the locale
@@ -70,7 +76,7 @@ const is24Hour = (locale, hourCycle) => {
   const formatted = new Intl.DateTimeFormat(locale, { hour: 'numeric' });
   const options = formatted.resolvedOptions();
   if (options.hourCycle !== undefined) {
-    return options.hourCycle === 'h23';
+    return options.hourCycle;
   }
   /**
    * If hourCycle is not specified (either through lack
@@ -83,7 +89,33 @@ const is24Hour = (locale, hourCycle) => {
   if (!hour) {
     throw new Error('Hour value not found from DateTimeFormat');
   }
-  return hour.value === '00';
+  /**
+   * 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';
 };
 /**
  * Given a date object, returns the number
@@ -750,7 +782,7 @@ const getFormattedDayPeriod = (dayPeriod) => {
   }
   return dayPeriod.toUpperCase();
 };
-const getLocalizedTime = (locale, refParts, use24Hour) => {
+const getLocalizedTime = (locale, refParts, hourCycle) => {
   const timeParts = {
     hour: refParts.hour,
     minute: refParts.minute,
@@ -772,7 +804,7 @@ const getLocalizedTime = (locale, refParts, use24Hour) => {
      * We use hourCycle here instead of hour12 due to:
      * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
      */
-    hourCycle: use24Hour ? 'h23' : 'h12',
+    hourCycle,
     /**
      * Setting Z at the end indicates that this
      * date string is in the UTC time zone. This
@@ -810,17 +842,33 @@ const addTimePadding = (value) => {
  * 12 hour times it ensures that
  * hour 0 is formatted as '12'.
  */
-const getFormattedHour = (hour, use24Hour) => {
-  if (use24Hour) {
-    return addTimePadding(hour);
-  }
+const getFormattedHour = (hour, hourCycle) => {
   /**
-   * If using 12 hour
-   * format, make sure hour
-   * 0 is formatted as '12'.
+   * 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) {
-    return '12';
+    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 use24Hour = is24Hour(hourCycle);
+  /**
+   * h23 and h24 use 24 hour times.
+   */
+  if (use24Hour) {
+    return addTimePadding(hour);
   }
   return hour.toString();
 };
@@ -1055,8 +1103,14 @@ 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
@@ -1125,14 +1179,33 @@ 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 = (refParts, hourCycle = 'h12', minParts, maxParts, hourValues, minuteValues) => {
-  const use24Hour = hourCycle === 'h23';
-  let processedHours = use24Hour ? hour23 : hour12;
+const generateTime = (locale, refParts, hourCycle = 'h12', minParts, maxParts, hourValues, minuteValues) => {
+  const computedHourCycle = getHourCycle(locale, hourCycle);
+  const use24Hour = is24Hour(computedHourCycle);
+  let processedHours = getHourData(computedHourCycle);
   let processedMinutes = minutes;
   let isAMAllowed = true;
   let isPMAllowed = true;
@@ -1464,11 +1537,12 @@ const getCombinedDateColumnData = (locale, todayParts, minParts, maxParts, dayVa
   };
 };
 const getTimeColumnsData = (locale, refParts, hourCycle, minParts, maxParts, allowedHourValues, allowedMinuteValues) => {
-  const use24Hour = is24Hour(locale, hourCycle);
-  const { hours, minutes, am, pm } = generateTime(refParts, use24Hour ? 'h23' : 'h12', 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 hoursItems = hours.map((hour) => {
     return {
-      text: getFormattedHour(hour, use24Hour),
+      text: getFormattedHour(hour, computedHourCycle),
       value: getInternalHourValue(hour, use24Hour, refParts.ampm),
     };
   });
@@ -1498,4 +1572,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, getMonthAndYear as F, getDaysOfWeek 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 };
+export { getDayColumnData as A, getYearColumnData as B, isMonthFirstLocale as C, getTimeColumnsData as D, isLocaleDayPeriodRTL as E, getMonthAndYear as F, getDaysOfWeek 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 };

package/components/haptic.js

@@ -76,6 +76,7 @@ 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/components/icon.js

@@ -221,7 +221,7 @@ const getSvgContent = (url, sanitize) => {
   return req;
 };
 
-const iconCss = ":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}:host(.flip-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";
+const iconCss = ":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}@supports (background: -webkit-named-image(i)){:host(.icon-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}}@supports not selector(:dir(rtl)) and selector(:host-context([dir='rtl'])){:host(.icon-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}}:host(.flip-rtl):host-context([dir='rtl']) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@supports selector(:dir(rtl)){:host(.flip-rtl:dir(rtl)) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.flip-rtl:dir(ltr)) .icon-inner{-webkit-transform:scaleX(1);transform:scaleX(1)}}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";
 
 const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
   constructor() {
@@ -300,11 +300,15 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
     this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
   }
   render() {
-    const { iconName, el, inheritedAttributes } = this;
+    const { flipRtl, iconName, inheritedAttributes, el } = this;
     const mode = this.mode || 'md';
-    const flipRtl = this.flipRtl ||
-      (iconName && (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) && this.flipRtl !== false);
-    return (h(Host, Object.assign({ role: "img", class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': !!flipRtl && isRTL(el) }) }, inheritedAttributes), Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
+    // we have designated that arrows & chevrons should automatically flip (unless flip-rtl is set to false) because "back" is left in ltr and right in rtl, and "forward" is the opposite
+    const shouldAutoFlip = iconName
+      ? (iconName.includes('arrow') || iconName.includes('chevron')) && flipRtl !== false
+      : false;
+    // if shouldBeFlippable is true, the icon should change direction when `dir` changes
+    const shouldBeFlippable = flipRtl || shouldAutoFlip;
+    return (h(Host, Object.assign({ role: "img", class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': shouldBeFlippable, 'icon-rtl': shouldBeFlippable && isRTL(el) }) }, inheritedAttributes), Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
   }
   static get assetsDirs() { return ["svg"]; }
   get el() { return this; }

package/components/index.js

@@ -11,6 +11,7 @@ export { createGesture } from './index3.js';
 export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global.js';
 export { c as componentOnReady } from './helpers.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config.js';
+export { o as openURL } from './theme.js';
 export { m as menuController } from './index4.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.js';
 

package/components/index4.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { p as printIonWarning } from './index6.js';
 import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button.js';
 import { c as componentOnReady } from './helpers.js';
 import { b as getIonMode } from './ionic-global.js';
@@ -98,21 +99,21 @@ const createMenuController = () => {
   const menuAnimations = new Map();
   const menus = [];
   const open = async (menu) => {
-    const menuEl = await get(menu);
+    const menuEl = await get(menu, true);
     if (menuEl) {
       return menuEl.open();
     }
     return false;
   };
   const close = async (menu) => {
-    const menuEl = await (menu !== undefined ? get(menu) : getOpen());
+    const menuEl = await (menu !== undefined ? get(menu, true) : getOpen());
     if (menuEl !== undefined) {
       return menuEl.close();
     }
     return false;
   };
   const toggle = async (menu) => {
-    const menuEl = await get(menu);
+    const menuEl = await get(menu, true);
     if (menuEl) {
       return menuEl.toggle();
     }
@@ -150,18 +151,35 @@ const createMenuController = () => {
     }
     return false;
   };
-  const get = async (menu) => {
+  /**
+   * Finds and returns the menu specified by "menu" if registered.
+   * @param menu - The side or ID of the desired menu
+   * @param logOnMultipleSideMenus - If true, this function will log a warning
+   * if "menu" is a side but multiple menus on the same side were found. Since this function
+   * is used in multiple places, we default this log to false so that the calling
+   * functions can choose whether or not it is appropriate to log this warning.
+   */
+  const get = async (menu, logOnMultipleSideMenus = false) => {
     await waitUntilReady();
     if (menu === 'start' || menu === 'end') {
       // there could be more than one menu on the same side
       // so first try to get the enabled one
-      const menuRef = find((m) => m.side === menu && !m.disabled);
-      if (menuRef) {
-        return menuRef;
+      const menuRefs = menus.filter((m) => m.side === menu && !m.disabled);
+      if (menuRefs.length >= 1) {
+        if (menuRefs.length > 1 && logOnMultipleSideMenus) {
+          printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${menuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, menuRefs.map((m) => m.el));
+        }
+        return menuRefs[0].el;
       }
       // didn't find a menu side that is enabled
       // so try to get the first menu side found
-      return find((m) => m.side === menu);
+      const sideMenuRefs = menus.filter((m) => m.side === menu);
+      if (sideMenuRefs.length >= 1) {
+        if (sideMenuRefs.length > 1 && logOnMultipleSideMenus) {
+          printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${sideMenuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, sideMenuRefs.map((m) => m.el));
+        }
+        return sideMenuRefs[0].el;
+      }
     }
     else if (menu != null) {
       // the menuId was not left or right
@@ -203,9 +221,6 @@ const createMenuController = () => {
   };
   const _register = (menu) => {
     if (menus.indexOf(menu) < 0) {
-      if (!menu.disabled) {
-        _setActiveMenu(menu);
-      }
       menus.push(menu);
     }
   };
@@ -215,13 +230,6 @@ const createMenuController = () => {
       menus.splice(index, 1);
     }
   };
-  const _setActiveMenu = (menu) => {
-    // if this menu should be enabled
-    // then find all the other menus on this same side
-    // and automatically disable other same side menus
-    const side = menu.side;
-    menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
-  };
   const _setOpen = async (menu, shouldOpen, animated) => {
     if (isAnimatingSync()) {
       return false;
@@ -293,7 +301,6 @@ const createMenuController = () => {
     _register,
     _unregister,
     _setOpen,
-    _setActiveMenu,
   };
 };
 const menuController = /*@__PURE__*/ createMenuController();

package/components/index7.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-/* Ionicons v7.1.0, ES Modules */
+/* Ionicons v7.1.2, ES Modules */
 const arrowBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='square' stroke-miterlimit='10' stroke-width='48' d='M244 400L100 256l144-144M120 256h292' class='ionicon-fill-none'/></svg>";
 const arrowDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 268l144 144 144-144M256 392V100' class='ionicon-fill-none'/></svg>";
 const caretBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M368 64L144 256l224 192V64z'/></svg>";

package/components/ion-datetime-button.js

@@ -6,7 +6,7 @@ import { a as addEventListener, c as componentOnReady } from './helpers.js';
 import { a as printIonError } from './index6.js';
 import { c as createColorClasses } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
-import { q as parseDate, t as getToday, J as is24Hour, S as getLocalizedDateTime, F as getMonthAndYear, K as getLocalizedTime, T as getMonthDayAndYear } from './data.js';
+import { q as parseDate, t as getToday, J as getHourCycle, S as getLocalizedDateTime, F as getMonthAndYear, K as getLocalizedTime, T as getMonthDayAndYear } from './data.js';
 import { d as defineCustomElement$2 } from './ripple-effect.js';
 
 const iosDatetimeButtonCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}";
@@ -63,13 +63,13 @@ const DatetimeButton = /*@__PURE__*/ proxyCustomElement(class DatetimeButton ext
        * warning in the console.
        */
       const firstParsedDatetime = parsedDatetimes[0];
-      const use24Hour = is24Hour(locale, hourCycle);
+      const computedHourCycle = getHourCycle(locale, hourCycle);
       this.dateText = this.timeText = undefined;
       switch (datetimePresentation) {
         case 'date-time':
         case 'time-date':
           const dateText = getMonthDayAndYear(locale, firstParsedDatetime);
-          const timeText = getLocalizedTime(locale, firstParsedDatetime, use24Hour);
+          const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
           if (preferWheel) {
             this.dateText = `${dateText} ${timeText}`;
           }
@@ -96,7 +96,7 @@ const DatetimeButton = /*@__PURE__*/ proxyCustomElement(class DatetimeButton ext
           }
           break;
         case 'time':
-          this.timeText = getLocalizedTime(locale, firstParsedDatetime, use24Hour);
+          this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
           break;
         case 'month-year':
           this.dateText = getMonthAndYear(locale, firstParsedDatetime);

package/components/ion-datetime.js

@@ -9,7 +9,7 @@ import { i as isRTL } from './dir.js';
 import { c as createColorClasses } from './theme.js';
 import { a as chevronBack, f as chevronForward, c as chevronDown, g as caretUpSharp, h as caretDownSharp } from './index7.js';
 import { b as getIonMode } from './ionic-global.js';
-import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getEndOfWeek, j as getStartOfWeek, k as getPreviousDay, l as getNextDay, m as getPreviousWeek, n as getNextWeek, p as parseMinParts, o as parseMaxParts, q as parseDate, w as warnIfValueOutOfBounds, r as convertToArrayOfNumbers, s as convertDataToISO, t as getToday, u as getClosestValidDate, x as getNumDaysInMonth, y as getCombinedDateColumnData, z as getMonthColumnData, A as getDayColumnData, B as getYearColumnData, C as isMonthFirstLocale, D as getTimeColumnsData, E as isLocaleDayPeriodRTL, F as getMonthAndYear, G as getDaysOfWeek, H as getDaysOfMonth, I as generateMonths, J as is24Hour, K as getLocalizedTime, L as getMonthAndDay, M as formatValue, N as getNextYear, O as getPreviousYear, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data.js';
+import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getEndOfWeek, j as getStartOfWeek, k as getPreviousDay, l as getNextDay, m as getPreviousWeek, n as getNextWeek, p as parseMinParts, o as parseMaxParts, q as parseDate, w as warnIfValueOutOfBounds, r as convertToArrayOfNumbers, s as convertDataToISO, t as getToday, u as getClosestValidDate, x as getNumDaysInMonth, y as getCombinedDateColumnData, z as getMonthColumnData, A as getDayColumnData, B as getYearColumnData, C as isMonthFirstLocale, D as getTimeColumnsData, E as isLocaleDayPeriodRTL, F as getMonthAndYear, G as getDaysOfWeek, H as getDaysOfMonth, I as generateMonths, J as getHourCycle, K as getLocalizedTime, L as getMonthAndDay, M as formatValue, N as getNextYear, O as getPreviousYear, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data.js';
 import { d as defineCustomElement$c } from './backdrop.js';
 import { d as defineCustomElement$b } from './button.js';
 import { d as defineCustomElement$a } from './buttons.js';
@@ -1533,7 +1533,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
   }
   renderTimeOverlay() {
     const { hourCycle, isTimePopoverOpen, locale } = this;
-    const use24Hour = is24Hour(locale, hourCycle);
+    const computedHourCycle = getHourCycle(locale, hourCycle);
     const activePart = this.getActivePartsWithFallback();
     return [
       h("div", { class: "time-header" }, this.renderTimeLabel()),
@@ -1552,7 +1552,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
             await popoverRef.onWillDismiss();
             this.isTimePopoverOpen = false;
           }
-        } }, getLocalizedTime(locale, activePart, use24Hour)),
+        } }, getLocalizedTime(locale, activePart, computedHourCycle)),
       h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
           /**
            * Intersection Observers do not consistently fire between Blink and Webkit

package/components/ion-menu.js

@@ -3,7 +3,6 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
-import { d as doc } from './index5.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
 import { o as isEndSide, i as inheritAriaAttributes, p as assert, m as clamp } from './helpers.js';
 import { m as menuController } from './index4.js';
@@ -589,17 +588,6 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
        */
       this.afterAnimation(false);
     }
-    if (doc === null || doc === void 0 ? void 0 : doc.contains(this.el)) {
-      /**
-       * Only set the active menu if the menu element is
-       * present in the DOM. Otherwise if it was destructively
-       * re-hydrated (through Angular Universal), then ignore
-       * setting the removed node as the active menu.
-       */
-      if (!this.disabled) {
-        menuController._setActiveMenu(this);
-      }
-    }
   }
   render() {
     const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;

package/components/ion-nav.js

@@ -746,6 +746,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
       : undefined;
     const mode = getIonMode(this);
     const enteringEl = enteringView.element;
+    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     const leavingEl = leavingView && leavingView.element;
     const animationOpts = Object.assign(Object.assign({ mode, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && config.getBoolean('animated', true), enteringEl,
       leavingEl }, opts), { animationBuilder: opts.animationBuilder || this.animation || config.get('navAnimation') });

package/components/ion-router.js

@@ -44,6 +44,7 @@ const chainToSegments = (chain) => {
   for (const route of chain) {
     for (const segment of route.segments) {
       if (segment[0] === ':') {
+        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const param = route.params && route.params[segment.slice(1)];
         if (!param) {
           return null;
@@ -740,12 +741,14 @@ const Router = /*@__PURE__*/ proxyCustomElement(class Router extends HTMLElement
     }
     const routes = readRoutes(this.el);
     const fromChain = findChainForSegments(from, routes);
+    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     const beforeLeaveHook = fromChain && fromChain[fromChain.length - 1].beforeLeave;
     const canLeave = beforeLeaveHook ? await beforeLeaveHook() : true;
     if (canLeave === false || typeof canLeave === 'object') {
       return canLeave;
     }
     const toChain = findChainForSegments(to, routes);
+    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     const beforeEnterHook = toChain && toChain[toChain.length - 1].beforeEnter;
     return beforeEnterHook ? beforeEnterHook() : true;
   }

package/components/ion-select.js

@@ -137,39 +137,25 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     await overlay.present();
     // focus selected option for popovers
     if (this.interface === 'popover') {
-      const indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
-      if (indexOfSelected > -1) {
-        const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
-        if (selectedItem) {
-          focusElement(selectedItem);
-          /**
-           * Browsers such as Firefox do not
-           * correctly delegate focus when manually
-           * focusing an element with delegatesFocus.
-           * We work around this by manually focusing
-           * the interactive element.
-           * ion-radio and ion-checkbox are the only
-           * elements that ion-select-popover uses, so
-           * we only need to worry about those two components
-           * when focusing.
-           */
-          const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
-          if (interactiveEl) {
-            interactiveEl.focus();
-          }
-        }
-      }
-      else {
+      let indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
+      indexOfSelected = indexOfSelected > -1 ? indexOfSelected : 0; // default to first option if nothing selected
+      const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
+      if (selectedItem) {
+        focusElement(selectedItem);
         /**
-         * If no value is set then focus the first enabled option.
+         * Browsers such as Firefox do not
+         * correctly delegate focus when manually
+         * focusing an element with delegatesFocus.
+         * We work around this by manually focusing
+         * the interactive element.
+         * ion-radio and ion-checkbox are the only
+         * elements that ion-select-popover uses, so
+         * we only need to worry about those two components
+         * when focusing.
          */
-        const firstEnabledOption = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
-        if (firstEnabledOption) {
-          focusElement(firstEnabledOption.closest('ion-item'));
-          /**
-           * Focus the option for the same reason as we do above.
-           */
-          firstEnabledOption.focus();
+        const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
+        if (interactiveEl) {
+          interactiveEl.focus();
         }
       }
     }
@@ -640,7 +626,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
   }
   renderListbox() {
     const { disabled, inputId, isExpanded } = this;
-    return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "listbox", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+    return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
   }
   render() {
     const { legacyFormController } = this;