fix(vue): make update work

core/api.txt

@@ -1944,6 +1944,7 @@ ion-toggle,prop,justify,"end" | "space-between" | "start" | undefined,undefined,
 ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
+ion-toggle,prop,required,boolean,false,false,false
 ion-toggle,prop,value,null | string | undefined,'on',false,false
 ion-toggle,event,ionBlur,void,true
 ion-toggle,event,ionChange,ToggleChangeEventDetail<any>,true

core/src/components.d.ts

@@ -3280,6 +3280,10 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        /**
+          * 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;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */
@@ -8155,6 +8159,10 @@ declare namespace LocalJSX {
           * Emitted when the toggle has focus.
          */
         "onIonFocus"?: (event: IonToggleCustomEvent<void>) => void;
+        /**
+          * 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;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */

core/src/components/toggle/test/toggle.spec.ts

@@ -75,3 +75,33 @@ describe('ion-toggle: disabled', () => {
     expect(toggle.checked).toBe(false);
   });
 });
+
+describe('ion-toggle: required', () => {
+  it('should have a required attribute in inner input when true', async () => {
+    const page = await newSpecPage({
+      components: [Toggle],
+      html: `
+        <ion-toggle required="true">Toggle</ion-toggle>
+      `,
+    });
+
+    const toggle = page.body.querySelector('ion-toggle')!;
+    const nativeInput = toggle.shadowRoot?.querySelector('input[role=switch]')!;
+
+    expect(nativeInput.hasAttribute('required')).toBeTruthy();
+  });
+
+  it('should not have a required attribute in inner input when false', async () => {
+    const page = await newSpecPage({
+      components: [Toggle],
+      html: `
+        <ion-toggle required="false">Toggle</ion-toggle>
+      `,
+    });
+
+    const toggle = page.body.querySelector('ion-toggle')!;
+    const nativeInput = toggle.shadowRoot?.querySelector('input[role=switch]')!;
+
+    expect(nativeInput.hasAttribute('required')).toBeFalsy();
+  });
+});

core/src/components/toggle/toggle.tsx

