From 3f46aef949703d74a5bf5c74228311fbf649a747 Mon Sep 17 00:00:00 2001
From: giuliana <giuliana.silva@outsystems.com>
Date: Thu, 23 Jan 2025 11:44:36 +0000
Subject: [PATCH 1/6] feat(checkbox): add required prop

---
 core/src/components/checkbox/checkbox.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 78206b9fd16..e9771e4f288 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -98,6 +98,11 @@ export class Checkbox implements ComponentInterface {
    */
   @Prop() alignment?: 'start' | 'center';
 
+  /**
+   * If `true`, the user must fill in a value before submitting a form.
+   */
+  @Prop() required = false;
+
   /**
    * Emitted when the checked property has changed as a result of a user action such as a click.
    *
@@ -182,6 +187,7 @@ export class Checkbox implements ComponentInterface {
       name,
       value,
       alignment,
+      required
     } = this;
     const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
@@ -218,6 +224,7 @@ export class Checkbox implements ComponentInterface {
             onFocus={() => this.onFocus()}
             onBlur={() => this.onBlur()}
             ref={(focusEl) => (this.focusEl = focusEl)}
+            required={required}
             {...inheritedAttributes}
           />
           <div

From 4af07f3c028d7ccaa581f4dcbf65b95612480c91 Mon Sep 17 00:00:00 2001
From: giuliana <giuliana.silva@outsystems.com>
Date: Thu, 23 Jan 2025 15:07:11 +0000
Subject: [PATCH 2/6] chore(): add files after build

---
 core/api.txt                                  |   1 +
 core/src/components.d.ts                      |   8 +
 packages/angular/src/directives/proxies.ts    | 174 +++++++++---------
 .../standalone/src/directives/proxies.ts      | 148 +++++++--------
 packages/vue/src/proxies.ts                   | 127 ++++++++++++-
 5 files changed, 294 insertions(+), 164 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 67d49417556..51419dcbfc2 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -403,6 +403,7 @@ ion-checkbox,prop,justify,"end" | "space-between" | "start" | undefined,undefine
 ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
+ion-checkbox,prop,required,boolean,false,false,false
 ion-checkbox,prop,value,any,'on',false,false
 ion-checkbox,event,ionBlur,void,true
 ion-checkbox,event,ionChange,CheckboxChangeEventDetail<any>,true
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 1bdfaa88545..1b083ee765a 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -643,6 +643,10 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
         "setFocus": () => Promise<void>;
         /**
           * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
@@ -5435,6 +5439,10 @@ declare namespace LocalJSX {
           * Emitted when the checkbox has focus.
          */
         "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
         /**
           * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 675c37bd1c1..16202b6739a 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -18,7 +18,7 @@ import { Components } from '@ionic/core';
   inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value'],
 })
 export class IonAccordion {
-  protected el: HTMLElement;
+  protected el: HTMLIonAccordionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -40,7 +40,7 @@ export declare interface IonAccordion extends Components.IonAccordion {}
   inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value'],
 })
 export class IonAccordionGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonAccordionGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -73,7 +73,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger'],
 })
 export class IonActionSheet {
-  protected el: HTMLElement;
+  protected el: HTMLIonActionSheetElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -136,7 +136,7 @@ Shorthand for ionActionSheetDidDismiss.
   inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger'],
 })
 export class IonAlert {
-  protected el: HTMLElement;
+  protected el: HTMLIonAlertElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -198,7 +198,7 @@ Shorthand for ionAlertDidDismiss.
   inputs: [],
 })
 export class IonApp {
-  protected el: HTMLElement;
+  protected el: HTMLIonAppElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -219,7 +219,7 @@ export declare interface IonApp extends Components.IonApp {}
   inputs: [],
 })
 export class IonAvatar {
-  protected el: HTMLElement;
+  protected el: HTMLIonAvatarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -241,7 +241,7 @@ export declare interface IonAvatar extends Components.IonAvatar {}
   inputs: ['stopPropagation', 'tappable', 'visible'],
 })
 export class IonBackdrop {
-  protected el: HTMLElement;
+  protected el: HTMLIonBackdropElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -269,7 +269,7 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
   inputs: ['color', 'mode'],
 })
 export class IonBadge {
-  protected el: HTMLElement;
+  protected el: HTMLIonBadgeElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -291,7 +291,7 @@ export declare interface IonBadge extends Components.IonBadge {}
   inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target'],
 })
 export class IonBreadcrumb {
-  protected el: HTMLElement;
+  protected el: HTMLIonBreadcrumbElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -323,7 +323,7 @@ export declare interface IonBreadcrumb extends Components.IonBreadcrumb {
   inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode'],
 })
 export class IonBreadcrumbs {
-  protected el: HTMLElement;
+  protected el: HTMLIonBreadcrumbsElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -353,7 +353,7 @@ export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
   inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type'],
 })
 export class IonButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -385,7 +385,7 @@ export declare interface IonButton extends Components.IonButton {
   inputs: ['collapse'],
 })
 export class IonButtons {
-  protected el: HTMLElement;
+  protected el: HTMLIonButtonsElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -407,7 +407,7 @@ export declare interface IonButtons extends Components.IonButtons {}
   inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'],
 })
 export class IonCard {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -429,7 +429,7 @@ export declare interface IonCard extends Components.IonCard {}
   inputs: ['mode'],
 })
 export class IonCardContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -451,7 +451,7 @@ export declare interface IonCardContent extends Components.IonCardContent {}
   inputs: ['color', 'mode', 'translucent'],
 })
 export class IonCardHeader {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardHeaderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -473,7 +473,7 @@ export declare interface IonCardHeader extends Components.IonCardHeader {}
   inputs: ['color', 'mode'],
 })
 export class IonCardSubtitle {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardSubtitleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -495,7 +495,7 @@ export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
   inputs: ['color', 'mode'],
 })
 export class IonCardTitle {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardTitleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -507,17 +507,17 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 
 @ProxyCmp({
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'value']
 })
 @Component({
   selector: 'ion-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'value'],
 })
 export class IonCheckbox {
-  protected el: HTMLElement;
+  protected el: HTMLIonCheckboxElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -557,7 +557,7 @@ This event will not emit when programmatically setting the `checked` property.
   inputs: ['color', 'disabled', 'mode', 'outline'],
 })
 export class IonChip {
-  protected el: HTMLElement;
+  protected el: HTMLIonChipElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -579,7 +579,7 @@ export declare interface IonChip extends Components.IonChip {}
   inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs'],
 })
 export class IonCol {
-  protected el: HTMLElement;
+  protected el: HTMLIonColElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -602,7 +602,7 @@ export declare interface IonCol extends Components.IonCol {}
   inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'],
 })
 export class IonContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -645,7 +645,7 @@ Set `scrollEvents` to `true` to enable.
   inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
 })
 export class IonDatetime {
-  protected el: HTMLElement;
+  protected el: HTMLIonDatetimeElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -689,7 +689,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['color', 'datetime', 'disabled', 'mode'],
 })
 export class IonDatetimeButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonDatetimeButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -712,7 +712,7 @@ export declare interface IonDatetimeButton extends Components.IonDatetimeButton
   inputs: ['activated', 'edge', 'horizontal', 'vertical'],
 })
 export class IonFab {
-  protected el: HTMLElement;
+  protected el: HTMLIonFabElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -734,7 +734,7 @@ export declare interface IonFab extends Components.IonFab {}
   inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'],
 })
 export class IonFabButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonFabButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -766,7 +766,7 @@ export declare interface IonFabButton extends Components.IonFabButton {
   inputs: ['activated', 'side'],
 })
 export class IonFabList {
-  protected el: HTMLElement;
+  protected el: HTMLIonFabListElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -788,7 +788,7 @@ export declare interface IonFabList extends Components.IonFabList {}
   inputs: ['collapse', 'mode', 'translucent'],
 })
 export class IonFooter {
-  protected el: HTMLElement;
+  protected el: HTMLIonFooterElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -810,7 +810,7 @@ export declare interface IonFooter extends Components.IonFooter {}
   inputs: ['fixed'],
 })
 export class IonGrid {
-  protected el: HTMLElement;
+  protected el: HTMLIonGridElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -832,7 +832,7 @@ export declare interface IonGrid extends Components.IonGrid {}
   inputs: ['collapse', 'mode', 'translucent'],
 })
 export class IonHeader {
-  protected el: HTMLElement;
+  protected el: HTMLIonHeaderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -854,7 +854,7 @@ export declare interface IonHeader extends Components.IonHeader {}
   inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src'],
 })
 export class IonIcon {
-  protected el: HTMLElement;
+  protected el: HTMLIonIconElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -876,7 +876,7 @@ export declare interface IonIcon extends Components.IonIcon {}
   inputs: ['alt', 'src'],
 })
 export class IonImg {
-  protected el: HTMLElement;
+  protected el: HTMLIonImgElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -913,7 +913,7 @@ export declare interface IonImg extends Components.IonImg {
   inputs: ['disabled', 'position', 'threshold'],
 })
 export class IonInfiniteScroll {
-  protected el: HTMLElement;
+  protected el: HTMLIonInfiniteScrollElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -944,7 +944,7 @@ your async operation has completed.
   inputs: ['loadingSpinner', 'loadingText'],
 })
 export class IonInfiniteScrollContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonInfiniteScrollContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -967,7 +967,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
   inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearInputIcon', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'],
 })
 export class IonInput {
-  protected el: HTMLElement;
+  protected el: HTMLIonInputElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1028,7 +1028,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['color', 'hideIcon', 'mode', 'showIcon'],
 })
 export class IonInputPasswordToggle {
-  protected el: HTMLElement;
+  protected el: HTMLIonInputPasswordToggleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1050,7 +1050,7 @@ export declare interface IonInputPasswordToggle extends Components.IonInputPassw
   inputs: ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'],
 })
 export class IonItem {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1072,7 +1072,7 @@ export declare interface IonItem extends Components.IonItem {}
   inputs: ['color', 'mode', 'sticky'],
 })
 export class IonItemDivider {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemDividerElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1093,7 +1093,7 @@ export declare interface IonItemDivider extends Components.IonItemDivider {}
   inputs: [],
 })
 export class IonItemGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1115,7 +1115,7 @@ export declare interface IonItemGroup extends Components.IonItemGroup {}
   inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type'],
 })
 export class IonItemOption {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemOptionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1137,7 +1137,7 @@ export declare interface IonItemOption extends Components.IonItemOption {}
   inputs: ['side'],
 })
 export class IonItemOptions {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemOptionsElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1166,7 +1166,7 @@ export declare interface IonItemOptions extends Components.IonItemOptions {
   inputs: ['disabled'],
 })
 export class IonItemSliding {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemSlidingElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1194,7 +1194,7 @@ export declare interface IonItemSliding extends Components.IonItemSliding {
   inputs: ['color', 'mode', 'position'],
 })
 export class IonLabel {
-  protected el: HTMLElement;
+  protected el: HTMLIonLabelElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1217,7 +1217,7 @@ export declare interface IonLabel extends Components.IonLabel {}
   inputs: ['inset', 'lines', 'mode'],
 })
 export class IonList {
-  protected el: HTMLElement;
+  protected el: HTMLIonListElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1239,7 +1239,7 @@ export declare interface IonList extends Components.IonList {}
   inputs: ['color', 'lines', 'mode'],
 })
 export class IonListHeader {
-  protected el: HTMLElement;
+  protected el: HTMLIonListHeaderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1262,7 +1262,7 @@ export declare interface IonListHeader extends Components.IonListHeader {}
   inputs: ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger'],
 })
 export class IonLoading {
-  protected el: HTMLElement;
+  protected el: HTMLIonLoadingElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1325,7 +1325,7 @@ Shorthand for ionLoadingDidDismiss.
   inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'],
 })
 export class IonMenu {
-  protected el: HTMLElement;
+  protected el: HTMLIonMenuElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1367,7 +1367,7 @@ export declare interface IonMenu extends Components.IonMenu {
   inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type'],
 })
 export class IonMenuButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonMenuButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1389,7 +1389,7 @@ export declare interface IonMenuButton extends Components.IonMenuButton {}
   inputs: ['autoHide', 'menu'],
 })
 export class IonMenuToggle {
-  protected el: HTMLElement;
+  protected el: HTMLIonMenuToggleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1411,7 +1411,7 @@ export declare interface IonMenuToggle extends Components.IonMenuToggle {}
   inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection'],
 })
 export class IonNavLink {
-  protected el: HTMLElement;
+  protected el: HTMLIonNavLinkElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1433,7 +1433,7 @@ export declare interface IonNavLink extends Components.IonNavLink {}
   inputs: ['color', 'mode'],
 })
 export class IonNote {
-  protected el: HTMLElement;
+  protected el: HTMLIonNoteElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1455,7 +1455,7 @@ export declare interface IonNote extends Components.IonNote {}
   inputs: ['mode'],
 })
 export class IonPicker {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1478,7 +1478,7 @@ export declare interface IonPicker extends Components.IonPicker {}
   inputs: ['color', 'disabled', 'mode', 'value'],
 })
 export class IonPickerColumn {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerColumnElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1510,7 +1510,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['color', 'disabled', 'value'],
 })
 export class IonPickerColumnOption {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerColumnOptionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1533,7 +1533,7 @@ export declare interface IonPickerColumnOption extends Components.IonPickerColum
   inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'],
 })
 export class IonPickerLegacy {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerLegacyElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1595,7 +1595,7 @@ Shorthand for ionPickerDidDismiss.
   inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value'],
 })
 export class IonProgressBar {
-  protected el: HTMLElement;
+  protected el: HTMLIonProgressBarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1617,7 +1617,7 @@ export declare interface IonProgressBar extends Components.IonProgressBar {}
   inputs: ['alignment', 'color', 'disabled', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
 })
 export class IonRadio {
-  protected el: HTMLElement;
+  protected el: HTMLIonRadioElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1649,7 +1649,7 @@ export declare interface IonRadio extends Components.IonRadio {
   inputs: ['allowEmptySelection', 'compareWith', 'name', 'value'],
 })
 export class IonRadioGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonRadioGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1681,7 +1681,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'],
 })
 export class IonRange {
-  protected el: HTMLElement;
+  protected el: HTMLIonRangeElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1743,7 +1743,7 @@ mouse drag, touch gesture, or keyboard interaction.
   inputs: ['closeDuration', 'disabled', 'mode', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
 })
 export class IonRefresher {
-  protected el: HTMLElement;
+  protected el: HTMLIonRefresherElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1784,7 +1784,7 @@ called when the async operation has completed.
   inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'],
 })
 export class IonRefresherContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonRefresherContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1805,7 +1805,7 @@ export declare interface IonRefresherContent extends Components.IonRefresherCont
   inputs: [],
 })
 export class IonReorder {
-  protected el: HTMLElement;
+  protected el: HTMLIonReorderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1828,7 +1828,7 @@ export declare interface IonReorder extends Components.IonReorder {}
   inputs: ['disabled'],
 })
 export class IonReorderGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonReorderGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1861,7 +1861,7 @@ to be called in order to finalize the reorder action.
   inputs: ['type'],
 })
 export class IonRippleEffect {
-  protected el: HTMLElement;
+  protected el: HTMLIonRippleEffectElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1882,7 +1882,7 @@ export declare interface IonRippleEffect extends Components.IonRippleEffect {}
   inputs: [],
 })
 export class IonRow {
-  protected el: HTMLElement;
+  protected el: HTMLIonRowElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1905,7 +1905,7 @@ export declare interface IonRow extends Components.IonRow {}
   inputs: ['animated', 'autocapitalize', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
 })
 export class IonSearchbar {
-  protected el: HTMLElement;
+  protected el: HTMLIonSearchbarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1965,7 +1965,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value'],
 })
 export class IonSegment {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1997,7 +1997,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['contentId', 'disabled', 'layout', 'mode', 'type', 'value'],
 })
 export class IonSegmentButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2018,7 +2018,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
   inputs: [],
 })
 export class IonSegmentContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2040,7 +2040,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
   inputs: ['disabled'],
 })
 export class IonSegmentView {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentViewElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2071,7 +2071,7 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
   inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'],
 })
 export class IonSelect {
-  protected el: HTMLElement;
+  protected el: HTMLIonSelectElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2119,7 +2119,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['header', 'multiple', 'options'],
 })
 export class IonSelectModal {
-  protected el: HTMLElement;
+  protected el: HTMLIonSelectModalElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2141,7 +2141,7 @@ export declare interface IonSelectModal extends Components.IonSelectModal {}
   inputs: ['disabled', 'value'],
 })
 export class IonSelectOption {
-  protected el: HTMLElement;
+  protected el: HTMLIonSelectOptionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2163,7 +2163,7 @@ export declare interface IonSelectOption extends Components.IonSelectOption {}
   inputs: ['animated'],
 })
 export class IonSkeletonText {
-  protected el: HTMLElement;
+  protected el: HTMLIonSkeletonTextElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2185,7 +2185,7 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
   inputs: ['color', 'duration', 'name', 'paused'],
 })
 export class IonSpinner {
-  protected el: HTMLElement;
+  protected el: HTMLIonSpinnerElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2207,7 +2207,7 @@ export declare interface IonSpinner extends Components.IonSpinner {}
   inputs: ['contentId', 'disabled', 'when'],
 })
 export class IonSplitPane {
-  protected el: HTMLElement;
+  protected el: HTMLIonSplitPaneElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2236,7 +2236,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
   inputs: ['component', 'tab'],
 })
 export class IonTab {
-  protected el: HTMLElement;
+  protected el: HTMLIonTabElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2258,7 +2258,7 @@ export declare interface IonTab extends Components.IonTab {}
   inputs: ['color', 'mode', 'selectedTab', 'translucent'],
 })
 export class IonTabBar {
-  protected el: HTMLElement;
+  protected el: HTMLIonTabBarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2280,7 +2280,7 @@ export declare interface IonTabBar extends Components.IonTabBar {}
   inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target'],
 })
 export class IonTabButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonTabButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2302,7 +2302,7 @@ export declare interface IonTabButton extends Components.IonTabButton {}
   inputs: ['color', 'mode'],
 })
 export class IonText {
-  protected el: HTMLElement;
+  protected el: HTMLIonTextElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2325,7 +2325,7 @@ export declare interface IonText extends Components.IonText {}
   inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'value', 'wrap'],
 })
 export class IonTextarea {
-  protected el: HTMLElement;
+  protected el: HTMLIonTextareaElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2376,7 +2376,7 @@ the user clears the textarea by performing a keydown event.
   inputs: [],
 })
 export class IonThumbnail {
-  protected el: HTMLElement;
+  protected el: HTMLIonThumbnailElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2398,7 +2398,7 @@ export declare interface IonThumbnail extends Components.IonThumbnail {}
   inputs: ['color', 'size'],
 })
 export class IonTitle {
-  protected el: HTMLElement;
+  protected el: HTMLIonTitleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2421,7 +2421,7 @@ export declare interface IonTitle extends Components.IonTitle {}
   inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger'],
 })
 export class IonToast {
-  protected el: HTMLElement;
+  protected el: HTMLIonToastElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2483,7 +2483,7 @@ Shorthand for ionToastDidDismiss.
   inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
 })
 export class IonToggle {
-  protected el: HTMLElement;
+  protected el: HTMLIonToggleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2523,7 +2523,7 @@ This event will not emit when programmatically setting the `checked` property.
   inputs: ['color', 'mode'],
 })
 export class IonToolbar {
-  protected el: HTMLElement;
+  protected el: HTMLIonToolbarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index a30385ead5c..c7d111f7bef 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -93,7 +93,7 @@ import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/
   standalone: true
 })
 export class IonAccordion {
-  protected el: HTMLElement;
+  protected el: HTMLIonAccordionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -117,7 +117,7 @@ export declare interface IonAccordion extends Components.IonAccordion {}
   standalone: true
 })
 export class IonAccordionGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonAccordionGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -152,7 +152,7 @@ This event will not emit when programmatically setting the `value` property.
   standalone: true
 })
 export class IonActionSheet {
-  protected el: HTMLElement;
+  protected el: HTMLIonActionSheetElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -217,7 +217,7 @@ Shorthand for ionActionSheetDidDismiss.
   standalone: true
 })
 export class IonAlert {
-  protected el: HTMLElement;
+  protected el: HTMLIonAlertElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -281,7 +281,7 @@ Shorthand for ionAlertDidDismiss.
   standalone: true
 })
 export class IonApp {
-  protected el: HTMLElement;
+  protected el: HTMLIonAppElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -304,7 +304,7 @@ export declare interface IonApp extends Components.IonApp {}
   standalone: true
 })
 export class IonAvatar {
-  protected el: HTMLElement;
+  protected el: HTMLIonAvatarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -328,7 +328,7 @@ export declare interface IonAvatar extends Components.IonAvatar {}
   standalone: true
 })
 export class IonBackdrop {
-  protected el: HTMLElement;
+  protected el: HTMLIonBackdropElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -358,7 +358,7 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
   standalone: true
 })
 export class IonBadge {
-  protected el: HTMLElement;
+  protected el: HTMLIonBadgeElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -382,7 +382,7 @@ export declare interface IonBadge extends Components.IonBadge {}
   standalone: true
 })
 export class IonBreadcrumb {
-  protected el: HTMLElement;
+  protected el: HTMLIonBreadcrumbElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -416,7 +416,7 @@ export declare interface IonBreadcrumb extends Components.IonBreadcrumb {
   standalone: true
 })
 export class IonBreadcrumbs {
-  protected el: HTMLElement;
+  protected el: HTMLIonBreadcrumbsElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -448,7 +448,7 @@ export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
   standalone: true
 })
 export class IonButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -482,7 +482,7 @@ export declare interface IonButton extends Components.IonButton {
   standalone: true
 })
 export class IonButtons {
-  protected el: HTMLElement;
+  protected el: HTMLIonButtonsElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -506,7 +506,7 @@ export declare interface IonButtons extends Components.IonButtons {}
   standalone: true
 })
 export class IonCard {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -530,7 +530,7 @@ export declare interface IonCard extends Components.IonCard {}
   standalone: true
 })
 export class IonCardContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -554,7 +554,7 @@ export declare interface IonCardContent extends Components.IonCardContent {}
   standalone: true
 })
 export class IonCardHeader {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardHeaderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -578,7 +578,7 @@ export declare interface IonCardHeader extends Components.IonCardHeader {}
   standalone: true
 })
 export class IonCardSubtitle {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardSubtitleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -602,7 +602,7 @@ export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
   standalone: true
 })
 export class IonCardTitle {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardTitleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -626,7 +626,7 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
   standalone: true
 })
 export class IonChip {
-  protected el: HTMLElement;
+  protected el: HTMLIonChipElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -650,7 +650,7 @@ export declare interface IonChip extends Components.IonChip {}
   standalone: true
 })
 export class IonCol {
-  protected el: HTMLElement;
+  protected el: HTMLIonColElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -675,7 +675,7 @@ export declare interface IonCol extends Components.IonCol {}
   standalone: true
 })
 export class IonContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -719,7 +719,7 @@ Set `scrollEvents` to `true` to enable.
   standalone: true
 })
 export class IonDatetimeButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonDatetimeButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -744,7 +744,7 @@ export declare interface IonDatetimeButton extends Components.IonDatetimeButton
   standalone: true
 })
 export class IonFab {
-  protected el: HTMLElement;
+  protected el: HTMLIonFabElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -768,7 +768,7 @@ export declare interface IonFab extends Components.IonFab {}
   standalone: true
 })
 export class IonFabButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonFabButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -802,7 +802,7 @@ export declare interface IonFabButton extends Components.IonFabButton {
   standalone: true
 })
 export class IonFabList {
-  protected el: HTMLElement;
+  protected el: HTMLIonFabListElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -826,7 +826,7 @@ export declare interface IonFabList extends Components.IonFabList {}
   standalone: true
 })
 export class IonFooter {
-  protected el: HTMLElement;
+  protected el: HTMLIonFooterElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -850,7 +850,7 @@ export declare interface IonFooter extends Components.IonFooter {}
   standalone: true
 })
 export class IonGrid {
-  protected el: HTMLElement;
+  protected el: HTMLIonGridElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -874,7 +874,7 @@ export declare interface IonGrid extends Components.IonGrid {}
   standalone: true
 })
 export class IonHeader {
-  protected el: HTMLElement;
+  protected el: HTMLIonHeaderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -898,7 +898,7 @@ export declare interface IonHeader extends Components.IonHeader {}
   standalone: true
 })
 export class IonImg {
-  protected el: HTMLElement;
+  protected el: HTMLIonImgElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -937,7 +937,7 @@ export declare interface IonImg extends Components.IonImg {
   standalone: true
 })
 export class IonInfiniteScroll {
-  protected el: HTMLElement;
+  protected el: HTMLIonInfiniteScrollElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -970,7 +970,7 @@ your async operation has completed.
   standalone: true
 })
 export class IonInfiniteScrollContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonInfiniteScrollContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -994,7 +994,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
   standalone: true
 })
 export class IonInputPasswordToggle {
-  protected el: HTMLElement;
+  protected el: HTMLIonInputPasswordToggleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1018,7 +1018,7 @@ export declare interface IonInputPasswordToggle extends Components.IonInputPassw
   standalone: true
 })
 export class IonItem {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1042,7 +1042,7 @@ export declare interface IonItem extends Components.IonItem {}
   standalone: true
 })
 export class IonItemDivider {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemDividerElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1065,7 +1065,7 @@ export declare interface IonItemDivider extends Components.IonItemDivider {}
   standalone: true
 })
 export class IonItemGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1089,7 +1089,7 @@ export declare interface IonItemGroup extends Components.IonItemGroup {}
   standalone: true
 })
 export class IonItemOption {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemOptionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1113,7 +1113,7 @@ export declare interface IonItemOption extends Components.IonItemOption {}
   standalone: true
 })
 export class IonItemOptions {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemOptionsElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1144,7 +1144,7 @@ export declare interface IonItemOptions extends Components.IonItemOptions {
   standalone: true
 })
 export class IonItemSliding {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemSlidingElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1174,7 +1174,7 @@ export declare interface IonItemSliding extends Components.IonItemSliding {
   standalone: true
 })
 export class IonLabel {
-  protected el: HTMLElement;
+  protected el: HTMLIonLabelElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1199,7 +1199,7 @@ export declare interface IonLabel extends Components.IonLabel {}
   standalone: true
 })
 export class IonList {
-  protected el: HTMLElement;
+  protected el: HTMLIonListElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1223,7 +1223,7 @@ export declare interface IonList extends Components.IonList {}
   standalone: true
 })
 export class IonListHeader {
-  protected el: HTMLElement;
+  protected el: HTMLIonListHeaderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1248,7 +1248,7 @@ export declare interface IonListHeader extends Components.IonListHeader {}
   standalone: true
 })
 export class IonLoading {
-  protected el: HTMLElement;
+  protected el: HTMLIonLoadingElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1313,7 +1313,7 @@ Shorthand for ionLoadingDidDismiss.
   standalone: true
 })
 export class IonMenu {
-  protected el: HTMLElement;
+  protected el: HTMLIonMenuElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1357,7 +1357,7 @@ export declare interface IonMenu extends Components.IonMenu {
   standalone: true
 })
 export class IonMenuButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonMenuButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1381,7 +1381,7 @@ export declare interface IonMenuButton extends Components.IonMenuButton {}
   standalone: true
 })
 export class IonMenuToggle {
-  protected el: HTMLElement;
+  protected el: HTMLIonMenuToggleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1405,7 +1405,7 @@ export declare interface IonMenuToggle extends Components.IonMenuToggle {}
   standalone: true
 })
 export class IonNavLink {
-  protected el: HTMLElement;
+  protected el: HTMLIonNavLinkElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1429,7 +1429,7 @@ export declare interface IonNavLink extends Components.IonNavLink {}
   standalone: true
 })
 export class IonNote {
-  protected el: HTMLElement;
+  protected el: HTMLIonNoteElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1453,7 +1453,7 @@ export declare interface IonNote extends Components.IonNote {}
   standalone: true
 })
 export class IonPicker {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1478,7 +1478,7 @@ export declare interface IonPicker extends Components.IonPicker {}
   standalone: true
 })
 export class IonPickerColumn {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerColumnElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1512,7 +1512,7 @@ This event will not emit when programmatically setting the `value` property.
   standalone: true
 })
 export class IonPickerColumnOption {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerColumnOptionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1537,7 +1537,7 @@ export declare interface IonPickerColumnOption extends Components.IonPickerColum
   standalone: true
 })
 export class IonPickerLegacy {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerLegacyElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1601,7 +1601,7 @@ Shorthand for ionPickerDidDismiss.
   standalone: true
 })
 export class IonProgressBar {
-  protected el: HTMLElement;
+  protected el: HTMLIonProgressBarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1625,7 +1625,7 @@ export declare interface IonProgressBar extends Components.IonProgressBar {}
   standalone: true
 })
 export class IonRadio {
-  protected el: HTMLElement;
+  protected el: HTMLIonRadioElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1660,7 +1660,7 @@ export declare interface IonRadio extends Components.IonRadio {
   standalone: true
 })
 export class IonRefresher {
-  protected el: HTMLElement;
+  protected el: HTMLIonRefresherElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1703,7 +1703,7 @@ called when the async operation has completed.
   standalone: true
 })
 export class IonRefresherContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonRefresherContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1726,7 +1726,7 @@ export declare interface IonRefresherContent extends Components.IonRefresherCont
   standalone: true
 })
 export class IonReorder {
-  protected el: HTMLElement;
+  protected el: HTMLIonReorderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1751,7 +1751,7 @@ export declare interface IonReorder extends Components.IonReorder {}
   standalone: true
 })
 export class IonReorderGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonReorderGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1786,7 +1786,7 @@ to be called in order to finalize the reorder action.
   standalone: true
 })
 export class IonRippleEffect {
-  protected el: HTMLElement;
+  protected el: HTMLIonRippleEffectElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1809,7 +1809,7 @@ export declare interface IonRippleEffect extends Components.IonRippleEffect {}
   standalone: true
 })
 export class IonRow {
-  protected el: HTMLElement;
+  protected el: HTMLIonRowElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1833,7 +1833,7 @@ export declare interface IonRow extends Components.IonRow {}
   standalone: true
 })
 export class IonSegmentButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1856,7 +1856,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
   standalone: true
 })
 export class IonSegmentContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1880,7 +1880,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
   standalone: true
 })
 export class IonSegmentView {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentViewElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1912,7 +1912,7 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
   standalone: true
 })
 export class IonSelectModal {
-  protected el: HTMLElement;
+  protected el: HTMLIonSelectModalElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1936,7 +1936,7 @@ export declare interface IonSelectModal extends Components.IonSelectModal {}
   standalone: true
 })
 export class IonSelectOption {
-  protected el: HTMLElement;
+  protected el: HTMLIonSelectOptionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1960,7 +1960,7 @@ export declare interface IonSelectOption extends Components.IonSelectOption {}
   standalone: true
 })
 export class IonSkeletonText {
-  protected el: HTMLElement;
+  protected el: HTMLIonSkeletonTextElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1984,7 +1984,7 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
   standalone: true
 })
 export class IonSpinner {
-  protected el: HTMLElement;
+  protected el: HTMLIonSpinnerElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2008,7 +2008,7 @@ export declare interface IonSpinner extends Components.IonSpinner {}
   standalone: true
 })
 export class IonSplitPane {
-  protected el: HTMLElement;
+  protected el: HTMLIonSplitPaneElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2039,7 +2039,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
   standalone: true
 })
 export class IonTab {
-  protected el: HTMLElement;
+  protected el: HTMLIonTabElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2063,7 +2063,7 @@ export declare interface IonTab extends Components.IonTab {}
   standalone: true
 })
 export class IonTabBar {
-  protected el: HTMLElement;
+  protected el: HTMLIonTabBarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2087,7 +2087,7 @@ export declare interface IonTabBar extends Components.IonTabBar {}
   standalone: true
 })
 export class IonTabButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonTabButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2111,7 +2111,7 @@ export declare interface IonTabButton extends Components.IonTabButton {}
   standalone: true
 })
 export class IonText {
-  protected el: HTMLElement;
+  protected el: HTMLIonTextElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2134,7 +2134,7 @@ export declare interface IonText extends Components.IonText {}
   standalone: true
 })
 export class IonThumbnail {
-  protected el: HTMLElement;
+  protected el: HTMLIonThumbnailElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2158,7 +2158,7 @@ export declare interface IonThumbnail extends Components.IonThumbnail {}
   standalone: true
 })
 export class IonTitle {
-  protected el: HTMLElement;
+  protected el: HTMLIonTitleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2183,7 +2183,7 @@ export declare interface IonTitle extends Components.IonTitle {}
   standalone: true
 })
 export class IonToast {
-  protected el: HTMLElement;
+  protected el: HTMLIonToastElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2247,7 +2247,7 @@ Shorthand for ionToastDidDismiss.
   standalone: true
 })
 export class IonToolbar {
-  protected el: HTMLElement;
+  protected el: HTMLIonToolbarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 7dd5812ebbc..5a902345b59 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
+import { defineContainer } from '@stencil/vue-output-target/runtime';
 
-import type { JSX } from '@ionic/core/components';
+import type { JSX } from '@ionic/core';
 
 import { defineCustomElement as defineIonAccordion } from '@ionic/core/components/ion-accordion.js';
 import { defineCustomElement as defineIonAccordionGroup } from '@ionic/core/components/ion-accordion-group.js';
@@ -102,6 +102,9 @@ export const IonAccordionGroup = /*@__PURE__*/ defineContainer<JSX.IonAccordionG
   'expand',
   'ionChange',
   'ionValueChange'
+], [
+  'ionChange',
+  'ionValueChange'
 ],
 'value', 'ion-change');
 
