@ionic/core 8.5.4-dev.11744209290.123af9eb → 8.5.4-dev.11744646756.1244bf71

package/dist/collection/components/datetime/datetime.js

@@ -54,6 +54,7 @@ export class Datetime {
             hour: 13,
             minute: 52,
             ampm: 'pm',
+            isAdjacentDay: false,
         };
         this.isTimePopoverOpen = false;
         /**
@@ -74,6 +75,12 @@ export class Datetime {
          * If `true`, the datetime appears normal but the selected date cannot be changed.
          */
         this.readonly = false;
+        /**
+         * If `true`, the datetime calendar displays a six-week (42-day) layout,
+         * including days from the previous and next months to fill the grid.
+         * These adjacent days are selectable unless disabled.
+         */
+        this.showAdjacentDays = false;
         /**
          * Which values you want to select. `"date"` will show
          * a calendar picker to select the month, day, and year. `"time"`
@@ -356,12 +363,15 @@ export class Datetime {
         };
         this.focusWorkingDay = (currentMonth) => {
             /**
-             * Get the number of padding days so
+             * Get the number of offset days so
              * we know how much to offset our next selector by
              * to grab the correct calendar-day element.
              */
-            const padding = currentMonth.querySelectorAll('.calendar-day-padding');
-            const { day } = this.workingParts;
+            const { day, month, year } = this.workingParts;
+            const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
+            const offset = firstOfMonth >= this.firstDayOfWeek
+                ? firstOfMonth - this.firstDayOfWeek
+                : 7 - (this.firstDayOfWeek - firstOfMonth);
             if (day === null) {
                 return;
             }
@@ -369,7 +379,7 @@ export class Datetime {
              * Get the calendar day element
              * and focus it.
              */
-            const dayEl = currentMonth.querySelector(`.calendar-day-wrapper:nth-of-type(${padding.length + day}) .calendar-day`);
+            const dayEl = currentMonth.querySelector(`.calendar-day-wrapper:nth-of-type(${offset + day}) .calendar-day`);
             if (dayEl) {
                 dayEl.focus();
             }
@@ -1383,10 +1393,36 @@ export class Datetime {
                 'calendar-month': true,
                 // Prevents scroll snap swipe gestures for months outside of the min/max bounds
                 'calendar-month-disabled': !isWorkingMonth && swipeDisabled,
-            } }, h("div", { class: "calendar-month-grid" }, getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index) => {
-            const { day, dayOfWeek } = dateObject;
-            const { el, highlightedDates, isDateEnabled, multiple } = this;
-            const referenceParts = { month, day, year };
+            } }, h("div", { class: "calendar-month-grid" }, getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showAdjacentDays).map((dateObject, index) => {
+            const { day, dayOfWeek, isAdjacentDay } = dateObject;
+            const { el, highlightedDates, isDateEnabled, multiple, showAdjacentDays } = this;
+            let _month = month;
+            let _year = year;
+            if (showAdjacentDays && isAdjacentDay && day !== null) {
+                if (day > 20) {
+                    // Leading with the adjacent day from the previous month
+                    // if its a adjacent day and is higher than '20' (last week even in feb)
+                    if (month === 1) {
+                        _year = year - 1;
+                        _month = 12;
+                    }
+                    else {
+                        _month = month - 1;
+                    }
+                }
+                else if (day < 15) {
+                    // Leading with the adjacent day from the next month
+                    // if its a adjacent day and is lower than '15' (first two weeks)
+                    if (month === 12) {
+                        _year = year + 1;
+                        _month = 1;
+                    }
+                    else {
+                        _month = month + 1;
+                    }
+                }
+            }
+            const referenceParts = { month: _month, day, year: _year, isAdjacentDay };
             const isCalendarPadding = day === null;
             const { isActive, isToday, ariaLabel, ariaSelected, disabled: isDayDisabled, text, } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
             const dateIsoString = convertDataToISO(referenceParts);
@@ -1416,15 +1452,18 @@ export class Datetime {
              * Custom highlight styles should not override the style for selected dates,
              * nor apply to "filler days" at the start of the grid.
              */
-            if (highlightedDates !== undefined && !isActive && day !== null) {
+            if (highlightedDates !== undefined && !isActive && day !== null && !isAdjacentDay) {
                 dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
             }
             let dateParts = undefined;
             // "Filler days" at the beginning of the grid should not get the calendar day
             // CSS parts added to them
-            if (!isCalendarPadding) {
+            if (!isCalendarPadding && !isAdjacentDay) {
                 dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}`;
             }
+            else if (isAdjacentDay) {
+                dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}`;
+            }
             return (h("div", { class: "calendar-day-wrapper" }, h("button", {
                 // We need to use !important for the inline styles here because
                 // otherwise the CSS shadow parts will override these styles.
@@ -1437,31 +1476,33 @@ export class Datetime {
                         el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
                         el.style.setProperty('background-color', `${dateStyle ? dateStyle.backgroundColor : ''}`, 'important');
                     }
-                }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
+                }, tabindex: "-1", "data-day": day, "data-month": _month, "data-year": _year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
                     'calendar-day-padding': isCalendarPadding,
                     'calendar-day': true,
                     'calendar-day-active': isActive,
                     'calendar-day-constrained': isCalDayConstrained,
                     'calendar-day-today': isToday,
+                    'calendar-day-adjacent-day': isAdjacentDay,
                 }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
                     if (isCalendarPadding) {
                         return;
                     }
-                    this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month,
-                        day,
-                        year }));
-                    // multiple only needs date info, so we can wipe out other fields like time
-                    if (multiple) {
-                        this.setActiveParts({
-                            month,
-                            day,
-                            year,
-                        }, isActive);
+                    if (isAdjacentDay) {
+                        // The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
+                        this.el.blur();
+                        this.activeParts = Object.assign(Object.assign({}, activePart), referenceParts);
+                        this.animateToDate(referenceParts);
+                        this.confirm();
                     }
                     else {
-                        this.setActiveParts(Object.assign(Object.assign({}, activePart), { month,
-                            day,
-                            year }));
+                        this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), referenceParts));
+                        // Multiple only needs date info so we can wipe out other fields like time.
+                        if (multiple) {
+                            this.setActiveParts(referenceParts, isActive);
+                        }
+                        else {
+                            this.setActiveParts(Object.assign(Object.assign({}, activePart), referenceParts));
+                        }
                     }
                 }
             }, text)));