@@ -108,6 +108,13 @@ export class Toggle implements ComponentInterface {
    */
   @Prop() alignment?: 'start' | 'center';
 
+  /**
+   * 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;
+
   /**
    * Emitted when the user switches the toggle on or off.
    *
@@ -290,7 +297,8 @@ export class Toggle implements ComponentInterface {
   }
 
   render() {
-    const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
+    const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } =
+      this;
 
     const mode = getIonMode(this);
     const value = this.getValue();
@@ -327,6 +335,7 @@ export class Toggle implements ComponentInterface {
             onFocus={() => this.onFocus()}
             onBlur={() => this.onBlur()}
             ref={(focusEl) => (this.focusEl = focusEl)}
+            required={required}
             {...this.inheritedAttributes}
           />
           <div

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;
@@ -517,7 +517,7 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
   inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', '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;
@@ -2473,17 +2473,17 @@ Shorthand for ionToastDidDismiss.
 
 
 @ProxyCmp({
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'value']
 })
 @Component({
   selector: 'ion-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'required', '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;

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;

packages/vue/package-lock.json

@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@ionic/core": "^8.4.2",
+        "@stencil/vue-output-target": "0.9.2",
         "ionicons": "^7.0.0"
       },
       "devDependencies": {
@@ -25,8 +26,8 @@
         "prettier": "^2.8.3",
         "rimraf": "^3.0.2",
         "rollup": "^4.2.0",
-        "typescript": "^4.7.3",
-        "vue": "3.2.47",
+        "typescript": "^5.7.3",
+        "vue": "3.4.38",
         "vue-router": "^4.0.16"
       }
     },
@@ -39,11 +40,20 @@
         "@babel/highlight": "^7.10.4"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
-      "dev": true,
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -134,10 +144,13 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.8.tgz",
-      "integrity": "sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==",
-      "dev": true,
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz",
+      "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.26.7"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -146,13 +159,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.18.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.4.tgz",
-      "integrity": "sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==",
-      "dev": true,
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.7.tgz",
+      "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.16.7",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -389,6 +402,12 @@
         "prettier": "^2.0.0"
       }
     },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "license": "MIT"
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -640,6 +659,24 @@
         "npm": ">=7.10.0"
       }
     },
+    "node_modules/@stencil/vue-output-target": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.9.2.tgz",
+      "integrity": "sha512-AeBmfo8bQhtob4VKpYTNiCoqh50MeXUwRgYLyO/JxRgAAK9GSfenNrUxXDrK0DK65SWsx/GCOsRwWbfOveorOQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0",
+        "vue": "^3.4.38"
+      },
+      "peerDependenciesMeta": {
+        "@stencil/core": {
+          "optional": true
+        },
+        "vue": {
+          "optional": false
+        }
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.4.tgz",
@@ -959,53 +996,53 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
-      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.38.tgz",
+      "integrity": "sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.47",
+        "@babel/parser": "^7.24.7",
+        "@vue/shared": "3.4.38",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
+        "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
-      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz",
+      "integrity": "sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-core": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
-      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz",
+      "integrity": "sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/reactivity-transform": "3.2.47",
-        "@vue/shared": "3.2.47",
+        "@babel/parser": "^7.24.7",
+        "@vue/compiler-core": "3.4.38",
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/compiler-ssr": "3.4.38",
+        "@vue/shared": "3.4.38",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
+        "magic-string": "^0.30.10",
+        "postcss": "^8.4.40",
+        "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
-      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz",
+      "integrity": "sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -1015,66 +1052,54 @@
       "dev": true
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
-      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.38.tgz",
+      "integrity": "sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.2.47"
-      }
-    },
-    "node_modules/@vue/reactivity-transform": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
-      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
+        "@vue/shared": "3.4.38"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
-      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.38.tgz",
+      "integrity": "sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/reactivity": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
-      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz",
+      "integrity": "sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/runtime-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "csstype": "^2.6.8"
+        "@vue/reactivity": "3.4.38",
+        "@vue/runtime-core": "3.4.38",
+        "@vue/shared": "3.4.38",
+        "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
-      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.38.tgz",
+      "integrity": "sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-ssr": "3.4.38",
+        "@vue/shared": "3.4.38"
       },
       "peerDependencies": {
-        "vue": "3.2.47"
+        "vue": "3.4.38"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
-      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==",
-      "dev": true
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.38.tgz",
+      "integrity": "sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==",
+      "license": "MIT"
     },
     "node_modules/acorn": {
       "version": "7.4.1",
@@ -1406,10 +1431,10 @@
       }
     },
     "node_modules/csstype": {
-      "version": "2.6.21",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==",
-      "dev": true
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -1502,6 +1527,18 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.21.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz",
@@ -1959,8 +1996,7 @@
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "node_modules/esutils": {
       "version": "2.0.3",
@@ -2783,12 +2819,12 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-      "dev": true,
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "license": "MIT",
       "dependencies": {
-        "sourcemap-codec": "^1.4.8"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "node_modules/merge2": {
@@ -2841,16 +2877,16 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -3035,10 +3071,10 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
-      "dev": true
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -3053,10 +3089,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
-      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
-      "dev": true,
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
+      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -3071,10 +3106,11 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -3390,31 +3426,15 @@
         "tslib": "^1.10.0"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true,
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
-      "dev": true
-    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -3564,15 +3584,6 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3657,16 +3668,17 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.7.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.3.tgz",
-      "integrity": "sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==",
-      "dev": true,
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
+      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {
@@ -3727,16 +3739,24 @@
       "dev": true
     },
     "node_modules/vue": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
-      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.38.tgz",
+      "integrity": "sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-sfc": "3.2.47",
-        "@vue/runtime-dom": "3.2.47",
-        "@vue/server-renderer": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/compiler-sfc": "3.4.38",
+        "@vue/runtime-dom": "3.4.38",
+        "@vue/server-renderer": "3.4.38",
+        "@vue/shared": "3.4.38"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue-router": {
@@ -3837,11 +3857,15 @@
         "@babel/highlight": "^7.10.4"
       }
     },
+    "@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA=="
+    },
     "@babel/helper-validator-identifier": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
-      "dev": true
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ=="
     },
     "@babel/highlight": {
       "version": "7.18.6",
@@ -3913,19 +3937,20 @@
       }
     },
     "@babel/parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.8.tgz",
-      "integrity": "sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==",
-      "dev": true
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz",
+      "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
+      "requires": {
+        "@babel/types": "^7.26.7"
+      }
     },
     "@babel/types": {
-      "version": "7.18.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.4.tgz",
-      "integrity": "sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==",
-      "dev": true,
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.7.tgz",
+      "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.16.7",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       }
     },
     "@eslint/eslintrc": {
@@ -4083,6 +4108,11 @@
       "dev": true,
       "requires": {}
     },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4219,6 +4249,12 @@
       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.20.0.tgz",
       "integrity": "sha512-WPrTHFngvN081RY+dJPneKQLwnOFD60OMCOQGmmSHfCW0f4ujPMzzhwWU1gcSwXPWXz5O+8cBiiCaxAbJU7kAg=="
     },
+    "@stencil/vue-output-target": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.9.2.tgz",
+      "integrity": "sha512-AeBmfo8bQhtob4VKpYTNiCoqh50MeXUwRgYLyO/JxRgAAK9GSfenNrUxXDrK0DK65SWsx/GCOsRwWbfOveorOQ==",
+      "requires": {}
+    },
     "@types/estree": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.4.tgz",
@@ -4405,53 +4441,49 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
-      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.38.tgz",
+      "integrity": "sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==",
       "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.47",
+        "@babel/parser": "^7.24.7",
+        "@vue/shared": "3.4.38",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
+        "source-map-js": "^1.2.0"
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
-      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz",
+      "integrity": "sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==",
       "requires": {
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-core": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
-      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz",
+      "integrity": "sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==",
       "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/reactivity-transform": "3.2.47",
-        "@vue/shared": "3.2.47",
+        "@babel/parser": "^7.24.7",
+        "@vue/compiler-core": "3.4.38",
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/compiler-ssr": "3.4.38",
+        "@vue/shared": "3.4.38",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
+        "magic-string": "^0.30.10",
+        "postcss": "^8.4.40",
+        "source-map-js": "^1.2.0"
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
-      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz",
+      "integrity": "sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==",
       "requires": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "@vue/devtools-api": {
@@ -4461,63 +4493,46 @@
       "dev": true
     },
     "@vue/reactivity": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
-      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.38.tgz",
+      "integrity": "sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==",
       "requires": {
-        "@vue/shared": "3.2.47"
-      }
-    },
-    "@vue/reactivity-transform": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
-      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
-      "dev": true,
-      "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
+        "@vue/shared": "3.4.38"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
-      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.38.tgz",
+      "integrity": "sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==",
       "requires": {
-        "@vue/reactivity": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/reactivity": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
-      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz",
+      "integrity": "sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==",
       "requires": {
-        "@vue/runtime-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "csstype": "^2.6.8"
+        "@vue/reactivity": "3.4.38",
+        "@vue/runtime-core": "3.4.38",
+        "@vue/shared": "3.4.38",
+        "csstype": "^3.1.3"
       }
     },
     "@vue/server-renderer": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
-      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.38.tgz",
+      "integrity": "sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==",
       "requires": {
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-ssr": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "@vue/shared": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
-      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==",
-      "dev": true
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.38.tgz",
+      "integrity": "sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw=="
     },
     "acorn": {
       "version": "7.4.1",
@@ -4771,10 +4786,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.21",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==",
-      "dev": true
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "debug": {
       "version": "4.3.4",
@@ -4844,6 +4858,11 @@
         "ansi-colors": "^4.1.1"
       }
     },
+    "entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+    },
     "es-abstract": {
       "version": "1.21.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz",
@@ -5202,8 +5221,7 @@
     "estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "esutils": {
       "version": "2.0.3",
@@ -5813,12 +5831,11 @@
       }
     },
     "magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-      "dev": true,
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
       "requires": {
-        "sourcemap-codec": "^1.4.8"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "merge2": {
@@ -5859,10 +5876,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -6008,10 +6024,9 @@
       "dev": true
     },
     "picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
-      "dev": true
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "picomatch": {
       "version": "2.3.1",
@@ -6020,14 +6035,13 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
-      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
-      "dev": true,
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
+      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
       "requires": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       }
     },
     "prelude-ls": {
@@ -6229,23 +6243,10 @@
         "tslib": "^1.10.0"
       }
     },
-    "source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true
-    },
     "source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true
-    },
-    "sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "dev": true
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
     },
     "sprintf-js": {
       "version": "1.0.3",
@@ -6361,12 +6362,6 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
-    "to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true
-    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -6430,10 +6425,10 @@
       }
     },
     "typescript": {
-      "version": "4.7.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.3.tgz",
-      "integrity": "sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==",
-      "dev": true
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
+      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+      "devOptional": true
     },
     "unbox-primitive": {
       "version": "1.0.2",
@@ -6487,16 +6482,15 @@
       "dev": true
     },
     "vue": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
-      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
-      "dev": true,
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.38.tgz",
+      "integrity": "sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==",
       "requires": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-sfc": "3.2.47",
-        "@vue/runtime-dom": "3.2.47",
-        "@vue/server-renderer": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/compiler-sfc": "3.4.38",
+        "@vue/runtime-dom": "3.4.38",
+        "@vue/server-renderer": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "vue-router": {

packages/vue/package.json

@@ -61,12 +61,13 @@
     "prettier": "^2.8.3",
     "rimraf": "^3.0.2",
     "rollup": "^4.2.0",
-    "typescript": "^4.7.3",
-    "vue": "3.2.47",
+    "typescript": "^5.7.3",
+    "vue": "3.4.38",
     "vue-router": "^4.0.16"
   },
   "dependencies": {
     "@ionic/core": "^8.4.2",
+    "@stencil/vue-output-target": "0.9.2",
     "ionicons": "^7.0.0"
   },
   "vetur": {

packages/vue/src/components/IonApp.ts

@@ -9,15 +9,16 @@ export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
     return h(
       "ion-app",
       {
+        name: "IonApp",
         ...attrs,
       },
       [slots.default && slots.default(), ...userComponents.value]
     );
   };
+}, {
+  name: "IonApp",
 });
 
-IonApp.name = "IonApp";
-
 /**
  * When rendering user components inside of
  * ion-modal, or ion-popover the component

packages/vue/src/components/IonBackButton.ts

@@ -34,7 +34,7 @@ export const IonBackButton = /*@__PURE__*/ defineComponent(
         slots.default && slots.default()
       );
     };