@@ -114,6 +117,8 @@ export const IonBackdrop = /*@__PURE__*/ defineContainer<JSX.IonBackdrop>('ion-b
   'tappable',
   'stopPropagation',
   'ionBackdropTap'
+], [
+  'ionBackdropTap'
 ]);
 
 
@@ -139,6 +144,10 @@ export const IonBreadcrumb = /*@__PURE__*/ defineContainer<JSX.IonBreadcrumb>('i
   'ionFocus',
   'ionBlur',
   'collapsedClick'
+], [
+  'ionFocus',
+  'ionBlur',
+  'collapsedClick'
 ]);
 
 
@@ -148,6 +157,8 @@ export const IonBreadcrumbs = /*@__PURE__*/ defineContainer<JSX.IonBreadcrumbs>(
   'itemsBeforeCollapse',
   'itemsAfterCollapse',
   'ionCollapsedClick'
+], [
+  'ionCollapsedClick'
 ]);
 
 
@@ -170,6 +181,9 @@ export const IonButton = /*@__PURE__*/ defineContainer<JSX.IonButton>('ion-butto
   'form',
   'ionFocus',
   'ionBlur'
+], [
+  'ionFocus',
+  'ionBlur'
 ]);
 
 
@@ -221,6 +235,11 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
   'labelPlacement',
   'justify',
   'alignment',
