chore: update from main

CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.1](https://github.com/ionic-team/ionic-framework/compare/v8.7.0...v8.7.1) (2025-07-31)
+
+### Dependencies
+
+* **stencil:** upgrade `@stencil/core` to version 4.36.2
+
+
+
+
+
+# [8.7.0](https://github.com/ionic-team/ionic-framework/compare/v8.6.7...v8.7.0) (2025-07-30)
+
+
+### Features
+
+* **css:** add new css utility classes for display and flex utils ([#30567](https://github.com/ionic-team/ionic-framework/issues/30567)) ([75f6c05](https://github.com/ionic-team/ionic-framework/commit/75f6c05fb96313ef890cc80a229a3a3ed3d57460)), closes [#22469](https://github.com/ionic-team/ionic-framework/issues/22469)
+* **datetime:** add border property to highlightedDates ([#30534](https://github.com/ionic-team/ionic-framework/issues/30534)) ([d5627c7](https://github.com/ionic-team/ionic-framework/commit/d5627c73681faf658ea3b869f3fb04d708391eb9)), closes [#29833](https://github.com/ionic-team/ionic-framework/issues/29833)
+* **deps:** update ionicons to v8 ([#30390](https://github.com/ionic-team/ionic-framework/issues/30390)) ([74cd71a](https://github.com/ionic-team/ionic-framework/commit/74cd71af243183aa738d11b280e155bdfd652126)), closes [#30445](https://github.com/ionic-team/ionic-framework/issues/30445)
+* **modal:** add IonModalToken for injecting modal elements in Angular components ([#30474](https://github.com/ionic-team/ionic-framework/issues/30474)) ([30d1910](https://github.com/ionic-team/ionic-framework/commit/30d1910d6ea5428b414d0e127e7681f59426c538))
+* **reorder-group:** add ionReorderStart, ionReorderMove, ionReorderEnd events ([#30471](https://github.com/ionic-team/ionic-framework/issues/30471)) ([b154f4e](https://github.com/ionic-team/ionic-framework/commit/b154f4ed095890f57ccab539fd9217976a5466e5)), closes [#23148](https://github.com/ionic-team/ionic-framework/issues/23148) [#27614](https://github.com/ionic-team/ionic-framework/issues/27614)
+
+
+
+
+
+## [8.6.7](https://github.com/ionic-team/ionic-framework/compare/v8.6.6...v8.6.7) (2025-07-30)
+
+### Dependencies
+
+* **stencil:** downgrade `@stencil/core` to version 4.33.1
+
+_Stencil has been downgraded due to an uncaught regression in Reorder._
+
+
+
+
+
+## [8.6.6](https://github.com/ionic-team/ionic-framework/compare/v8.6.5...v8.6.6) (2025-07-30)
+
+### Dependencies
+
+* **stencil:** upgrade `@stencil/core` to version 4.36.2
+
+
+
+
+
 ## [8.6.5](https://github.com/ionic-team/ionic-framework/compare/v8.6.4...v8.6.5) (2025-07-16)
 
 

core/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.1](https://github.com/ionic-team/ionic-framework/compare/v8.7.0...v8.7.1) (2025-07-31)
+
+### Dependencies
+
+* **stencil:** upgrade `@stencil/core` to version 4.36.2
+
+
+
+
+
+# [8.7.0](https://github.com/ionic-team/ionic-framework/compare/v8.6.7...v8.7.0) (2025-07-30)
+
+
+### Features
+
+* **css:** add new css utility classes for display and flex utils ([#30567](https://github.com/ionic-team/ionic-framework/issues/30567)) ([75f6c05](https://github.com/ionic-team/ionic-framework/commit/75f6c05fb96313ef890cc80a229a3a3ed3d57460)), closes [#22469](https://github.com/ionic-team/ionic-framework/issues/22469)
+* **datetime:** add border property to highlightedDates ([#30534](https://github.com/ionic-team/ionic-framework/issues/30534)) ([d5627c7](https://github.com/ionic-team/ionic-framework/commit/d5627c73681faf658ea3b869f3fb04d708391eb9)), closes [#29833](https://github.com/ionic-team/ionic-framework/issues/29833)
+* **deps:** update ionicons to v8 ([#30390](https://github.com/ionic-team/ionic-framework/issues/30390)) ([74cd71a](https://github.com/ionic-team/ionic-framework/commit/74cd71af243183aa738d11b280e155bdfd652126)), closes [#30445](https://github.com/ionic-team/ionic-framework/issues/30445)
+* **reorder-group:** add ionReorderStart, ionReorderMove, ionReorderEnd events ([#30471](https://github.com/ionic-team/ionic-framework/issues/30471)) ([b154f4e](https://github.com/ionic-team/ionic-framework/commit/b154f4ed095890f57ccab539fd9217976a5466e5)), closes [#23148](https://github.com/ionic-team/ionic-framework/issues/23148) [#27614](https://github.com/ionic-team/ionic-framework/issues/27614)
+
+
+
+
+
+## [8.6.7](https://github.com/ionic-team/ionic-framework/compare/v8.6.6...v8.6.7) (2025-07-30)
+
+### Dependencies
+
+* **stencil:** downgrade `@stencil/core` to version 4.33.1
+
+_Stencil has been downgraded due to an uncaught regression in Reorder._
+
+
+
+
+
+## [8.6.6](https://github.com/ionic-team/ionic-framework/compare/v8.6.5...v8.6.6) (2025-07-30)
+
+### Dependencies
+
+* **stencil:** upgrade `@stencil/core` to version 4.36.2
+
+
+
+
+
 ## [8.6.5](https://github.com/ionic-team/ionic-framework/compare/v8.6.4...v8.6.5) (2025-07-16)
 
 

core/api.txt

@@ -1950,6 +1950,9 @@ ion-reorder-group,prop,mode,"ios" | "md",undefined,false,false
 ion-reorder-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-reorder-group,method,complete,complete(listOrReorder?: boolean | any[]) => Promise<any>
 ion-reorder-group,event,ionItemReorder,ItemReorderEventDetail,true
+ion-reorder-group,event,ionReorderEnd,ReorderEndEventDetail,true
+ion-reorder-group,event,ionReorderMove,ReorderMoveEventDetail,true
+ion-reorder-group,event,ionReorderStart,void,true
 
 ion-ripple-effect,shadow
 ion-ripple-effect,prop,mode,"ios" | "md",undefined,false,false

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.6.5",
+  "version": "8.7.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -32,8 +32,8 @@
   ],
   "dependencies": {
     "@phosphor-icons/core": "^2.1.1",
-    "@stencil/core": "4.33.1",
-    "ionicons": "^7.2.2",
+    "@stencil/core": "4.36.2",
+    "ionicons": "^8.0.13",
     "tslib": "^2.1.0"
   },
   "devDependencies": {

core/src/components.d.ts

@@ -30,7 +30,7 @@ import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAct
 import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 import { RefresherEventDetail } from "./components/refresher/refresher-interface";
-import { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
+import { ItemReorderEventDetail, ReorderEndEventDetail, ReorderMoveEventDetail } from "./components/reorder-group/reorder-group-interface";
 import { NavigationHookCallback } from "./components/route/route-interface";
 import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 import { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
@@ -68,7 +68,7 @@ export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAct
 export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 export { RefresherEventDetail } from "./components/refresher/refresher-interface";
-export { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
+export { ItemReorderEventDetail, ReorderEndEventDetail, ReorderMoveEventDetail } from "./components/reorder-group/reorder-group-interface";
 export { NavigationHookCallback } from "./components/route/route-interface";
 export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 export { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
@@ -3231,7 +3231,7 @@ export namespace Components {
     }
     interface IonReorderGroup {
         /**
-          * Completes the reorder operation. Must be called by the `ionItemReorder` event. If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
+          * Completes the reorder operation. Must be called by the `ionReorderEnd` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
           * @param listOrReorder A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item.
          */
         "complete": (listOrReorder?: boolean | any[]) => Promise<any>;
@@ -5433,6 +5433,9 @@ declare global {
     };
     interface HTMLIonReorderGroupElementEventMap {
         "ionItemReorder": ItemReorderEventDetail;
+        "ionReorderStart": void;
+        "ionReorderMove": ReorderMoveEventDetail;
+        "ionReorderEnd": ReorderEndEventDetail;
     }
     interface HTMLIonReorderGroupElement extends Components.IonReorderGroup, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonReorderGroupElementEventMap>(type: K, listener: (this: HTMLIonReorderGroupElement, ev: IonReorderGroupCustomEvent<HTMLIonReorderGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -9170,9 +9173,22 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         /**
-          * Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.
+          * Event that needs to be listened to in order to complete the reorder action.
+          * @deprecated Use `ionReorderEnd` instead. If you are accessing `event.detail.from` or `event.detail.to` and relying on them being different you should now add checks as they are always emitted in `ionReorderEnd`, even when they are the same.
          */
         "onIonItemReorder"?: (event: IonReorderGroupCustomEvent<ItemReorderEventDetail>) => void;
+        /**
+          * Event that is emitted when the reorder gesture ends. The from and to properties are always available, regardless of if the reorder gesture moved the item. If the item did not change from its start position, the from and to properties will be the same. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.
+         */
+        "onIonReorderEnd"?: (event: IonReorderGroupCustomEvent<ReorderEndEventDetail>) => void;
+        /**
+          * Event that is emitted as the reorder gesture moves.
+         */
+        "onIonReorderMove"?: (event: IonReorderGroupCustomEvent<ReorderMoveEventDetail>) => void;
+        /**
+          * Event that is emitted when the reorder gesture starts.
+         */
+        "onIonReorderStart"?: (event: IonReorderGroupCustomEvent<void>) => void;
         /**
           * The theme determines the visual appearance of the component.
          */

core/src/components/back-button/test/basic/index.html

@@ -125,7 +125,7 @@ <h3>Custom</h3>
 
         <ion-toolbar color="dark">
           <ion-buttons slot="start">
-            <ion-back-button class="ion-hide"></ion-back-button>
+            <ion-back-button class="ion-display-none"></ion-back-button>
           </ion-buttons>
           <ion-title>Hidden</ion-title>
         </ion-toolbar>

core/src/components/datetime/datetime-interface.ts

@@ -22,15 +22,15 @@ export type DatetimePresentation = 'date-time' | 'time-date' | 'date' | 'time' |
 
 export type TitleSelectedDatesFormatter = (selectedDates: string[]) => string;
 
-export type DatetimeHighlightStyle =
-  | {
-      textColor: string;
-      backgroundColor?: string;
-    }
-  | {
-      textColor?: string;
-      backgroundColor: string;
-    };
+/**
+ * DatetimeHighlightStyle must include textColor, backgroundColor, or border.
+ * It cannot be an empty object.
+ */
+export type DatetimeHighlightStyle = {
+  textColor?: string;
+  backgroundColor?: string;
+  border?: string;
+} & ({ textColor: string } | { backgroundColor: string } | { border: string });
 
 export type DatetimeHighlight = { date: string } & DatetimeHighlightStyle;
 

core/src/components/datetime/datetime.tsx

@@ -2343,6 +2343,7 @@ export class Datetime implements ComponentInterface {
                         `${dateStyle ? dateStyle.backgroundColor : ''}`,
                         'important'
                       );
+                      el.style.setProperty('border', `${dateStyle ? dateStyle.border : ''}`, 'important');
                     }
                   }}
                   tabindex="-1"

core/src/components/datetime/test/custom/datetime.e2e.ts

@@ -5,6 +5,8 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: custom'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/datetime/test/custom`, config);
+
+      await page.locator('.datetime-ready').last().waitFor();
     });
 
     test('should allow styling wheel style datetimes', async ({ page }) => {
@@ -30,6 +32,13 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test('should allow styling calendar days in grid style datetimes', async ({ page }) => {
       const datetime = page.locator('#custom-calendar-days');
 
+      // Wait for calendar days to be rendered
+      await page.waitForFunction(() => {
+        const datetime = document.querySelector('#custom-calendar-days');
+        const calendarDays = datetime?.shadowRoot?.querySelectorAll('.calendar-day');
+        return calendarDays && calendarDays.length > 0;
+      });
+
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
     });
   });

core/src/components/datetime/test/custom/index.html

@@ -164,7 +164,7 @@ <h2>Grid Style</h2>
       const customDatetime = document.querySelector('#custom-calendar-days');
 
       // Mock the current day to always have the same screenshots
-      const mockToday = '2023-06-10T16:22';
+      const mockToday = '2023-06-10T16:22:00.000Z';
       Date = class extends Date {
         constructor(...args) {
           if (args.length === 0) {

core/src/components/datetime/test/datetime.e2e.ts

@@ -22,11 +22,23 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
       await expect(monthYearToggle).toContainText('January 2022');
 
+      // Click to open the picker
       await monthYearToggle.click();
       await page.waitForChanges();
 
-      // February
-      await monthColumnItems.nth(1).click();
+      // Wait for the picker to be open
+      await page.locator('.month-year-picker-open').waitFor();
+
+      // Wait a bit for the picker to fully load
+      await page.waitForTimeout(200);
+
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      // Click on February
+      await monthColumnItems.filter({ hasText: 'February' }).click();
+
+      // Wait for changes
+      await ionChange.next();
       await page.waitForChanges();
 
       await expect(monthYearToggle).toContainText('February 2022');
@@ -38,13 +50,23 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       const datetime = page.locator('ion-datetime');
       const ionChange = await page.spyOnEvent('ionChange');
 
+      // Click to open the picker
       await monthYearToggle.click();
       await page.waitForChanges();
 
-      // February
-      await monthColumnItems.nth(1).click();
+      // Wait for the picker to be open
+      await page.locator('.month-year-picker-open').waitFor();
+
+      // Wait a bit for the picker to fully load
+      await page.waitForTimeout(200);
+
+      // Click on February
+      await monthColumnItems.filter({ hasText: 'February' }).click();
 
+      // Wait for changes
       await ionChange.next();
+      await page.waitForChanges();
+
       await expect(ionChange).toHaveReceivedEventTimes(1);
       await expect(datetime).toHaveJSProperty('value', '2022-02-28');
     });