+  }, {
+    name: "IonBackButton",
   }
 );
-
-IonBackButton.name = "IonBackButton";

packages/vue/src/components/IonNav.ts

@@ -21,37 +21,36 @@ export const IonNav = /*@__PURE__*/ defineComponent((props) => {
   return () => {
     return h("ion-nav", { ...props, delegate }, views.value);
   };
+}, {
+  name: "IonNav",
+  /**
+   * The default values follow what is defined at
+   * https://ionicframework.com/docs/api/nav#properties
+   * otherwise the default values on the Web Component
+   * may be overridden. For example, if the default animated value
+   * is not `true` below, then Vue would default the prop to `false`
+   * which would override the Web Component default of `true`.
+   */
+  props: {
+    animated: {
+      type: Boolean,
+      default: true,
+    },
+    animation: {
+      type: Function,
+      default: undefined,
+    },
+    root: {
+      type: [Function, Object, String],
+      default: undefined,
+    },
+    rootParams: {
+      type: Object,
+      default: undefined,
+    },
+    swipeGesture: {
+      type: Boolean,
+      default: undefined,
+    },
+  }
 });
-
-IonNav.name = "IonNav";
-
-/**
- * The default values follow what is defined at
- * https://ionicframework.com/docs/api/nav#properties
- * otherwise the default values on the Web Component
- * may be overridden. For example, if the default animated value
- * is not `true` below, then Vue would default the prop to `false`
- * which would override the Web Component default of `true`.
- */
-IonNav.props = {
-  animated: {
-    type: Boolean,
-    default: true,
-  },
-  animation: {
-    type: Function,
-    default: undefined,
-  },
-  root: {
-    type: [Function, Object, String],
-    default: undefined,
-  },
-  rootParams: {
-    type: Object,
-    default: undefined,
-  },
-  swipeGesture: {
-    type: Boolean,
-    default: undefined,
-  },
-};