+  'required',
+  'ionChange',
+  'ionFocus',
+  'ionBlur'
+], [
   'ionChange',
   'ionFocus',
   'ionBlur'
@@ -274,6 +293,10 @@ export const IonContent = /*@__PURE__*/ defineContainer<JSX.IonContent>('ion-con
   'ionScrollStart',
   'ionScroll',
   'ionScrollEnd'
+], [
+  'ionScrollStart',
+  'ionScroll',
+  'ionScrollEnd'
 ]);
 
 
@@ -315,6 +338,14 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime, JSX.Io
   'ionBlur',
   'ionStyle',
   'ionRender'
+], [
+  'ionCancel',
+  'ionChange',
+  'ionValueChange',
+  'ionFocus',
+  'ionBlur',
+  'ionStyle',
+  'ionRender'
 ],
 'value', 'ion-change');
 
@@ -351,6 +382,9 @@ export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion
   'closeIcon',
   'ionFocus',
   'ionBlur'
+], [
+  'ionFocus',
+  'ionBlur'
 ]);
 
 
@@ -383,6 +417,10 @@ export const IonImg = /*@__PURE__*/ defineContainer<JSX.IonImg>('ion-img', defin
   'ionImgWillLoad',
   'ionImgDidLoad',
   'ionError'
+], [
+  'ionImgWillLoad',
+  'ionImgDidLoad',
+  'ionError'
 ]);
 
 