@@ -1632,7 +1673,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '08d429533a09c600b936ad1e022658051c765595', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: 'aa9d515bd5fda60f924bbed4f4f1c6fa7244a4a2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1642,7 +1683,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: 'f4ff0fcd1e059767a7ef14fcc76ebfd55d23a97b', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: 'c85a22ea1b64ec5bf28e4d4c1567d72b6b8ce630', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
@@ -1788,6 +1829,26 @@ export class Datetime {
                 "getter": false,
                 "setter": false
             },
+            "showAdjacentDays": {
+                "type": "boolean",
+                "attribute": "show-adjacent-days",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the datetime calendar displays a six-week (42-day) layout,\nincluding days from the previous and next months to fill the grid.\nThese adjacent days are selectable unless disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "min": {
                 "type": "string",
                 "attribute": "min",

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

@@ -371,7 +371,7 @@
   opacity: 0.4;
 }
 
-.calendar-day:focus {
+.calendar-day:not(.calendar-day-adjacent-day):focus {
   background: rgba(var(--ion-color-base-rgb), 0.2);
   box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);
 }
@@ -652,15 +652,21 @@ ion-picker {
  * is selected should have ion-color for
  * text color and be bolder.
  */
-:host .calendar-day.calendar-day-active {
+:host .calendar-day.calendar-day-active,
+:host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
   color: var(--ion-color-contrast);
 }
 
-.calendar-day.calendar-day-active {
+.calendar-day.calendar-day-active,
+.calendar-day.calendar-day-active:focus {
   border: 1px solid var(--ion-color-base);
   background: var(--ion-color-base);
 }
 
+:host .calendar-day.calendar-day-adjacent-day {
+  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
+}
+
 :host .datetime-time {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;

package/dist/collection/components/datetime/utils/data.js

@@ -78,8 +78,17 @@ export const getDaysOfWeek = (locale, mode, firstDayOfWeek = 0) => {
  * the firstDayOfWeek value (Sunday by default)
  * using null values.
  */
-export const getDaysOfMonth = (month, year, firstDayOfWeek) => {
+export const getDaysOfMonth = (month, year, firstDayOfWeek, showAdjacentDays = false) => {
     const numDays = getNumDaysInMonth(month, year);
+    let previousNumDays; //previous month number of days
+    if (month === 1) {
+        // If the current month is January, the previous month should be December of the previous year.
+        previousNumDays = getNumDaysInMonth(12, year - 1);
+    }
+    else {
+        // Otherwise, the previous month should be the current month - 1 of the same year.
+        previousNumDays = getNumDaysInMonth(month - 1, year);
+    }
     const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
     /**
      * To get the first day of the month aligned on the correct
@@ -103,10 +112,26 @@ export const getDaysOfMonth = (month, year, firstDayOfWeek) => {
     const offset = firstOfMonth >= firstDayOfWeek ? firstOfMonth - (firstDayOfWeek + 1) : 6 - (firstDayOfWeek - firstOfMonth);
     let days = [];
     for (let i = 1; i <= numDays; i++) {
-        days.push({ day: i, dayOfWeek: (offset + i) % 7 });
+        days.push({ day: i, dayOfWeek: (offset + i) % 7, isAdjacentDay: false });
+    }
+    if (showAdjacentDays) {
+        for (let i = 0; i <= offset; i++) {
+            // Using offset create previous month adjacent day, starting from last day
+            days = [{ day: previousNumDays - i, dayOfWeek: (previousNumDays - i) % 7, isAdjacentDay: true }, ...days];
+        }
+        // Calculate positiveOffset
+        // The calendar will display 42 days (6 rows of 7 columns)
+        // Knowing this the offset is 41 (we start at index 0)
+        // minus (the previous offset + the current month days)
+        const positiveOffset = 41 - (numDays + offset);
+        for (let i = 0; i < positiveOffset; i++) {
+            days.push({ day: i + 1, dayOfWeek: (numDays + offset + i) % 7, isAdjacentDay: true });
+        }
     }
-    for (let i = 0; i <= offset; i++) {
-        days = [{ day: null, dayOfWeek: null }, ...days];
+    else {
+        for (let i = 0; i <= offset; i++) {
+            days = [{ day: null, dayOfWeek: null, isAdjacentDay: false }, ...days];
+        }
     }
     return days;
 };

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

@@ -4,6 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { renderHiddenInput, inheritAriaAttributes } from "../../utils/helpers";
 import { hapticSelection } from "../../utils/native/haptic";
+import { isPlatform } from "../../utils/platform";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { checkmarkOutline, removeOutline, ellipseOutline } from "ionicons/icons";
@@ -85,12 +86,19 @@ export class Toggle {
             }
         };
         this.onClick = (ev) => {
+            /**
+             * The haptics for the toggle on tap is
+             * an iOS-only feature. As such, it should
+             * only trigger on iOS.
+             */
+            const enableHaptics = isPlatform('ios');
             if (this.disabled) {
                 return;
             }
             ev.preventDefault();
             if (this.lastDrag + 300 < Date.now()) {
                 this.toggleChecked();
+                enableHaptics && hapticSelection();
             }
         };
         this.onFocus = () => {
@@ -218,7 +226,7 @@ export class Toggle {
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'c6db7f5bc0b358944c0d79e24aeb4d319793422f', "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '4aaa06d203551c3044e9917ea0c4e5d293bf97bc', "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -228,10 +236,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: 'f49531391f4513d084061c27ebc4c4eb1dcd02ab', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'f4ab2dc29eae053f54613d1304f755e151037f47', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), h("div", { key: '85674bfab5ec1e422c787d025c4f9f5b3aadd4f2', class: {
+            }) }, h("label", { key: 'c8474c9c44ec6130e6380791b74c2b6ce1c0f9e4', class: "toggle-wrapper" }, h("input", Object.assign({ key: '6f9ba22ffeb1660e4238a98bdbb8dc4bcce3f229', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), h("div", { key: '6e980fae20ae17e3c879c555155a16a974726527', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '9bdf7e85c95dc7373f18894ebfe6ad022f098107' }), this.renderHintText()), h("div", { key: '33883642b38421a82001e37db3dd5e5c643785b0', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '2a5bc3c46ca0983c86bd1b7497f153c389e6d01f' }), this.renderHintText()), h("div", { key: '3e99e2ba44cb2bade251f723e78165e21261598c', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-04-09T14:36:38",
+  "timestamp": "2025-04-14T16:07:36",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.29.2",
+    "version": "4.29.3",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -8877,6 +8877,30 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "showAdjacentDays",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-adjacent-days",
+          "reflectToAttr": false,
+          "docs": "If `true`, the datetime calendar displays a six-week (42-day) layout,\nincluding days from the previous and next months to fill the grid.\nThese adjacent days are selectable unless disabled.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "showClearButton",
           "type": "boolean",

package/dist/esm/{app-globals-CispSZgz.js → app-globals-C0a0o4Av.js}

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

package/dist/esm/{button-active-D92yWoWC.js → button-active-BQqkZ_sm.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-C5UXyyFe.js';
+import { w as writeTask } from './index-EP3pwcdb.js';
 import { h as hapticSelectionEnd, a as hapticSelectionChanged, b as hapticSelectionStart } from './haptic-DzAMWJuk.js';
 import { createGesture } from './index-CfgBF1SE.js';
 

package/dist/esm/{data-Dq3-TN9Z.js → data-omKWOMer.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { a as printIonWarning } from './index-PfJyigSK.js';
+import { a as printIonWarning } from './index-DR2njD_q.js';
 
 /**
  * Returns true if the selected day is equal to the reference day
@@ -1182,8 +1182,17 @@ const getDaysOfWeek = (locale, mode, firstDayOfWeek = 0) => {
  * the firstDayOfWeek value (Sunday by default)
  * using null values.
  */
-const getDaysOfMonth = (month, year, firstDayOfWeek) => {
+const getDaysOfMonth = (month, year, firstDayOfWeek, showAdjacentDays = false) => {
     const numDays = getNumDaysInMonth(month, year);
+    let previousNumDays; //previous month number of days
+    if (month === 1) {
+        // If the current month is January, the previous month should be December of the previous year.
+        previousNumDays = getNumDaysInMonth(12, year - 1);
+    }
+    else {
+        // Otherwise, the previous month should be the current month - 1 of the same year.
+        previousNumDays = getNumDaysInMonth(month - 1, year);
+    }
     const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
     /**
      * To get the first day of the month aligned on the correct
@@ -1207,10 +1216,26 @@ const getDaysOfMonth = (month, year, firstDayOfWeek) => {
     const offset = firstOfMonth >= firstDayOfWeek ? firstOfMonth - (firstDayOfWeek + 1) : 6 - (firstDayOfWeek - firstOfMonth);
     let days = [];
     for (let i = 1; i <= numDays; i++) {
-        days.push({ day: i, dayOfWeek: (offset + i) % 7 });
+        days.push({ day: i, dayOfWeek: (offset + i) % 7, isAdjacentDay: false });
+    }
+    if (showAdjacentDays) {
+        for (let i = 0; i <= offset; i++) {
+            // Using offset create previous month adjacent day, starting from last day
+            days = [{ day: previousNumDays - i, dayOfWeek: (previousNumDays - i) % 7, isAdjacentDay: true }, ...days];
+        }
+        // Calculate positiveOffset
+        // The calendar will display 42 days (6 rows of 7 columns)
+        // Knowing this the offset is 41 (we start at index 0)
+        // minus (the previous offset + the current month days)
+        const positiveOffset = 41 - (numDays + offset);
+        for (let i = 0; i < positiveOffset; i++) {
+            days.push({ day: i + 1, dayOfWeek: (numDays + offset + i) % 7, isAdjacentDay: true });
+        }
     }
-    for (let i = 0; i <= offset; i++) {
-        days = [{ day: null, dayOfWeek: null }, ...days];
+    else {
+        for (let i = 0; i <= offset; i++) {
+            days = [{ day: null, dayOfWeek: null, isAdjacentDay: false }, ...days];
+        }
     }
     return days;
 };

package/dist/esm/{hardware-back-button-CRemSDoj.js → hardware-back-button-RMajLSrZ.js}

@@ -2,8 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as win } from './index-ZjP4CjeZ.js';
-import { c as config } from './ionic-global-GkM1xiqt.js';
-import './index-C5UXyyFe.js';
+import { c as config } from './ionic-global-CrB2BPUW.js';
+import './index-EP3pwcdb.js';
 
 /**
  * CloseWatcher is a newer API that lets

package/dist/esm/{index-DYJvRcE0.js → index-BKfOgUuW.js}

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as config } from './ionic-global-GkM1xiqt.js';
-import { w as writeTask, B as Build } from './index-C5UXyyFe.js';
-import { a as printIonWarning } from './index-PfJyigSK.js';
+import { c as config } from './ionic-global-CrB2BPUW.js';
+import { w as writeTask, B as Build } from './index-EP3pwcdb.js';
+import { a as printIonWarning } from './index-DR2njD_q.js';
 import { r as raf } from './helpers-Di6ciXLG.js';
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
@@ -120,8 +120,8 @@ const createFocusController = () => {
 };
 const LAST_FOCUS = 'ion-last-focus';
 
-const iosTransitionAnimation = () => import('./ios.transition-BcTzvx5_.js');
-const mdTransitionAnimation = () => import('./md.transition-DYGWIgPE.js');
+const iosTransitionAnimation = () => import('./ios.transition-BObaMu_w.js');
+const mdTransitionAnimation = () => import('./md.transition-BYk9oj5T.js');
 const focusController = createFocusController();
 // TODO(FW-2832): types
 const transition = (opts) => {

package/dist/esm/{index-DZLiflRE.js → index-C7r3mIlB.js}

@@ -2,10 +2,10 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { d as doc } from './index-ZjP4CjeZ.js';
-import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-CRemSDoj.js';
-import { a as printIonWarning } from './index-PfJyigSK.js';
+import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-RMajLSrZ.js';
+import { a as printIonWarning } from './index-DR2njD_q.js';
 import { c as componentOnReady } from './helpers-Di6ciXLG.js';
-import { b as getIonMode } from './ionic-global-GkM1xiqt.js';
+import { b as getIonMode } from './ionic-global-CrB2BPUW.js';
 import { c as createAnimation } from './animation-CCtpQcsN.js';
 
 /**

package/dist/esm/{index-DWiwgv23.js → index-CDohRbVJ.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { c as componentOnReady } from './helpers-Di6ciXLG.js';
-import { b as printRequiredElementError } from './index-PfJyigSK.js';
+import { b as printRequiredElementError } from './index-DR2njD_q.js';
 
 const ION_CONTENT_TAG_NAME = 'ION-CONTENT';
 const ION_CONTENT_ELEMENT_SELECTOR = 'ion-content';

package/dist/esm/{index-PfJyigSK.js → index-DR2njD_q.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as config } from './ionic-global-GkM1xiqt.js';
+import { c as config } from './ionic-global-CrB2BPUW.js';
 
 /**
  * Logs a warning to the console with an Ionic prefix

package/dist/esm/{index-C5UXyyFe.js → index-EP3pwcdb.js}

@@ -5,7 +5,7 @@ const NAMESPACE = 'ionic';
 const BUILD = /* ionic */ { experimentalSlotFixes: true, hydratedSelectorName: "hydrated", lazyLoad: true, shadowDom: true, slotRelocation: true, updatable: true};
 
 /*
- Stencil Client Platform v4.29.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.29.3 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -219,6 +219,11 @@ function queryNonceMetaTagContent(doc) {
   return (_c = (_b = (_a = doc.head) == null ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) == null ? void 0 : _b.getAttribute("content")) != null ? _c : void 0;
 }
 
+// src/utils/regular-expression.ts
+var escapeRegExpSpecialCharacters = (text) => {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
+
 // src/utils/remote-value.ts
 var RemoteValue = class _RemoteValue {
   /**
@@ -1417,6 +1422,18 @@ var findCorrespondingNode = (node, type) => {
   } while (sibling && (sibling.nodeType !== type || !sibling.nodeValue));
   return sibling;
 };
+var createSupportsRuleRe = (selector) => {
+  const safeSelector2 = escapeRegExpSpecialCharacters(selector);
+  return new RegExp(
+    // First capture group: match any context before the selector that's not inside @supports selector()
+    // Using negative lookahead to avoid matching inside @supports selector(...) condition
+    `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector2}))(${safeSelector2}\\b)`,
+    "g"
+  );
+};
+createSupportsRuleRe("::slotted");
+createSupportsRuleRe(":host");
+createSupportsRuleRe(":host-context");
 
 // src/runtime/mode.ts
 var computeMode = (elm) => modeResolutionChain.map((h2) => h2(elm)).find((m) => !!m);

package/dist/esm/index.js

@@ -2,22 +2,22 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 export { c as createAnimation } from './animation-CCtpQcsN.js';
-export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-DYJvRcE0.js';
-export { iosTransitionAnimation } from './ios.transition-BcTzvx5_.js';
-export { mdTransitionAnimation } from './md.transition-DYGWIgPE.js';
+export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-BKfOgUuW.js';
+export { iosTransitionAnimation } from './ios.transition-BObaMu_w.js';
+export { mdTransitionAnimation } from './md.transition-BYk9oj5T.js';
 export { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
 export { createGesture } from './index-CfgBF1SE.js';
-export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-GkM1xiqt.js';
+export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-CrB2BPUW.js';
 export { c as componentOnReady } from './helpers-Di6ciXLG.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-O8NobGs3.js';
 export { o as openURL } from './theme-DiVJyqlX.js';
-export { m as menuController } from './index-DZLiflRE.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-BuSzwtlC.js';
+export { m as menuController } from './index-C7r3mIlB.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-DUDTB6a2.js';
 import './index-ZjP4CjeZ.js';
-import './index-C5UXyyFe.js';
-import './index-PfJyigSK.js';
+import './index-EP3pwcdb.js';
+import './index-DR2njD_q.js';
 import './gesture-controller-BTEOs1at.js';
-import './hardware-back-button-CRemSDoj.js';
+import './hardware-back-button-RMajLSrZ.js';
 import './framework-delegate-D3CI7y6x.js';
 
 const IonicSlides = (opts) => {

package/dist/esm/{input-shims-BL_oixbH.js → input-shims-Clcc9pEO.js}

@@ -2,12 +2,12 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as win, d as doc } from './index-ZjP4CjeZ.js';
-import { g as getScrollElement, c as scrollByPoint, f as findClosestIonContent } from './index-DWiwgv23.js';
+import { g as getScrollElement, c as scrollByPoint, f as findClosestIonContent } from './index-CDohRbVJ.js';
 import { f as addEventListener, m as removeEventListener, r as raf, c as componentOnReady } from './helpers-Di6ciXLG.js';
 import { a as KeyboardResize, K as Keyboard } from './keyboard-CUw4ekVy.js';
-import './index-PfJyigSK.js';
-import './ionic-global-GkM1xiqt.js';
-import './index-C5UXyyFe.js';
+import './index-DR2njD_q.js';
+import './ionic-global-CrB2BPUW.js';
+import './index-EP3pwcdb.js';
 import './capacitor-CFERIeaU.js';
 
 const cloneMap = new WeakMap();

package/dist/esm/{input.utils-Bd73EHpQ.js → input.utils-BeGXuyDm.js}

@@ -3,7 +3,7 @@
  */
 import { w as win } from './index-ZjP4CjeZ.js';
 import { r as raf } from './helpers-Di6ciXLG.js';
-import { p as printIonError } from './index-PfJyigSK.js';
+import { p as printIonError } from './index-DR2njD_q.js';
 
 /**
  * Used to update a scoped component that uses emulated slots. This fires when