packages/vue/src/components/IonRouterOutlet.ts

@@ -44,7 +44,7 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
     let previousMatchedRouteRef: Ref | undefined;
     let previousMatchedPath: string | undefined;
 
-    provide(viewDepthKey, depth + 1);
+    provide(viewDepthKey, depth + 1 as 0);
     provide(matchedRouteKey, matchedRouteRef);
 
     const ionRouterOutlet = ref();

packages/vue/src/components/IonTabBar.ts

@@ -43,7 +43,7 @@ export const IonTabBar = defineComponent({
   data() {
     return {
       tabState: {
-        activeTab: undefined,
+        activeTab: undefined as string | undefined,
         tabs: {},
         /**
          * Passing this prop to each tab button
@@ -52,7 +52,7 @@ export const IonTabBar = defineComponent({
          */
         hasRouterOutlet: false,
       },
-      tabVnodes: [],
+      tabVnodes: [] as VNode[],
       /* eslint-disable @typescript-eslint/no-empty-function */
       _tabsWillChange: { type: Function, default: () => {} },
       _tabsDidChange: { type: Function, default: () => {} },

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'
 ]);
 
 
@@ -224,6 +238,10 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
   'ionChange',
   'ionFocus',
   'ionBlur'
+], [
+  'ionChange',
+  'ionFocus',
+  'ionBlur'
 ],
 'checked', 'ion-change');
 