@@ -391,6 +429,8 @@ export const IonInfiniteScroll = /*@__PURE__*/ defineContainer<JSX.IonInfiniteSc
   'disabled',
   'position',
   'ionInfinite'
+], [
+  'ionInfinite'
 ]);
 
 
@@ -439,6 +479,11 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput, JSX.IonInput
   'ionChange',
   'ionBlur',
   'ionFocus'
+], [
+  'ionInput',
+  'ionChange',
+  'ionBlur',
+  'ionFocus'
 ],
 'value', 'ion-input');
 
@@ -492,12 +537,16 @@ export const IonItemOption = /*@__PURE__*/ defineContainer<JSX.IonItemOption>('i
 export const IonItemOptions = /*@__PURE__*/ defineContainer<JSX.IonItemOptions>('ion-item-options', defineIonItemOptions, [
   'side',
   'ionSwipe'
+], [
+  'ionSwipe'
 ]);
 
 
 export const IonItemSliding = /*@__PURE__*/ defineContainer<JSX.IonItemSliding>('ion-item-sliding', defineIonItemSliding, [
   'disabled',
   'ionDrag'
+], [
+  'ionDrag'
 ]);
 
 
@@ -506,6 +555,9 @@ export const IonLabel = /*@__PURE__*/ defineContainer<JSX.IonLabel>('ion-label',
   'position',
   'ionColor',
   'ionStyle'
+], [
+  'ionColor',
+  'ionStyle'
 ]);
 
 
