chore(deps): update @stencil/core to v4.36.2 (#30587)

Issue number: resolves #30565

---------

## What is the current behavior?
Stencil is on v4.33.1

## What is the new behavior?
- Updates Stencil to v4.36.2
- Updates `children` references to `__children` in `reorder-group`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

I searched through the repository for other components that may be
affected but did not find any.

Dev build: `8.7.1-dev.11753971948.1b297d94`
Reorder Example using dev build:
[StackBlitz](https://stackblitz.com/edit/5nrzhbja)
Router Example using dev build:
[StackBlitz](https://stackblitz.com/edit/rvpcflzx)

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

core/package-lock.json

@@ -9,7 +9,7 @@
       "version": "8.7.0",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.33.1",
+        "@stencil/core": "4.36.2",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -1914,9 +1914,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.33.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.33.1.tgz",
-      "integrity": "sha512-12k9xhAJBkpg598it+NRmaYIdEe6TSnsL/v6/KRXDcUyTK11VYwZQej2eHnMWtqot+znJ+GNTqb5YbiXi+5Low==",
+      "version": "4.36.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz",
+      "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -5719,29 +5719,6 @@
         "@stencil/core": "^4.35.3"
       }
     },
-    "node_modules/ionicons/node_modules/@stencil/core": {
-      "version": "4.35.3",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.35.3.tgz",
-      "integrity": "sha512-RH5/I+amV31QI8TMXhXkAkjzs2eod6Y07jkUYTl9kMB+X7c5wUpv95Y/2LtcAx0Rqdhh4SHbJiwpr0ApBZmv0g==",
-      "license": "MIT",
-      "bin": {
-        "stencil": "bin/stencil"
-      },
-      "engines": {
-        "node": ">=16.0.0",
-        "npm": ">=7.10.0"
-      },
-      "optionalDependencies": {
-        "@rollup/rollup-darwin-arm64": "4.34.9",
-        "@rollup/rollup-darwin-x64": "4.34.9",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-        "@rollup/rollup-linux-arm64-musl": "4.34.9",
-        "@rollup/rollup-linux-x64-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-musl": "4.34.9",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-        "@rollup/rollup-win32-x64-msvc": "4.34.9"
-      }
-    },
     "node_modules/is-alphabetical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -12007,9 +11984,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.33.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.33.1.tgz",
-      "integrity": "sha512-12k9xhAJBkpg598it+NRmaYIdEe6TSnsL/v6/KRXDcUyTK11VYwZQej2eHnMWtqot+znJ+GNTqb5YbiXi+5Low==",
+      "version": "4.36.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz",
+      "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==",
       "requires": {
         "@rollup/rollup-darwin-arm64": "4.34.9",
         "@rollup/rollup-darwin-x64": "4.34.9",
@@ -14773,23 +14750,6 @@
       "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==",
       "requires": {
         "@stencil/core": "^4.35.3"
-      },
-      "dependencies": {
-        "@stencil/core": {
-          "version": "4.35.3",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.35.3.tgz",
-          "integrity": "sha512-RH5/I+amV31QI8TMXhXkAkjzs2eod6Y07jkUYTl9kMB+X7c5wUpv95Y/2LtcAx0Rqdhh4SHbJiwpr0ApBZmv0g==",
-          "requires": {
-            "@rollup/rollup-darwin-arm64": "4.34.9",
-            "@rollup/rollup-darwin-x64": "4.34.9",
-            "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-            "@rollup/rollup-linux-arm64-musl": "4.34.9",
-            "@rollup/rollup-linux-x64-gnu": "4.34.9",
-            "@rollup/rollup-linux-x64-musl": "4.34.9",
-            "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-            "@rollup/rollup-win32-x64-msvc": "4.34.9"
-          }
-        }
       }
     },
     "is-alphabetical": {

core/package.json

@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "4.33.1",
+    "@stencil/core": "4.36.2",
     "ionicons": "^8.0.13",
     "tslib": "^2.1.0"
   },

core/src/components/reorder-group/reorder-group.tsx

@@ -6,6 +6,7 @@ import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail } from '../../interface';
+import type { HTMLStencilElement } from '../../utils/element-interface';
 
 import type { ItemReorderEventDetail, ReorderMoveEventDetail, ReorderEndEventDetail } from './reorder-group-interface';
 