@@ -274,6 +292,10 @@ export const IonContent = /*@__PURE__*/ defineContainer<JSX.IonContent>('ion-con
   'ionScrollStart',
   'ionScroll',
   'ionScrollEnd'
+], [
+  'ionScrollStart',
+  'ionScroll',
+  'ionScrollEnd'
 ]);
 
 
@@ -315,6 +337,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 +381,9 @@ export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion
   'closeIcon',
   'ionFocus',
   'ionBlur'
+], [
+  'ionFocus',
+  'ionBlur'
 ]);
 
 
@@ -383,6 +416,10 @@ export const IonImg = /*@__PURE__*/ defineContainer<JSX.IonImg>('ion-img', defin
   'ionImgWillLoad',
   'ionImgDidLoad',
   'ionError'
+], [
+  'ionImgWillLoad',
+  'ionImgDidLoad',
+  'ionError'
 ]);
 
 
@@ -391,6 +428,8 @@ export const IonInfiniteScroll = /*@__PURE__*/ defineContainer<JSX.IonInfiniteSc
   'disabled',
   'position',
   'ionInfinite'
+], [
+  'ionInfinite'
 ]);
 
 
@@ -439,6 +478,11 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput, JSX.IonInput
   'ionChange',
   'ionBlur',
   'ionFocus'
+], [
+  'ionInput',
+  'ionChange',
+  'ionBlur',
+  'ionFocus'
 ],
 'value', 'ion-input');
 
@@ -492,12 +536,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 +554,9 @@ export const IonLabel = /*@__PURE__*/ defineContainer<JSX.IonLabel>('ion-label',
   'position',
   'ionColor',
   'ionStyle'
+], [
+  'ionColor',
+  'ionStyle'
 ]);
 
 