@@ -534,6 +586,12 @@ export const IonMenu = /*@__PURE__*/ defineContainer<JSX.IonMenu>('ion-menu', de
   'ionDidOpen',
   'ionDidClose',
   'ionMenuChange'
+], [
+  'ionWillOpen',
+  'ionWillClose',
+  'ionDidOpen',
+  'ionDidClose',
+  'ionMenuChange'
 ]);
 
 
@@ -562,6 +620,10 @@ export const IonNav = /*@__PURE__*/ defineContainer<JSX.IonNav>('ion-nav', defin
   'ionNavWillLoad',
   'ionNavWillChange',
   'ionNavDidChange'
+], [
+  'ionNavWillLoad',
+  'ionNavWillChange',
+  'ionNavDidChange'
 ]);
 
 
@@ -580,6 +642,8 @@ export const IonNote = /*@__PURE__*/ defineContainer<JSX.IonNote>('ion-note', de
 
 export const IonPicker = /*@__PURE__*/ defineContainer<JSX.IonPicker>('ion-picker', defineIonPicker, [
   'ionInputModeChange'
+], [
+  'ionInputModeChange'
 ]);
 
 
@@ -589,6 +653,8 @@ export const IonPickerColumn = /*@__PURE__*/ defineContainer<JSX.IonPickerColumn
   'color',
   'numericInput',
   'ionChange'
+], [
+  'ionChange'
 ]);
 
 