@@ -38,7 +39,7 @@ export class ReorderGroup implements ComponentInterface {
 
   @State() state = ReorderGroupState.Idle;
 
-  @Element() el!: HTMLElement;
+  @Element() el!: HTMLStencilElement;
 
   /**
    * If `true`, the reorder will be hidden.
@@ -152,7 +153,7 @@ export class ReorderGroup implements ComponentInterface {
     const heights = this.cachedHeights;
     heights.length = 0;
     const el = this.el;
-    const children: any = el.children;
+    const children: any = el.__children;
     if (!children || children.length === 0) {
       return;
     }
@@ -258,7 +259,7 @@ export class ReorderGroup implements ComponentInterface {
   private completeReorder(listOrReorder?: boolean | any[]): any {
     const selectedItemEl = this.selectedItemEl;
     if (selectedItemEl && this.state === ReorderGroupState.Complete) {
-      const children = this.el.children as any;
+      const children: any = this.el.__children;
       const len = children.length;
       const toIndex = this.lastToIndex;
       const fromIndex = indexForItem(selectedItemEl);
@@ -308,7 +309,7 @@ export class ReorderGroup implements ComponentInterface {
   /********* DOM WRITE ********* */
   private reorderMove(fromIndex: number, toIndex: number) {
     const itemHeight = this.selectedItemHeight;
-    const children = this.el.children;
+    const children: any = this.el.__children;
     for (let i = 0; i < children.length; i++) {
       const style = (children[i] as any).style;
       let value = '';

core/src/components/router/utils/interface.ts

@@ -1,10 +1,6 @@
-import type { AnimationBuilder, ComponentProps } from '../../../interface';
+import type { AnimationBuilder, ComponentProps, HTMLStencilElement } from '../../../interface';
 import type { NavigationHookCallback } from '../../route/route-interface';
 
-export interface HTMLStencilElement extends HTMLElement {
-  componentOnReady(): Promise<this>;
-}
-
 export interface NavOutlet {
   setRouteId(
     id: string,

core/src/interface.d.ts

@@ -23,7 +23,7 @@ export { PickerOptions, PickerColumnOption } from './components/picker-legacy/pi
 export { PopoverOptions } from './components/popover/popover-interface';
 export { RadioGroupCustomEvent } from './components/radio-group/radio-group-interface';
 export { RangeCustomEvent, PinFormatter } from './components/range/range-interface';
-export { HTMLStencilElement, RouterCustomEvent } from './components/router/utils/interface';
+export { RouterCustomEvent } from './components/router/utils/interface';
 export { RefresherCustomEvent } from './components/refresher/refresher-interface';
 export {
   ItemReorderCustomEvent,
@@ -49,6 +49,7 @@ export {
   AnimationKeyFrames,
   AnimationLifecycle,
 } from './utils/animation/animation-interface';
+export { HTMLStencilElement } from './utils/element-interface';
 export { TransitionOptions } from './utils/transition';
 export { HTMLIonOverlayElement, OverlayController, OverlayInterface } from './utils/overlays-interface';
 export { Config, config } from './global/config';

core/src/utils/element-interface.ts

@@ -1,6 +1,19 @@
 // The interfaces in this file are used to make sure our components
 // have the correct properties defined that are needed to pass to
-// the native HTML elements they render
+// the native HTML elements they render. The HTMLStencilElement interface
+// extends HTMLElement to provide Stencil-specific functionality like
+// componentOnReady() and proper children handling.
+
+export interface HTMLStencilElement extends HTMLElement {
+  componentOnReady(): Promise<this>;
+  /**
+   * Stencil patches `el.children` to behave like calling `el.children` on an
+   * element with shadow DOM even though the component is not a shadow DOM element.
+   * To allow components to work properly we need to access the original accessor
+   * for this property which is `__children`.
+   */
+  __children?: HTMLCollection;
+}
 
 export interface AnchorInterface {
   href: string | undefined;