@@ -534,6 +585,12 @@ export const IonMenu = /*@__PURE__*/ defineContainer<JSX.IonMenu>('ion-menu', de
   'ionDidOpen',
   'ionDidClose',
   'ionMenuChange'
+], [
+  'ionWillOpen',
+  'ionWillClose',
+  'ionDidOpen',
+  'ionDidClose',
+  'ionMenuChange'
 ]);
 
 
@@ -562,6 +619,10 @@ export const IonNav = /*@__PURE__*/ defineContainer<JSX.IonNav>('ion-nav', defin
   'ionNavWillLoad',
   'ionNavWillChange',
   'ionNavDidChange'
+], [
+  'ionNavWillLoad',
+  'ionNavWillChange',
+  'ionNavDidChange'
 ]);
 
 
@@ -580,6 +641,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 +652,8 @@ export const IonPickerColumn = /*@__PURE__*/ defineContainer<JSX.IonPickerColumn
   'color',
   'numericInput',
   'ionChange'
+], [
+  'ionChange'
 ]);
 
 
@@ -618,6 +683,9 @@ export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio, JSX.IonRadio
   'alignment',
   'ionFocus',
   'ionBlur'
+], [
+  'ionFocus',
+  'ionBlur'
 ],
 'value', 'ion-change');
 
@@ -629,6 +697,9 @@ export const IonRadioGroup = /*@__PURE__*/ defineContainer<JSX.IonRadioGroup, JS
   'value',
   'ionChange',
   'ionValueChange'
+], [
+  'ionChange',
+  'ionValueChange'
 ],
 'value', 'ion-change');
 
@@ -656,6 +727,13 @@ export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange, JSX.IonRange
   'ionBlur',
   'ionKnobMoveStart',
   'ionKnobMoveEnd'
+], [
+  'ionChange',
+  'ionInput',
+  'ionFocus',
+  'ionBlur',
+  'ionKnobMoveStart',
+  'ionKnobMoveEnd'
 ],
 'value', 'ion-input');
 
@@ -670,6 +748,10 @@ export const IonRefresher = /*@__PURE__*/ defineContainer<JSX.IonRefresher>('ion
   'ionRefresh',
   'ionPull',
   'ionStart'
+], [
+  'ionRefresh',
+  'ionPull',
+  'ionStart'
 ]);
 
 
@@ -687,6 +769,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 +812,14 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar, JSX.
   'ionBlur',
   'ionFocus',
   'ionStyle'
+], [
+  'ionInput',
+  'ionChange',
+  'ionCancel',
+  'ionClear',
+  'ionBlur',
+  'ionFocus',
+  'ionStyle'
 ],
 'value', 'ion-input');
 
@@ -742,6 +834,10 @@ export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment, JSX.IonS
   'ionChange',
   'ionSelect',
   'ionStyle'
+], [
+  'ionChange',
+  'ionSelect',
+  'ionStyle'
 ],
 'value', 'ion-change');
 
@@ -752,7 +848,7 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButt
   'layout',
   'type',
   'value'
-],
+], [],
 'value', 'ion-change');
 
 
@@ -762,6 +858,8 @@ export const IonSegmentContent = /*@__PURE__*/ defineContainer<JSX.IonSegmentCon
 export const IonSegmentView = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView, [
   'disabled',
   'ionSegmentViewScroll'
+], [
+  'ionSegmentViewScroll'
 ]);
 
 
@@ -791,6 +889,13 @@ export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect, JSX.IonSel
   'ionFocus',
   'ionBlur',
   'ionStyle'
+], [
+  'ionChange',
+  'ionCancel',
+  'ionDismiss',
+  'ionFocus',
+  'ionBlur',
+  'ionStyle'
 ],
 'value', 'ion-change');
 
@@ -811,6 +916,8 @@ export const IonSelectOption = /*@__PURE__*/ defineContainer<JSX.IonSelectOption
 export const IonSkeletonText = /*@__PURE__*/ defineContainer<JSX.IonSkeletonText>('ion-skeleton-text', defineIonSkeletonText, [
   'animated',
   'ionStyle'
+], [
+  'ionStyle'
 ]);
 
 