@@ -618,6 +684,9 @@ export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio, JSX.IonRadio
   'alignment',
   'ionFocus',
   'ionBlur'
+], [
+  'ionFocus',
+  'ionBlur'
 ],
 'value', 'ion-change');
 
@@ -629,6 +698,9 @@ export const IonRadioGroup = /*@__PURE__*/ defineContainer<JSX.IonRadioGroup, JS
   'value',
   'ionChange',
   'ionValueChange'
+], [
+  'ionChange',
+  'ionValueChange'
 ],
 'value', 'ion-change');
 
@@ -656,6 +728,13 @@ export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange, JSX.IonRange
   'ionBlur',
   'ionKnobMoveStart',
   'ionKnobMoveEnd'
+], [
+  'ionChange',
+  'ionInput',
+  'ionFocus',
+  'ionBlur',
+  'ionKnobMoveStart',
+  'ionKnobMoveEnd'
 ],
 'value', 'ion-input');
 
@@ -670,6 +749,10 @@ export const IonRefresher = /*@__PURE__*/ defineContainer<JSX.IonRefresher>('ion
   'ionRefresh',
   'ionPull',
   'ionStart'
+], [
+  'ionRefresh',
+  'ionPull',
+  'ionStart'
 ]);
 
 
@@ -687,6 +770,8 @@ export const IonReorder = /*@__PURE__*/ defineContainer<JSX.IonReorder>('ion-reo
 export const IonReorderGroup = /*@__PURE__*/ defineContainer<JSX.IonReorderGroup>('ion-reorder-group', defineIonReorderGroup, [
   'disabled',
   'ionItemReorder'
+], [
+  'ionItemReorder'
 ]);
 
 
@@ -728,6 +813,14 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar, JSX.
   'ionBlur',
   'ionFocus',
   'ionStyle'
+], [
+  'ionInput',
+  'ionChange',
+  'ionCancel',
+  'ionClear',
+  'ionBlur',
+  'ionFocus',
+  'ionStyle'
 ],
 'value', 'ion-input');
 