@@ -827,6 +934,8 @@ export const IonSplitPane = /*@__PURE__*/ defineContainer<JSX.IonSplitPane>('ion
   'disabled',
   'when',
   'ionSplitPaneVisible'
+], [
+  'ionSplitPaneVisible'
 ]);
 
 
@@ -876,6 +985,11 @@ export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea, JSX.Io
   'ionInput',
   'ionBlur',
   'ionFocus'
+], [
+  'ionChange',
+  'ionInput',
+  'ionBlur',
+  'ionFocus'
 ],
 'value', 'ion-input');
 
@@ -887,6 +1001,8 @@ export const IonTitle = /*@__PURE__*/ defineContainer<JSX.IonTitle>('ion-title',
   'color',
   'size',
   'ionStyle'
+], [
+  'ionStyle'
 ]);
 
 
@@ -900,6 +1016,11 @@ export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle, JSX.IonTog
   'labelPlacement',
   'justify',
   'alignment',
+  'required',
+  'ionChange',
+  'ionFocus',
+  'ionBlur'
+], [
   'ionChange',
   'ionFocus',
   'ionBlur'

packages/vue/src/vue-component-lib/overlays.ts

@@ -1,4 +1,6 @@
-import { defineComponent, h, ref, VNode, onMounted } from 'vue';
+/* eslint-disable no-prototype-builtins */
+import type { VNode, ComponentOptions } from 'vue';
+import { defineComponent, h, ref, onMounted } from 'vue';
 
 // TODO(FW-2969): types
 
@@ -10,6 +12,20 @@ const EMPTY_PROP = Symbol();
 const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
 
 export const defineOverlayContainer = <Props extends object>(name: string, defineCustomElement: () => void, componentProps: string[] = [], hasDelegateHost?: boolean, controller?: any) => {
+  const options: ComponentOptions = {
+    name,
+    props: {
+      'isOpen': DEFAULT_EMPTY_PROP
+    }
+  }
+
+  componentProps.forEach(componentProp => {
+    options.props[componentProp] = DEFAULT_EMPTY_PROP;
+  });
+
+  if (controller !== undefined) {
+    options.emits = ['willPresent', 'didPresent', 'willDismiss', 'didDismiss'];
+  }
 
   const createControllerComponent = () => {
     return defineComponent<Props & OverlayProps>((props, { slots, emit }) => {
@@ -77,7 +93,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
           return;
         }
 
-        let restOfProps: any = {};
+        const restOfProps: Record<string, any> = {};
 
         /**
          * We can use Object.entries here
@@ -130,7 +146,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
           }
         );
       }
-    });
+    }, options);
   };
   const createInlineComponent = () => {
     return defineComponent((props, { slots }) => {
@@ -147,7 +163,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
       });
 
       return () => {
-        let restOfProps: any = {};
+        const restOfProps: Record<string, any> = {};
 
         /**
          * We can use Object.entries here
@@ -187,24 +203,10 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
           (isOpen.value || restOfProps.keepContentsMounted || restOfProps.keepContentsMounted === '') ? renderChildren() : undefined
         )
       }
-    });
+    }, options);
   }
 
   const Container = (controller !== undefined) ? createControllerComponent() : createInlineComponent();
 
-  Container.name = name;
-
-  Container.props = {
-    'isOpen': DEFAULT_EMPTY_PROP
-  };
-
-  componentProps.forEach(componentProp => {
-    Container.props[componentProp] = DEFAULT_EMPTY_PROP;
-  });
-
-  if (controller !== undefined) {
-    Container.emits = ['willPresent', 'didPresent', 'willDismiss', 'didDismiss'];
-  }
-
   return Container;
 }

packages/vue/tsconfig.json

@@ -7,8 +7,8 @@
     "experimentalDecorators": true,
     "esModuleInterop": true,
     "lib": ["dom", "es2020"],
-    "module": "es2015",
-    "moduleResolution": "node",
+    "module": "ES2020",
+    "moduleResolution": "bundler",
     "noImplicitAny": true,
     "noImplicitReturns": false,
     "noUnusedLocals": true,