@@ -742,6 +835,10 @@ export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment, JSX.IonS
   'ionChange',
   'ionSelect',
   'ionStyle'
+], [
+  'ionChange',
+  'ionSelect',
+  'ionStyle'
 ],
 'value', 'ion-change');
 
@@ -752,7 +849,7 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButt
   'layout',
   'type',
   'value'
-],
+], [],
 'value', 'ion-change');
 
 
@@ -762,6 +859,8 @@ export const IonSegmentContent = /*@__PURE__*/ defineContainer<JSX.IonSegmentCon
 export const IonSegmentView = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView, [
   'disabled',
   'ionSegmentViewScroll'
+], [
+  'ionSegmentViewScroll'
 ]);
 
 
@@ -791,6 +890,13 @@ export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect, JSX.IonSel
   'ionFocus',
   'ionBlur',
   'ionStyle'
+], [
+  'ionChange',
+  'ionCancel',
+  'ionDismiss',
+  'ionFocus',
+  'ionBlur',
+  'ionStyle'
 ],
 'value', 'ion-change');
 
@@ -811,6 +917,8 @@ export const IonSelectOption = /*@__PURE__*/ defineContainer<JSX.IonSelectOption
 export const IonSkeletonText = /*@__PURE__*/ defineContainer<JSX.IonSkeletonText>('ion-skeleton-text', defineIonSkeletonText, [
   'animated',
   'ionStyle'
+], [
+  'ionStyle'
 ]);
 
 
@@ -827,6 +935,8 @@ export const IonSplitPane = /*@__PURE__*/ defineContainer<JSX.IonSplitPane>('ion
   'disabled',
   'when',
   'ionSplitPaneVisible'
+], [
+  'ionSplitPaneVisible'
 ]);
 
 
@@ -876,6 +986,11 @@ export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea, JSX.Io
   'ionInput',
   'ionBlur',
   'ionFocus'
+], [
+  'ionChange',
+  'ionInput',
+  'ionBlur',
+  'ionFocus'
 ],
 'value', 'ion-input');
 
@@ -887,6 +1002,8 @@ export const IonTitle = /*@__PURE__*/ defineContainer<JSX.IonTitle>('ion-title',
   'color',
   'size',
   'ionStyle'
+], [
+  'ionStyle'
 ]);
 
 
@@ -903,6 +1020,10 @@ export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle, JSX.IonTog
   'ionChange',
   'ionFocus',
   'ionBlur'
+], [
+  'ionChange',
+  'ionFocus',
+  'ionBlur'
 ],
 'checked', 'ion-change');
 

From b423ae7c8cd5ef9224167868bccb4ca209512679 Mon Sep 17 00:00:00 2001
From: giuliana <giuliana.silva@outsystems.com>
Date: Fri, 24 Jan 2025 11:30:04 +0000
Subject: [PATCH 3/6] feat(checkbox): change required prop description

---
 core/src/components.d.ts                  | 4 ++--
 core/src/components/checkbox/checkbox.tsx | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 1b083ee765a..2d6f41368be 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -644,7 +644,7 @@ export namespace Components {
          */
         "name": string;
         /**
-          * If `true`, the user must fill in a value before submitting a form.
+          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
          */
         "required": boolean;
         "setFocus": () => Promise<void>;
@@ -5440,7 +5440,7 @@ declare namespace LocalJSX {
          */
         "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
         /**
-          * If `true`, the user must fill in a value before submitting a form.
+          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
          */
         "required"?: boolean;
         /**
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index e9771e4f288..dcea4876d70 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -99,7 +99,9 @@ export class Checkbox implements ComponentInterface {
   @Prop() alignment?: 'start' | 'center';
 
   /**
-   * If `true`, the user must fill in a value before submitting a form.
+   * If true, screen readers will announce it as a required field. This property
+   * works only for accessibility purposes, it will not prevent the form from
+   * submitting if the value is invalid.
    */
   @Prop() required = false;
 

From 397c72aadd5559f90af5004c27ed24298582547b Mon Sep 17 00:00:00 2001
From: giuliana <giuliana.silva@outsystems.com>
Date: Fri, 24 Jan 2025 12:05:41 +0000
Subject: [PATCH 4/6] test(checkbox): add required prop tests

---
 .../components/checkbox/test/checkbox.spec.ts | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/core/src/components/checkbox/test/checkbox.spec.ts b/core/src/components/checkbox/test/checkbox.spec.ts
index e27f0e2a502..7b1bac136c2 100644
--- a/core/src/components/checkbox/test/checkbox.spec.ts
+++ b/core/src/components/checkbox/test/checkbox.spec.ts
@@ -54,3 +54,33 @@ describe('ion-checkbox: indeterminate', () => {
     expect(checkbox.getAttribute('aria-checked')).toBe('mixed');
   });
 });
+
+describe('ion-checkbox: required', () => {
+  it('should have a required attribute in inner input when true', async () => {
+    const page = await newSpecPage({
+      components: [Checkbox],
+      html: `
+        <ion-checkbox required="true">Checkbox</ion-checkbox>
+      `,
+    });
+
+    const checkbox = page.body.querySelector('ion-checkbox')!;
+    const nativeInput = checkbox.shadowRoot?.querySelector("input[type=checkbox]")!;
+
+    expect(nativeInput.hasAttribute('required')).toBeTruthy();
+  });
+
+  it('should not have a required attribute in inner input when false', async () => {
+    const page = await newSpecPage({
+      components: [Checkbox],
+      html: `
+        <ion-checkbox required="false">Checkbox</ion-checkbox>
+      `,
+    });
+
+    const checkbox = page.body.querySelector('ion-checkbox')!;
+    const nativeInput = checkbox.shadowRoot?.querySelector("input[type=checkbox]")!;
+
+    expect(nativeInput.hasAttribute('required')).toBeFalsy();
+  });
+});

From 80d4fa63ec7741a55d66c6a7e0c4b71caa9655ea Mon Sep 17 00:00:00 2001
From: giuliana <giuliana.silva@outsystems.com>
Date: Fri, 24 Jan 2025 12:34:59 +0000
Subject: [PATCH 5/6] lint

---
 core/src/components/checkbox/checkbox.tsx          | 2 +-
 core/src/components/checkbox/test/checkbox.spec.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index dcea4876d70..2e05e366f70 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -189,7 +189,7 @@ export class Checkbox implements ComponentInterface {
       name,
       value,
       alignment,
-      required
+      required,
     } = this;
     const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
diff --git a/core/src/components/checkbox/test/checkbox.spec.ts b/core/src/components/checkbox/test/checkbox.spec.ts
index 7b1bac136c2..e390d4d1b2e 100644
--- a/core/src/components/checkbox/test/checkbox.spec.ts
+++ b/core/src/components/checkbox/test/checkbox.spec.ts
@@ -65,7 +65,7 @@ describe('ion-checkbox: required', () => {
     });
 
     const checkbox = page.body.querySelector('ion-checkbox')!;
-    const nativeInput = checkbox.shadowRoot?.querySelector("input[type=checkbox]")!;
+    const nativeInput = checkbox.shadowRoot?.querySelector('input[type=checkbox]')!;
 
     expect(nativeInput.hasAttribute('required')).toBeTruthy();
   });
@@ -79,7 +79,7 @@ describe('ion-checkbox: required', () => {
     });
 
     const checkbox = page.body.querySelector('ion-checkbox')!;
-    const nativeInput = checkbox.shadowRoot?.querySelector("input[type=checkbox]")!;
+    const nativeInput = checkbox.shadowRoot?.querySelector('input[type=checkbox]')!;
 
     expect(nativeInput.hasAttribute('required')).toBeFalsy();
   });

From 0a502a196ff77e1f100c932f86cc23e821646609 Mon Sep 17 00:00:00 2001
From: giuliana <giuliana.silva@outsystems.com>
Date: Thu, 30 Jan 2025 10:12:20 +0000
Subject: [PATCH 6/6] chore(vue): update proxies file

---
 packages/vue/src/proxies.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index eb7a5eb4c26..5a902345b59 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -243,10 +243,6 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
   'ionChange',
   'ionFocus',
   'ionBlur'
-], [
-  'ionChange',
-  'ionFocus',
-  'ionBlur'
 ],
 'checked', 'ion-change');